17370845950

WebGL是基于OpenGL ES 2.0的底层图形API，非JavaScript库；需手动编写着色器、管理缓冲区与管线，仅提供gl.drawArrays()等原始绘图函数，无默认相机、场景或几何体抽象。

WebGL 不是 JavaScript 的一个库，而是一套基于 OpenGL ES 2.0 的、运行在浏览器中的底层图形 API；它本身用 C++ 实现，JavaScript 只是调用它的“胶水语言”。想直接画个立方体？你得自己写顶点着色器、传入缓冲区、配置管线、处理矩阵变换——没有封装，没有默认相机，也没有 scene.add(object)。

WebGL 是什么：不是 Three.js，也不是 Canvas 2D

很多人误以为 WebGL 是 Canvas 的一个绘图模式（比如 canvas.getContext('webgl') 就等于“开启 3D”），其实它完全独立于 2D 上下文。它不提供任何几何体、材质、光照抽象，只暴露 GPU 的原始能力：

• gl.drawArrays() 和 gl.drawElements() 是唯二真正“画东西”的函数
• 所有坐标都必须是归一化设备坐标（NDC）范围：x/y/z ∈ [-1, 1]
• 没有内置时间、动画循环或事件系统——requestAnimationFrame 得你自己配
• 着色器代码写在字符串里或 标签中，不是 JS 模块

从零写一个三角形：最小可运行 WebGL 程序

这是绕不开的第一步。只要这个能跑通，你就跨过了环境验证和上下文初始化的门槛。重点不在“画得美”，而在理解数据流向：

const canvas = document.getElementById('gl-canvas');
const gl = canvas.getContext('webgl');
if (!gl) throw new Error('WebGL not supported');
// 顶点数据（3 个点，每个点 2 个 float）
const positions = [0, 0.5, -0.5, -0.5, 0.5, -0.5];
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
// 简单顶点着色器
const vsSource =  attribute vec2 a_position; void main() { gl_Position = vec4(a_position, 0.0, 1.0); } ;
const fsSource =  void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色 } ;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const positionAttrib = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttrib);
gl.vertexAttribPointer(positionAttrib, 2, gl.FLOAT, false, 0, 0);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

常见卡点：

• 忘记调用 gl.enableVertexAttribArray() → 黑屏无报错
• 着色器编译失败但没检查 gl.getShaderParameter(shader, gl.COMPILE_STATUS) → 渲染无声失效
• 没调用 gl.useProgram() → 用的是空程序，啥也不画
• 顶点数组长度不是 3 的倍数（gl.TRIANGLES 要求每 3 个点一组）→ 部分点被丢弃

为什么别急着学 Three.js：它会掩盖关键概念断层

Three.js 抽象掉的东西，恰恰是调试 WebGL 性能和错误时最常查的部分：

• 它自动管理 gl.bindBuffer() 和 gl.vertexAttribPointer()，但你一旦要换用 instanced rendering 或自定义 attribute layout，就得直面这些调用
• 它的 WebGLRenderer 内部做了大量状态缓存（如是否已启用某扩展），而原生 WebGL 每次调用都可能触发 GPU 状态切换开销
• 遇到 INVALID_OPERATION 错误时，Three.js 的堆栈指向内部方法，你得回溯到它生成的着色器和绑定逻辑才能定位
• 加载 GLTF 模型时，Three.js 默认开启 meshopt_decoder、draco_loader 等压缩解码——这些依赖额外的 WASM 模块，出错时控制台报的是 WebAssembly.instantiate(): Out of memory，跟 WebGL 本身无关

下一步建议：用 webgl-debug 和 WebGL Inspector

原生 WebGL 几乎不报有意义的错误。比如传错 gl.UNSIGNED_SHORT 当索引类型，只会静默渲染空白——直到你装上调试工具：

• webgl-debug.js 是一个轻量 wrapper，把所有 gl.* 调用包一层，自动检查 gl.getError() 并抛出带调用栈的异常
• WebGL Inspector 浏览器插件（Chrome/Firefox）可捕获单帧，查看绑定的缓冲区内容、着色器编译日志、纹理上传状态
• 真机调试注意：gl.getParameter(gl.VERSION) 在 iOS Safari 返回 "WebGL 1.0 (OpenGL ES 2.0 Apple A12 GPU - 13.7)"，说明它不支持 WebGL 2 —— 别用 gl.createVertexArray() 这类 WebGL 2 特性

真正的门槛不在语法，而在理解“GPU 不执行 JS，它只按你提交的指令序列执行；而 JS 只负责把指令打包好，塞进驱动队列”。哪一步打包错了，GPU 就不动，也不会告诉你哪里错了。