基本图形概念

WebGL - 基本图形概念

在深入了解 WebGL 代码之前，掌握一些计算机图形学的基本概念至关重要，这些概念是 WebGL 运作方式的基础。

渲染 (Rendering)

渲染 是使用计算机程序从 2D 或 3D 模型或场景描述创建 2D 图像的整个过程。可以把它想象成在现实世界中拍照，但这是通过数字方式完成的。

• 几何体 (Geometry)： 物体的形状，通常由顶点 (vertices) 和图元 (primitives)（点、线、三角形）定义。
• 材质/纹理 (Materials/Textures)： 物体表面的外观（颜色、光泽度、图像图案）。
• 光照 (Lighting)： 关于场景中光源的信息（位置、颜色、强度、类型）。
• 摄像机/视点 (Camera/Viewpoint)： 正在查看场景的位置和方向。
• 着色模型 (Shading Model)： 定义光与材质如何相互作用以生成最终颜色的规则。

输出是数字图像，本质上是一个具有特定颜色值的像素网格。

硬件渲染 vs. 软件渲染 (Hardware vs. Software Rendering)

• 软件渲染 (Software Rendering)： 所有渲染计算（变换、着色、光栅化）都由主中央处理器 (CPU) 执行。这种方式灵活，但对于复杂实时图形可能很慢。
• 硬件渲染 (Hardware Rendering)： 大多数渲染计算被卸载到专用芯片，即图形处理器 (GPU)。GPU 专为图形所需的大规模并行计算而设计，提供显著的性能提升。WebGL 专门使用硬件渲染。

客户端渲染 (Client-Side Rendering)

WebGL 执行客户端渲染。这意味着渲染过程发生在用户的 Web 浏览器中，利用用户自己的 CPU 和 GPU。Web 服务器主要提供 HTML、CSS、JavaScript 代码和资源（如纹理），但实际图像生成发生在本地客户端机器上。

GPU (Graphics Processing Unit)

GPU 是一种专用处理器，针对并行计算（尤其是图像渲染中涉及的任务）进行了优化。CPU 设计用于通用顺序任务，而 GPU 擅长同时对大量数据执行相同的操作。

• 大规模并行性 (Massive Parallelism)： 包含数百或数千个较小的处理核心，相比之下，CPU 只有几个强大的核心。
• 高内存带宽 (High Memory Bandwidth)： 专为快速访问专用显存 (VRAM) 而设计，图形数据（纹理、缓冲区）存储在这里。
• 专用硬件 (Specialized Hardware)： 包括针对特定图形任务（如纹理采样、光栅化、混合）优化的固定功能单元。
• 可编程核心 (Programmable Cores)： 执行用户提供的着色器程序（在 WebGL 中是顶点着色器和片段着色器）。

可以把 CPU 想象成一个管理器，一个接一个地处理复杂多样的任务，而 GPU 则像一群工人，同时执行相同的简单任务（例如计算像素的颜色）。

GPU 加速计算 (GPU Accelerated Computing)

指利用 GPU 加速应用程序中计算密集型且适合并行处理的部分。在 WebGL 中：

• CPU（运行 JavaScript）管理整个应用程序逻辑，准备数据，配置渲染状态，并告诉 GPU 绘制什么。
• GPU 执行绘制命令，运行顶点着色器来变换几何体，运行片段着色器来计算像素颜色，利用其并行架构来提高速度。

高效的 WebGL 编程涉及构建应用程序以有效利用这种分工：

• 最大化减少 CPU-GPU 数据传输： 将静态数据（几何体、纹理）一次性上传到 GPU 缓冲区/纹理中并重复使用。
• 优化着色器： 编写高效的 GLSL 代码，因为它运行于每个顶点以及每帧可能数百万个像素上。
• 批量绘制调用 (Batch Draw Calls)： 将类似对象的渲染进行分组，以减少更改 WebGL 状态的开销。

数据必须通过 WebGL 缓冲区命令（gl.bufferData）显式地从 CPU 主存传输到 GPU 专用内存 (VRAM)，然后 GPU 才能处理它。