这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天。
本篇笔记是对今天青训营的录播课WebGL月影带练课程的归纳总结及个人感悟。
什么是WebGL？
- WebGL（Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染
- 这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化
- WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
一， Modern Graphics System
- 光栅（raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，关山就是指构成图形的像素阵列。
- 像素（pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存（frame buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
- CPU（central processing unit）：中央处理单元，负责逻辑计算。
- GPU（graphics processing unit）：图形处理单元，负责图形计算。
轮廓提取→CPU→光栅化→GPU→帧缓存→渲染到用户界面
- 轮廓提取/meshing
- 光栅化
- 帧缓存
- 渲染
二，The Pipeline
Data → Processor → Frame buffer → Pixels
三，CPU vs GPU
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
四，WebGL Startup
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓存区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序、输出结果
过程一览
- raw vertices & primitives
- → vertex processor(programmable)
- → transformed vertices & primitives
- → rasterizer
- → fragments
- → fragment processor(programmable)
- → processed fragments
- → output merging
- → pixels
五， Polygons
- polygons：凸/凹多边形，复杂多边形
- triangulations
六，3D Matrix
3D标准模型的四个齐次矩阵（mat4）
- 投影矩阵 projection matrix
- 模型矩阵 model matrix
- 视图矩阵 view matrix
- 法向量矩阵 normal matrix
