这是我参加「第五届青训营」伴学笔记创作活动的第 16 天
初识 webGL
-
GPU ≠ WebGL ≠ 3D
-
Modern Graphics System
- 光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
- 像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
- CPU（Central Processing Unit）：中央处理单元，负责逻辑计算
- GPU（Graphics Processing Unit）：图形处理单元，负责图形计算
1、轮廓提取 / meshing
2、光栅化
3、帧缓存
4、渲染
-
The Pipeline
- Data → Processor → Frame buffer → Pixels
-
GPU vs CPU
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
-
WebGL的本质
-
这里也有一个很形象的比喻帮助大家理解这个问题，大家可以认为 WebGL 是一套复杂的电路。我们将其中的一些变量连接起来，然后为其加上电源，那么 WebGL 就可以正常的工作起来了。
-
渲染管线：所谓的渲染管线，实际上就是渲染过程流水线，指的不是具体某一样东西，而是一个流程。因为渲染管线的流程中总是将上一步的结果作为下一步的输入，就像水管一样接起来，管线的名字也因此得来。
-
顶点着色器（可编程）：首先通过顶点着色器，确定我们设置的顶点位置
-
图元装配：gl.drawArray 方法会指定图元装配的方式（点、线、三角形），根据我们设定的装配方式将其组装成我们想要的基本图形
-
光栅化：实际上就是一个将上一步装配好的图形用像素来表示的一个过程
-
片元着色器（可编程）：光栅化完成后，每个像素的片元都会执行片元着色器中的程序，得到最后的颜色值
-
测试与混合：这一阶段主要是 WebGL 内部进行了一些模版测试、深度测试，最后再与上一帧的数据进行混合。
-
-
-
webGL Startup
- 创建 webGL 上下文
- 创建 webGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到 GPU
- GPU执行 webGL 程序，输出结果
-
Create WebGL Context
-
The Shaders
- Vertex Shader
- Fragment Shader
-
Create Program
-
Data to Frame Buffer
-
Frame Buffer to GPU
-
Output
-
3D Matrix
- 投影矩阵 Projection Matrix
- 模型矩阵 Model Matrix
- 视图矩阵 View Matrix
- 法向量矩阵 Normal Matrix
小结
WebGL 绘制图形绘制图形的方式不是命令式的，而是连接式的。我们通过 WebGLRenderingContext 这个上下文将外部的变量与 GPU 内部的 shader 程序发生了联系。渲染管线就可以通过 shader 运行出我们想要的结果，大家需要掌握的重难点就在于如何向 WebGL 中传入各种类型的数据。
