转载

学习WebGL之深入了解Shader

本文将带大家深入了解Shader，下面是运行截图，可以前往我的博客查看代码演示。

学习WebGL之深入了解Shader

前言

上篇文章中我们已经和Shader有了一面之缘，本文将带大家深入Shader的世界，介绍Shader的语言特性，数据类型，内置方法等等。Shader语言和C语言很相似，如果你学过C语言应该可以很快适应Shader的编程风格。本文提供了一个具备Shader基本编程元素的例子，通过Shader控制三角形旋转，并把位置转变成了颜色，读者可以通过修改这个例子更快的熟悉Shader。

代码框架

无论是Vertex Shader还是Fragment Shader，都有基本的代码框架。下面是本文使用的Vertex Shader。

attribute vec4 position;
varying vec4 fragColor;
uniform float elapsedTime;
void main() {
    fragColor = position * 0.5 + 0.5;
    float rotateAngle = elapsedTime * 0.001;
    float x = position.x * cos(rotateAngle) - position.y * sin(rotateAngle);
    float y = position.x * sin(rotateAngle) + position.y * cos(rotateAngle);
    gl_Position = vec4(x, y, 0.0, 1.0);
}

只有Vertex Shader可以声明attribute变量，它用来接受CPU传递过来的顶点数据。除了attribute变量之外，还可以声明uniform变量和varying变量。具体含义还以下面会作详解。main方法是Shader代码执行的入口，这和C语言一模一样。在Vertex Shader中你必须给gl_Position赋值，否则这个Vertex Shader没有任何意义，没有任何顶点会传递给GPU。

下面是本文使用的Fragment Shader。

varying mediump vec4 fragColor;
void main() {
    gl_FragColor = fragColor;
}

Fragment Shader除了attribute变量其他变量都可以拥有，varying变量必须和Vertex Shader中的varying变量类型保持一致，varying变量会从Vertex Shader传递到Fragment Shader中。那么问题来了，Vertex Shader是每个顶点调用一次，而Fragment Shader是每个像素调用一次，那么顶点之间像素的varying变量值是如何计算的呢？答案是GPU会根据要绘制的形状自动插值计算。大家可以观察示例，三角形顶点之间的颜色正是通过各个顶点的fragColor插值计算出来的。

变量类型

Shader有下面几种变量类型：

void 和C语言的void一样，无类型
bool 布尔
int 有符号的int
float 浮点数
vec2, vec3, vec4 2，3，4维向量，如果你不知道什么是向量，可以理解为2，3，4长度的数组。
bvec2, bvec3, bvec4 2，3，4维布尔值的向量。
ivec2, ivec3, ivec4 2，3，4维int值的向量。
mat2, mat3, mat4 2x2, 3x3, 4x4 浮点数的矩阵，如果你不了解矩阵，后面会有一篇文章单独介绍矩阵。
sampler2D 纹理，后面会详细介绍。
samplerCube Cube纹理，后面会详细介绍。

变量精度

细心的读者可能会发现同样是varying变量，在Fragment Shader中多了一个mediump修饰符。mediump表示的是变量类型的精度。因为Fragment Shader是逐像素执行，所以会尽量控制计算的复杂度。对于不需要过高精度的变量，可以手动指定精度从而提高性能。精度主要分为下面3种。

highp, 16bit，浮点数范围(-2^62, 2^62)，整数范围(-2^16, 2^16)
mediump, 10bit，浮点数范围(-2^14, 2^14)，整数范围(-2^10, 2^10)
lowp, 8bit，浮点数范围(-2, 2)，整数范围(-2^8, 2^8)
如果你想所有的float都是高精度的，可以在Shader顶部声明precision highp float;，这样你就不需要为每一个变量声明精度了。

运算符

Shader可以使用所有C语言的运算符。不过要注意的是二元运算比如加法，乘法等，只能用在两个类型相同的变量上，比如float只能和float相加。因为Shader不会为你进行隐式的类型转换，这样会增加GPU的负担。我们表示float变量时，需要自行增加小数点，比如浮点数5要写成5.0，否则会被认定为整数。下面是能够使用的运算符，读者可以当做参考。

学习WebGL之深入了解Shader

uniform变量

uniform变量会被所有Shader共享，比如有3个顶点，Vertex Shader会被执行3次，每次访问的uniform变量都是同一个由js代码设定好的值。下面是本文使用的设定uniform elapsedTime的js代码。

  elapsedTimeUniformLoc = gl.getUniformLocation(program, 'elapsedTime');
  gl.uniform1f(elapsedTimeUniformLoc, elapesdTime);

首先获取uniform elapsedTime在Shader中的位置，然后设置它的值。uniform1f是uniformXXX函数簇里面用来设置一个float类型uniform的方法。通过uniformXXX里的XXX很容易看出来这个方法是设置什么类型的uniform的，下面是常见的几种格式。

uniform{n}{type} n表示数目1~4，type表示类型，float是f，int是i，unsigned int是ui。所以设置一个整数就是 uniform1i。
uniform{n}{type}v 相比于上面的多了一个v，表示向量，所以传递的参数就是类型为type，维度为n的向量。
uniformMatrix{n}{type}v 这个用来设置类型为type nxn的矩阵。
上面这些方法会在后面的文章中用到，这里大致了解即可。

varying变量

varying变量是Vertex Shader和Fragment Shader的桥梁，Fragment Shader中的varying变量由Vertex Shader中的varying变量自动插值计算出来。因为Fragment Shader是逐像素执行，某些使用varying变量的效果在Fragment Shader中实现会更加细腻，比如光照效果。

向量的访问

当我们拥有一个vec4变量，我们可以有很多种方法访问它内部的值。