LayerGl

LayerGl

new LayerGl()

WebGL for tile layers. runs each tile layer cell image data or other form of tile-based data through WebGL shaders

Source:

Extends

  • L.GridLayer

Members

(static) _CRSBuffer :WebGLBuffer

the easting, northing CRS coords buffer

Type:
  • WebGLBuffer
Source:

(static) _glProgram :WebGLProgram

primary WebGLProgram created

Type:
  • WebGLProgram
Source:

(static) _LatLngBuffer :WebGLBuffer

the easting, northing lat/lng coords buffer

Type:
  • WebGLBuffer
Source:

(static) _TexCoordsBuffer :WebGLBuffer

the texel coords buffer

Type:
  • WebGLBuffer
Source:

(static) _uniformSizes :Object

determines the size of the default values given for the uniforms and loads the uniform name from the shader header

Type:
  • Object
Source:

(static) _VertexCoordsBuffer :WebGLBuffer

the vertex coords buffer

Type:
  • WebGLBuffer
Source:

options :Object

layer options

Type:
  • Object
Properties:
Name Type Description
uniforms object

a key-value list of names and initial values for shader uniforms. values must be number or Array[1-4]
tileLayers object

a key-value list of tile layers where the key is the texture uniform referenced in the shader

{ u_texture0: L.tileLayer.wms( ... ) }
// u_texture0 will be linked to the shader and can be referenced
vertexShader string

string representing the GLSL vertex shader to be run. vertex shaders handle the processing of individual vertices. vertex shader must include:

  • attributes (attribute is supported in vertex shader only, attributes passed in from js program links)
    • attribute vec2 a_VertexCoords;
      • vec2 attribute declaration defining the vertex coordinates in webgl space (where in the canvas)
    • attribute vec2 a_TextureCoords;
      • vec2 attribute declaration defining texture coordinate in texture space (where in the texture)
    • attribute vec2 a_CRSCoords;
      • vec2 attribute declaration defining texture coordinate in projection space
    • attribute vec2 a_LatLngCoords;
      • vec2 attribute declaration defining texture coordinate in world space
  • varying (varying values passed to fragment shader)
    • varying vec2 v_TextureCoords;
      • vec2 texture coordinates passed to the fragment
    • varying vec2 v_CRSCoords;
      • vec2 projection coordinates passed to the fragment
    • varying vec2 v_LatLngCoords;
      • vec2 lat/lng coordinates passed to the fragment
  • void main( void ) { ... }
  • main function to set varying declarations passed to the fragment
attribute vec2 a_VertexCoords;
attribute vec2 a_TextureCoords;
attribute vec2 a_CRSCoords;
attribute vec2 a_LatLngCoords;

varying vec2 v_TextureCoords;
varying vec2 v_CRSCoords;
varying vec2 v_LatLngCoords;

void main( void ) {
     v_TextureCoords = a_TextureCoords;
     v_CRSCoords     = a_CRSCoords;
     v_LatLngCoords  = a_LatLngCoords;
     gl_Position = vec4( a_VertexCoords, 1.0, 1.0 );
}
fragmentShader string

string representing the GLSL fragment shader to be run. fragment shaders handle the processing of individual vertex fragments fragments shader must include:

  • precision declaration for float types
    • precision <precision> float;
      • precision highp float; - recommend using highp float precision for best results
  • uniform (uniform passed in from js program links)
    • uniform float u_Now;
      • float to reference the performance timing
    • uniform sampler2D u_texture0;
      • sampler2D passed in from the LayerGl#tileLayers
      • references the image sample passed to each fragment
  • varying (varying values passed from vertex shader)
    • varying vec2 v_TextureCoords;
      • vec2 varying declaration defining fragment coordinates in texture space
    • varying vec2 v_CRSCoords;
      • vec2 varying declaration defining fragment coordinates in projection space
    • varying vec2 v_LatLngCoords;
      • vec2 varying declaration defining fragment coordinates in lat/lng space
  • void main( void ) { ... }
  • main function to set varying declarations. results of the fragment are passed back to canvas by setting gl_FragColor
  • glabals
    • gl_FragColor is the result of the fragment color and must be set to carry results to the end of the program
precision highp float;

uniform float u_Now;
uniform sampler2D u_texture0;

varying vec2 v_TextureCoords;
varying vec2 v_CRSCoords;
varying vec2 v_LatLngCoords;

void main( void ) {
     vec4 texelColor = texture2D( u_texture0, v_TextureCoords );
     gl_FragColor = texelColor;
}
extensions array

extensions to load into the WebGL program. the default program requires linear filtering for floating-point textures so OES_texture_float_linear extension is hardcoded in LayerGl#initialize
Source:

Methods

initialize(optionsopt)

leaflet initialize method instantiating the layer will initialize all the GL context and upload shaders and vertex buffers to the GPU (the vertices will stay the same for all tiles).

Parameters:
Name Type Attributes Default Description
options object <optional>
 {}

layer options
Source:

(inner) _bindTexture(index, imageData)

binds a ImageData (HTMLImageElement, HTMLCanvasElement or ImageBitmap) to a texture, given its index (0 to 7). the image data is assumed to be in 8-bit RGBA format. TEXTURE0 corresponds to the WebGL pointer 0x84C0 - add index integer to specify texture channel pointer

Parameters:
Name Type Description
index number

index of texture uniform
imageData TexImageSource

image data from tile data ref: LayerGl~createTile
Source:

(inner) _bindTextureArrays(index, arrays)

binds an array of TypedArrays (array containing Float32Array) , given its index (0 to 7). the image data is assumed to not be in 8-bit RGBA format. type is inferred from the type of the typed array.

Parameters:
Name Type Description
index number

index of texture uniform
arrays ArrayBufferView

image data from tile data ref: LayerGl~createTile
Source:

(inner) _getUniformSizes()

determines the size of the default values given for the uniforms. loads a string value for defining the uniforms in the shader header into _uniformSizes

Source:

(inner) _initUniforms(program)

initializes the u_Now uniform, and user-provided uniforms from the current GL program. sets the _isReRenderable property if there are any set uniforms.

Parameters:
Name Type Description
program WebGLProgram

WebGlProgram (using as param to support multiple programs in the future) LayerGl._glProgram created - must be linked to extract uniform locations
Source:

(inner) _linkShader(shaderCode, type) → {WebGLShader}

shader type being linked

Parameters:
Name Type Description
shaderCode string

shader code to compile and link
type 'VERTEX_SHADER' | 'FRAGMENT_SHADER'

VERTEX_SHADER or FRAGMENT_SHADER type being linked
Source:
Returns:

returns WebGLShader if link succeeds

Type
WebGLShader

(inner) _loadGLProgram()

create, compile, link, and use the primary webgl program

once loaded and uniforms initialized, create three data buffer with 8 elements each

  • _CRSBuffer - the easting, northing CRS coords
  • _LatLngBuffer - the easting, northing lat/lng coords
  • the s, t (also referred to as u, v) texture coords and the viewport coords for each of the 4 vertices

data for the texel and viewport coords is static, and needs to be declared only once

Source:

(inner) _render(coords)

called once per tile - uses the layer's GL context to render a tile, passing the complex space coordinates to the GPU, and asking to render the vertexes (as triangles) again. it is not necessary to clear the WebGL context, because the shader will overwrite all the pixel values.

Parameters:
Name Type Description
coords Object

coords passed in from LayerGl~createTile
Source:

(inner) createTile(coords, done) → {*}

reference leaflet docs

Parameters:
Name Type Description
coords Object

tile coordinates
done function

callback
Source:
Returns:
  • tile
Type
*

(inner) getGlError() → {string|undefined}

if any compiling/linking errors occur in the shaders, returns a string with information about that error

Source:
Returns:
  • glError if exists
Type
string | undefined