属性着色器中的 mat4 类型

Question

如何发送到 MAT4 类型的着色器属性？

attribute mat4 attr;
...

JS:

var attr=gl.getAttribLocation(_program,"attr");

Answer 1

From the spec 第 2.10.4 节

When an attribute variable is declared as a mat4, its matrix columns are taken from the (x, y, z, w) components of generic attributes i through i + 3.

所以

JS：

var row0Location = gl.getAttribLocation(_program, "attr");
var row1Location = row0Location + 1;
var row2Location = row0Location + 2;
var row3Location = row0Location + 3;

至于获取数据，最常见的方法是将所有矩阵放在一个缓冲区中，因此

var matrices = new Float32Array(numMatrices * 16);

... // fill out your matrices

gl.bufferData(gl.ARRAY_BUFFER, matrices, gl.STATIC_DRAW);

然后设置属性

var floatsPerRow = 4
var bytesPerRow = floatsPerRow * 4;
var bytesPerMatrix = bytesPerRow * 4;
var row0Offset = bytesPerRow * 0;
var row1Offset = bytesPerRow * 1;
var row2Offset = bytesPerRow * 2;
var row3Offset = bytesPerRow * 3;
gl.enableVertexAttribArray(row0Location);
gl.vertexAttribPointer(row0Location, floatsPerRow, gl.FLOAT, 
                       false, bytesPerMatrix, row0Offset);
gl.enableVertexAttribArray(row1Location);
gl.vertexAttribPointer(row1Location, floatsPerRow, gl.FLOAT, 
                       false, bytesPerMatrix, row1Offset);
gl.enableVertexAttribArray(row2Location);
gl.vertexAttribPointer(row2Location, floatsPerRow, gl.FLOAT, 
                       false, bytesPerMatrix, row2Offset);
gl.enableVertexAttribArray(row3Location);
gl.vertexAttribPointer(row3Location, floatsPerRow, gl.FLOAT, 
                       false, bytesPerMatrix, row3Offset);

需要注意的事项。如果您正在调试并在着色器中注释掉 attr，那么 row0Location 将为 -1 并且使用 -1 位置调用所有 gl.vertexAttrib 函数是一个空操作，这很好.但是，因为您计算了其他位置 row1Location、row2Location 和 row3Location 就 WebGL 而言将是有效的属性位置，但就您的程序而言无效。没什么大不了的，只是要记住一些事情。

属性着色器中的 mat4 类型

mat4 type in attribute shader

shader

opengl-es

webgl