Chevron Down
Table of Contents
Chevron DownGetting Started
Chevron DownAPI Reference

UniformBufferLayout (WebGL2)

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 TypeWebGL type
floatGL.FLOAT
vec2GL.FLOAT_VEC2
vec3GL.FLOAT_VEC3
vec4GL.FLOAT_VEC4
intGL.INT
ivec2GL.INT_VEC2
ivec3GL.INT_VEC3
ivec4GL.INT_VEC4
uintGL.UNSIGNED_INT
uvec2GL.UNSIGNED_INT_VEC2
uvec3GL.UNSIGNED_INT_VEC3
uvec4GL.UNSIGNED_INT_VEC4
boolGL.BOOL
bvec2GL.BOOL_VEC2
bvec3GL.BOOL_VEC3
bvec4GL.BOOL_VEC4
mat2GL.FLOAT_MAT2
mat3GL.FLOAT_MAT3
mat4GL.FLOAT_MAT4
mat2x3GL.FLOAT_MAT2x3
mat2x4GL.FLOAT_MAT2x4
mat3x2GL.FLOAT_MAT3x2
mat3x4GL.FLOAT_MAT3x4
mat4x2GL.FLOAT_MAT4x2
mat4x3GL.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 WebGL2 uniform buffers are just Buffer objects and can be manipulated directly. The UniformBufferLayout class is not a WebGL2 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