OpenGL ES GLSL 简介-猿说编程

ChatGPT 3.5 国内中文镜像站免费使用啦

零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 基础
零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录  >> OpenGL ES 特效
零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录  >> OpenGL ES 转场
零基础 OpenGL ES 学习路线推荐 :  OpenGL ES 学习目录 >> OpenGL ES 函数
零基础 OpenGL ES 学习路线推荐 :  OpenGL ES 学习目录 >> OpenGL ES GPUImage 使用
零基础 OpenGL ES 学习路线推荐 :  OpenGL ES 学习目录 >> OpenGL ES GLSL 编程

一.简介

OpenGL 着⾊语言(OpenGL Shading Language)是⽤来在 OpenGL 中着色编程的语言，也即开发人员写的短小的⾃定义程序，他们是在图形卡的 GPU (Graphic Processor Unit 图形处理单元)上执行的，代替了固定的渲染管线的一部分，使渲染管线中不同层次具有可编程性。⽐如:视图转换、投影转换等。

GLSL(GL Shading Language)的着⾊器代码分成2个部分:

Vertex Shader 顶点着⾊器
Fragment Shader 片元着器

关于 OpenGL ES 2.0 和 3.0顶点着色器和片元着色器区别请参考：《OpenGL ES 2.0 和 3.0区别》

二.Vertex Shader 顶点着⾊器

//顶点着色器
attribute vec4 aPosition;         // 应用程序传入顶点着色器的顶点位置
attribute vec2 aTextureCoord;     // 应用程序传入顶点着色器的顶点纹理坐标

varying vec2 vTextureCoord;       // 用于传递给片元着色器的顶点纹理数据
void main()
{
    gl_Position = aPosition;       // 此次绘制此顶点位置
    vTextureCoord = aTextureCoord; // 将接收的纹理坐标传递给片元着色器
}

三.Fragment Shader 片元着器

//片元着色器
precision mediump float;        // 设置工作精度

varying vec2 vTextureCoord;     // 接收从顶点着色器过来的纹理坐标
uniform sampler2D sTexture;     // 纹理采样器，代表一幅纹理
void main()
{             
    // 进行纹理采样                                                                      
    gl_FragColor = texture2D(sTexture, vTextureCoord);
}

四.GLSL 基础语法

1.基础数据类型

GLSL 支持以下三种基本数据类型：float、int、bool

需要特别注意的是，假设有一个 float 变量，在着色器中将其赋值为 1 ，在一些显卡上可能会崩溃！因为 1 是整数不是浮点数，所以需要将 1.0 赋给浮点型变量。

可以这样使用基本类型变量：

//错误的书写：
int a, b; //ios不支持
bool d = true; // ios 不支持 bool 变量
float c = 3; // 错误 3 是整形，非浮点数


//正确的书写：
int a = 0;
int b = 0;

float c = 3.0;
int x = 5;

2.向量类型

vec2、vec3、vec4：浮点型向量，可以存储2～4个浮点数。
ivec2、ivec3、ivec4：整数向量。
bvec2、bvec3、bvec4：布尔型向量。

向量的操作是很灵活的，可以使用下标来访问向量的分量，也可以使用 x、y、z、w 字段来访问向量的成员，使用 r、g、b、a字段可以访问颜色向量，使用 s、t、p、q 字段可以访问纹理坐标向量。如果要访问向量的x、y、z 3 个字段，还可以连续使用字段。下面来代码演示下：

vec2 a = vec2(1.0, 2.0);
vec3 b = vec3(3.0, 4.0, 5.0);
vec3 color = b.rgb;    //使用rgb来操作b的三个分量
float c = a[0];        //使用下标的方式来访问a的第一个变量
vec3 d = vec3(a, c);   //使用一个vec2和一个float初始化vec3
float e = float(d);    //d的x分量被赋值给了e

3.矩阵类型

GLSL 提供了2×2，3×3，4×4 共 3 种矩阵类型，分别使用 mat2，mat3，mat4 表示。此外还支持 2～4×2～4 的任意矩阵，如 mat3x2、mat4x3 等。用法和向量类似;

4.采样器类型

GLSL 提供了一组采样器，这是一种用于访问纹理的特殊类型，在读取纹理值时会用到，主要有下面几种采样器。

sampler1D：一维纹理采样器
sampler2D：二维纹理采样器
sampler3D：三维纹理采样器
samplerCube：立方体映射纹理采样器
sampler1DShadow：一维阴影映射采样器
sampler2DShadow：二维阴影映射采样器

5.数组

在 GLSL 中，可以像 C 语言一样声明和访问数组，但不能在声明时直接初始化数组，数组下标从 0 开始，如：

//正确的书写
int a[3];
a[0] = 1;
a[1] = 2;
a[2] = 3;

//错误的书写
int a[3] = {0,1,2};

6.结构体

GLSL 还可以定义结构体，定义和初始化如下：

struct xxx
{
    vec3 pos;
    vec3 color;
};

xxx st1;
xxx st2 = xxx(vec3(0.0, 0.0, 0.0), vec3(1.0, 1.0, 0.0));
st2.pos = vec3(0.0, 1.0, 0.0);

7.变量修饰符

变量修饰符放在变量类型之前，用于修饰变量，GLSL 常用的有以下变量修饰符

const：编译时期的常量，不可被修改
attribute：属性变量
uniform：统一变量
varying：易变变量

五.GLSL 源码案例

demo下载：《Windows OpenGL ES 图像白平衡色温》

demo下载：《Windows OpenGL ES 图像绿幕抠图》

demo下载：《Windows OpenGL ES 图像色调》

demo下载：《Windows OpenGL ES 图像色彩替换》

demo下载：《Windows OpenGL ES 图像饱和度调节》

六.猜你喜欢