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

一、初始WebGL

1. Why WebGL / Why GPU?

• WebGL是什么?

  • GPU ≠ WebGL ≠ 3D

• WebGL 为什么不像其他前端技术那么简单?

2. Modern Graphics System

概念

• 光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。

• 像素(Pixel):一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。

• 帧缓存（Frame Buffer):在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。

• CPU (Central Processing Unit):中央处理单元，负责逻辑计算。

• GPU (Graphics Processing Unit):图形处理单元，负责图形计算。

  

过程

• 1.轮廓提取 / meshing、

• 2.光栅化

• 3.帧缓存

• 4.渲染

  

3. The Pipeline

4. CPU vs GPU

• GPU由大量的小运算单元构成

• 每个运算单元只负责处理很简单的计算

• 每个运算单元彼此独立

• 因此所有计算可以并行处理

  

  

  

5. WebGL & Open GL

• OpenGL, OpenGL ES, WebGL, GLSL, GLSL ES API Tables (umich.edu)

  

6. WebGL Startup

• 1.创建WebGL上下文

• 2.创建WebGL Program

• 3.将数据存入缓冲区

• 4.将缓冲区数据读取到GPU

• 5.GPU 执行 WebGL程序,输出结果

  

7. Create WebGL Context

8. The Shaders

• 1.Vertex Shader

  

• 2.Fragment Shader

  

9. Create Program

10. Data to Frame Buffer

• Axes

  

• Typed Array

  

11. Frame Buffer to GPU

12. Output

• 青训营-WebGL-1 - 码上掘金 (juejin.cn)

  

  

13. WebGL

• 为什么WebGL那么难呢?

  • 2D vs WebGL
  • 青训营-WebGL-2 - 码上掘金 (juejin.cn)

  

14. Mesh.js

• 2D

  • 青训营-WebGL-2 - 码上掘金 (juejin.cn)

• mesh.js

  • 青训营-WebGL-3 - 码上掘金 (juejin.cn)

15. Polygons

• Polygons

  

• Triangulations

  

16. Draw Polygon with 2D Triangulations

• 使用Earcut进行三角剖分

  • mapbox/earcut: The fastest and smallest JavaScript polygon triangulation library for your WebGL apps (github.com)

  

  

17. 3D Meshing

• SpriteJS/next - The next generation of spritejs.

  

18. Transforms

• 平移

  

• 旋转

  

  

• 缩放

  

  

• 旋转+缩放是线性变换

  

  

• 从线性变换到齐次矩阵

  

19. Apply Transforms

• 青训营-WebGL-4 - 码上掘金 (juejin.cn)

  

  

20. 3D Matrix

• 3D标准模型的四个齐次矩阵（mat4)

  • 1.投影矩阵 Projection Matrix
  • 2.模型矩阵Model Matrix
  • 3.视图矩阵View Matrix
  • 4.法向量矩阵Normal Matrix

21. Read more

• 1.The book of shaders

  • The Book of Shaders

• 2.Mesh.js

  • mesh-js/mesh.js: A graphics system born for visualization 😘. (github.com)

• 3.glsl-doodle

  • Glsl Doodle (webgl.group)

• 4.SpriteJS

  • SpriteJS ~ Next - 下一代 SpriteJS

• 5.ThreeJS

  • Three.js – JavaScript 3D Library (threejs.org)

• 6.ShaderToy

  • Shadertoy BETA

• 7.稀土掘金

  • 充分理解WebGL - 十年踪迹的专栏 - 掘金 (juejin.cn)

二、总结

本节课学习了WebGL的基本知识和一些常用方法，让我对WebGL有了初步的认识，并明白了GPU和CPU的区别，对图形绘制方面有了进一步的了解。