WebGL月影带练 — 青训营笔记

44 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天

一、初识WebGL

运用GPU能力的线缆技术

f9def32e61eaa71b64e15bf07397852.png

基于光栅绘制图形

cbfe1576d64c4fde68b4496c67df5ed.png

二、图形是如何绘制的

b95efe328e608b81217420736cbddd0.png

渲染过程 生成 缓冲 印刷

568b52fa3f6ed855d22a9c1c99e4c6a.png

三、CPU vc GPU

53370a2ea305d1afb1b324fa0b25d75.png

5f10caac961bea9fab09cce53838909.png

四、WebGL & OpenGL

OpenGL家族成员 b8b7149495b043af5e94df8856cbf8b.png

五、WebGL Startup

  1. 创建 WebGL 上下文
  2. 创建 WebGL Program
  3. 将数据存入缓冲区
  4. 将缓冲区数据读取到 GPU
  5. GPU 执行 webGl 程序,输出结果 c84601221ce679fe521052bdf83d345.png

绘图 跪了 太复杂 02c1e3207ae5f6842d521af8b1e7534.png

Create WebGL Context

a6e53fd957b6ef14604ba4406fa9c23.png

六、The Shaders

f2984604f96ac2e9eb9102cb03ec7de.png

Create Program

9834b94aab21f9ce63ea3c839a3ccf9.png

Date to Frame Buffer

3da47ec0682f9464240074e425eb76d.png

Frame Buffer to GPU

9fd63f47aaab063e7bf533d125d3d6c.png

七、为什么WebGL这么难

830284153abecbdad4033acccea2ba1.png

八、可使用工具

Mesh.js

67eeb783235fd90d4ad7fdb3cf1cdd0.png

九、多边形绘制

941a9c7277f26dd00a2baa586b2f9ef.png

用Earcut进行三角剖分

eae3550075d051595f5d8cb552ff821.png

十、3D模型工具

775315a4a28d0044ac50a093afcffb2.png

变换

74332f471c78402a5fb8a4f88b08314.png

应用变换

f538951fc4add6eecd818782303f30e.png

旋转加缩放是线性变换

c93fcb11bd7b36b90312b848428a8dd.png

3DMatrix

aaff9fe2e643cea44a6db010be171db.png

总结:这就是前端入土了吧?看着就好难 让人不感兴趣