CODEWITHSUNDEEP
javascriptwebgl
user11914177
user11914177

Reputation: 955

Using UniformBuffers in WebGL

I am trying out WebGL after I gained some experience in OpenGL and I want to use UBOs in WebGL. I use this code in OpenGL:

UniformBuffer::UniformBuffer(int bufferSize, int binding) {
    glGenBuffers(1, &buffer);
      
    glBindBuffer(GL_UNIFORM_BUFFER, buffer);
    glBufferData(GL_UNIFORM_BUFFER, bufferSize, NULL, GL_STATIC_DRAW);
    glBindBuffer(GL_UNIFORM_BUFFER, 0);
      
    glBindBufferRange(GL_UNIFORM_BUFFER, binding, buffer, 0, bufferSize);
}
   
void UniformBuffer::modifyData(int size, int offset, float *data) {
    glBindBuffer(GL_UNIFORM_BUFFER, buffer);
    glBufferSubData(GL_UNIFORM_BUFFER, offset, size, data);
    glBindBuffer(GL_UNIFORM_BUFFER, 0);
}

void UniformBuffer::addToShader(Shader *shader, std::string name, int binding) {
    glUniformBlockBinding(shader->getProgram(), glGetUniformBlockIndex(shader->getProgram(), name.c_str()), binding);
}

And ported it to this code in WebGL:

var viewMatBuffer = gl.createBuffer();
gl.bindBuffer(gl.UNIFORM_BUFFER, viewMatBuffer);
gl.bufferData(gl.UNIFORM_BUFFER, 4 * 16, null, gl.STATIC_DRAW);
gl.bindBuffer(gl.UNIFORM_BUFFER, null);

gl.bindBufferRange(gl.UNIFORM_BUFFER, 0, viewMatBuffer, 0, 4 * 16);


gl.uniformBlockBinding(basicShader.getProgram(), gl.getUniformBlockIndex(basicShader.getProgram(), "viewBlock"), 0);


gl.bindBuffer(gl.UNIFORM_BUFFER, viewMatBuffer);
gl.bufferSubData(gl.UNIFORM_BUFFER, 0, 4 * 16, viewMatrix);
gl.bindBuffer(gl.UNIFORM_BUFFER, null);

I didn't make it into a class, because I want to test it first. Running that code yields this error:

[Error] Unhandled Promise Rejection: TypeError: Argument 2 ('data') to WebGL2RenderingContext.bufferData must be an instance of ArrayBufferView

How can I fix this error and maybe others that are also present in my code?

Upvotes: 0

Views: 666

Answers (1)

user128511
user128511

Reputation:

This function call is wrong

gl.bufferData(gl.UNIFORM_BUFFER, 4 * 16, null, gl.STATIC_DRAW);

If you just want to allocate a buffer without putting data in it it's

gl.bufferData(gl.UNIFORM_BUFFER, 4 * 16, gl.STATIC_DRAW);

There is an example of using uniform buffers in WebGL2 here

Upvotes: 1

Related Questions