Class: WebGLPointsLayerRenderer

ol/renderer/webgl/PointsLayer~WebGLPointsLayerRenderer 


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

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 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. The following uniform is used for the layer opacity: u_opacity.

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 WebGLHelper internally.

new WebGLPointsLayerRenderer(layer, options)

renderer/webgl/PointsLayer.js, line 124
Name Type Description
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<CustomAttribute> | undefined

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.
hitDetectionEnabled boolean | undefined

Whether shader is hit detection aware.
uniforms Object<UniformValue> | undefined

Uniform definitions for the post process steps Please note that u_texture is reserved for the main texture slot and u_opacity is reserved for the layer opacity.
postProcesses Array<PostProcessesOptions> | undefined

Post-processes definitions
Fires:
  • change (BaseEvent) - Generic change event. Triggered when the revision counter is increased.
  • error (BaseEvent) - Generic error event. Triggered when an error occurs.

Extends

Methods

changed() inherited

Observable.js, line 68

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 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 79

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

Returns:
Revision.

on(type, listener){EventsKey | Array<EventsKey>} inherited

Observable.js, line 152

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){EventsKey | Array<EventsKey>} inherited

Observable.js, line 164

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 173

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.