WebGL - 简介
WebGL - 简介
Section titled “WebGL - 简介”从历史上看，在 Web 浏览器中渲染硬件加速的 3D 图形曾面临重大挑战。早期的尝试涉及浏览器插件，如 Java 小程序（使用 JOGL）或 Adobe Flash（使用 Stage3D/ActionScript）。虽然这些技术具有能力，但它们需要外部插件、面临安全问题，并且不是开放的 Web 标准，最终逐渐失宠。
对一种标准化、无需插件的方式来直接从 JavaScript 访问图形处理器 (GPU) 的强大能力的需求，催生了 WebGL 的发展。
OpenGL 和 OpenGL ES
Section titled “OpenGL 和 OpenGL ES”WebGL 建立在 OpenGL (开放图形库) 奠定的基础之上。
- OpenGL: 一个历史悠久、跨平台、与语言无关的 API 规范，用于渲染 2D 和 3D 矢量图形。它为应用程序与图形硬件 (GPU) 交互提供了一种标准化方式。现代版本（如 OpenGL 4.6）为高端桌面图形提供了广泛的功能。
- OpenGL ES (OpenGL for Embedded Systems): OpenGL 规范的一个子集，专为嵌入式设备设计，如手机、平板电脑、游戏机和汽车。它在保留核心 3D 渲染能力的同时，优先考虑效率和更小的占用空间。OpenGL ES 由 Khronos Group 维护。
WebGL 直接基于 OpenGL ES，这使得图形代码有可能在原生移动应用和 Web 应用之间移植。
WebGL 是什么？
Section titled “WebGL 是什么？”WebGL (Web Graphics Library) 是一个 JavaScript API，它允许 Web 开发者直接在 HTML 的 <canvas> 元素中创建实时、硬件加速的 2D 和 3D 图形，而无需浏览器插件。
- 基于 OpenGL ES: WebGL 1.0 基于 OpenGL ES 2.0，而 WebGL 2.0 基于 OpenGL ES 3.0。这提供了与 GPU 交互的低级接口。
- GPU 加速: 它利用计算机的显卡进行渲染，从而实现复杂的场景和效果，这些效果对于基于 CPU 的渲染来说会太慢。
- 与 Web 标准集成: 与 HTML、CSS 以及其他 JavaScript API 和框架无缝协作。
- 基于着色器: 严重依赖于在 GPU 上运行的可编程着色器（用 GLSL - OpenGL 着色语言编写），以控制顶点位置和像素颜色，提供了极大的灵活性。
WebGL 本身是一个相对低级的 API。虽然强大，但直接使用 WebGL 进行编程可能会很冗长。许多开发者会利用更高级的库，如 Three.js、Babylon.js 或 PlayCanvas，这些库简化了场景管理、对象加载、材质和其他常见任务，同时底层仍然使用 WebGL。
WebGL 源于 Mozilla 的 Vladimir Vukićević 在 2006-2007 年左右进行的实验，旨在将 OpenGL 能力引入 canvas 元素。这促成了 Khronos Group（与管理 OpenGL 和 OpenGL ES 的同一联盟）内部 WebGL 工作组的成立。
- WebGL 1.0: 规范于 2011 年 3 月发布，基于 OpenGL ES 2.0。
- WebGL 2.0: 规范于 2017 年 1 月发布，基于 OpenGL ES 3.0，带来了许多改进和新功能。
WebGL 在现代桌面和移动浏览器中享有广泛支持。对 WebGL 2.0 的支持也很普遍，但可能需要稍新的硬件/驱动。
桌面浏览器（截至 2020 年代初期的普遍状态）：
Section titled “桌面浏览器（截至 2020 年代初期的普遍状态）：”| 浏览器 | WebGL 1.0 支持 | WebGL 2.0 支持 |
|---|---|---|
| Google Chrome | Yes | Yes |
| Mozilla Firefox | Yes | Yes |
| Apple Safari (macOS) | Yes | Yes (v15+) |
| Microsoft Edge (Chromium-based) | Yes | Yes |
| Opera | Yes | Yes |
移动浏览器（截至 2020 年代初期的普遍状态）：
Section titled “移动浏览器（截至 2020 年代初期的普遍状态）：”| 浏览器 | WebGL 1.0 支持 | WebGL 2.0 支持 |
|---|---|---|
| Chrome for Android | Yes | Yes (on capable devices) |
| Safari (iOS) | Yes | Yes (iOS 15+) |
| Firefox for Android | Yes | Yes (on capable devices) |
| Samsung Internet | Yes | Yes (on capable devices) |
注意：具体版本和设备能力很重要。您可以访问 caniuse.com 等网站获取最新的支持详情。
WebGL 的优势
Section titled “WebGL 的优势”- 无需插件: 在浏览器中原生运行，无需用户安装额外软件。
- 硬件加速: 利用 GPU 进行渲染，相比基于 CPU 的方法显著更快。
- 跨平台: 通过支持的浏览器，在各种操作系统（Windows、macOS、Linux、Android、iOS）上工作。
- 开放标准: 由 Khronos Group 开发和维护，是一个免版税标准。
- JavaScript 集成: 作为 JavaScript API，它可以与 HTML、CSS、DOM 操作、Web Workers、Web Audio 和其他 Web 技术无缝集成。
- 庞大的生态系统: 由众多高级库和框架（Three.js、Babylon.js 等）支持，这些库和框架简化了开发。
- 用途广泛: 适用于游戏、数据可视化、科学模拟、创意编程、产品配置器、虚拟/增强现实体验等。
除了拥有一个支持 WebGL 的现代 Web 浏览器以及用于编写 HTML、CSS 和 JavaScript 的文本编辑器外，无需特殊设置。
要检查您的浏览器是否支持 WebGL，您可以访问诸如 get.webgl.org 的诊断网站。