OpenGL ES 2.0 入门：四、Shaders

2023-12-21 18:36:57

踏入 Shader 的世界：解锁图形管线的强大功能

踏入 OpenGL ES 2.0 的领域，我们终于来到了 shaders 的世界。Shaders 是可编程着色器，为开发人员提供了编写定制的顶点和片段着色器的方式，就像用 C 语言一样。有了 shaders，我们就可以精细地控制图形管线的行为，创造出令人惊叹的视觉效果。

Uniform 变量：数据传递的桥梁

想象一下 shaders 是两个隔绝的岛屿，uniform 变量就是连接它们的桥梁。它们允许在顶点着色器和片段着色器之间传递参数，例如灯光位置、材质属性和变换矩阵。通过 uniform 变量，我们能够轻松地将所需的数据注入 shaders。

Varying 变量：从顶点到片段的接力

Varying 变量就像接力棒，在顶点着色器和片段着色器之间传递数据。它们将顶点着色器中计算的值传递给片段着色器，以便在每个像素上进行处理。通过 varying 变量，我们可以将顶点特定的信息传递给片段着色器，从而实现更精细的着色效果。

Rasterizer 插值：像素间的平滑过渡

Rasterizer 插值就像一块拼图板，它将三角形顶点之间的颜色信息无缝地内插值，从而计算出每个像素的颜色。这是一种关键的技术，确保了三角形在屏幕上平滑呈现，避免出现令人不快的锯齿状边缘。

Shader 实战：渲染纹理立方体

为了让理论更加具体，让我们动手编写一个简单的 shader 程序来渲染一个带有纹理的立方体。首先，我们加载纹理图像，然后编写顶点着色器和片段着色器，最后将它们链接成一个着色器程序。

// 加载纹理
GLuint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);

// 编写顶点着色器
const char *vertexShaderSource =
    "attribute vec3 aPosition;"
    "attribute vec2 aTexCoord;"
    "uniform mat4 uMVPMatrix;"
    "varying vec2 vTexCoord;"
    "void main() {"
    "  gl_Position = uMVPMatrix * vec4(aPosition, 1.0);"
    "  vTexCoord = aTexCoord;"
    "}";

// 编写片段着色器
const char *fragmentShaderSource =
    "precision mediump float;"
    "uniform sampler2D uTexture;"
    "varying vec2 vTexCoord;"
    "void main() {"
    "  gl_FragColor = texture2D(uTexture, vTexCoord);"
    "}";

// 编译和链接着色器程序
GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
glCompileShader(vertexShader);

GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);

GLuint program = glCreateProgram();
glAttachShader(program, vertexShader);
glAttachShader(program, fragmentShader);
glLinkProgram(program);

// 使用着色器程序
glUseProgram(program);