WebGL

一、WebGL 的底层执行链路

完整的调用流程可以梳理为：

开发者编写 JS 代码 → 调用浏览器暴露的 WebGL API → 渲染进程解析 WebGL 指令 → 浏览器将指令转换为系统图形接口（Direct3D/Metal/OpenGL） → 系统图形驱动调用 GPU → GPU 完成图形渲染 → 渲染结果返回给浏览器 → 浏览器将画面绘制到 <canvas> 并展示给用户

1. WebGL 不属于 JavaScript，仅为 JS 提供可调用的渲染接口，JS 仅负责传递指令。
2. WebGL 的核心是浏览器内核内置的图形渲染实现，是 “接口层” 而非 “语言”。
3. JS 不会直接与 GPU 交互，存在多层 “中转”。
   JS 本身运行在浏览器的渲染进程主线程，没有直接操作 GPU 的权限和能力，数据 / 指令传递是一个 “逐级转发” 的过程。

二、非 WebGL 和 WebGL参与下 渲染的区别

即使不主动使用 WebGL，现代浏览器也会大量依赖 GPU 进行渲染，二者的区别在于 GPU 参与的渲染阶段和调用方式不同。

本质差异：“黑盒加速” vs “可编程渲染”

• 非 WebGL 场景：GPU 是浏览器的 “幕后优化工具”，渲染逻辑由浏览器内核封装，开发者只能通过 CSS 属性（如 will-change: transform 手动创建图层）间接引导，无法直接操作 GPU 的渲染管线。
• WebGL 场景：开发者通过 WebGL API 直接接管 GPU 的渲染管线，可以自定义顶点着色器、片元着色器，实现 GPU 对顶点变换、像素着色的全流程计算，这是浏览器自动渲染无法做到的。

总结

• 不使用 WebGL 时，GPU 确实在工作，但仅负责 浏览器主导的图层合成和部分绘制加速，属于 被动的黑盒优化；
• 使用 WebGL 时，GPU 是 开发者主导的渲染核心，负责从顶点处理到像素输出的全流程计算，属于 主动的可编程渲染。

三、定型数组

在JS和WebGL 传递数据中，定型数组是重要的数据结构。js原来的数据结构中处理交互数据比较麻烦，es5后面就设计了 定型数组数据结构。