OpenGL ES 2.0 中使用 GLSL 缓冲实现渐变三角形

2023-11-18 21:46:59

概述

图形渲染中，缓冲区是一种内存区域，用于存储顶点、颜色或纹理等数据。在 OpenGL ES 中，缓冲区用于存储将在渲染过程中使用的数据。

GLSL 缓冲区允许我们存储数据，这些数据可以在顶点着色器和片段着色器中访问。这使得我们可以创建更复杂的着色效果，例如渐变。

实现渐变三角形

为了实现渐变三角形，我们将使用顶点着色器来定义三角形的形状，并使用片段着色器来定义其颜色。

顶点着色器

attribute vec3 aPosition;

void main() {
  gl_Position = vec4(aPosition, 1.0);
}

顶点着色器接收一个称为 aPosition 的顶点属性，它定义了三角形的三个顶点。gl_Position 内置变量指定顶点的最终位置。

片段着色器

uniform vec3 uColorA;
uniform vec3 uColorB;
varying vec3 vInterpolatedColor;

void main() {
  gl_FragColor = vInterpolatedColor;
}

片段着色器接收两个 uniform 变量：uColorA 和 uColorB，它们定义了三角形渐变的起始和结束颜色。它还接收一个 varying 变量 vInterpolatedColor，它在顶点着色器中计算并插值到片段中。

在片段着色器中，我们简单地将 gl_FragColor 设置为 vInterpolatedColor，它将在片段中显示渐变的颜色。

顶点缓冲区

为了存储三角形的颜色数据，我们将使用顶点缓冲区。顶点缓冲区是一个包含顶点数据的连续内存块。

// 创建顶点缓冲区
GLuint vertexBuffer;
glGenBuffers(1, &vertexBuffer);

// 绑定顶点缓冲区
glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer);

// 顶点数据
GLfloat vertices[] = {
  -1.0f, -1.0f, 0.0f,  // 左下角
  1.0f, -1.0f, 0.0f,   // 右下角
  0.0f, 1.0f, 0.0f    // 顶点
};

// 将顶点数据复制到缓冲区
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

我们创建了一个包含三角形三个顶点的顶点缓冲区。然后我们将该缓冲区绑定到 GL_ARRAY_BUFFER，并使用 glBufferData 将顶点数据复制到缓冲区中。

绘制三角形

现在我们已经配置了着色器和顶点缓冲区，我们可以绘制三角形了。

// 启用顶点属性数组
glEnableVertexAttribArray(0);

// 绑定顶点缓冲区
glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer);

// 设置顶点属性指针
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, 0);

// 设置 uniform 变量
glUniform3f(glGetUniformLocation(program, "uColorA"), 1.0f, 0.0f, 0.0f);
glUniform3f(glGetUniformLocation(program, "uColorB"), 0.0f, 1.0f, 0.0f);

// 绘制三角形
glDrawArrays(GL_TRIANGLES, 0, 3);