如何在 WebGL 中旋转单个形状

Question

过去一周我一直在摸不着头脑，试图理解 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, a, 0,
        0, 0, 1,
      ];
    },

我一直在尝试只旋转 3 个形状中的 1 个。我尝试在函数中的 drawArrays 之前使用uniform3fv，该函数绘制我想要旋转的形状，但所有形状都随之旋转。如何只旋转一种形状？

Answer 1

首先，通常更常见的是在初始化时上传顶点数据并在渲染时使用它。您发布的代码是在渲染时上传顶点数据。在初始化时间而不是渲染时间查找属性位置也更常见。

换句话说，你有这个

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

但这样做会更常见

const attribs = {
  vPosition: gl.getAttribLocation(program, "vPosition"),
};

const shape = createShape(vertices);

...

drawShape(attribs, shape);

function createShape(vertices) {
  const bufferId = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  return {
    bufferId,
    numVertices: vertices.length / 2,
  };
}

function drawShape(attribs, shape) {
  gl.bindBuffer(gl.ARRAY_BUFFER, shape.bufferId);
  gl.vertexAttribPointer(attribs.vPosition, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(attrib.vPosition);

  gl.drawArrays(gl.TRIANGLE_FAN, 0, shape.numVertices);
}

或类似的规定。

您可能还会在初始化时查找制服并传入制服并将它们设置在drawShape中，或者不这样做。主要是对 的调用gl.bufferData，gl.getUniformLocation并且gl.getAttribLocation通常发生在初始化时间

接下来，您需要为每个形状设置一次制服。

matrix = mat.rotation(angleInRadiansForShape1);  
gl.uniformMatrix3fv(matrixLocation, false, matrix);
drawShape1();

matrix = mat.rotation(angleInRadiansForShape2);  
gl.uniformMatrix3fv(matrixLocation, false, matrix);
drawShape2();

但是您需要添加的不仅仅是旋转，否则所有形状都会出现在同一个位置。

旋转矩阵绕原点 (0,0) 旋转。如果你想围绕其他点旋转，你可以平移你的顶点。您可以通过将旋转矩阵与平移矩阵相乘来做到这一点。

很难展示如何做到这一点，因为它需要一个数学库，并且每个库使用数学库的方式都不同。

本文介绍如何使用本文中创建的函数来进行矩阵相乘。

要移动旋转点，您可以这样做。

var matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);    
matrix = m3.translate(matrix, whereToDrawX, whereToDrawY);
matrix = m3.rotate(matrix, angleToRotate);
matrix = m3.translate(matrix, offsetForRotationX, offsetForRotationY);

我通常从下到上阅读，所以它是

1. m3.translate(matrix, offsetForRotationX, offsetForRotationY)= 平移顶点，使其原点成为我们要旋转的位置。例如，如果我们有一个从 0 到 10 横向、0 到 20 向下的盒子，并且我们想要在右下角旋转，那么我们需要将右下角移动到 0,0，这意味着我们需要平移 -10, -20这样右下角就是原点。

2. m3.rotate(matrix, angleToRotate)= 进行旋转

3. m3.translate(matrix, whereToDrawX, whereToDrawY)= 将其翻译到我们实际想要绘制的位置。

4. m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight)= 从像素转换到剪辑空间

例子：

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

const attribs = {
  vPosition: gl.getAttribLocation(program, "vPosition"),
};

const shape = createShape(vertices);

...

drawShape(attribs, shape);

function createShape(vertices) {
  const bufferId = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  return {
    bufferId,
    numVertices: vertices.length / 2,
  };
}

function drawShape(attribs, shape) {
  gl.bindBuffer(gl.ARRAY_BUFFER, shape.bufferId);
  gl.vertexAttribPointer(attribs.vPosition, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(attrib.vPosition);

  gl.drawArrays(gl.TRIANGLE_FAN, 0, shape.numVertices);
}

如果您不想移动旋转中心，只需删除与以下相关的最后一步rotationOffset

matrix = mat.rotation(angleInRadiansForShape1);  
gl.uniformMatrix3fv(matrixLocation, false, matrix);
drawShape1();

matrix = mat.rotation(angleInRadiansForShape2);  
gl.uniformMatrix3fv(matrixLocation, false, matrix);
drawShape2();

var matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);    
matrix = m3.translate(matrix, whereToDrawX, whereToDrawY);
matrix = m3.rotate(matrix, angleToRotate);
matrix = m3.translate(matrix, offsetForRotationX, offsetForRotationY);

您可能还会发现这篇文章很有用