在 WebGL 中使用 UniformBuffers

Question

我在获得一些 OpenGL 经验后正在试用 WebGL，我想在 WebGL 中使用 UBO。我在 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);
}

并将其移植到 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);

我没有把它变成class，因为我想先测试一下。运行该代码产生此错误：

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

如何修复此错误以及我的代码中也存在的其他错误？

Answer 1

这个函数调用是错误的

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

如果您只是想分配一个缓冲区而不想将数据放入其中

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

在WebGL2中有一个使用统一缓冲区的例子here

在 WebGL 中使用 UniformBuffers

Using UniformBuffers in WebGL

javascript

webgl