过去一周我一直在摸不着头脑，试图理解 WebGL 中的旋转形状。我正在绘制 3 个形状，它们是从它们自己的函数中调用的。函数的基本结构有点像这样：
function drawShape(vertices) {
var a = vertices.length / 2;
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
gl.drawArrays(gl.TRIANGLE_FAN, 0, a);
}现在我已经渲染了每个形状函数被调用的地方。有点像这样：
function render() {
angleInRadians += 0.1;
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
drawShape1();
drawShape2();
matrix = mat.rotation(angleInRadians);
gl.uniformMatrix3fv(matrixLocation, false, matrix);
requestAnimFrame( render );
}旋转函数为：
rotation: function(angle) {
var a = Math.cos(angle);
var b = Math.sin(angle);
return [
a,-b, 0,
b, …