Question

我正在尝试将一些OpenGL代码移植到WebGL2，并且统一缓冲区存在一些问题。我使用缓冲区附加到的着色器渲染的所有内容都不再显示。我在控制台中没有收到任何错误或警告。这是我的代码：

var data = new Float32Array(1);
data[0] = 1.0;

var uniformBuffer = gl.createBuffer();
gl.bindBuffer(gl.UNIFORM_BUFFER, uniformBuffer);
gl.bufferData(gl.UNIFORM_BUFFER, 4, gl.STATIC_DRAW);
gl.bindBufferRange(gl.UNIFORM_BUFFER, 0, uniformBuffer, 0, 4);

gl.uniformBlockBinding(mapShader.getProgram(), gl.getUniformBlockIndex(mapShader.getProgram(), "test"), 0);


gl.bindBuffer(gl.UNIFORM_BUFFER, uniformBuffer);
gl.bufferSubData(gl.UNIFORM_BUFFER, 0, data);
gl.bindBuffer(gl.UNIFORM_BUFFER, null);

一旦将其添加到着色器中，就会出现前面所述的问题：

layout (std140) uniform test {
    float testFloat;
};

Answer 1

下次，请保持友善，并避免我们手动进行回购交易！谢谢?‍♂️

当我在Chrome中运行您的代码时，我得到

：GL_INVALID_OPERATION：glDrawArrays：统一缓冲区：索引处为0的缓冲区或缓冲区范围不够大

问题在于存在填充和对齐问题

请参见the spec第2.12.6.4节

将缓冲区和范围大小更改为16即可。另请注意，对于BindBufferRange的有效偏移量有对齐要求，您可以使用gl.getParameter(gl.UNIFORM_BUFFER_OFFSET_ALIGNMENT)

查找

const gl = document.querySelector('canvas').getContext('webgl2');

const vs = `#version 300 es
void main() {
  gl_PointSize = 100.0;
  gl_Position = vec4(0, 0, 0, 1);
}
`;

const fs = `#version 300 es
precision highp float;

layout (std140) uniform test {
    float testFloat;
};

out vec4 outColor;

void main() {
  outColor = vec4(testFloat, 0, 0, 1);
}
`;

const prg = twgl.createProgram(gl, [vs, fs]);
gl.useProgram(prg);
const mapShader = {
  getProgram: _ => prg,
};

var data = new Float32Array(1);
data[0] = 1.0;

var uniformBuffer = gl.createBuffer();
gl.bindBuffer(gl.UNIFORM_BUFFER, uniformBuffer);
gl.bufferData(gl.UNIFORM_BUFFER, 16, gl.STATIC_DRAW);
gl.bindBufferRange(gl.UNIFORM_BUFFER, 0, uniformBuffer, 0, 16);

gl.uniformBlockBinding(mapShader.getProgram(), gl.getUniformBlockIndex(mapShader.getProgram(), "test"), 0);


gl.bindBuffer(gl.UNIFORM_BUFFER, uniformBuffer);
gl.bufferSubData(gl.UNIFORM_BUFFER, 0, data);
gl.bindBuffer(gl.UNIFORM_BUFFER, null);

gl.drawArrays(gl.POINTS, 0, 1);

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

<canvas></canvas>

WebGL2中的统一缓冲区问题

1 个答案: