使用JavaScript进行3D图形编程主要依赖WebGL，通过canvas调用GPU渲染。首先获取WebGL上下文，编写GLSL着色器程序（顶点和片元着色器），编译并链接成着色程序；接着准备顶点数据并传入缓冲区，关联属性变量；然后利用gl-matrix等库计算模型、视图和投影矩阵，生成MVP矩阵并传入着色器；最后调用gl.drawArrays绘制图形。掌握这些步骤可实现基础3D渲染，为后续学习Three.js等高级库打下基础。
用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字符串中。
立即学习“Java免费学习笔记（深入）”；
顶点着色器示例：
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。
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
例如绘制一个三角形：
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这样的高级库来提升开发效率。
