这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天
课程介绍
- 初识WebGL
- WebGL是什么？
- 架构设计
- Modern Graphics System
- The Pipeline
- CPU vs GPU
- WebGL&OpenGL
- WebGL Startup
- The Shaders
- 3D Meshing
- Transforms
- 3D Matrix
- Read more
初识WebGL
WebGL是什么？
- GPU！=WebGL!=3D
- WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
架构设计
WebGL1.0基于OpenGL ES 2.0，并提供了3D图形的API。它使用HTML5Canvas并允许利用文档对象模型接口。WebGL 2.0基于OpenGL ES 3.0，确保了提供许多选择性的WebGL 1.0扩展，并引入新的API。可利用部分Javascript实现自动存储器管理。
Modern Graphics System
- 光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列
- 像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息
- 帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址
- CPU（Central Processing Unit）：中央处理单元，负责逻辑计算
- GPU（Graphics Processing Unit）：图形处理单元，负责图形计算
- 轮廓提取/meshing
- 光栅化
- 帧缓存
- 渲染
The Pipeline
CPU vs GPU
- CPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
WebGL&OpenGL
WebGL Startup
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
The Shaders
- Vertex Shader
- Fragment Shader
3D Meshing
Transforms
3D Matrix
3D标准模型的四个齐次矩阵（mat4）
- 投影矩阵Projection Matrix
- 模型矩阵Model Matrix
- 视图矩阵View Matrix
- 法向量矩阵Normal Matrix
Read more
- The book of shaders
- Mesh.js
- glsl-doodle
- SpriteJS
- ThreeJS
- ShaderToy
- 稀土掘金
引用参考
字节青训营第十六节课WebGL月影带练
