WebGL
初识WebGL
Why WebGL / Why GPU？
-
WebGL 是什么？
- GPU ≠ WebGl ≠ 3D
-
WebGL 为什么不像其他前端技术那么简单？
Modern Graphics System
- 光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列
- 像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息
- 帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址
- CPU（Central Processing Unit）：中央处理单元，负责逻辑计算
- GPU（Graphics Processing Unit）：图形处理单元，负责图形计算
- 轮廓提取 / meshing
- 光栅化
- 帧缓存
- 渲染
The Pipeline
CPU vs GPU
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
WebGL & OpenGL
web.eecs.umich.edu/~sugih/cour…
WebGL Startup
- 创建 WebGL 上下文
- 创建 WebGL Program
- 将数据存入缓存区
- 将缓存区数据读取到 GPU
- GPU 执行 WebGL 程序，输出结果
Create WebGL Context
The Shaders
- Vertex Shader
2. Fragment Shader
Create Program
Data to Frame Buffer
Frame Buffer to GPU
Mesh.js
2D：mesh.js：
Polygons
Draw Polygon with 2D Triangulations
使用 Earcut 进行三角部分 github.com/mapbox/earc…
3D Meshing
Transforms
平移：
旋转：
缩放：
旋转+缩放是线性变换从线性变换到齐次矩阵
Apply Transforms
3D Matrix
3D 标准模型的四个齐次矩阵（mat4）
- 投影矩阵 Projection Matrix
- 模型矩阵 Model Matrix
- 视图矩阵 View Matrix
- 法向量矩阵 Normal Matrix
Read more
- The book of shaders thebookofshaders.com/
- Mesh.js github.com/mesh-js/mes…
- glsl-doodle doodle.webgl.group/
- SpriteJS spritejs.com/#/
- ThreeJS threejs.org/
- ShaderToy www.shadertoy.com/
- 稀土掘金 juejin.cn/column/7100…
