【WebGL之巅】20-GLSL ES着色器语言语法详解
查看原文:【WebGL之巅】20-GLSL ES着色器语言语法详解
对应《WebGL编程指南》第六章 GLSL ES
总览
本章知识点:
1、数据、变量和变量类型
2、矢量、矩阵、结构体、数组、采样器(纹理)
3、运算、程序流、函数
4、attribute、uniform和varying变量
5、精度限定词
6、预处理和指令
回顾
基本着色器代码
//顶点着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'attribute vec2 a_TexCoord;\n' +
'varying vec2 v_TexCoord;\n' +
'void main() {\n' +
' gl_Position = a_Position;\n' +
' v_TexCoord = a_TexCoord;\n' +
'}\n';
//片元着色器程序
var FSHADER_SOURCE =
'#ifdef GL_ES\n' +
'precision mediump float;\n' +
'#endif\n' +
'uniform sampler2D u_Sampler0;\n' +
'uniform sampler2D u_Sampler1;\n' +
'varying vec2 v_TexCoord;\n' +
'void main(){\n'+
' vec4 color0 = texture2D(u_Sampler0, v_TexCoord);\n'+
' vec4 color1 = texture2D(u_Sampler1, v_TexCoord);\n'+
' gl_FragColor = color0 * color1;\n'+
'}\n';
知识点
一、GLSL ES概述
GLSL ES
编程语言是在OpenGL
着色器语言(GLSL)基础上,删除和简化一部分功能后形成的。各位看到ES
版本应该会想到GLSL ES
应用在手机、游戏主机等设备上,这样可以降低硬件的功耗,同时也能减少性能开销。
GLSL ES
的语法与C语言类似。此外,着色器语言也开始被用来完成一些通用的任务,如图像处理和数据运算(所谓的GPGPU)。
二、基础语法
2.1 基础
GLSL ES
对大小写是敏感的,例如:Niuniu
和niuniu
这就对应的是两个不同的变量;
每条语句都要有;
结束
2.2 执行次序
每个着色器程序都要有main()
函数,就像C语言
一样,每个着色器程序都从main
开始执行,但是GLSL ES
中的main()
函数并不接收任何参数,并且必须是void
类型;
void
表示函数没有返回值,若有返回值,需明确返回值类型。
2.3 注释
单行注释使用//
,多行注释则是/* 注释 */
;
三、数据值类型(数值额布尔值)
3.1 GLSL ES
支持两种数据值类型:
数值类型:GLSL ES
支持整数类型和浮点数,没有小数点的值被认定为整数类型,而有小数点的则被认为是浮点数;
布尔值类型:true
和false
,无需多言。
GLSL ES
不支持字符串类型,虽然字符串对三维图形语言来说还是有一定意义的。
四、变量
4.1 变量名规则
-
只能由
a-z
、A-Z
、0-9
以及_
组成 -
变量名的第一个字符不能为数字
-
不能以
gl_
、webgl_
或_webgl
开头,这些前缀已被OpenGL ES
保留了 -
不能是下表中所列出的关键字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iWBLJjhK-1627734716808)(/images/glsles1.jpg)]
GLSL ES保留字:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BFRCyHBU-1627734716813)(/images/glsles2.jpg)]
4.2 GLSL ES是强类型语言
声明变量的方式:<类型> <变量名>,例:
vec4 a_Position
进行赋值操作时,等号左右两侧的数据类型必须一致。
五、基本类型
类型 | 描述 |
---|---|
float | 单精度浮点类型 |
int | 整型数 |
bool | 布尔值 |
// 声明变量
float fnumber = 1.1; // 浮点数
int inumber = 1; // 整型
bool blogic = true; // 布尔型
5.1 赋值和类型转换
// 强制类型转换
int fresult = int(fnumber); // 去掉小数部分,例如:3.14转换为3
bool bresult = int(blogic); // true转为1,false转为0
int iresult = float(inumber); // 整型转换为浮点数,例如:3转换为3.0
bresult = float(blogic); // 布尔型转换为浮点数,true转为1.0,false转为0.0
iresult = bool(inumber); // 整型转换为布尔型,0转为false,其余非0数转为true
fresult = bool(fnumber); // 整型转换为布尔型,0.0转为false,其余非0.0数转为true
5.2 运算符
类别 | GLSL ES数据类型 |
---|---|
- * / + | 加减乘除 |
++ – | 自增、自减 |
= += -= *= /= | 赋值、算术赋值 |
< > <= >= == != | 比较 |
! | 取反 |
&& || ^^ | 逻辑与、或、异或 |
? : | 三元运算符 |
逻辑与(&&):只有第一个表达式的计算值为true时才会计算第二个表达式(找错)。
逻辑或(||):只有第一个表达式的计算值为false时才会计算第二个表达式(找对)。
逻辑异或(^^):只有当左右两个表达式中有且仅有一个为true时,运算结果为true,否则为false。
六、矢量和矩阵
6.1 矢量和矩阵举例
矢量 $\begin{pmatrix}
8 & 3 & 0
\end{pmatrix}
$ 矩阵$
\begin{bmatrix}
8 & 3 & 0 \\
4 & 3 & 6 \\
3 & 2 & 6
\end{bmatrix}
$