使用WebGL实现3D立方体渲染_javascript技巧-js教程-PHP中文网

使用WebGL实现3D立方体渲染_javascript技巧

紅蓮之龍

发布： 2025-11-12 11:23:03

原创

609人浏览过

答案：通过WebGL在canvas中创建3D立方体需四步：1. 获取WebGL上下文；2. 编写并编译顶点和片段着色器；3. 定义立方体顶点与索引并上传至GPU缓冲区；4. 使用矩阵变换设置视角与动画，循环调用drawElements渲染旋转立方体。

使用webgl实现3d立方体渲染_javascript技巧

要在网页中实现一个3D立方体渲染，WebGL 是一个强大且直接的方式。它允许你在浏览器中使用 JavaScript 调用 GPU 进行图形渲染，无需依赖第三方库（如 Three.js），虽然学习曲线稍陡，但能更深入理解图形管线的工作原理。

1. 创建 WebGL 上下文

首先需要在 HTML 中放置一个 canvas 元素，然后通过 JavaScript 获取 WebGL 上下文：

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
<p>if (!gl) {
alert('无法初始化 WebGL');
}</p>

登录后复制

确保上下文成功获取，否则浏览器不支持或禁用了 WebGL。

2. 编写着色器程序

WebGL 使用 GLSL（OpenGL 着色语言）编写顶点和片段着色器。你需要将它们作为字符串注入，然后编译链接成着色程序。

立即学习“Java免费学习笔记（深入）”；

顶点着色器：处理每个顶点的位置变换。

const vsSource = `
  attribute vec4 aVertexPosition;
  uniform mat4 uModelViewMatrix;
  uniform mat4 uProjectionMatrix;
  void main() {
    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
  }
`;

登录后复制

片段着色器：决定像素颜色。

const fsSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.5, 0.3, 1.0); // 橙色
  }
`;

登录后复制

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

function initShaderProgram(gl, vsSource, fsSource) {
  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
<p>const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);</p><p>if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('无法初始化着色器程序: ' + gl.getProgramInfoLog(shaderProgram));
return null;
}
return shaderProgram;
}</p><p>function loadShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);</p><p>if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('着色器编译错误:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}</p>

登录后复制

3. 定义立方体的顶点与索引

一个立方体有 8 个顶点，我们可以定义其坐标，并使用索引绘制三角形面（共 6 个面，每个面由两个三角形组成）。

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

查看详情

const positions = [
  // 前面
  -1.0, -1.0,  1.0,
   1.0, -1.0,  1.0,
   1.0,  1.0,  1.0,
  -1.0,  1.0,  1.0,
  // 后面...
  // （其他面省略，完整需6个面）
];
<p>const indices = [
0,  1,  2,      0,  2,  3,  // 前
4,  5,  6,      4,  6,  7,  // 后
8,  9,  10,     8,  10, 11, // 左
// ...其他面索引
];</p>

登录后复制

将顶点数据上传到 GPU 缓冲区：

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
<p>const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);</p>

登录后复制

4. 设置矩阵与动画渲染

使用 mat4 矩阵进行模型、视图和投影变换。可以借助 gl-matrix 库简化操作。

import { mat4 } from 'gl-matrix';
<p>const modelViewMatrix = mat4.create();
const projectionMatrix = mat4.create();</p><p>mat4.perspective(projectionMatrix,
45 * Math.PI / 180,    // 视野角度
gl.canvas.clientWidth / gl.canvas.clientHeight,
0.1,                   // 近裁剪面
100.0                  // 远裁剪面
);</p><p>mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -6.0]);
mat4.rotate(modelViewMatrix, modelViewMatrix, Date.now() * 0.001, [1, 1, 1]);</p>

登录后复制

在渲染函数中绑定属性和 uniforms：

function render() {
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clearDepth(1.0);
  gl.enable(gl.DEPTH_TEST);
  gl.depthFunc(gl.LEQUAL);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
<p>const programInfo = {
program: shaderProgram,
attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
},
uniformLocations: {
projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
},
};</p><p>gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
3,          // 每个顶点3个值 (x, y, z)
gl.FLOAT,   // 类型
false,      // 不归一化
0,          // 步长
0           // 偏移
);
gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);</p><p>gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);</p><p>gl.useProgram(programInfo.program);
gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix);
gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, false, modelViewMatrix);</p><p>const vertexCount = indices.length;
gl.drawElements(gl.TRIANGLES, vertexCount, gl.UNSIGNED_SHORT, 0);</p><p>requestAnimationFrame(render); // 循环渲染
}
render();</p>

登录后复制

这样就完成了一个基础的 3D 立方体旋转动画。

基本上就这些。核心是理解着色器、缓冲区、矩阵变换和绘制流程。虽然原生 WebGL 写起来繁琐，但对掌握图形底层机制非常有帮助。

以上就是使用WebGL实现3D立方体渲染_javascript技巧的详细内容，更多请关注php中文网其它相关文章！