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

JavaScript3D编程：WebGL入门教程

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

想要入门3D图形编程？本文为你提供一份详尽的JavaScript WebGL入门指南。WebGL作为浏览器中直接调用GPU进行3D渲染的关键技术，让你摆脱对插件的依赖，实现高性能的3D图形效果。文章将从WebGL的基础概念入手，详细讲解如何通过canvas获取上下文，编写GLSL着色器程序（包括顶点着色器和片元着色器），编译并链接着色程序，以及如何准备顶点数据并传入缓冲区。此外，还会介绍如何利用gl-matrix等数学库计算模型、视图和投影矩阵，最终实现3D图形的绘制。掌握这些核心步骤，你就能为后续学习Three.js等高级3D库打下坚实的基础，轻松驾驭3D图形编程。

使用JavaScript进行3D图形编程主要依赖WebGL，通过canvas调用GPU渲染。首先获取WebGL上下文，编写GLSL着色器程序（顶点和片元着色器），编译并链接成着色程序；接着准备顶点数据并传入缓冲区，关联属性变量；然后利用gl-matrix等库计算模型、视图和投影矩阵，生成MVP矩阵并传入着色器；最后调用gl.drawArrays绘制图形。掌握这些步骤可实现基础3D渲染，为后续学习Three.js等高级库打下基础。

如何用JavaScript进行3D图形编程（使用WebGL）？

用JavaScript进行3D图形编程主要依赖于WebGL，它允许在浏览器中直接调用GPU来渲染高性能的3D图形。虽然WebGL本身API较底层、复杂，但通过合理组织代码和借助一些模式，你可以从零开始构建3D场景。

了解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图形编程