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得你自己配 - 着色器代码写在字符串里或
<script type="x-shader/x-vertex">标签中，不是 JS 模块
从零写一个三角形：最小可运行 WebGL 程序
这是绕不开的第一步。只要这个能跑通，你就跨过了环境验证和上下文初始化的门槛。重点不在“画得美”，而在理解数据流向：
const canvas = document.getElementById('gl-canvas');
const gl = canvas.getContext('webgl');
if (!gl) throw new Error('WebGL not supported');
<p>// 顶点数据（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);</p><p>// 简单顶点着色器
const vsSource = <code> attribute vec2 a_position; void main() { gl_Position = vec4(a_position, 0.0, 1.0); } </code>;
const fsSource = <code> void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色 } </code>;</p><p>const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);</p><p>const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsSource);
gl.compileShader(fragmentShader);</p><p>const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);</p><p>const positionAttrib = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttrib);
gl.vertexAttribPointer(positionAttrib, 2, gl.FLOAT, false, 0, 0);</p><p>gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);常见卡点：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“Java免费学习笔记（深入）”；
- 忘记调用
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 就不动，也不会告诉你哪里错了。
