这是我参与「第四届青训营 」笔记创作活动的第15天

重点

• 现代图像系统
• WebGl使用
• 绘制多边图像
• 图像的转换

WebGL

GPU != WebGL != 3D

现代图像系统

光栅 像素 帧缓存 CPU GPU 图形绘制过程

• 1.轮廓提取 网格化：三角网格
• 2.光栅化
• 3.帧缓存
• 4.渲染

渲染管线

CPU VS GPU

CPU

GPU

• 大量的小运算单元构成
• 每个运算单元只负责简单计算
• 运算单元彼此独立
• 计算可以并行处理

WebGL OpenGL

web.eecs.umich.edu/~sugih/cour…

WebGl使用

• 1.创建WebGL上下文
• 2.创建WebGL Program：如何处理 运算数据 像素的颜色
• 3.将数据缓存人缓冲区
• 4.缓冲区数据读取到GPU
• 5.GPU执行WebGL程序、输出结果

创建WebGL上下文

创建WebGL Program：shaders

vertex shader fragment shader

program

将数据缓存人缓冲区 data to frame buffer

缓冲区数据读取到GPU

GPU执行WebGL程序、输出结果

mesh js

2D绘制

绘制2d 多边形

使用earcut

Transform

旋转+缩放=线性变换

3D

推荐网站 www.shadertoy.com/

threejs.org/

spritejs.com/#/

doodle.webgl.group/

github.com/mesh-js/mes…

总结

讲解了WebGL的具体使用