答案是使用WebGL可构建基础3D渲染引擎：先获取canvas上下文并初始化环境，设置清屏色和深度测试；接着编写GLSL顶点和片元着色器，编译并链接成程序；然后定义几何数据如三角形顶点，上传至GPU缓冲区并与着色器attribute绑定；通过gl-matrix生成模型视图和投影矩阵，并传入uniform变量；最后利用requestAnimationFrame创建渲染循环，持续更新矩阵并调用drawArrays绘制图形。此流程构成了一个完整的最小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); // 橙色
}
`;
接下来编译着色器并链接成程序：
function createShader(gl, type, source) {const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Failed to link program:', gl.getProgramInfoLog(program));
}
gl.useProgram(program);
准备几何数据与矩阵变换
定义一个简单的 3D 立方体或三角形的顶点数据，并上传到 GPU 的缓冲区。
-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-matrixconst 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 渲染流程：初始化上下文、加载着色器、上传几何数据、应用变换矩阵、进入渲染循环。在此基础上，可以逐步扩展支持纹理、光照、模型加载、摄像机控制等功能。
