这是我参与「第四届青训营 」笔记创作活动的的第21天

WebGL是什么

1 GPU ≠ WebGL ≠ 3D

2 现代图像系统

• 基本概念
  • 光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列
  • 像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息
  • 帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址
  • CPU（Center Processing Unit）：中央处理单元，负责逻辑计算
  • GPU（Graphics Processing Unit）：图形处理单元，负责图形计算
• 图像渲染到计算机屏幕上的过程
  1. 轮廓提取/meshing
  2. 光栅化
  3. 帧缓存
  4. 渲染

3 CPU vs GPU

• CPU：一个核心类似于一个管道，一个管道可以执行很复杂的一些操作
• GPU：由大量小运算单元构成，每个运算单元只负责很简单的计算，每个运算单元彼此独立，因此所有计算都可以并行处理

WebGL起步

1 安装WebGL

1. 创建WebGL上下文
2. 创建WebGL Program
3. 将数据存入缓冲区
4. 将缓冲区数据读取到GPU
5. GPU执行WebGL程序，输出结果

2 WebGL中的坐标系

• 默认x、y、z轴，最小是-1，最大是1

3 2D vs WebGL

• 绘制三角形
• 绘制多边形
• 位移
• 3D标准模型的四个齐次矩阵
  • 投影矩阵 Projection Matrix：用来处理坐标，最大值最小值，方向等等
  • 模型矩阵 Model Matrix：模型顶点做线性变化，位置、大小、旋转等等
  • 视图矩阵 View Matrix：改变摄像机位置来解决模型矩阵的一些难题
  • 法向量矩阵 Normal Matrix：模拟光照效果

阅读更多