WebGL和图形引擎
WebGL 是基于 OpenGL ES 标准发展出来的一种在浏览器中实现硬件加速的 3D 图形渲染技术。 目前 WebGL/WebGL2 已经是主流浏览器的基础组件了，利用 HTML5 的 canvas 标签就可以在网页上显示和操作三维图形。 使得图形引擎的开发环境异常简单，只需要一个编辑器和一个浏览器，不用再安装什么乱七八糟的库了。
WebGL 是科纳斯组织(Khronos)维护的。最早在2009年的时候科纳斯建立了 WebGL 的工作小组， 于 2011 年基于 OpenGL ES 2.0 发布了 WebGL 1.0 的标准。后续在 2017 年基于 OpenGL ES 3.0 发布了 WebGL 2.0。
- 官方标准: https://www.khronos.org/webgl/
- webgl api: https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API
- webgl Fundamentals: https://webglfundamentals.org/
- webgl2 Fundamentals: https://webgl2fundamentals.org/
- threejs: https://threejs.org/
- babylonjs: https://www.babylonjs.com/
2025 年，我们打算啃一遍计算几何 in C。 考虑到需要一个图形库来辅助理解一些概念，所以就想到了这个 16 年就想挖的坑。 相关的封装我们将放到 XiaoTuWebglBox 中。
第一部分：入门例程和基本概念
应用 WebGL 渲染图形的时候，需要提供两段渲染程序分别称为顶点渲染器 vertex shader 和 片元着色器 fragment shader。 大体上顶点渲染器用于计算点坐标，片元着色器用于计算颜色。基本上 WebGL 的 API 都是在设定各种状态，然后让 GPU 运行这两渲染程序完成渲染。
| Hello WebGL | 本文主要介绍浏览器的调试界面，如何通过 javascript 获取 canvas 对象，并构建 webgl 上下文。 在此基础上，我们封装了一些接口，用于加载着色器，搬运数据，给着色器中的变量赋值，最终在一个黑色背景上画了一个三角形。 |
| 顶点缓冲对象 VBO | VBO 是 OpenGL 中用于存储顶点数据的缓冲区对象。包括了顶点的位置、颜色、法线、纹理坐标等信息。 实现了数据从 CPU 到 GPU 的一次搬运重复使用的功能，可以提高渲染效率。 |
| 顶点数组对象 VAO | VAO 存储顶点属性状态，管理如何从 VBO 中读取和使用这些数据。 不幸的是基于 OpenGL ES 2.0 的 WebGL 并没有 VAO 的概念。基于 OpenGL ES 3.0 的 WebGL2 才有它。本文先基于 WebGL2 浅尝一下 VAO 的使用。 |
第二部分：进入 3D 世界
在计算机图形学中，人们通常通过模型(Model)、视图(View)、投影(Project) 三个矩阵将场景中的物体的三维空间坐标空间转换到屏幕显示的二维图像坐标中。 人们把三个矩阵简称为 MVP。
| M · 模型的位姿矩阵 | 模型的位姿矩阵(Model Matrix) 建立了模型的局部坐标系与场景的世界坐标系之间的联系 (Local Space --> World Space)。通过对物体进行平移、旋转、缩放的变换， 将物体放置到场景中合适的位置上。 |
| V · 相机的视角矩阵 | 相机的视角矩阵(View Matrix) 建立了场景的世界坐标系与相机的观察坐标系之间的联系 (World Space --> View Space)。它实际描述的是相机在世界坐标下的位置和姿态， 相当于相机的外参。 |
| P · 光栅的投影矩阵 | 光栅的投影矩阵(Projecto Matrix) 描述了观察坐标系下各个顶点进入光栅化的切片空间的映射关系 (View Space --> Clip Space)。 可以理解成按下快门那一刻在胶卷上的投影过程，相当于相机的内参。 |