A helper class that lets the application describe the contents of a uniform block and then perform setUniforms({uniform: value}) calls on it, manipulating individual values without concern for memory layout requirements.

Usage

Create a UniformBufferLayout that matches the uniform block declaration in your shader

#version 300 es
layout (std140) uniform matrix {
    mat4 mvp;
} matrixBlock;

const matrixBlockLayout = new UniformBufferLayout({
  mvp: GL.FLOAT_MAT4
});

Setting values on a UniformBufferLayout:

.setValues({
  mvp: [1, 0, 0, 0,  0, 1, 0, 0,  0, 0, 1, 0,  0, 0, 0, 1]
});

Creating a uniform buffer to hold the data required by the layout

const layout = new UniformBufferLayout({...});
const buffer = new Buffer(gl, {size: layout.getBytes()});

Updating your actual uniform buffer

const layout = ...
layout.setValues({...})
buffer.subData({data: layout.getData()})

Updating a minimal part of the actual uniform buffer

const {data, offset} = layout.getSubData();
buffer.subData({data, offset});

Binding your uniform buffer

TBA;

Methods

constructor

Takes a layout object and creates an internal layout description. Once constructed the layout cannot be changed. Once constructed the size of the required memory buffer is known, and the buffer layout provides a convenient interface for updating values.

Note: The order and type of the uniforms in the layout object provided to the constructor must match the order and type of the uniform declarations in the GLSL uniform block

setValues

Sets uniform values.

getBytes

Returns the number of bytes needed to hold all the uniforms in the layout, which can be used to create a Buffer with enough data to hold the entire memory layout.

getData

Returns a Float32Array representing all the memory in the layout. The length of this array (* 4) will correspond to the value returned by getBytes()

getSubData

Returns a Float32Array representing all the memory in the layout. The length of this array (* 4) will correspond to the value returned by getBytes()

Types

Use the following WebGL types to declare uniforms corresponding to your GLSL data types.

GLSL Type	WebGL type
`float`	`GL.FLOAT`
`vec2`	`GL.FLOAT_VEC2`
`vec3`	`GL.FLOAT_VEC3`
`vec4`	`GL.FLOAT_VEC4`
`int`	`GL.INT`
`ivec2`	`GL.INT_VEC2`
`ivec3`	`GL.INT_VEC3`
`ivec4`	`GL.INT_VEC4`
`uint`	`GL.UNSIGNED_INT`
`uvec2`	`GL.UNSIGNED_INT_VEC2`
`uvec3`	`GL.UNSIGNED_INT_VEC3`
`uvec4`	`GL.UNSIGNED_INT_VEC4`
`bool`	`GL.BOOL`
`bvec2`	`GL.BOOL_VEC2`
`bvec3`	`GL.BOOL_VEC3`
`bvec4`	`GL.BOOL_VEC4`
`mat2`	`GL.FLOAT_MAT2`
`mat3`	`GL.FLOAT_MAT3`
`mat4`	`GL.FLOAT_MAT4`
`mat2x3`	`GL.FLOAT_MAT2x3`
`mat2x4`	`GL.FLOAT_MAT2x4`
`mat3x2`	`GL.FLOAT_MAT3x2`
`mat3x4`	`GL.FLOAT_MAT3x4`
`mat4x2`	`GL.FLOAT_MAT4x2`
`mat4x3`	`GL.FLOAT_MAT4x3`

Remarks

WebGL requires the data representing the uniforms in to be laid out in memory according to specific rules (essentially some padding needs to be injected between successive values to facilitate memory access by the GPU).
Note that WebGL 2 uniform buffers are just Buffer objects and can be manipulated directly. The UniformBufferLayout class is not a WebGL 2 object, it is just an optional helper class that makes it easy to create and update a block of memory with the required layout.
More information on the std140 layout specification: OpenGL spec