webgl第三课-浅谈着色器 - 好文

需要源码可以Q群：828202939 或者点击这里 <https://jq.qq.com/?_wv=1027&k=5NiS63x>
希望可以和大家一起学习、一起进步！！纯手打！！

书籍是PDF电子档，也在Q群里，所有的课程源代码在我上传的资源
<https://download.csdn.net/user/weixin_39452320/uploads>里面，本来想设置开源，好像不行！

如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，在下会及时修改！！！！！

本文开始介绍着色器的一些基础知识！

webgl中一般涉及到两种着色器：

顶点着色器：顶点着色器是用来描述顶点特性的（如位置、颜色等）的程序。顶点是指二维或者三维空间里面的一个点，比如二维或者三维图形的端点或者交点

片元着色器：进行逐片元处理过程（如光照）的程序。片元是一个webgl的术语，暂且可以理解为像素（图像的单元）

下图是从执行JS程序到浏览器显示结果的过程（有时间给你们画个流程图）：

--浏览器运行

--执行加载的JS

--JS运行相关程序（从main主方法开始，一般主方法里面会有调用着色器初始化的函数）

--执行着色器初始化方法

--顶点着色器逐顶点操作

--片元着色器逐片元操作

--清空颜色缓存

--绘制

--显示到浏览器屏幕

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!干货来了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

顶点着色器初步讲解：

上面说到，顶点着色器是控制顶点的位置和大小，那么问题来了，顶点着色器怎么通过来控制的呢？

顶点着色器的内置变量：

（float  ） gl_PositSize 表示点的尺寸（像素数，这个不是必须的，默认为1.0）

（vec4） gl_Position 表示顶点的位置（这个变量必须被赋值，否则着色器无法工作）

其中vec4和float是GLSL中的一种数据类型，和Java的8种基本类型差不多

float 表示浮点数的数据类型

vec4 表示由4个浮点数组成的矢量（实际是由3个X,Y,Z的坐标值加一个W分量组成的矢量，有关矢量后面会有讲到，别急）

特别注意：因为webgl是基于OpenGL的，OpenGL是类C或者是C的语言，属于强制型语言；

上述的变量正确赋值格式如下：

（float ）gl_PositSize=10.0 //浮点型

如写成

（float ）gl_PositSize=10 会报错的，这个新入坑的朋友们请注意了

另外一个内置变量gl_Position 表示点的位置，他的类型是vec4类型，通过内置函数

vec4 vec4 (v0,v1,v2,v3)方法来创建vec4的类型创建

其中v0,v1,v2分别代表x,y,z坐标轴的坐标，V3第4分量W之所以存在，是因为这样做可以提高处理三维数据的效率（后面会讲到）

X,Y,Z,W 4个分量组成的矢量叫   齐次坐标，至于啥是齐次坐标，各位童鞋可以百度一下

齐次坐标存在的意义在于，它能够让矩阵乘法来描述顶点变化成为可能

片元着色器初步讲解：

前面提到片元着色器控制点的颜，或者理解为片元就是显示在屏幕上面的一个像素（严格来讲，片元包括这个像素的位置、颜色和其他信息）

片元着色器把点的颜色赋值gl_FragColor，该变量是片元着色器中的唯一内置变量，它控制着像素在屏幕上呈现的最终颜色

(vec4 ) gl_FragColor 指定片源颜色（RGBA格式 0.0- 1.0）

大概就是这样了

接下来就是绘制方面的东西了

通过 gl.drawArrays()这个函数来绘制各种各样的图像，具体的可以搜狗一下。本文只对着色器做初步讲解！！！！

热门工具换一换