一文看懂系列--WebGL是什么？

WebGL 是什么？

WebGL 是一种让网页能够使用你电脑或手机显卡来绘制图形的技术。你可以用它在网页上画 2D 或 3D 图形，像是游戏中的画面、动画、网页中的图标等等。

但 WebGL 是一个 底层工具，就像是直接使用工具箱里的一些原材料来做手工，而不是直接给你一个已经做好、易于使用的玩具。使用 WebGL，你需要亲自处理很多细节，像是：

• 你自己去写代码告诉计算机怎么绘制图形。
• 你自己管理所有的资源（例如图像、颜色、纹理等）。

为什么说 WebGL 是底层的？

WebGL 并不像其他的图形库（比如 Three.js 或 PixiJS）那样做了很多“封装”，把复杂的细节隐藏起来，直接提供了一个简单的工具供你使用。你如果直接用 WebGL，就需要自己去控制所有的操作，非常繁琐。

WebGL 和其他图形库有什么区别？

• WebGL 就是基础的工具，像一堆零件，提供了你需要做图形渲染的功能，但你得自己去拼装和管理它们。
• Three.js、PixiJS 等是建立在 WebGL 上的图形库，它们就像是帮你包装好的玩具，使用起来简单很多。你不需要自己处理太多细节，只要告诉它你想要做什么，它们就能帮你自动完成底层的复杂操作。

举个例子：

• WebGL 是一块块原材料，你需要用这些原材料自己做出一个复杂的图形。
• Three.js 是一套工具箱，里面有做图形的模板和工具，你只需要用这些工具来完成工作，不需要自己去做那么多复杂的事情。

总结：

• WebGL 是底层的技术，用它做图形需要写很多代码来处理细节。
• 如果不想处理那么复杂的东西，你可以使用像 Three.js 或 PixiJS 这样的库，它们基于 WebGL，能让你更轻松地创建图形。

补充：

WebGL 并不是一个封装的图形库，而是一个 低级的图形 API（应用程序接口）。它直接提供了与浏览器中图形硬件（通常是 GPU）的交互接口，使开发者能够在网页上渲染图形、执行计算和处理图像数据。

WebGL 是低级别的 API

• 低级 API：WebGL 提供的是直接与 GPU 通信的底层功能，而不是像某些图形库（例如 Three.js 或 PixiJS）那样提供更高级别的抽象和封装。
• 无状态管理：WebGL 的操作需要开发者手动管理状态和资源（如缓冲区、着色器、纹理等），并且需要开发者自己处理渲染管线中的各个阶段（顶点处理、光栅化、片段处理等）。
• 与 OpenGL ES 2.0 兼容：WebGL 是 OpenGL ES 2.0 的 JavaScript 实现，因此它本质上提供了一个接口，使得开发者能够通过浏览器使用 OpenGL ES 2.0 的图形功能。

WebGL 的特点

• 直接访问硬件：WebGL 允许开发者直接与显卡交互，进行 2D 或 3D 渲染。通过 WebGL，开发者可以创建复杂的图形效果，但需要手动设置每个细节。
• 基于着色器：WebGL 使用顶点着色器和片段着色器（基于 GLSL 语言）来控制渲染的过程，开发者需要自己编写着色器代码。
• 显式的资源管理：WebGL 需要开发者显式地管理图形资源（如缓冲区、纹理、着色器程序等），并对这些资源进行手动分配和清理。

WebGL 与封装库的区别

虽然 WebGL 本身是一个低级 API，但很多开发者并不希望直接与底层的图形管线打交道，因此出现了许多基于 WebGL 的 封装图形库，这些库提供了更高层次的抽象，简化了开发过程。

例如：

• Three.js：是一个非常流行的基于 WebGL 的 3D 图形库，它封装了 WebGL 的复杂操作，提供了易于使用的 API，开发者可以更简单地创建 3D 场景、光照、相机、材质和动画等，而不需要直接操作 WebGL。

• PixiJS：是一个基于 WebGL 的 2D 图形渲染库，主要用于创建高效的 2D 图形和游戏开发，它提供了比 WebGL 更为简单的接口。

这些封装库通常会：

• 提供更友好的 API。
• 自动处理 WebGL 的初始化和配置。
• 封装底层的绘制和状态管理逻辑。
• 简化着色器和纹理管理。