揭开WebGL移动、旋转和缩放的奥秘：玩转3D图形世界

2023-09-05 09:54:47

解锁WebGL的移动、旋转和缩放之谜

踏入WebGL的世界，开启一场非凡的3D图形之旅！WebGL是一种强大的JavaScript API，让你可以在网页上绘制和渲染交互式的3D图形。本篇博客将带你深入探索WebGL的基本操作：移动、旋转和缩放。

移动图形：让你的3D物体舞动

移动图形是3D图形变换中最基础的操作。通过调整顶点坐标，你可以改变图形的位置。在WebGL中，顶点坐标存储在顶点缓冲区对象（VBO）中。要移动图形，你需要创建一个VBO，并存储图形的顶点坐标。然后，使用平移矩阵修改顶点坐标，从而实现图形的移动。

旋转图形：赋予你的3D物体生命力

旋转图形也是3D图形变换的关键操作。你可以通过围绕特定轴旋转来旋转图形。在WebGL中，你可以使用旋转矩阵来实现图形的旋转。旋转矩阵可以将图形绕着x轴、y轴或z轴旋转任意角度。

缩放图形：调整你的3D物体大小

缩放图形是另一个基本的3D图形变换操作。你可以通过改变图形的大小来实现缩放。在WebGL中，你可以使用缩放矩阵来实现图形的缩放。缩放矩阵可以将图形在x轴、y轴和z轴方向上分别缩放不同的倍数。

代码示例：让3D图形动起来

为了让你更好地理解WebGL的移动、旋转和缩放操作，我们提供了以下代码片段。这些代码演示了如何使用WebGL来创建和渲染移动、旋转和缩放的3D图形：

// WebGL初始化
const gl = canvas.getContext('webgl');
const vertexBuffer = gl.createBuffer();

// 顶点数据
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,

  // 顶部
  -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,

  // 左侧
  -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
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const vertexShaderCode = `
  attribute vec3 position;
  uniform mat4 modelViewMatrix;
  uniform mat4 projectionMatrix;
  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;
gl.shaderSource(vertexShader, vertexShaderCode);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
const fragmentShaderCode = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;
gl.shaderSource(fragmentShader, fragmentShaderCode);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// 获取Uniform变量的位置
const modelViewMatrixLocation = gl.getUniformLocation(program, 'modelViewMatrix');
const projectionMatrixLocation = gl.getUniformLocation(program, 'projectionMatrix');

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

// 投影矩阵
const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, 45 * Math.PI / 180, canvas.width / canvas.height, 0.1, 100.0);

// 启用顶点属性数组
gl.enableVertexAttribArray(0);

// 设置顶点属性数组
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

// 清除缓冲区
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);

// 启用深度测试
gl.enable(gl.DEPTH_TEST);

// 启用背面剔除
gl.enable(gl.CULL_FACE);

// 渲染循环
function render() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  mat4.identity(modelViewMatrix);
  mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -5.0]);
  gl.uniformMatrix4fv(modelViewMatrixLocation, false, modelViewMatrix);
  gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);
  gl.drawArrays(gl.TRIANGLES, 0, 36);
  requestAnimationFrame(render);
}

render();