WebGL 3D引擎从零撸起：场景和变换篇

前端

2024-02-07 00:10:04

各位开发者们，准备好开启 WebGL 3D 引擎开发之旅了吗？在这一站中，我们将深入探讨场景和变换的概念，它们可是引擎中不可或缺的基石。

理解场景

想象一下一个虚拟世界，在这个世界中，各种对象自由穿梭，它们的位置、大小和方向千变万化。这就是我们所说的场景，一个管理和组织所有这些对象的空间。

变换的力量

变换就像魔杖，它可以对场景中的对象进行操作，改变它们的位置、旋转和缩放。通过变换，我们可以创建逼真的世界，让物体自由移动和互动。

打造一个 WebGL 场景

在 WebGL 中，场景是一个 WebGLRenderingContext 对象，它充当虚拟世界的画布。为了创建场景，我们可以执行以下步骤：

// 获取画布元素
const canvas = document.getElementById('canvas');

// 获取 WebGL 上下文
const gl = canvas.getContext('webgl');

// 创建场景
const scene = new Scene(gl);

应用变换

要应用变换，我们可以使用一系列矩阵，它们可以翻译、旋转和缩放对象。在 WebGL 中，这些矩阵存储在着色器程序中。

// 翻译矩阵
const translateMatrix = mat4.create();
mat4.translate(translateMatrix, translateMatrix, [1, 2, 3]);

// 旋转矩阵
const rotateMatrix = mat4.create();
mat4.rotate(rotateMatrix, rotateMatrix, Math.PI / 2, [0, 1, 0]);

// 缩放矩阵
const scaleMatrix = mat4.create();
mat4.scale(scaleMatrix, scaleMatrix, [2, 2, 2]);

// 将矩阵应用于着色器程序
gl.uniformMatrix4fv(programInfo.uniformLocations.translateMatrix, false, translateMatrix);
gl.uniformMatrix4fv(programInfo.uniformLocations.rotateMatrix, false, rotateMatrix);
gl.uniformMatrix4fv(programInfo.uniformLocations.scaleMatrix, false, scaleMatrix);