# Class: WebGLPointsLayerRenderer

This documentation is for OpenLayers v10.9.0. The latest is v.

## 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 130

  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

- WebGLLayerRenderer

### 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.