javascript - 如何在 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 中，或者不在 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) 旋转。如果你想围绕其他点旋转，你可以平移你的顶点。您可以通过将旋转矩阵与平移矩阵相乘来做到这一点。

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

This article描述了如何使用本文中创建的函数来乘以矩阵。

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

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) = 从像素转换为裁剪空间

例子:

"use strict";

function main() {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  var canvas = document.getElementById("canvas");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    return;
  }

  // setup GLSL program
  var program = webglUtils.createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);

  // look up where the vertex data needs to go.
  var positionLocation = gl.getAttribLocation(program, "a_position");

  // lookup uniforms
  var colorLocation = gl.getUniformLocation(program, "u_color");
  var matrixLocation = gl.getUniformLocation(program, "u_matrix");

  // Create a buffer to put positions in
  var positionBuffer = gl.createBuffer();
  // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  // Put geometry data into buffer
  setGeometry(gl);

  const shapes = [
    { 
      translation: [50, 75],
      scale: [0.5, 0.5],
      rotationOffset: [0, 0], // top left corner of F
      angleInRadians: 0,
      color: [1, 0, 0, 1], // red
    },
    { 
      translation: [100, 75],
      scale: [0.5, 0.5],
      rotationOffset: [-50, -75], // center of F
      angleInRadians: 0,
      color: [0, 1, 0, 1], // green
    },
    { 
      translation: [150, 75],
      scale: [0.5, 0.5],
      rotationOffset: [0, -150], // bottom left corner of F
      angleInRadians: 0,
      color: [0, 0, 1, 1], // blue
    },
    { 
      translation: [200, 75],
      scale: [0.5, 0.5],
      rotationOffset: [-100, 0], // top right corner of F
      angleInRadians: 0,
      color: [1, 0, 1, 1],  // magenta
    },
  ];

  requestAnimationFrame(drawScene);

  // Draw the scene.
  function drawScene(time) {
    time *= 0.001;  // seconds

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    // Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    // Clear the canvas.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    // draw a single black line to make the pivot clearer
    gl.enable(gl.SCISSOR_TEST);
    gl.scissor(0, 75, 300, 1);
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.disable(gl.SCISSOR_TEST);

    // Tell it to use our program (pair of shaders)
    gl.useProgram(program);

    // Turn on the attribute
    gl.enableVertexAttribArray(positionLocation);

    // Bind the position buffer.
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
    var size = 2;          // 2 components per iteration
    var type = gl.FLOAT;   // the data is 32bit floats
    var normalize = false; // don't normalize the data
    var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
    var offset = 0;        // start at the beginning of the buffer
    gl.vertexAttribPointer(
        positionLocation, size, type, normalize, stride, offset);

    for (const shape of shapes) {
      shape.angleInRadians = time;
      
      // set the color
      gl.uniform4fv(colorLocation, shape.color);

      // Compute the matrices
      var matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);
      matrix = m3.translate(matrix, shape.translation[0], shape.translation[1]);
      matrix = m3.scale(matrix, shape.scale[0], shape.scale[1]);
      matrix = m3.rotate(matrix, shape.angleInRadians);
      matrix = m3.translate(matrix, shape.rotationOffset[0], shape.rotationOffset[1]);

      // Set the matrix.
      gl.uniformMatrix3fv(matrixLocation, false, matrix);

      // Draw the geometry.
      var primitiveType = gl.TRIANGLES;
      var offset = 0;
      var count = 18;  // 6 triangles in the 'F', 3 points per triangle
      gl.drawArrays(primitiveType, offset, count);
    }
    requestAnimationFrame(drawScene);
  }
}

var m3 = {
  projection: function(width, height) {
    // Note: This matrix flips the Y axis so that 0 is at the top.
    return [
      2 / width, 0, 0,
      0, -2 / height, 0,
      -1, 1, 1
    ];
  },

  identity: function() {
    return [
      1, 0, 0,
      0, 1, 0,
      0, 0, 1,
    ];
  },

  translation: function(tx, ty) {
    return [
      1, 0, 0,
      0, 1, 0,
      tx, ty, 1,
    ];
  },

  rotation: function(angleInRadians) {
    var c = Math.cos(angleInRadians);
    var s = Math.sin(angleInRadians);
    return [
      c,-s, 0,
      s, c, 0,
      0, 0, 1,
    ];
  },

  scaling: function(sx, sy) {
    return [
      sx, 0, 0,
      0, sy, 0,
      0, 0, 1,
    ];
  },

  multiply: function(a, b) {
    var a00 = a[0 * 3 + 0];
    var a01 = a[0 * 3 + 1];
    var a02 = a[0 * 3 + 2];
    var a10 = a[1 * 3 + 0];
    var a11 = a[1 * 3 + 1];
    var a12 = a[1 * 3 + 2];
    var a20 = a[2 * 3 + 0];
    var a21 = a[2 * 3 + 1];
    var a22 = a[2 * 3 + 2];
    var b00 = b[0 * 3 + 0];
    var b01 = b[0 * 3 + 1];
    var b02 = b[0 * 3 + 2];
    var b10 = b[1 * 3 + 0];
    var b11 = b[1 * 3 + 1];
    var b12 = b[1 * 3 + 2];
    var b20 = b[2 * 3 + 0];
    var b21 = b[2 * 3 + 1];
    var b22 = b[2 * 3 + 2];
    return [
      b00 * a00 + b01 * a10 + b02 * a20,
      b00 * a01 + b01 * a11 + b02 * a21,
      b00 * a02 + b01 * a12 + b02 * a22,
      b10 * a00 + b11 * a10 + b12 * a20,
      b10 * a01 + b11 * a11 + b12 * a21,
      b10 * a02 + b11 * a12 + b12 * a22,
      b20 * a00 + b21 * a10 + b22 * a20,
      b20 * a01 + b21 * a11 + b22 * a21,
      b20 * a02 + b21 * a12 + b22 * a22,
    ];
  },

  translate: function(m, tx, ty) {
    return m3.multiply(m, m3.translation(tx, ty));
  },

  rotate: function(m, angleInRadians) {
    return m3.multiply(m, m3.rotation(angleInRadians));
  },

  scale: function(m, sx, sy) {
    return m3.multiply(m, m3.scaling(sx, sy));
  },
};

// Fill the buffer with the values that define a letter 'F'.
function setGeometry(gl) {
  gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
          // left column
          0, 0,
          30, 0,
          0, 150,
          0, 150,
          30, 0,
          30, 150,

          // top rung
          30, 0,
          100, 0,
          30, 30,
          30, 30,
          100, 0,
          100, 30,

          // middle rung
          30, 60,
          67, 60,
          30, 90,
          30, 90,
          67, 60,
          67, 90,
      ]),
      gl.STATIC_DRAW);
}

main();

<canvas id="canvas"></canvas>
<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;

uniform mat3 u_matrix;

void main() {
  // Multiply the position by the matrix.
  gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}
</script>
<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;

uniform vec4 u_color;

void main() {
   gl_FragColor = u_color;
}
</script>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See http://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and http://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>

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

"use strict";

function main() {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  var canvas = document.getElementById("canvas");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    return;
  }

  // setup GLSL program
  var program = webglUtils.createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);

  // look up where the vertex data needs to go.
  var positionLocation = gl.getAttribLocation(program, "a_position");

  // lookup uniforms
  var colorLocation = gl.getUniformLocation(program, "u_color");
  var matrixLocation = gl.getUniformLocation(program, "u_matrix");

  // Create a buffer to put positions in
  var positionBuffer = gl.createBuffer();
  // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  // Put geometry data into buffer
  setGeometry(gl);

  const shapes = [
    { 
      translation: [50, 75],
      scale: [0.5, 0.5],
      rotationOffset: [0, 0], // top left corner of F
      angleInRadians: 0,
      color: [1, 0, 0, 1], // red
    },
    { 
      translation: [100, 75],
      scale: [0.5, 0.5],
      rotationOffset: [-50, -75], // center of F
      angleInRadians: 0,
      color: [0, 1, 0, 1], // green
    },
    { 
      translation: [150, 75],
      scale: [0.5, 0.5],
      rotationOffset: [0, -150], // bottom left corner of F
      angleInRadians: 0,
      color: [0, 0, 1, 1], // blue
    },
    { 
      translation: [200, 75],
      scale: [0.5, 0.5],
      rotationOffset: [-100, 0], // top right corner of F
      angleInRadians: 0,
      color: [1, 0, 1, 1],  // magenta
    },
  ];

  requestAnimationFrame(drawScene);

  // Draw the scene.
  function drawScene(time) {
    time *= 0.001;  // seconds

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    // Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    // Clear the canvas.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    // draw a single black line to make the pivot clearer
    gl.enable(gl.SCISSOR_TEST);
    gl.scissor(0, 75, 300, 1);
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.disable(gl.SCISSOR_TEST);

    // Tell it to use our program (pair of shaders)
    gl.useProgram(program);

    // Turn on the attribute
    gl.enableVertexAttribArray(positionLocation);

    // Bind the position buffer.
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
    var size = 2;          // 2 components per iteration
    var type = gl.FLOAT;   // the data is 32bit floats
    var normalize = false; // don't normalize the data
    var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
    var offset = 0;        // start at the beginning of the buffer
    gl.vertexAttribPointer(
        positionLocation, size, type, normalize, stride, offset);

    for (const shape of shapes) {
      shape.angleInRadians = time;
      
      // set the color
      gl.uniform4fv(colorLocation, shape.color);

      // Compute the matrices
      var matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);
      matrix = m3.translate(matrix, shape.translation[0], shape.translation[1]);
      matrix = m3.scale(matrix, shape.scale[0], shape.scale[1]);
      matrix = m3.rotate(matrix, shape.angleInRadians);
      //matrix = m3.translate(matrix, shape.rotationOffset[0], shape.rotationOffset[1]);

      // Set the matrix.
      gl.uniformMatrix3fv(matrixLocation, false, matrix);

      // Draw the geometry.
      var primitiveType = gl.TRIANGLES;
      var offset = 0;
      var count = 18;  // 6 triangles in the 'F', 3 points per triangle
      gl.drawArrays(primitiveType, offset, count);
    }
    requestAnimationFrame(drawScene);
  }
}

var m3 = {
  projection: function(width, height) {
    // Note: This matrix flips the Y axis so that 0 is at the top.
    return [
      2 / width, 0, 0,
      0, -2 / height, 0,
      -1, 1, 1
    ];
  },

  identity: function() {
    return [
      1, 0, 0,
      0, 1, 0,
      0, 0, 1,
    ];
  },

  translation: function(tx, ty) {
    return [
      1, 0, 0,
      0, 1, 0,
      tx, ty, 1,
    ];
  },

  rotation: function(angleInRadians) {
    var c = Math.cos(angleInRadians);
    var s = Math.sin(angleInRadians);
    return [
      c,-s, 0,
      s, c, 0,
      0, 0, 1,
    ];
  },

  scaling: function(sx, sy) {
    return [
      sx, 0, 0,
      0, sy, 0,
      0, 0, 1,
    ];
  },

  multiply: function(a, b) {
    var a00 = a[0 * 3 + 0];
    var a01 = a[0 * 3 + 1];
    var a02 = a[0 * 3 + 2];
    var a10 = a[1 * 3 + 0];
    var a11 = a[1 * 3 + 1];
    var a12 = a[1 * 3 + 2];
    var a20 = a[2 * 3 + 0];
    var a21 = a[2 * 3 + 1];
    var a22 = a[2 * 3 + 2];
    var b00 = b[0 * 3 + 0];
    var b01 = b[0 * 3 + 1];
    var b02 = b[0 * 3 + 2];
    var b10 = b[1 * 3 + 0];
    var b11 = b[1 * 3 + 1];
    var b12 = b[1 * 3 + 2];
    var b20 = b[2 * 3 + 0];
    var b21 = b[2 * 3 + 1];
    var b22 = b[2 * 3 + 2];
    return [
      b00 * a00 + b01 * a10 + b02 * a20,
      b00 * a01 + b01 * a11 + b02 * a21,
      b00 * a02 + b01 * a12 + b02 * a22,
      b10 * a00 + b11 * a10 + b12 * a20,
      b10 * a01 + b11 * a11 + b12 * a21,
      b10 * a02 + b11 * a12 + b12 * a22,
      b20 * a00 + b21 * a10 + b22 * a20,
      b20 * a01 + b21 * a11 + b22 * a21,
      b20 * a02 + b21 * a12 + b22 * a22,
    ];
  },

  translate: function(m, tx, ty) {
    return m3.multiply(m, m3.translation(tx, ty));
  },

  rotate: function(m, angleInRadians) {
    return m3.multiply(m, m3.rotation(angleInRadians));
  },

  scale: function(m, sx, sy) {
    return m3.multiply(m, m3.scaling(sx, sy));
  },
};

// Fill the buffer with the values that define a letter 'F'.
function setGeometry(gl) {
  gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
          // left column
          0, 0,
          30, 0,
          0, 150,
          0, 150,
          30, 0,
          30, 150,

          // top rung
          30, 0,
          100, 0,
          30, 30,
          30, 30,
          100, 0,
          100, 30,

          // middle rung
          30, 60,
          67, 60,
          30, 90,
          30, 90,
          67, 60,
          67, 90,
      ]),
      gl.STATIC_DRAW);
}

main();

<canvas id="canvas"></canvas>
<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;

uniform mat3 u_matrix;

void main() {
  // Multiply the position by the matrix.
  gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}
</script>
<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;

uniform vec4 u_color;

void main() {
   gl_FragColor = u_color;
}
</script>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See http://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and http://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>

您可能还会找到 this article有用