如何学习OpenGLShader开发？

shader也称着色器&＃xff0c;着色器是运行在GPU上的小程序&＃xff0c;着色器是一种C风格语言——GLSL。

一、GLSL
GLSL是为图形量身定制的&＃xff0c;它为向量和矩阵运算提供了很大帮助。

1、着色器的开头总是要声明版本&＃xff0c;接着是输入和输出变量、uniform和main函数。main函数时每个着色器的入口&＃xff0c;用于处理所有输入变量&＃xff0c;并用输出变量输出处理结果。

2、类型&＃xff1a;着色器的类型包括&＃xff1a;int、float、double、uint、bool。GLSL的两种容器类型&＃xff1a;向量和矩阵。 向量是有1、2、3或4个元素的基本类型容器。vecn&＃xff1a;包含n个默认为float元素的向量&＃xff1b;其他还有bvecn、ivecn、uvecn、dvecn&＃xff0c;可以使用vec.x、.y、.z、.w来获取它们的1、2、3、4号元素&＃xff0c;GLSL也允许使用rgba来获取颜色的元素&＃xff0c;或者stpq获取纹理坐标元素。

3、in和out:着色器是各自独立的小程序&＃xff0c;每个着色器都是用这两个关键字定义输入和输出。使用layout元数据制定输入变量&＃xff0c;这样才可以在CPU上配置顶点属性。

4、定点着色器&＃xff1a;

layout (location &＃61; 0) in vec3 position; // 位置变量的属性position为0

out vec4 vertexColor; // 为像素着色器指定一个颜色输出

void main()
{
    gl_Position &＃61; vec4(position, 1.0); // 把一个vec3作为vec4的构造器的参数
    vertexColor &＃61; vec4(0.5f, 0.0f, 0.0f, 1.0f); // 把输出颜色设置为暗红色
}

5、像素着色器

in vec4 vertexColor; // 和顶点着色器的vertexColor变量类型相同、名称相同

out vec4 color; //像素着色器输出的变量名可以任意命名&＃xff0c;类型必须是vec4

void main()
{
    color &＃61; vertexColor;
}

6、uniform
uniform 是另一种从CPU应用向GPU着色器发送数据的方式&＃xff1b;
uniform和顶点属性的不同&＃xff1a;
1&＃xff09;uniform是全局的&＃xff1a;在所有着色器程序对象中都是独一无二的&＃xff0c;可以在任何着色器程序的任何阶段使用&＃xff0c;并且无论吧uniform值设置成什么&＃xff0c;uniform都会一直保存着它们的数据&＃xff0c;直到它们被重置或更新&＃xff1b;
2&＃xff09;uniform是constant的&＃xff1a;不能在着色器中修改&＃xff0c;任何修改都会报错&＃xff1b;

out vec4 color;

uniform vec4 ourColor; // 在C&＃43;&＃43;代码中设置

void main()
{
    color &＃61; ourColor;
}

而视频/游戏中酷炫逼真的效果又是由shader来控制实现的。所以想要提高自己技能就必须啃下shader这个硬骨头。学习OpenGL现在市面上比较受欢迎的书籍就是《OpenGL超级宝典&＃xff08;中文第5版3.3或者英文第七版4.5&＃xff09;》和《OpenGL编程指南&＃xff08;中文第九版4.5&＃xff09;》。建议先学习OpenGL超级宝典第五版&＃xff0c;虽然现在OpenGLl已经到最新的4.6了&＃xff0c;而超级宝典第五版里面只是到3.3&＃xff0c;但是并没有关系&＃xff0c;因为3.3到4.6之间的核心架构都没变&＃xff0c;只是引进了一些新的功能以及改善了某些功能的实现而已。而且书中细节讲解的很清晰&＃xff0c;还有大量的例子来佐证&＃xff0c;非常适合OpenGL初学者。当看完超级宝典第五版后建议再学习下OpenGL编程指南第九版&＃xff0c;该书针对OpenGL4.5版本&＃xff0c;不仅引入了很多有意思和高大上的技能讲解&＃xff0c;可以继续更深层次学习3.3往后的版本技能。

二、实时开发shader

shader 调试

片元着色器使用后缀&＃xff1a; .frag 等&＃xff0c;参考

brew update 
brew upgrade
brew install glslviewer

SublimeText-3 插件安装

glslViewer sublimeText 安装

  cd ~/Library/Application Support/Sublime Text 3/Packages/
  git clone https://github.com/patriciogonzalezvivo/sublime-glslViewer.git

package control 安装

工具栏中查找 package control&＃xff0c; 则control安装成功。

组合键 Command&＃43;Shift&＃43;P ,

搜索 package control:Install package

然后进行搜索 OpenGL Shading Language (GLSL), 即可实现 代码高亮

着色器 GLSL

如何进行编写和我们书写GLSL一样&＃xff0c;存在部分差异参考glslViewer GitHub:https://github.com/patriciogonzalezvivo/glslViewer

脚本文件和资源文件放在同一文件夹下&＃xff0c;终端cd到文件夹下&＃xff0c;运行如下&＃xff1a;

glslViewer text.frag test.jpg

效果&＃xff1a;