new WebGLFloatArray overhead

I did some research on “new WebGLFloatArray”. As it is used (in every example), everytime a uniform matrix is updated. And of course I came to the conclusion that it uses too much memory. Here is an example from learningwebgl.

function setMatrixUniforms()
{
var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
gl.uniformMatrix4fv(pUniform, false, new WebGLFloatArray(pMatrix.flatten()));
var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
gl.uniformMatrix4fv(mvUniform, false, new WebGLFloatArray(mvMatrix.flatten()));
}

It is just too slow and uses too much memory usage. This way really uses too much memory at once,also creating a new WebGLFloatArray is time-consuming but I found something interesting in the webGL specs.

5.13.3.9 WebGLFloatArray

A WebGLFloatArray represents an array of 32-bit floating point values.

A WebGLFloatArray has an element size of 4 bytes.

[
    Constructor(in unsigned long length),
    Constructor(in WebGLFloatArray array),
    Constructor(in sequence<float> array),
    Constructor(in WebGLArrayBuffer buffer,
                [Optional] in unsigned long byteOffset, [Optional] in unsigned long length)
]
interface WebGLFloatArray : WebGLArray {
    [IndexGetter] float get(in unsigned long index);
    [IndexSetter] void set(in unsigned long index, in float value);
    void set(in WebGLFloatArray array, [Optional] in unsigned long offset);
    void set(in sequence<float> array, [Optional] in unsigned long offset);
};

It seems like a WebGLFloatArray has a method set which of course sets the values but it doesn’t change the length of the WebGLFloatArray. And it doesn’t return itself which would be easy for chaining and less code lines.

So the upper function can be changed towards


// this just need to be an array of 16 elements passed in the new WebGLFloatArray
var FloatArray = new WebGLFloatArray([1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]);
function setMatrixUniforms()
{
var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
//Because it doesn't return itself it needs an extra line of code
FloatArray.set(pMatrix.flatten());
gl.uniformMatrix4fv(pUniform, false, FloatArray);

var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
//Because it doesn't return itself it needs an extra line of code
FloatArray.set(mvMatrix.flatten());
gl.uniformMatrix4fv(mvUniform, false, new WebGLFloatArray(FloatArray);
}

Unluckily for us, as of today, minefield is not able to use this yet as it has not been implemented fully in minefield.