WebGL是浏览器提供的底层GPU渲染接口，本质为OpenGL ES 2.0的JavaScript绑定；Three.js是封装其的高层库，隐藏顶点缓冲、着色器等细节。
WebGL 是什么，和 Three.js 有什么区别？
WebGL 不是 JavaScript 的一个库或内置 API，而是浏览器提供的底层图形渲染接口，本质是 OpenGL ES 2.0 的 JavaScript 绑定。它直接操作 GPU，需要你手动管理顶点缓冲、着色器编译、矩阵变换等细节。Three.js 这类库才是封装 WebGL 的高层工具——它用 Mesh、Scene、Camera 等对象隐藏了大量底层逻辑。
如果你刚接触 3D，别直接写原生 WebGL；但若需要极致控制（比如自定义光照模型、粒子系统优化），绕不开 gl.drawArrays 和 gl.shaderSource 这些调用。
如何获取并验证 WebGL 上下文？
核心是调用 canvas.getContext('webgl') 或兼容旧版的 getContext('experimental-webgl')。返回 null 表示失败，常见原因包括：浏览器禁用硬件加速、集成显卡驱动过旧、Canvas 尚未插入 DOM。
const canvas = document.getElementById('gl-canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (!gl) {
console.error('WebGL not supported in this browser.');
return;
}
console.log('WebGL version:', gl.getParameter(gl.VERSION)); // 输出类似 "WebGL 1.0 (OpenGL ES 2.0 Chromium)"
- 务必检查
gl是否为null，否则后续所有gl.xxx()调用都会报TypeError -
gl.getParameter(gl.VERSION)比检查用户代理更可靠，能确认实际启用的是 WebGL 1 还是 WebGL 2 - 某些企业内网环境会强制禁用 WebGL，需提前在目标环境中验证
最简 WebGL 渲染循环包含哪些必要步骤？
一个能跑起来的最小闭环必须完成：清屏 → 绑定缓冲区 → 编译并使用着色器 → 设置顶点属性指针 → 执行绘制 → 请求下一帧。漏掉任一环节（比如忘记调用 gl.useProgram）就会黑屏且无报错。
立即学习“Java免费学习笔记（深入）”；
function render() {
gl.clearColor(0.0, 0.0, 0.2, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLoc);
gl.drawArrays(gl.TRIANGLES, 0, 3); // 绘制 3 个顶点组成的三角形
requestAnimationFrame(render);
}
-
gl.enableVertexAttribArray必须在gl.vertexAttribPointer后调用，否则顶点数据不会被读取 - 着色器编译失败时，
gl.getShaderParameter(shader, gl.COMPILE_STATUS)返回false，但不会抛异常，需主动检查 -
requestAnimationFrame比setTimeout更适合渲染，它与屏幕刷新率同步，避免丢帧或过度绘制
为什么着色器代码要写成字符串再编译？
WebGL 的顶点着色器（Vertex Shader）和片元着色器（Fragment Shader）是运行在 GPU 上的 C-like 代码，JavaScript 无法直接执行它们。你得把源码作为字符串传给 gl.shaderSource，再调用 gl.compileShader 让浏览器驱动将其编译为 GPU 指令。
这个过程不透明，出错只返回布尔值，必须手动提取日志：
function checkShaderCompile(shader) {
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Shader compile error:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
}
}
- 着色器里的语法错误（比如少个分号、类型不匹配）不会在 JS 控制台报错，只会静默失败
- WebGL 1 不支持
in/out关键字，必须用attribute（顶点）和varying（插值），这是初学者最容易写错的地方 - 调试时建议先用固定颜色输出（如
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);），确认管线通了再加纹理或光照
真正难的不是写几行 gl.drawArrays，而是理解 GPU 流水线中每个阶段的数据流向和状态依赖。哪怕只是改一个 gl.viewport 参数，也可能让整个画面偏移或裁剪异常——这种问题往往没有明确报错，只能靠逐段注释+观察输出来定位。
