GLSL：赋予 OpenGL 活力的着色语言

Android

2024-01-16 00:48:54

理解 GLSL 的核心价值与优势

GLSL（OpenGL Shading Language）是专门为 OpenGL 设计的一种编程语言，用于编写着色器程序。它提供了一种方式来操纵图形管线中的顶点和像素信息，从而实现复杂且高效的视觉效果。

语法简介

变量声明：使用 int, float, vec3 等类型。
函数定义：类似于 C 语言的函数，但必须指明返回值类型。
内置变量与函数：GLSL 内置了许多用于数学运算和图形处理的函数。

基本概念

顶点着色器：负责处理每个顶点的数据，如位置、颜色等。
片段着色器（像素着色器）：在光栅化阶段工作，决定屏幕上每个像素的颜色。

GLSL 实战示例

示例一：基础的顶点与片段着色器

这段代码展示了一个最基本的 OpenGL 程序中如何设置和使用顶点和片段着色器。

// 顶点着色器
#version 330 core
layout(location = 0) in vec3 aPos; // 位置变量，每个顶点一个

void main() {
    gl_Position = vec4(aPos, 1.0); // 将位置设置为原坐标加上w=1
}

// 片段着色器
#version 330 core

out vec4 FragColor;

void main() {
    FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f); // 设置输出颜色为橙红色
}

示例二：传递顶点属性到片段着色器

在某些情况下，需要从顶点着色器向片段着色器传递数据。这可以通过使用 out 关键字（在顶点着色器）和 in 关键字（在片段着色器）实现。

// 顶点着色器
#version 330 core

layout(location = 0) in vec3 aPos;
out vec4 vertexColor;

void main() {
    gl_Position = vec4(aPos, 1.0);
    vertexColor = vec4(0.5f, 0.5f, 0.5f, 1.0f); // 定义顶点颜色
}

// 片段着色器
#version 330 core

in vec4 vertexColor;
out vec4 FragColor;

void main() {
    FragColor = vertexColor; // 使用传递的顶点颜色作为片段颜色
}

进阶技术与技巧

使用纹理贴图

纹理是一种常见的图形效果，用于丰富物体表面细节。以下示例显示了如何在 GLSL 中使用纹理。

// 片段着色器
#version 330 core

in vec2 TexCoord;
out vec4 FragColor;

uniform sampler2D ourTexture; // 纹理变量，需要从OpenGL程序中传递值

void main() {
    FragColor = texture(ourTexture, TexCoord); // 使用纹理颜色
}

光照计算

通过向片段着色器添加光照计算可以显著增强图形的真实感。基本的光照模型包括环境光、漫反射和镜面反射。

// 片段着色器
#version 330 core

in vec2 TexCoord;
out vec4 FragColor;

uniform sampler2D ourTexture; // 纹理变量，需要从OpenGL程序中传递值
uniform vec3 lightPos;
uniform vec3 viewPos;
uniform vec3 objectColor;

void main() {
    vec3 ambient = 0.1f * texture(ourTexture, TexCoord).rgb;

    vec3 norm = normalize(vec3(0.57735f)); // 假设一个固定的法线
    vec3 lightDir = normalize(lightPos - FragColor.rgb);
    float diff = max(dot(norm, lightDir), 0.0);
    vec3 diffuse = diff * texture(ourTexture, TexCoord).rgb;

    vec3 viewDir = normalize(viewPos - FragColor.rgb);
    vec3 reflectDir = reflect(-lightDir, norm);  
    float spec = pow(max(dot(viewDir, reflectDir), 0.0), 64);

    vec3 specular = vec3(0.5f) * spec;

    FragColor = vec4((ambient + diffuse + specular) * objectColor, 1.0);
}