这是我参与「第五届青训营 」伴学笔记创作活动的第 十六 天
16. 初始WebGL
Why WebGL / Why GPU?
- WebGL是什么？
- WebGL为什么不像其他前端技术那么简单？
Modern Graphics System
The Pipeline
CPU vs GPU
WebGL & OpenGL
web.eecs.umich.edu/~sugih/cour…
WebGL Startup
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
Create WebGL Context
The Shaders
Create Program
Data to Frame Buffer
Frame Buffer to GPU
Output
WebGL
Mesh.js
github.com/mesh-js/mes… code.juejin.cn/pen/7119692… code.juejin.cn/pen/7119692…
Polygons
Draw Polygon with 2D Triangulations
3D Meshing
Transforms
Apply Transforms
3D Matrix
3D标准模型的四个齐次矩阵（mat4）
- 投影矩阵 Projection Matrix
- 模型矩阵 Model Matrix
- 视图矩阵 View Matrix
- 法向量矩阵 Normal Matrix
Read more
thebookofshaders.com/ github.com/mesh-js/mes… doodle.webgl.group/ spritejs.com/#/ threejs.org/ www.shadertoy.com/ juejin.cn/column/7100…
掘金课程代码
code.juejin.cn/pen/7199169… code.juejin.cn/pen/7199177… code.juejin.cn/pen/7199182… code.juejin.cn/pen/7199186… code.juejin.cn/pen/7199187…
