WebGL基本概念

67 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 31 天,今天学习的课程名字是WebGL月影代练,本人感觉好难理解,下面就是我做的本节课的课堂笔记:

初识WebGL

概念

WebGL(与GPU有关也与3D渲染有关)是:运用了GPU能力的渲染技术,WebGL既不等同于GPU也不等同于3D。

GPU

现代计算机的图形系统就是实际上怎样把数据呈现在显示设备上

屏幕截图 2023-02-14 205954.png 由图片可以看出GPU是:图形处理单元,负责图形计算。它由大量的小运算单位构成,每个运算单位只负责处理很简单的运算,每个运算单位彼此独立,因此所有计算可以并行处理。

使用

我们要使用WebGL来渲染绘图的话,有一个繁琐的过程:

屏幕截图 2023-02-14 211920.png WebGL使用方法(下面是绘制三角形):

屏幕截图 2023-02-14 212553.png 上面是创造WebGL的上下文,之后定义一个shader(运行在GPU上的图形处理代码):着色器。shader中又有顶点着色器(左边的那个):处理图形的顶点,绘制出不同的形状;和片元着色器(右边的那个):关于片元着色器大家还是上网搜吧,在下也不怎么清楚。屏幕截图 2023-02-14 214626.png 上面初始化完成后,就要定义三角形的顶点(需要了解WebGL的坐标器),然后就要把定义的数据传入到缓冲区去绘制,在此之前我们需要创建一个缓冲区屏幕截图 2023-02-14 220927.png,之后再定义shader里面的一些参数,后三角形就成了。

小结

对于这一部分的知识我听得云里雾里的,因此在网上又找了一个网址:WebGL知识详解谢谢大家阅读。