掌握WebGL需先获取canvas上下文，再创建着色器、编译链接程序，接着传入顶点数据到缓冲区并关联attribute，设置uniform变量，构建MVP矩阵实现3D变换，最后调用绘图命令完成渲染。
想用JavaScript和WebGL做三维图形开发？核心是理解WebGL的底层机制和如何通过JavaScript控制GPU。它不依赖第三方库，直接操作显卡，适合需要高性能或自定义渲染逻辑的项目。虽然Three.js这类库更易上手，但掌握原生WebGL能让你真正掌控图形管线。
WebGL基础与上下文获取
WebGL本质是OpenGL ES 2.0在浏览器中的实现，通过<canvas></canvas>元素运行。第一步是获取WebGL上下文：
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (!gl) { alert("WebGL not supported"); }
确保HTML中存在对应canvas元素。上下文获取后，就可以配置视口、清空颜色缓冲等：
gl.viewport(0, 0, canvas.width, canvas.height);gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
着色器编写与程序链接
WebGL渲染依赖两个着色器：顶点着色器和片元着色器。它们用GLSL（OpenGL着色语言）写，需通过JavaScript字符串注入并编译。
立即学习“Java免费学习笔记（深入）”；
顶点着色器示例：
attribute vec3 a_position;uniform mat4 u_modelViewProjection;
void main() {
gl_Position = u_modelViewProjection * vec4(a_position, 1.0);
}
片元着色器示例：
precision mediump float;uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}
JavaScript中加载、编译并链接着色器：
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.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error("Failed to link program", gl.getProgramInfoLog(program));
}
gl.useProgram(program);
缓冲区与数据绘制
几何数据如顶点坐标要传入GPU缓存。常用ARRAY_BUFFER存放顶点属性：
const positions = [-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
0.0, 0.5, 0.0
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
绑定缓冲后，将数据链接到着色器attribute：
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);
设置uniform变量（如颜色或变换矩阵）：
const colorUniformLocation = gl.getUniformLocation(program, "u_color");gl.uniform4f(colorUniformLocation, 1.0, 0.0, 0.0, 1.0); // 红色
最后调用draw命令：
gl.drawArrays(gl.TRIANGLES, 0, 3);模型视图投影变换
让3D对象正确显示需构建MVP矩阵。JavaScript中可用gl-matrix等数学库辅助：
const model = mat4.create();mat4.rotateX(model, model, 0.5);
const view = mat4.lookAt(view, [0, 0, 5], [0, 0, 0], [0, 1, 0]);
const projection = mat4.perspective(projection, Math.PI / 4, canvas.width/canvas.height, 0.1, 100);
const mvp = mat4.create();
mat4.multiply(mvp, view, model);
mat4.multiply(mvp, projection, mvp);
传入着色器：
const mvpLocation = gl.getUniformLocation(program, "u_modelViewProjection");gl.uniformMatrix4fv(mvpLocation, false, mvp);
基本上就这些。从创建上下文到着色器、缓冲、矩阵变换，每一步都需手动处理。虽然繁琐，但对理解GPU渲染流程极有帮助。调试时多用console.log和浏览器开发者工具检查着色器编译状态和错误。熟练后可尝试加载OBJ模型、添加光照或纹理。不复杂但容易忽略细节，比如矩阵乘法顺序、坐标系差异、精度限定符等。
