GLSL 基础 ​

• 一文入门游戏开发语言之 webgl 中的 glsl 语言
• WebGL 教程

变量修饰符 ​

用来接收 JavaScript 传递过来的信息。

• attribue 变量：只能在顶点着色器中定义。
  • 通常用于修饰顶点数据，顶点法线，纹理数据等
• uniform 变量：既可以在顶点着色器中定义，也可以在片元着色器中定义。
  • 通常用于存储变换矩阵等不常变化的数据
• varing 变量：它用来从顶点着色器中往片元着色器传递数据。使用它我们可以在顶点着色器中声明一个变量并对其赋值，经过插值处理后，在片元着色器中取出插值后的值来使用。

运算精度 ​

在不太影响渲染效果前提下，可以尽量降低运算精度。

• lowp 低精度
  • 不够精确
• mediump 中精度
  • 常用的
• highp 高精度
  • 高性能消耗，可能无法在某些设备上运行

声明单个变量精度

lowp vec2 position

precision 批量声明变量精度

// 表示顶点/片元着色器中所有浮点精度为中精度
precision mediump float;

默认精度

数据类型 ​

• float
• int
• void
• bool
• invariant

向量（Vector）类型 ​

• vec2、vec3、vec4 二、三、四维向量，具有 xyzw 两个分量，分量是浮点数
• ivec2、ivec3、ivec4 分量是整型数
• bvec2、bvec3、bvec4 分量是布尔值 bool

vec3 foo = vec3(1.0,2.0,1.0);
vec2 bar = foo.xz;

float strength = vUv.x;
gl_FragColor = vec4(vec3(strength), 1.0);

矩阵（Matrix）类型 ​

纹理（Texture）类型 ​

• sampler2D 提供对 2D 纹理的访问

uniform sampler2D texture;

• samplerCube 提供对立方体地图纹理的访问

内置变量 ​

gl_Position ​

顶点的裁剪坐标系坐标，包含 X, Y, Z，W 四个坐标分量，顶点着色器接收到这个坐标之后，对它进行透视除法，即将各个分量同时除以 W，转换成 NDC 坐标，NDC 坐标每个分量的取值范围都在【-1, 1】之间，GPU 获取这个属性值作为顶点的最终位置进行绘制。

gl_FragColor ​

片元颜色，包含 R,G,B,A 四个颜色分量，且每个分量的取值范围在【0,1】之间，不同于我们常规颜色的【0，255】取值范范围，赋值时，也需要对其进行转换。

转换公式为： (R 值/255，G 值/255，B 值/255，A 值/1）。

内置属性 gl_PointSize ​

绘制到屏幕的点的大小，仅在图元为点时生效。

屏幕坐标系到设备坐标系的转换 ​

屏幕坐标系左上角为原点，X 轴坐标向右为正，Y 轴坐标向下为正。

坐标范围：

• X 轴：【0, canvas.width】
• Y 轴：【0, canvas.height】

设备坐标系以屏幕中心为原点，X 轴坐标向右为正，Y 轴向上为正。

坐标范围是

• X 轴：【-1, 1】。
• Y 轴：【-1, 1】。