当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript3D编程：WebGL入门教程

JavaScript3D编程：WebGL入门教程

2025-11-20 17:45:52 0浏览收藏

了解WebGL基础工作流程

WebGL基于OpenGL ES，运行在HTML5的canvas元素上。它的核心是使用着色器（Shader）程序来控制图形渲染。

基本流程包括：

获取canvas上下文：const gl = canvas.getContext('webgl');
编写顶点着色器和片元着色器（GLSL语言）
编译着色器并链接成着色程序
准备顶点数据并传入GPU缓冲区
设置着色器中的属性和统一变量（如变换矩阵）
调用gl.drawArrays()或gl.drawElements()进行绘制

编写简单的着色器程序

着色器用GLSL（OpenGL Shading Language）编写，嵌入在JavaScript字符串中。

顶点着色器示例：

attribute vec3 aPosition;
uniform mat4 uModelViewProjection;
void main() {
gl_Position = uModelViewProjection * vec4(aPosition, 1.0);
}

片元着色器示例：

precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.5, 0.3, 1.0); // 橙色
}

这些着色器需要在JS中编译并链接：

function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  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.linkProgram(program);
gl.useProgram(program);

传递顶点数据与绘制图形

你需要把3D模型的顶点坐标传给GPU。

例如绘制一个三角形：

const positions = [
  -0.5, -0.5, 0,
   0.5, -0.5, 0,
   0.0, 0.5, 0
];

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

然后关联到着色器中的属性：

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

最后触发绘制：

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

使用数学库处理3D变换

3D图形离不开矩阵运算（如模型、视图、投影矩阵）。手动写矩阵计算很繁琐，推荐使用gl-matrix库。

安装方式：

npm install gl-matrix

在代码中生成透视投影矩阵和视图矩阵：

import { mat4 } from 'gl-matrix';

const projection = mat4.perspective([], 45 * Math.PI / 180, canvas.width/canvas.height, 0.1, 100);
const view = mat4.lookAt([], [0,0,5], [0,0,0], [0,1,0]);
const model = mat4.identity([]);
const mvp = mat4.multiply([], projection, mat4.multiply([], view, model));

将矩阵传入着色器：

const mvpLocation = gl.getUniformLocation(program, "uModelViewProjection");
gl.uniformMatrix4fv(mvpLocation, false, mvp);

基本上就这些。掌握这些核心步骤后，你可以逐步添加光照、纹理、动画等效果。虽然原生WebGL学习曲线陡峭，但它为你理解3D渲染原理打下坚实基础。后续可以尝试Three.js这样的高级库来提升开发效率。

今天关于《JavaScript3D编程：WebGL入门教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

JavaScript 矩阵 WebGL 着色器 3D图形编程