掌握WebGL需先获取canvas上下文，再创建着色器、编译链接程序，接着传入顶点数据到缓冲区并关联attribute，设置uniform变量，构建MVP矩阵实现3D变换，最后调用绘图命令完成渲染。
想用JavaScript和WebGL做三维图形开发？核心是理解WebGL的底层机制和如何通过JavaScript控制GPU。它不依赖第三方库，直接操作显卡，适合需要高性能或自定义渲染逻辑的项目。虽然Three.js这类库更易上手，但掌握原生WebGL能让你真正掌控图形管线。
WebGL基础与上下文获取
WebGL本质是OpenGL ES 2.0在浏览器中的实现，通过元素运行。第一步是获取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中加载、编译并链接着色器：
本文档说的是unity3D中shader相关的一些知识；在shader编程中，有一些术语，有时候不明白的话容易被整懵圈，所以这里就简单提一下。Shading最开始指的在素描中给物体画明暗调子，在图形学中，其实就是给Mesh上色（Mesh就是一堆三角面片，包含顶点左边，法线坐标，uv坐标之类的），wiki中说的是根据物体相对于光线的角度及其距离光源距离改变物体颜色生成photorealistic效果的过程。我们所编写的处理shading的程序就叫做shader，中文叫着色器，程序的输入是颜色，纹理，坐标等等
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模型、添加光照或纹理。不复杂但容易忽略细节，比如矩阵乘法顺序、坐标系差异、精度限定符等。
