OpenGL ES GLSL 简介

OpenGL ES GLSL 简介

零基础 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 源码案例

OpenGL ES Windows 搭建环境(MFC版本)

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



OpenGL ES Windows 搭建环境(MFC版本)

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



OpenGL ES Windows 搭建环境(MFC版本)

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



OpenGL ES Windows 搭建环境(MFC版本)

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



OpenGL ES Windows 搭建环境(MFC版本)

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




六.猜你喜欢

  1. OpenGL ES 简介
  2. OpenGL ES 版本介绍
  3. OpenGL ES 2.0 和 3.0区别
  4. OpenGL ES 名词解释(一)
  5. OpenGL ES 名词解释(二)
  6. OpenGL ES GLSL 着色器使用过程
  7. OpenGL ES EGL 简介
  8. OpenGL ES EGL 名词解释
  9. OpenGL ES EGL eglGetDisplay
  10. OpenGL ES EGL eglInitialize
  11. OpenGL ES EGL eglGetConfigs
  12. OpenGL ES EGL eglChooseConfig
  13. OpenGL ES EGL eglGetError
  14. OpenGL ES EGL eglCreateContext
  15. OpenGL ES EGL eglCreateWindowSurface
  16. OpenGL ES EGL eglCreatePbufferSurface
  17. OpenGL ES EGL eglMakeCurrent
  18. OpenGL ES EGL eglSwapBuffer
  19. OpenGL ES EGL eglDestroySurface
  20. OpenGL ES EGL eglDestroyContext
  21. OpenGL ES EGL eglQueryContext
  22. OpenGL ES EAGLContext 和 EGLContext
  23. OpenGL ES OpenGL WebGL EGL WGL 区别
  24. OpenGL ES freeglut 下载和使用
  25. OpenGL ES glew 下载和使用
  26. OpenGL ES glut 下载和使用
  27. OpenGL ES glfw 下载和使用
  28. OpenGL ES glad 下载和使用
  29. OpenGL ES glut glew glfw glad freeglut
  30. OpenGL ES google angle
  31. OpenGL Windows 搭建环境(MFC版本)
  32. OpenGL ES Windows 搭建环境(MFC版本)
  33. OpenGL ES 版本检测
  34. OpenGL GLES 和 GLSL
  35. OpenGL ES 获取最大纹理尺寸 GL_MAX_TEXTURE_SIZE
  36. OpenGL ES 获取最多纹理单元数量 GL_MAX_TEXTURE_IMAGE_UNITS
  37. OpenGL ES 纹理采样的数量限制
  38. OpenGL ES 视口宽高限制 GL_MAX_VIEWPORT_DIMS
  39. OpenGL ES 笛卡尔坐标系之纹理坐标和顶点坐标
  40. OpenGL ES 查看显卡信息
  41. OpenGL ES 正交投影和透视投影
  42. OpenGL ES GLSL 简介

推荐文章

发表评论