五、WebGL入门，shader剖析

最新推荐文章于 2024-07-09 18:18:50 发布

a23366192007

最新推荐文章于 2024-07-09 18:18:50 发布

阅读量4.4k

点赞数

分类专栏： WebGL 自学

本文链接：https://blog.csdn.net/a23366192007/article/details/50550551

版权

这篇博客介绍了WebGL中的glsl语言和shader的工作原理。通过一个颜色渐变矩形的例子，阐述了attribute、uniform和varying变量限定符的作用，并讲解了如何使用uniform在程序外部控制颜色。同时，提到了WebGL渲染管线中的Vertex Shader和Fragment Shader的基本概念。

摘要由CSDN通过智能技术生成

WebGL用的shader语言是glsl(OpenGL Shading Language),

shader的主要工作有：

1. 利用视图和投影矩阵对点的位置进行变化

2. 如果需要利用法线的时候，也同样需要利用视图矩阵对其进行转换

3. 纹理坐标的产生和转换

4. 顶点的光照或者象素光照的计算

5. 颜色计算

1-4在后面会详细的介绍，本节我们利用5,颜色计算来展示下shader的基本工作流程，好现在进入本节的课程

在上一节中，我们绘制了一个矩形，由两个三角形组成，共绘制了6个点，shader-vs代码：

		void main(void)
		{
			gl_Position = vec4(v3Position,1.0);
		}

被执行了6次，即该类似的vs(VertexShader)代码执行的个数=绘制的面数目*3

显卡的vs执行的伪代码大致如下（调用drawElements()时执行）：

           for(var i = 0 ;i < 6 ; ++ i)
            {
                var index = indexBuffer[i];//从索引缓冲区取值
                var vertx = triangleBuffer[index]//根据索引，在对应的顶点缓冲区中取相应的顶点数据（这里是顶点的位置信息）