如何用WebGL实现一个简单的3D渲染引擎？-js教程-PHP中文网

如何用WebGL实现一个简单的3D渲染引擎？

夢幻星辰

发布： 2025-09-30 15:02:02

原创

559人浏览过

答案是使用WebGL可构建基础3D渲染引擎：先获取canvas上下文并初始化环境，设置清屏色和深度测试；接着编写GLSL顶点和片元着色器，编译并链接成程序；然后定义几何数据如三角形顶点，上传至GPU缓冲区并与着色器attribute绑定；通过gl-matrix生成模型视图和投影矩阵，并传入uniform变量；最后利用requestAnimationFrame创建渲染循环，持续更新矩阵并调用drawArrays绘制图形。此流程构成了一个完整的最小3D渲染系统，支持后续扩展纹理、光照等功能。

如何用webgl实现一个简单的3d渲染引擎？

要实现一个简单的3D渲染引擎，WebGL 是一个强大的选择。它基于 OpenGL ES，可以直接在浏览器中进行硬件加速的图形渲染。虽然 WebGL 本身比较底层，但通过合理组织代码，你可以构建出一个基础但功能完整的 3D 渲染系统。

初始化 WebGL 上下文

第一步是获取 WebGL 上下文并设置基本的渲染环境。

你需要一个 canvas 元素，并从中获取 WebGL 渲染上下文：

const canvas = document.getElementById('renderCanvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

if (!gl) {
alert('WebGL not supported');
}

// 设置清屏颜色
gl.clearColor(0.1, 0.1, 0.1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);

编写着色器程序

WebGL 使用 GLSL 编写着色器。你需要定义顶点着色器和片元着色器来控制渲染流程。

// 顶点着色器
const vsSource = `
  attribute vec3 aPosition;
  uniform mat4 uModelViewMatrix;
  uniform mat4 uProjectionMatrix;
  void main() {
    gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
  }
`;

// 片元着色器
const fsSource = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1.0, 0.8, 0.4, 1.0); // 橙色
  }
`;

接下来编译着色器并链接成程序：

准备几何数据与矩阵变换

定义一个简单的 3D 立方体或三角形的顶点数据，并上传到 GPU 的缓冲区。

Motiff妙多

Motiff妙多是一款AI驱动的界面设计工具，定位为“AI时代设计工具”

250

查看详情

const vertices = [
  -0.5, -0.5, 0.5,
   0.5, -0.5, 0.5,
   0.0, 0.5, 0.5
]; // 一个三角形面

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

将缓冲区连接到着色器中的 attribute：

const positionLocation = gl.getAttribLocation(program, 'aPosition');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

使用 gl-matrix 或自己实现简单的矩阵运算，生成投影和视图矩阵：

// 示例：使用 gl-matrix
const modelViewMatrix = mat4.create();
const projectionMatrix = mat4.create();

mat4.perspective(projectionMatrix, Math.PI / 4, canvas.width/canvas.height, 0.1, 100.0);
mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -5.0]);

传入 uniform 变量：

const mvMatrixLoc = gl.getUniformLocation(program, 'uModelViewMatrix');
const projMatrixLoc = gl.getUniformLocation(program, 'uProjectionMatrix');
gl.uniformMatrix4fv(mvMatrixLoc, false, modelViewMatrix);
gl.uniformMatrix4fv(projMatrixLoc, false, projectionMatrix);

渲染循环

使用 requestAnimationFrame 实现持续渲染。

function render() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // 更新模型矩阵（例如旋转）
  mat4.rotateY(modelViewMatrix, modelViewMatrix, 0.01);
  gl.uniformMatrix4fv(mvMatrixLoc, false, modelViewMatrix);

  gl.drawArrays(gl.TRIANGLES, 0, 3); // 绘制三角形
  requestAnimationFrame(render);
}
render();

基本上就这些。你已经搭建了一个最简的 3D 渲染流程：初始化上下文、加载着色器、上传几何数据、应用变换矩阵、进入渲染循环。在此基础上，可以逐步扩展支持纹理、光照、模型加载、摄像机控制等功能。

以上就是如何用WebGL实现一个简单的3D渲染引擎？的详细内容，更多请关注php中文网其它相关文章！