WebGL笔记：图形旋转的原理和实现

旋转

1 ）旋转的概念

• 三维物体的旋转要比位移复杂一点，三维物体的旋转需要满足以下条件：
  • 旋转轴
  • 旋转方向
  • 旋转角度
• 场景举例
  • 模型站在旋转轴的起点进行旋转
  • 模型要往左转还是往右转，就是旋转的方向
  • 模型旋转的大小就是旋转角度

2 ）旋转方向的正负

• 在webgl中，除裁剪空间之外的大部分功能都使用了右手坐标系
• 在webgl中，可以暂且将其当成右手坐标系, 下图就是右手坐标系

• 以上图为例

  • 当物体绕 z 轴，从x轴正半轴向y轴正半轴逆时针旋转时，是正向旋转，反之为负。
  • 当物体绕 x 轴，从y轴正半轴向z轴正半轴逆时针旋转时，是正向旋转，反之为负。
  • 当物体绕 y 轴，从z轴正半轴向x轴正半轴逆时针旋转时，是正向旋转，反之为负。

• 如下图就是正向旋转

  • 围绕z轴(骑着z轴)，从x轴到y轴逆时针转动就是正向旋转

旋转公式

• 如下，让顶点围绕 z 轴旋转的场景

• 已知
  • 点A的位置是(ax,ay,az)
  • 点A要围绕z轴旋转β度，转到点B的位置
• 求：点A旋转后的bx、by位置
• 解
  • 因为∠β是已知的，∠α 可以通过点 A 得出
  • 所以我们可以得出

    ∠xOB = α + β
    

  • 那我们通过三角函数就可以推出bx、by
  • 设 ∠xOB = θ，则：

    bx = cosθ * |OA|
    by = sinθ * |OA| // 注意这里因为是旋转, 所以 |OA| === |OB|, 统一用 |OA|来表示
    

  • 上面的|OA|是点O到点A的距离，可以直接用点A求出

    |OA| = Math.sqrt(ax * ax + ay * ay)
    

  • 那我们接下来只需要知道cosθ和sinθ的值即可
  • 因为：θ = α + β
  • 所以，我们可以利用和角公式求cosθ和sinθ的值

    cosθ = cos(α + β)
    cosθ = cosα * cosβ - sinα * sinβ
    

    sinθ = sin(α + β)
    sinθ = cosβ * sinα + sinβ * cosα
    

  • 所以

    bx = cosθ * |OA|
    bx = (cosα * cosβ - sinα * sinβ) * |OA|
    bx = cosα * cosβ * |OA| - sinα * sinβ * |OA|
    

    by = sinθ * |OA|
    by = (cosβ * sinα + sinβ * cosα) * |OA|
    by = cosβ * sinα * |OA| + sinβ * cosα * |OA|
    

  • 因为

    cosα * |OA| = ax
    sinα * |OA| = ay
    

  • 所以我们可以简化bx、by的公式

    bx = ax * cosβ - ay * sinβ
    by = ay * cosβ + ax * sinβ
    

  • 上面的bx、by就是我们要求的答案

在着色器中旋转

• 可以直接在着色器里写旋转公式

  <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 a_Position;
      float angle = radians(80.0);
      float sinB = sin(angle);
      float cosB = cos(angle);
      void main() {
          gl_Position.x = a_Position.x * cosB - a_Position.y * sinB;
          gl_Position.y = a_Position.y * cosB + a_Position.x * sinB;
          gl_Position.z = a_Position.z;
          gl_Position.w = 1.0;
      }
  script>
  

• radians(float degree) 将角度转弧度

• sin(float angle) 正弦

• cos(float angle) 余弦

用js旋转图形

我们将顶点着色器里的正弦值和余弦值暴露给js，便可以用js旋转图形了

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform float u_SinB;
    uniform float u_CosB;
    void main() {
        gl_Position.x = a_Position.x * u_CosB-a_Position.y * u_SinB;
        gl_Position.y = a_Position.y * u_CosB+a_Position.x * u_SinB;
        gl_Position.z = a_Position.z;
        gl_Position.w = 1.0;
    }
script>

• 在js 中修改uniform 变量

  const u_SinB = gl.getUniformLocation(gl.program, 'u_SinB');
  const u_CosB = gl.getUniformLocation(gl.program, 'u_CosB');
  const angle = 0.3;
  gl.uniform1f(u_SinB, Math.sin(angle));
  gl.uniform1f(u_CosB, Math.cos(angle));
  

• 之后让图形转起来

  !(function ani() {
      angle += 0.01;
      gl.uniform1f(u_SinB, Math.sin(angle));
      gl.uniform1f(u_CosB, Math.cos(angle));
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLES, 0, 3);
      requestAnimationFrame(ani);
  })()
  

完整代码

<canvas id="canvas">canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec4 a_Position;
  uniform float u_SinB;
  uniform float u_CosB;
  void main() {
      gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;
      gl_Position.y = a_Position.y * u_CosB + a_Position.x * u_SinB;
      gl_Position.z = a_Position.z;
      gl_Position.w = 1.0;
  }
script>
<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
      gl_FragColor = vec4(1.0,1.0,0.0,1.0);
  }
script>
<script type="module">
  import { initShaders } from './utils.js';
  const canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const gl = canvas.getContext('webgl');

  const vsSource = document.getElementById('vertexShader').innerText;
  const fsSource = document.getElementById('fragmentShader').innerText;
  initShaders(gl, vsSource, fsSource);

  const vertices = new Float32Array([
    0.0, 0.1,
    -0.1, -0.1,
    0.1, -0.1
  ]);

  const vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(a_Position);

  // 获取Uniform变量
  const u_SinB = gl.getUniformLocation(gl.program, 'u_SinB')
  const u_CosB = gl.getUniformLocation(gl.program, 'u_CosB')
  // 修改uniform 变量
  let angle = 0.3
  gl.uniform1f(u_SinB, Math.sin(angle))
  gl.uniform1f(u_CosB, Math.cos(angle))

  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, 3);

  !(function ani() {
    angle += 0.01;
    gl.uniform1f(u_SinB, Math.sin(angle));
    gl.uniform1f(u_CosB, Math.cos(angle));
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    requestAnimationFrame(ani);
  })()
script>