探索WebGL世界：揭秘立方体绘制与旋转之旅

2023-10-05 11:59:36

写在文章开头
立方体，一个三维空间中最基本、最常见的几何体，在计算机图形学中扮演着重要的角色。WebGL，一种强大的3D图形API，赋予了开发者在网页上创建和操控交互式3D场景的能力。本文将带您踏上WebGL立方体绘制与旋转之旅，从基础知识到实际实现，全方位解析WebGL立方体的奥秘。

一、立方体数据构造：从顶点到索引

立方体由6个面组成，每个面都是一个正方形。为了在WebGL中绘制立方体，我们需要首先定义立方体的顶点数据和索引缓冲区。

1. 顶点数据

顶点数据包含了立方体的每个顶点的坐标信息。对于一个立方体，它有8个顶点，分别位于立方体的8个角上。每个顶点的坐标信息由三个分量组成，分别表示顶点在x轴、y轴和z轴上的坐标。

// 立方体的顶点数据
const vertices = [
  // 前面的四个顶点
  -1.0, 1.0, 1.0, // 左上角
  -1.0, -1.0, 1.0, // 左下角
  1.0, -1.0, 1.0, // 右下角
  1.0, 1.0, 1.0, // 右上角

  // 后面的四个顶点
  -1.0, 1.0, -1.0, // 左上角
  -1.0, -1.0, -1.0, // 左下角
  1.0, -1.0, -1.0, // 右下角
  1.0, 1.0, -1.0 // 右上角
];

2. 索引缓冲区

索引缓冲区包含了立方体的面的顶点索引信息。对于一个立方体，它有6个面，每个面有4个顶点。索引缓冲区将这些顶点连接起来，形成立方体的各个面。

// 立方体的索引缓冲区
const indices = [
  // 前面的两个三角形
  0, 1, 2,
  2, 3, 0,

  // 右面的两个三角形
  3, 2, 6,
  6, 7, 3,

  // 上面的两个三角形
  4, 5, 6,
  6, 7, 4,

  // 左面的两个三角形
  5, 4, 0,
  0, 1, 5,

  // 底面的两个三角形
  1, 2, 6,
  6, 5, 1,

  // 后面的两个三角形
  7, 6, 2,
  2, 3, 7
];

二、WebGL绘制立方体：从着色器到纹理

有了立方体的顶点数据和索引缓冲区，我们就可以在WebGL中绘制立方体了。

1. 着色器

着色器是WebGL中用来处理顶点数据和片段数据的程序。顶点着色器负责处理顶点数据，而片段着色器负责处理片段数据。

// 顶点着色器
const vertexShaderSource = `
  attribute vec3 aPosition;
  uniform mat4 uModelViewMatrix;
  uniform mat4 uProjectionMatrix;

  void main() {
    gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
  }
`;

// 片段着色器
const fragmentShaderSource = `
  precision mediump float;

  uniform vec4 uColor;

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

2. 纹理

纹理可以为立方体的表面添加细节和颜色。我们可以使用WebGL提供的纹理对象来加载和管理纹理。

// 创建纹理对象
const texture = gl.createTexture();

// 绑定纹理对象
gl.bindTexture(gl.TEXTURE_2D, texture);

// 加载纹理图像
const image = new Image();
image.onload = function() {
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);

  // 设置纹理参数
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

  // 解绑纹理对象
  gl.bindTexture(gl.TEXTURE_2D, null);
};
image.src = 'texture.jpg';

三、立方体旋转：从模型视图矩阵到时间控制

为了让立方体动起来，我们可以通过旋转模型视图矩阵来实现立方体的旋转。

// 创建模型视图矩阵
const modelViewMatrix = mat4.create();

// 旋转模型视图矩阵
mat4.rotate(modelViewMatrix, modelViewMatrix, rotation, [0, 1, 0]);

// 设置模型视图矩阵
gl.uniformMatrix4fv(uModelViewMatrix, false, modelViewMatrix);