这是我参与「第四届青训营 」笔记创作活动的的第21天
GPU≠WebGL≠3D
光栅:几乎所有的现代图形系统都是基于光栅来绘制的,光栅就是指构成图形的像素阵列。
像素:一个像素对应图像上的一个点,它通常保存图像上的某个具体位置的颜色等信息。
帧缓存:在绘图过程中,像素信息被存放于帧缓存中,帧缓存是一块内存地址。
CPU:中央处理单元,负责逻辑计算。
GPU:图形处理单元,负责图形计算。
CPU和GPU的区别:
CPU的运行遵循冯·诺依曼构架:存储程序顺序执行。程序执行过程如下:CPU根据程序计数器(Program Counter,PC)从内存中得到指令,然后通过指令总线将指令送至译码器,将转译后的指令交给时序发生器与操作控制器,再从内存中取得数据并由运算器对数据进行处理,最后通过数据总线将数据存至数据缓存寄存器以及内存中。
CPU是一步一步来处理数据的。在处理大规模与高速数据时,CPU很难满足需要。
GPU管道数量多,并行执行。
WebGL是OpenGL的一个子集,在web上的的实现。
使用WebGL的步骤
1.创建WebGL上下文
const canvas = document.querySelector('canvas')
const gl = canvas.getContext('webgl')
2.顶点着色器主要用来处理图形轮廓,片元着色器把像素点映射到片元着色器中
2D绘制三角形:左上角为坐标原点
Earcut三角剖分:把多边形变成若干个三角形,然后把这些三角形传到webgl去绘制每一个图源。3D也是类似。
几个3D网站
2.Mesh.js
4.SpriteJS
5.ThreeJS