Uniform variables

通过统一变量（Uniform variables）是向着色器发送数据的一种方式。以下是一个例子，展示了如何声明一个片元着色器，该着色器接收一个名为foo的四维向量作为输入，并将其赋值给片元颜色：

precision highp float;

uniform vec4 foo;

void main() {
  gl_FragColor = foo;
}

Textures

纹理（Textures）是一种将较大且静态的数据发送到片元着色器的方法。统一变量适合发送小而经常变化的信息到着色器中。然而，有时我们可能希望将更大且静态的数据发送到片元着色器中，这时可以使用纹理。WebGL中的纹理是二维向量数组。纹理使用sampler2D数据类型声明，并使用内置函数texture2D()进行访问：

precision highp float;

uniform sampler2D image;
uniform vec2 screenSize;

void main() {

  //Draws the texture to the screen
  vec2 uv = gl_FragCoord.xy / screenSize;
  gl_FragColor = texture2D(image, uv);
}

内置函数texture2D()的签名如下：

vec4 texture2D(
in sampler2D texture,
in vec2 coordinate,
in float bias = 0.0
);

这个函数接受三个参数：

• texture：一个sampler2D类型的纹理变量，表示要进行采样的纹理。
• coordinate：一个vec2类型的向量，表示纹理坐标。这个坐标决定了从纹理中读取哪些数据。坐标的范围通常是0到1，表示纹理的整个范围。
• bias：一个可选参数，是一个浮点数。它用于调整纹理的过滤方式。默认值为0.0。
  函数返回一个vec4类型的颜色值，表示从纹理中读取的数据。根据给定的纹理和纹理坐标，函数会根据过滤方式从纹理中获取相应的颜色值。

作业

交换image的红蓝通道：

precision highp float;

uniform sampler2D texture;
uniform vec2 screenSize;

void main() {
  vec2 coord = gl_FragCoord.xy / screenSize;

  //TODO: Swap red and blue color channels of image

  gl_FragColor = texture2D(texture, coord);

}

答案

precision highp float;

uniform sampler2D texture;
uniform vec2 screenSize;

void main() {
  vec2 coord = gl_FragCoord.xy / screenSize;

  //TODO: Swap red and blue color channels of image

  gl_FragColor = texture2D(texture, coord).bgra;

}