unction createBuffer( uniformsGroup ) { // the setup of an UBO is independent of a particular shader program but global const bindingPointIndex = allocateBindingPointIndex(); uniformsGroup.__bindingPointIndex = bindingPointIndex; const buffer = gl.createBuffer(); const size = uniformsGroup.__size; const usage = uniformsGroup.usage; gl.bindBuffer( gl.UNIFORM_BUFFER, buffer ); gl.bufferData( gl.UNIFORM_BUFFER, size, usage ); gl.bindBuffer( gl.UNIFORM_BUFFER, null ); gl.bindBufferBase( gl.UNIFORM_BUFFER, bindingPointIndex, buffer ); return buffer; } function allocateBindingPointIndex() { for ( let i = 0; i < maxBindingPoints; i ++ ) { if ( allocatedBindingPoints.indexOf( i ) === -1 ) { allocatedBindingPoints.push( i ); return i; } } error( 'WebGLRenderer: Maximum number of simultaneously usable uniforms groups reached.' ); return 0; } function updateBufferData( uniformsGroup ) { const buffer = buffers[ uniformsGroup.id ]; const uniforms = uniformsGroup.uniforms; const cache = uniformsGroup.__cache; gl.bindBuffer( gl.UNIFORM_BUFFER, buffer ); for ( let i = 0, il = uniforms.length; i < il; i ++ ) { const uniformItem = uniforms[ i ]; if ( Array.isArray( uniformItem ) ) { for ( let j = 0, jl = uniformItem.length; j < jl; j ++ ) { updateUniform( uniformItem[ j ], i, j, cache ); } } else { updateUniform( uniformItem, i, 0, cache ); } } gl.bindBuffer( gl.UNIFORM_BUFFER, null ); } function updateUniform( uniform, index, indexArray, cache ) { if ( hasUniformChanged( uniform, index, indexArray, cache ) === true ) { const offset = uniform.__offset; const value = uniform.value; if ( Array.isArray( value ) ) { let arrayOffset = 0; for ( let k = 0; k < value.length; k ++ ) { const val = value[ k ]; const info = getUniformSize( val ); writeUniformValue( val, uniform.__data, arrayOffset ); // only toArray() values advance arrayOffset if ( typeof val !== 'number' && typeof val !== 'boolean' && ! val.isMatrix3 && ! ArrayBuffer.isView( val ) ) { arrayOffset += info.storage / Float32Array.BYTES_PER_ELEMENT; } } } else { writeUniformValue( value, uniform.__data, 0 ); } gl.bufferSubData( gl.UNIFORM_BUFFER, offset, uniform.__data ); } } function writeUniformValue( value, data, offset ) { // TODO add integer and struct support if ( typeof value === 'number' || typeof value === 'boolean' ) { data[ 0 ] = value; } else if ( value.isMatrix3 ) { // manually converting 3x3 to 3x4 data[ 0 ] = value.elements[ 0 ]; data[ 1 ] = value.elements[ 1 ]; data[ 2 ] = value.elements[ 2 ]; data[ 3 ] = 0; data[ 4 ] = value.elements[ 3 ]; data[ 5 ] = value.elements[ 4 ]; data[ 6 ] = value.elements[ 5 ]; data[ 7 ] = 0; data[ 8 ] = value.elements[ 6 ]; data[ 9 ] = value.elements[ 7 ]; data[ 10 ] = value.elements[ 8 ]; data[ 11 ] = 0; } else if ( ArrayBuffer.isView( value ) ) { // copy the buffer data using "set" data.set( new value.constructor( value.buffer, value.byteOffset, data.length ) ); } else { value.toArray( data, offset ); } } function hasUniformChanged( uniform, index, indexArray, cache ) { const value = uniform.value; const indexString = index + '_' + indexArray; if ( cache[ indexString ] === undefined ) { // cache entry does not exist so far if ( typeof value === 'number' || typeof value === 'boolean' ) { cache[ indexString ] = value; } else if ( ArrayBuffer.isView( value ) ) { cache[ indexString ] = value.slice(); } else { cache[ indexString ] = value.clone(); } return true; } else { const cachedObject = cache[ indexString ]; // compare current value with cached entry if ( typeof value === 'number' || typeof value === 'boolean' ) { if ( cachedObject !== value ) { cache[ indexString ] = value; return true; } } else if ( ArrayBuffer.isView( value ) ) { // always update the array buffers return true; } else { if ( cachedObject.equals( value ) === false ) { cachedObject.copy( value ); return true; } } } return false; } function prepareUniformsGroup( uniformsGroup ) { // determine total buffer size according to the STD140 layout // Hint: STD140 is the only supported layout in WebGL 2 const uniforms = uniformsGroup.uniforms; let offset = 0; // global buffer offset in bytes const chunkSize = 16; // size of a chunk in bytes for ( let i = 0, l = uniforms.length; i < l; i ++ ) { const uniformArray = Array.isArray( uniforms[ i ] ) ? uniforms[ i ] : [ uniforms[ i ] ]; for ( let j = 0, jl = uniformArray.length; j < jl; j ++ ) { const uniform = uniformArray[ j ]; const values = Array.isArray( uniform.value ) ? uniform.value : [ uniform.value ];