Question

在某些WebGL应用程序中，我们假设我们有一个GLSL顶点着色器，其开头如下：

attribute vec4 foo1;
attribute vec4 foo2;
attribute vec4 foo3;
attribute vec4 foo4;

以及一些用于绑定这些属性的数据结构的相应Javascript代码：

var buf = gl.createBuffer(), loc;
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([…]));

loc = gl.getAttribLocation(program, 'foo1');
gl.enableVertexArray(loc);
gl.vertexAttribPointer(loc, 4, gl.FLOAT, false, 16, 0);

loc = gl.getAttribLocation(program, 'foo2');
gl.enableVertexArray(loc);
gl.vertexAttribPointer(loc, 4, gl.FLOAT, false, 16, 4);

loc = gl.getAttribLocation(program, 'foo3');
gl.enableVertexArray(loc);
gl.vertexAttribPointer(loc, 4, gl.FLOAT, false, 16, 8);

loc = gl.getAttribLocation(program, 'foo4');
gl.enableVertexArray(loc);
gl.vertexAttribPointer(loc, 4, gl.FLOAT, false, 16, 12);

现在，根据GL ES 2.0规范，顶点着色器属性可以定义为float，vec2，vec3，vec4，{{1 }}，mat2或mat3。

因此，如果我更改顶点着色器代码以仅定义一个mat4属性，就像这样......

mat4

...问题是将一些指针绑定到attribute mat4 foo;属性的相应JS代码是什么？

我找到了问题mat3 attribute in WebGL，但答案并不明确。阅读答案和其他一些文档，似乎正确的解决方案是：

mat4

我是否正确地假设loc = gl.getAttribLocation(program, 'foo'); gl.enableVertexArray(loc); gl.vertexAttribPointer(loc , 4, gl.FLOAT, false, 16, 0); gl.vertexAttribPointer(loc+1, 4, gl.FLOAT, false, 16, 4); gl.vertexAttribPointer(loc+2, 4, gl.FLOAT, false, 16, 8); gl.vertexAttribPointer(loc+3, 4, gl.FLOAT, false, 16, 12);的4个vec4组件的位置始终相邻并且按升序排列？这是否记录在某处？

除了这些位置计入mat4限制（通常是WebGL中的16位）之外，还有其他一些好的做法需要注意吗？

Answer 1

你是对的。 From the spec第2.10.4节

当属性变量声明为mat2时，其矩阵列取自通用属性(x, y)和i的{{1}}个组件。当属性变量声明为i + 1时，其矩阵列将从通用属性mat3到(x, y, z)的{{1}}个组件中获取。当属性变量声明为i时，其矩阵列将从通用属性i + 2到mat4的{{1}}个组件中获取。

WebGL中的步幅和偏移以字节为单位，所以我怀疑你想要

(x, y, z, w)

让我们检查一下

＆＃13;

i + 3

＆＃13;

gl.vertexAttribPointer(loc  , 4, gl.FLOAT, false, 64, 0);
gl.vertexAttribPointer(loc+1, 4, gl.FLOAT, false, 64, 16);
gl.vertexAttribPointer(loc+2, 4, gl.FLOAT, false, 64, 32);
gl.vertexAttribPointer(loc+3, 4, gl.FLOAT, false, 64, 48);

＆＃13;

WebGL：如何将值绑定到mat4属性？

1 个答案: