Class: WebGLPointsLayerRenderer

ol/renderer/webgl/PointsLayer~WebGLPointsLayerRenderer 


import WebGLPointsLayerRenderer from 'ol/renderer/webgl/PointsLayer';

WebGL vector renderer optimized for points. All features will be rendered as quads (two triangles forming a square). New data will be flushed to the GPU every time the vector source changes.

You need to provide vertex and fragment shaders for rendering. This can be done using module:ol/webgl/ShaderBuilder utilities. These shaders shall expect a a_position attribute containing the screen-space projected center of the quad, as well as a a_index attribute whose value (0, 1, 2 or 3) indicates which quad vertex is currently getting processed (see structure below).

To include variable attributes in the shaders, you need to declare them using the attributes property of the options object like so:

new WebGLPointsLayerRenderer(layer, {
  attributes: [
    {
      name: 'size',
      callback: function(feature) {
        // compute something with the feature
      }
    },
    {
      name: 'weight',
      callback: function(feature) {
        // compute something with the feature
      }
    },
  ],
  vertexShader:
    // shader using attribute a_weight and a_size
  fragmentShader:
    // shader using varying v_weight and v_size

To enable hit detection, you must as well provide dedicated shaders using the hitVertexShader and hitFragmentShader properties. These shall expect the a_hitColor attribute to contain the final color that will have to be output for hit detection to work.

The following uniform is used for the main texture: u_texture.

Please note that the main shader output should have premultiplied alpha, otherwise visual anomalies may occur.

Points are rendered as quads with the following structure:

  (u0, v1)      (u1, v1)
 [3]----------[2]
  |`           |
  |  `         |
  |    `       |
  |      `     |
  |        `   |
  |          ` |
 [0]----------[1]
  (u0, v0)      (u1, v0)

This uses module:ol/webgl/Helper~WebGLHelper internally.

new WebGLPointsLayerRenderer(layer, options)

renderer/webgl/PointsLayer.js, line 124
Name Type Description
layer module:ol/layer/Layer~Layer

Layer.
options

Options.

Name Type Description
className string (defaults to 'ol-layer')

A CSS class name to set to the canvas element.
attributes Array.<module:ol/renderer/webgl/PointsLayer~CustomAttribute>

These attributes will be read from the features in the source and then passed to the GPU. The name property of each attribute will serve as its identifier:

  • In the vertex shader as an attribute by prefixing it with a_
  • In the fragment shader as a varying by prefixing it with v_ Please note that these can only be numerical values.
vertexShader string

Vertex shader source, mandatory.
fragmentShader string

Fragment shader source, mandatory.
hitVertexShader string

Vertex shader source for hit detection rendering.
hitFragmentShader string

Fragment shader source for hit detection rendering.
uniforms Object.<string, module:ol/webgl/Helper~UniformValue>

Uniform definitions for the post process steps Please note that u_texture is reserved for the main texture slot.
postProcesses Array.<module:ol/renderer/webgl/Layer~PostProcessesOptions>

Post-processes definitions
Fires:

Extends

Methods

changed() inherited

Observable.js, line 70

Increases the revision counter and dispatches a 'change' event.

dispatchEvent(event){boolean|undefined} inherited

events/Target.js, line 85

Dispatches an event and calls all listeners listening for events of this type. The event parameter can either be a string or an Object with a type property.

Name Type Description
event module:ol/events/Event~BaseEvent | string

Event object.
Returns:
false if anyone called preventDefault on the event object or if any of the listeners returned false.

getRevision(){number} inherited

Observable.js, line 81

Get the version number for this object. Each time the object is modified, its version number will be incremented.

Returns:
Revision.

on(type, listener){module:ol/events~EventsKey|Array.<module:ol/events~EventsKey>} inherited

Observable.js, line 155

Listen for a certain type of event.

Name Type Description
type string | Array.<string>

The event type or array of event types.
listener function

The listener function.
Returns:
Unique key for the listener. If called with an array of event types as the first argument, the return will be an array of keys.

once(type, listener){module:ol/events~EventsKey|Array.<module:ol/events~EventsKey>} inherited

Observable.js, line 167

Listen once for a certain type of event.

Name Type Description
type string | Array.<string>

The event type or array of event types.
listener function

The listener function.
Returns:
Unique key for the listener. If called with an array of event types as the first argument, the return will be an array of keys.

un(type, listener) inherited

Observable.js, line 176

Unlisten for a certain type of event.

Name Type Description
type string | Array.<string>

The event type or array of event types.
listener function

The listener function.