WebGL|青训营笔记

82 阅读2分钟

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

GPU≠WebGL≠3D

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

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

帧缓存:在绘图过程中,像素信息被存放于帧缓存中,帧缓存是一块内存地址。

CPU:中央处理单元,负责逻辑计算。

GPU:图形处理单元,负责图形计算。

CPU和GPU的区别:

CPU的运行遵循冯·诺依曼构架:存储程序顺序执行。程序执行过程如下:CPU根据程序计数器(Program Counter,PC)从内存中得到指令,然后通过指令总线将指令送至译码器,将转译后的指令交给时序发生器与操作控制器,再从内存中取得数据并由运算器对数据进行处理,最后通过数据总线将数据存至数据缓存寄存器以及内存中。

CPU是一步一步来处理数据的。在处理大规模与高速数据时,CPU很难满足需要。

GPU管道数量多,并行执行。 image.png

WebGL是OpenGL的一个子集,在web上的的实现。 image.png

使用WebGL的步骤 image.png 1.创建WebGL上下文

const canvas = document.querySelector('canvas')

const gl = canvas.getContext('webgl')

2.顶点着色器主要用来处理图形轮廓,片元着色器把像素点映射到片元着色器中 image.png

2D绘制三角形:左上角为坐标原点

image.png

Earcut三角剖分:把多边形变成若干个三角形,然后把这些三角形传到webgl去绘制每一个图源。3D也是类似。 

image.png

几个3D网站

1.The book of shaders

2.Mesh.js

3.glsl-doodle

4.SpriteJS

5.ThreeJS

6.ShaderToy