【WebGL编程指南】GLSL ES语法基础

【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}
$​