OpenGL着色器（Shader）和GLSL语言的简单介绍

前言

最近在Android上发现一个开源软件，叫做ShaderEditor（着色编辑器），可以用它编写GLSL程序并且预览，还能与Android内置变量联系（电量，陀螺仪，磁力，触摸，等等），还可以将效果作用于桌面壁纸，非常酷炫，在深入了解之后认识了OpenGL和GLSL（Graphics Library Shader Language）。
开源地址：https://github.com/markusfisch/ShaderEditor
这里我展示了用这个编辑器编写的3D河豚，3D海浪，火焰，生命游戏（元胞自动机）

什么是OpenGL？

OpenGL（全写Open Graphics Library）是指定义了一个跨编程语言、跨平台的编程接口规格的专业的图形程序接口。它用于三维图像（二维的亦可），是一个功能强大，调用方便的底层图形库。

OpenGL™ 是行业领域中最为广泛接纳的 2D/3D 图形 API，其自诞生至今已催生了各种计算机平台及设备上的数千优秀应用程序。OpenGL™ 是独立于视窗操作系统或其它操作系统的，亦是网络透明的。在包含CAD、内容创作、能源、娱乐、游戏开发、制造业、制药业及虚拟现实等行业领域中，OpenGL™ 帮助程序员实现在 PC、工作站、超级计算机等硬件设备上的高性能、极具冲击力的高视觉表现力图形处理软件的开发。——百度百科

什么是Shader？

着色器（Shader）是用来实现图像渲染的，用来替代固定渲染管线的可编辑程序。其中Vertex Shader主要负责顶点的几何关系等的运算，Pixel Shader主要负责片源颜色等的计算。

着色器替代了传统的固定渲染管线，可以实现3D图形学计算中的相关计算，由于其可编辑性，可以实现各种各样的图像效果而不用受显卡的固定渲染管线限制。

什么是GLSL？

OpenGL着色语言（OpenGL Shading Language）是用来在OpenGL中着色编程的语言，也即开发人员写的短小的自定义程序，他们是在图形卡的GPU （Graphic Processor Unit图形处理单元）上执行的，代替了固定的渲染管线的一部分，使渲染管线中不同层次具有可编程性。比如：视图转换、投影转换等。GLSL（GL Shading Language）的着色器代码分成2个部分：Vertex Shader（顶点着色器）和Fragment（片断着色器），有时还会有Geometry Shader（几何着色器）。负责运行顶点着色的是顶点着色器。它可以得到当前OpenGL 中的状态，GLSL内置变量进行传递。GLSL其使用C语言作为基础高阶着色语言，避免了使用汇编语言或硬件规格语言的复杂性。

GLSL简单实例分析

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
 //上面是预编译，如果设备支持就使用高精度模式（更高精度的浮点运算），否则使用低精度模式

uniform vec2 resolution;
 //只读的全局变量，是一个二维浮点向量，表示当前设备的分辨率

void main(void)
 //用于着色的主函数
{
    vec2 uv = gl_FragCoord.xy / resolutionCoord.xy
     //当前着色像素坐标与设备分辨率的比值
    vec4 wave_color = vec4(uv, 1.0, 1.0);
     //uv设置了当前像素的红绿（RG）程度，蓝色（B）程度固定为1.0,透明度（A）固定为1.0
    gl_FragColor = wave_color;
     //将颜色（一个四维向量）赋值给gl_FragColor，这是设置当前像素颜色的固定写法
}

我们可以看到GLSL语言风格与C语言非常相似，上手比较容易。
二维浮点向量vec2 vec相当于C语言中的数组float vec[2]。
事实上GLSL也支持数组，如vec2 vec[2]相当于C语言中的二维数组float vec[2][2]

OpenGL学习网站

OpenGL学习网站——https://learnopengl-cn.github.io/

OpenGL深度介绍博客

OpenGL深度介绍博客——http://www.twinklingstar.cn/category/opengl/

GLSL中文手册

GLSL中文手册——https://blog.csdn.net/hk_shao/article/details/82084274

GLSL程序展示

效果参见本文开头图片

3D河豚鱼——https://blog.csdn.net/hk_shao/article/details/82084361
火焰效果——https://blog.csdn.net/hk_shao/article/details/82084411
3D海洋——https://blog.csdn.net/hk_shao/article/details/82084448
生命游戏（元胞自动机）——https://blog.csdn.net/hk_shao/article/details/82084481

国外着色器（Shader）源码分享网站

Shadertoy——https://www.shadertoy.com/