欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

WebGL着色器程序

程序员文章站 2022-03-27 13:09:26
...

我们通常使用三角形来构建网格。因为WebGL使用GPU加速计算,有关这些三角形中的信息一般从CPU传送到GPU,这需要大量的通信开销。
WebGL提供了一个解决方案以降低通信开销。由于它使用ES SL(嵌入式系统着色语言)在GPU上运行,我们编写所有程序需要使用着色器程序的客户端系统上的图形元素(这是我们使用OpenGL ES着色语言/GLSL来写程序)。
这些着色器是GPU和用于编写着色器程序的程序语言是GLSL。在这些着色器,我们定义确切的顶点,转换,材质,光源,和摄像机使用彼此交互以创建具体图像。
总之,这是一个实现的算法来获得像素一个网状片段。在后面的章节我们将讨论更多关于着色器。有两种类型的着色器- 顶点着色器和片段着色器。

顶点着色器:

顶点着色器是所谓的在每个顶点的程序代码。
它被用于转化(移动)的几何形状(例如:三角形)从一个地方到另一个地方。它处理每个顶点的数据(每个顶点的数据),例如顶点坐标,法线,色彩,和纹理坐标。
在顶点着色器的ES GL代码,程序员必须定义的属性来处理数据。这些属性指向一个顶点缓冲区对象是用JavaScript编写的。
下面的任务可以使用顶点着色器来进行

	1.顶点变换
	2.正常转化和正常化
	3.纹理坐标生成
	4.纹理坐标变换
    5.灯光/光线

片段着色器(像素着色器)
网状由多个三角形形成,并且每一个三角形的表面被称为一个片段。片段着色器是对每一个片段的所有像素上运行的代码。这是写计算以填补单个像素的颜色。
下面的任务可以使用片段着色器来进行

	1.插值操作
	2.纹理访问
	3.纹理应用
	4.灰蒙/雾

OpenGL ES SL 变量
OpenGL ES的SL完整形式是 OpenGL 的嵌入式系统着色语言。为了处理着色器程序中的数据,ES SL提供了三种类型的变量。它们如下 -

	属性: 这些变量保存顶点着色器程序的输入值。属性指向包含每个顶点数据的顶点缓冲对象。顶点着色器被调用的时候,这个属性指向不同的顶点的VBO。
	制服: 这些变量存储输入数据,很常见为顶点和片段着色器,例如光位置,纹理坐标和颜色。
	变动充填: 这些变量用来从顶点着色到片段着色器传递数据。有了这么多的基础知识,现在我们将继续前进,讨论图形管线。
相关标签: WebGL