内容来源于书籍吴亚峰、于复兴、索依娜编著的《WebGL 3D 开发实战详解 第 2 版》
以下为读书笔记，仅供学习
着色器语言基础
标量
布尔型 bool
int b;有符合整型 int 无符号整型 uint
int a=7;
uint b=2u;//无符号十进制
int b=034; //以0开头的字面常量为八进制，代表十进制的28
int c=0x3C；//以0x开头的字面常量为十六进制，代表十进制的57
- 浮点数 float
float f=3.0;
float j,k = 3.12,1;//声明多个变量并赋值
float s=3e2; //声明变量，并赋予指数形式的值，表示3乘以10的平方
向量
各向量类型说明
| 向量类型 | 说明 |
|---|---|
| vec2 | 包含 2 个浮点数的向量 |
| vec3 | 包含 3 个浮点数的向量 |
| vec4 | 包含 4 个浮点数的向量 |
| ivec2 | 包含 2 个整数的向量 |
| ivec3 | 包含 3 个整数的向量 |
| ivec4 | 包含 4 个整数的向量 |
| bvec2 | 包含 2 个布尔数的向量 |
| bvec3 | 包含 3 个布尔数的向量 |
| bvec4 | 包含 4 个布尔数的向量 |
| uvec2 | 包含 2 个无符号整数的向量 |
| uvec3 | 包含 3 个无符号整数的向量 |
| uvec4 | 包含 4 个无符号整数的向量 |
vec4 vv=vec4(1.0);//每个分量值都是1.0
vec2 a=vec2(1,2);
vec2 b=vec2(3,4);
vec4 c=vec4(a,b);//vec4(1,2,3,4)
- 表示颜色信息 r、g、b、a
aColor.r=0.5;
aColor.g=0.7;
- 表示物体位置坐标 x、y、z、w
aPosition.x=57.1;
aPosition.z=32.8;
- 纹理坐标 s、t、p、q
aTexCoor.s=0.24;
aTexCoor.t=0.71;
- 访问向量可用下标
aColor[0]=0.6;// 红色通道r
aPosition[2]=28.3;//z轴
aTexCoor[1]=0.34;//t分量
矩阵
矩阵的类型
| 矩阵类型 | 说明 |
| -------- | ------------------------- |
| mat2 | 2x2 浮点数的矩阵 |
| mat3 | 3x3 浮点数的矩阵 |
| mat4 | 4x4 浮点数的矩阵 |
| mat2x3 | 2x3 浮点数的矩阵 |
| mat2x4 | 2x4 浮点数的矩阵 |
| mat3x2 | 3x2 浮点数的矩阵 |
| mat3x4 | 3x4 浮点数的矩阵 |
| mat4x2 | 4x2 浮点数的矩阵 |
| mat4x3 | 4x3 浮点数的矩阵 |
vec3 a=vec3(1,2,3);
vec3 b=vec3(4,5,6);
vec3 c=vec3(7,8,9);
mat3 mm=mat3(a,b,c);
/**
1,2,3,
4,5,6,
7,8,9
*/
采样器
采样器类型说明
| 采样器类型 | 说明 |
|---|---|
| sampler2D | 用于访问二维纹理 |
| sampler3D | 用于访问三维纹理 |
| samplerCube | 用于访问浮点型的立方贴图纹理 |
| samplerCubeShadow | 用于访问浮点型的立方阴影纹理 |
| sampler2DArray | 用于访问浮点型的二维纹理数组 |
| sampler2DArrayShadow | 用于访问浮点型的二维阴影纹理数组 |
| isampler2D | 用于访问整型的二维纹理 |
| isampler3D | 用于访问整型的三维纹理 |
| isamplerCube | 用于访问整型的立方贴图纹理 |
| isampler2DArray | 用于访问整型的二维纹理数组 |
| usampler2D | 用于访问无符号整型的二维纹理 |
| usampler3D | 用于访问无符号整型的三维纹理 |
| usamplerCube | 用于访问无符号整型的立方贴图纹理 |
| usampler2DArray | 用于访问无符号整型的二维纹理数组 |
结构体
struct info{
vec3 color;
vec3 position;
}
info CubeInfo;
info ii=info(vec3(1.0),vec3(22,33,44))
数组
vec3 position[20];//声明一个包含20个vec3的数组，索引从0开始
vec3 color[];//声明一个大小不定的vec3数组
position[4]=vec3(4.0,2.0,0.5);
const float i[3]=float[3](1,0,2.0,3.0);
const float j[3]=float[](1,0,2.0,3.0);
float k=1.0;
float m[3];
m=float[3](k,k+1.0,k+2.0);
空类型
void mian(){//声明一个空返回值的main方法
}
数据类型的基本使用
const float k=3.0;//常量不可修改，初始化赋值
in float aaa;//不可对全局输入变量进行初始化
uniform int k;//不可对一致变量进行初始化
out vec3 position;//不可对输出变量进行初始化
运算
vec4 color=vec4(0.5,0.6,0.8,1.0);
vec3 temp=color.agb//vec3(1.0,0.6,0.8)
vec4 ttt=color.aabb;//vec4(1.0,1.0,0.8,0.8)
vec3 tttt;
ttt.grb=color.aab;//vec3(1.0,1.0,0.8)
vec3 va=vec3(0.5,0.6,0.7);
vec3 vb=vec3(1.0,1.5,2.0);
vec3 vc=va*vb;//两个向量加减乘除
mat3 ma=mat3(1,2,3,4,5,6,7,8,9);
mat mb=mat3(9,8,7,6,5,4,3,2,1);
vec3 vd=va*ma;
mat3 mc=ma*mb;
类型转换
float f=1.0;
bool b=bool(f);//非 0 数字转 true，0 转 false
float f1=float(b);//true 转 1.0，false 转 0.0
int c=int(f1);//去掉小数部分转成有符合或无符号整数
限定符
| 限定符 | 说明 |
|---|---|
| const | 用于声明常量 |
| in/centroid in | 一般用于声明着色器的输人变量，如在顶点着色器中用来接收顶点位置、颜色等数据变量，centroidin 变量与插值类型有关 |
| out/centroid out | 一般用来声明着色器的输出变量，如从顶点着色器向片元着色器传递的顶点位置等数据变量，centroid out 变量与插值类型有关 |
| uniform | 一般用于对由同一组顶点组成的单个 3D 物体中所有顶点都相同的量，如当前的光源位置 |
int vec3 vPosition;//接受从顶点着色器传递过来的顶点位置数据
centroid in vec2 vTexCoord;//接受从顶点着色器传递过来的纹理坐标数据
flat in vec3 vColor;//接收从顶点着色器传递过来的颜色数据
uniform mat4 uMVPMatrix;//总变换矩阵
uniform mat4 uMMatrix;//基本变换矩阵
uniform vec3 uLightLocation;//光源位置
uniform vec3 uCamera;//摄像机位置
out vec4 ambient;//环境光out变量
out vec4 diffuse;//散射光out变量
out centroid out vec2 texCoor;//纹理坐标out变量
invariant centroid out vec4 color;//颜色值out变量
插值(interpolation)限定符
| 限定符 | 说明 |
|---|---|
| smooth | 默认的插值类型，表示以平滑方式插值到片元输人变量 |
| flat | 表示不对片元输人变量进行插值，直接使用特定值来代替 |
smooth out vec3 normal;//顶点着色器out变量
smooth int vec3 normal;//片元着色器in变量
flat out vec4 vColor;//传递给着色器的变量
flat in vec4 vColor;//接受来自顶点着色器的变量
一致块
uniform Transform{//声明一个uniform接口块
float radius;
mat4 modelViewMatrix;
uniform mat3 normalMatrix;
} block_Transform;
uniform MatrixBlock{
mat4 uMVPMatrix;
} mb;
gl_Position=mb.uMVPMatrix*vec4(aPosition,1);//根据总变换矩阵计算此次绘制的顶点位置
layout 限定符
设置变量的存储索引（引用）值
layout（location=0) in vec3 aPosition;//aPosition输入编了的引用值为0
layout (location=1) in vec4 aColor;//aColor输入变量引用值为1
layout（location=0) out vec3 fragColor;//此输出变量写入0号绘制缓冲
layout (location=1) out vec4 colors[2];//此输出变量写入1号绘制缓冲
layout (std140,row_major) uniform MatrixBlock{//块布局是std140,行优先
mat4 M1;//改矩阵变量的布局是行优先
layout (column_major) mat4 uMVPMatrix;//列优先
mat4 M2;//行优先
}
invariant 修饰符避免值变问题
invariant out vec3 color;
out vec3 color;
invariant color;
#pragma STDGL invariant(all);//所有输出变量由invariant修饰
片元着色器中浮点变量精度的指定
lowp float color;//低精度
varying mediump vec2 Coord;//中精度
highp mat4 m;//高精度
precision <精度> <类型>;//默认精度
内建变量
gl_开头
顶点着色器内建变量
gl_Position 经过矩阵变换、投影后的顶点最终位置
gl_PointSize 点的大小
gl_VertexID用来记录顶点的整数索引（highp int）
gl_InstanceID 实例 ID，它止在顶点着色器中使用，对于指定的每一组图元，该 ID 相应递增 （highp int）
片元着色器中内建变量
gl_FragCoord包含当前片元相对于窗口的坐标值 x、y、z 与 1/w
gl_FrontFacing布尔型，通过其值可判断正在处理的片元是否属于光栅化阶段此片元生成的对应图元的正面。正面 true,反面 false，一般用于开发与双面光照功能相关的应用程序中。
gl_PointCoord（vec2）当启用点精灵时，gl_PointCoord的值表示当前图元中片元的纹理坐标，范围 0.0~1.0。若当前图元不是一个点或者未启用点精灵，则值不确定。
内建 uniform 变量
struct gl_DepthRangeParameters{
highp float near;//透视中的近视点
highp float far;//透视重点远视点
highp float diff;//far-near值
};
uniform gl_DepthRangeParameters glDepthRange;
uniform、attribute、varying 限定符修饰的变量
| 限定符 | 数据赋值与使用范围 | 说明 |
|---|---|---|
| attribute | js 赋值在顶点着色器内使用 | 声明顶点数据变量 |
| uniform | js 赋值在顶点、片元着色器内使用 | 声明非顶点数据变量 |
| varying | 顶点着色器赋值，在片元着色器内使用 | 声明需要插值计算的顶点变量 |
着色器语言内置函数
//三角函数
radians(degrees)//角度转弧度
degrees(radians)//弧度转角度
sin(angle),cos(angle)//弧度的正弦值，余弦值
tan,asin,acos,atan
//指数函数
pow(x,y)//x的y次方
squrt(x)//x的平方根
//常见
abs,floor,round,ceil,mod,min,max
渲染管线
WebGL 2.0 中渲染管线实质上指的是一系列的绘制过程。向程序中输入待染 3D 物体的相关描述信息数据，经过渲染管线处理后，输出的是一帧想要的图像。
