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

Question

In some WebGL application, let's assume that we have a GLSL vertex shader which starts like this:

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

and some corresponding Javascript code for binding a data structure for those attributes:

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);

Now, according to the GL ES 2.0 specs, a vertex shader attribute can be defined as either a float, vec2, vec3, vec4, mat2, mat3 or mat4.

So if I change the vertex shader code to define just one mat4 attribute, like so...

attribute mat4 foo;

... the question is what is the corresponding JS code to bind some pointers to a mat4 attribute?

我在WebGL中发现了问题mat3属性，但是答案不够明确。阅读答案和其他一些文档，似乎正确的解决方案是：

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);

我是否可以假设a 的4个vec4成分的mat4位置始终相邻并且顺序递增？这是在某处记录的吗？

除了这些位置会MAX_VERTEX_ATTRIBS超出限制（在WebGL中通常为16个）之外，还有其他好方法要注意吗？

Answer 1

没错 从规范第2.10.4节开始

将属性变量声明为a时mat2，其矩阵列取自(x, y)通用属性i和的组成部分i + 1。当属性变量声明为一个mat3，其矩阵列从所拍摄的(x, y, z)通用属性的成分i通过i + 2。当属性变量声明为一个mat4，其矩阵列从所拍摄的(x, y, z, w)通用属性的成分i通过i + 3。

WebGL中的步幅和偏移量以字节为单位，因此我怀疑您想要

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);

让我们检查

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);

var vs = `
attribute mat4 matrix;
attribute vec4 color;

varying vec4 v_color;

void main() {
  gl_PointSize = 10.0;
  gl_Position = matrix * vec4(0, 0, 0, 1);
  v_color = color;
}
`;
var fs = `
precision mediump float;

varying vec4 v_color;

void main() {
  gl_FragColor = v_color;
}
`;

var m4 = twgl.m4;
var gl = document.querySelector("canvas").getContext("webgl");
var program = twgl.createProgramFromSources(gl, [vs, fs]);

var matrixLoc = gl.getAttribLocation(program, "matrix");
var colorLoc = gl.getAttribLocation(program, "color");

function r(min, max) {
  if (max === undefined) {
    max = min;
    min = 0;
  }
  return Math.random() * (max - min) + min;
}

var numPoints = 100;
var matrices = [];
var colors = [];
for (var ii = 0; ii < numPoints; ++ii) {
  matrices.push.apply(matrices, m4.translation([r(-1,1), r(-1,1), 0]));
  colors.push(r(1), r(1), r(1), 1);
}

var buffers = twgl.createBuffersFromArrays(gl, {
  matrices: matrices,
  colors: colors,
});

gl.useProgram(program);

gl.bindBuffer(gl.ARRAY_BUFFER, buffers.matrices);
for (var ii = 0; ii < 4; ++ii) {
  gl.enableVertexAttribArray(matrixLoc + ii);
  gl.vertexAttribPointer(matrixLoc + ii, 4, gl.FLOAT, 0, 64, ii * 16);
}

gl.bindBuffer(gl.ARRAY_BUFFER, buffers.colors);
gl.enableVertexAttribArray(colorLoc);
gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, 0, 0, 0);

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

canvas { border: 1px solid black; }