跳到主要内容

WebGL

WebGL（Web Graphics Library）是一个 Web 标准 JavaScript API，API可以在HTML <canvas> 元素中使用，即可在浏览器中渲染高性能的交互式 3D 和 2D 图形

  • WebGL 是基于 OpenGL 的。OpenGL(Open Graphics Library) 是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口，常用于CAD、虚拟现实、科学可视化程序和电子游戏开发
  • WebGL 性能高的原因是它使用到了 GPU。GPU 和 CPU 针对的是两种不同的应用场景

OpenGL​

  • WebGL 基于 OpenGL，是 OpenGL 的子集。WebGL1 基于 OpenGL ES 2.0。WebGL2 基于 OpenGL ES 3.0

OpenGL ES 2.0（OpenGL for Embedded Systems）

  • OpenGL ES是为嵌入式系统设计的OpenGL版本，而WebGL将其嵌入到了Web浏览器中，以实现在浏览器中进行高性能的3D图形渲染。

嵌入式系统是专门设计和定制的计算机系统，用于执行特定的任务，并被嵌入到其他设备或系统中

GPU和CPU在应用场景​

GPU（图形处理器）：

  • 专注于并行计算和图形渲染。
  • 拥有大量的并行处理单元，可以同时执行多个任务。
  • 设计用于处理向量和矩阵运算，针对图形渲染进行了优化。
  • 具有专门的纹理单元和采样器，用于高效处理图像数据。
  • 在处理大规模并行图形计算方面具有高效能力。

CPU（中央处理器）：

  • 用于通用目的的序列计算。
  • 拥有较少的处理单元，但处理能力较强。
  • 设计用于处理单个任务和复杂的控制流程。
  • 用于执行各种通用计算任务，包括操作系统管理和应用程序运行等。
  • 在处理顺序计算和复杂控制流程方面具有高效能力

获取渲染上下文​

使用 WebGL 的方式和 canvas 2d 类似，都是通过 getContext 方法获取渲染上下文

javascript
const canvas = document.createElement('canvas')
const gl = (
  canvas.getContext('webgl2') ||
  canvas.getContext('webgl') ||
  canvas.getContext('experimental-webgl')
)

按照 webgl2、webgl、experimental-webgl 的顺序获取 WebGL 渲染上下文。webgl2 是最新版本，它几乎完全兼容 WebGL1。experimental-webgl 用来兼容老浏览器，如 IE 11

坐标系​

WebGL 中有一个 Z 轴。Z 轴有两种形式，一种是正值朝外，另一种是正值朝内

  • 坐标系

当 Z 轴正值朝外时，我们称为右手坐标系，当 Z 轴正值朝内时称为左手坐标系。可以伸出双手像下图一样比划下，就知道为什么称为左手坐标系和右手坐标系了

  • WebGL使用右手坐标系

着色器​

WebGL使用着色器来控制图形的绘制过程

WebGL需要两种着色器

text
* 顶点着色器（Vertex shader）：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。**顶点(Vertex)** 是指二维或三维空间的一个点，比如二维或三维空间线与线之间的交叉点或者端点。

。顶点着色器处理输入的顶点数据，例如顶点位置和颜色，并将它们转换为标准化设备坐标

  • 片元着色器（Fragment shader）：进行逐片元处理过程（如光照等）的程序。 片元(fragment) 是一个WebGL的术语，你可以将其理解成像素。

片元着色器处理每个像素的颜色和其他属性，并返回最终的像素颜色。