[转载] GLSL基础篇

大家好，欢迎来到IT知识分享网。

前几个章节主要是使用OpenGL绘制出基本的图形，从这里开始我们考虑颜色的渐变，首先要了解GLSL语言的基础知识。

1 GLSL简介

GLSL是用来编写着色器程序的语言。GLSL是为图形计算量身定制的，它包含一些针对向量和矩阵操作的有用特性。着色器的开头要声明版本，接着是输入和输出变量、uniform和main函数。每个着色器的入口点都是main函数，在main中我们处理所有的in变量，并将结果输出到out变量中。

1.1 openGL图像管线

2 GLSL数据类型

GLSL的数据类型可以来指定变量种类。有如下几类：

基础数据类型：int、float、double、uint和bool。
容器类型：向量(Vector)、矩阵(Matrix)。
因为基础数据类型 和C语言类似，因此不多做阐述，主要讲解向量部分和矩阵部分

2.1 向量

@1 向量形式

GLSL中的向量是一个可以包含有1-4个分量的容器，分量的类型可以是前面默认基础类型的任意一个。它们可以是下面的形式（n代表分量的数量）：

vecn：包含n个float分量的默认向量
bvecn：包含n个bool分量的向量
ivecn：包含n个int分量的向量
uvecn：包含n个unsigned int分量的向量
dvecn：包含n个double分量的向量
一个向量的分量可以通过vec.x这种方式获取，也可以使用.x、.y、.z和.w来获取它们的其他几个分量。GLSL也允许对颜色使用rgba，或对纹理坐标使用stpq访问相同的分量。

@2 向量重组

向量这一数据类型也允许一些有趣而灵活的分量选择方式，叫做重组(Swizzling)。重组允许这样的语法：

vec2 someVec; vec4 differentVec = someVec.xyxx; vec3 anotherVec = differentVec.zyw; vec4 otherVec = someVec.xxxx + anotherVec.yxzy; 

可以使用上面4个字母任意组合来创建一个和原来向量一样长的（同类型）新向量，只要原来向量有那些分量即可。

@3 向量传递

我们也可以把一个向量作为一个参数传给不同的向量构造函数，以减少需求参数的数量：

vec2 vect = vec2(0.5f, 0.7f); vec4 result = vec4(vect, 0.0f, 0.0f); vec4 otherResult = vec4(result.xyz, 1.0f); 

总之，向量是一种灵活的数据类型，我们可以把用在各种输入和输出上。

2.2 矩阵

2.3 限定符

变量限定符:
修饰符 说明
const 将一个变量设置为只读形式，如果它初始化时用的是一个编译器常量，那么它本身也会成为编译器常量
in 设置这个变量为着色器的输入变量
out 设置这个变量为着色器的输出变量
uniform 设置这个变量为用户应用程序传递给着色器的数据，它对于给定的图元是一个常量
buffer 设置应用程序共享的一块可读写的内存；这块内存也作为着色器的存储缓存使用
shared 设置变量是本地工作组中共享的，它只能用于计算着色器中
attribute变量、varying变量

attribute变量是只能在vertex shader中使用的变量。（它不能在fragment shader中声明attribute变量，也不能被fragment shader中使用）；

varying变量主要用于在Shader Stage间进行传递，注意的是在光栅化(Rasterization)的时候，这些变量也会跟着一起被光栅插值。同样在GL3.x 中 varying 关键字也被废弃。

在GL3.x中，废弃了attribute、varying关键字，属性变量统一用in/out作为前置关键字，对每一个Shader stage来说，in表示该属性是作为输入的属性，out表示该属性是用于输出的属性。

3 输入输出

3.1 输入输出基础

着色器是各自独立的小程序，因此GLSL为每个着色器都定义了in和out关键字专门来实现数据交流和传递。每个着色器使用in和out来设定输入输出，只要一个输出变量与下一个着色器阶段的输入匹配，它的值就会传递下去。但在顶点和片段着色器中会有点不同。

顶点着色器从顶点数据中直接接收输入。
片段着色器需要一个vec4颜色输出变量，因为它需要生成一个最终输出的颜色。
所以，如果我们打算从一个着色器向另一个着色器发送数据，我们必须在发送方着色器中声明一个输出，在接收方着色器中声明一个输入。当类型和名字都一样的时候，OpenGL就会把两个变量链接到一起，它们之间就能发送数据了（这在链接程序对象时完成的）。如下两个着色器代码连接的方式如下：

@1 顶点着色器

#version 330 core layout (location = 0) in vec3 position; // position变量的属性位置值为0 out vec4 vertexColor; // 为片段着色器指定一个颜色输出 void main() { gl_Position = vec4(position, 1.0); // 注意我们如何把一个vec3作为vec4的构造器的参数 vertexColor = vec4(0.0f, 0.0f, 1.0f, 1.0f); // 把输出变量设置为暗红色 } 

@2 片段着色器

#version 330 core in vec4 vertexColor; // 从顶点着色器传来的输入变量（名称相同、类型相同） out vec4 color; // 片段着色器输出的变量名可以任意命名，类型必须是vec4 void main() { color = vertexColor; } 

在顶点着色器中声明了一个vertexColor变量作为vec4输出，并在片段着色器中声明了一个vertexColor变量作为输入。它们名字相同且类型相同，片段着色器中的vertexColor就和顶点着色器中的vertexColor链接了。由于我们在顶点着色器中将颜色设置为蓝色，最终的片段也是蓝色的。值传递的过程 就像是管道连接过程一样。

3.2 输入输出扩展

基于上面的机制，我们可以把颜色数据加进顶点数据中。代码如下所示：

GLfloat vertices[] = { // 位置 // 颜色 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f, // 右下 -0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, // 左下 0.0f, 0.5f, 0.0f, 0.0f, 0.0f, 1.0f // 顶部 }; 

由于有更多的数据要发送到顶点着色器，我们调整一下顶点着色器，使它能够接收颜色值作为一个顶点属性输入。需要注意的是我们用layout标识符来把color属性的位置值设置为1，代码如下所示：

#version 330 core layout (location = 0) in vec3 position; // 位置变量的属性位置值为 0 layout (location = 1) in vec3 color; // 颜色变量的属性位置值为 1 out vec3 ourColor; // 向片段着色器输出一个颜色 void main() { gl_Position = vec4(position, 1.0); ourColor = color; // 将ourColor设置为我们从顶点数据那里得到的输入颜色 } 

对应的片段着色器代码如下：

#version 330 core in vec3 ourColor; out vec4 color; void main() { color = vec4(ourColor, 1.0f); } 

因为我们添加了另一个顶点属性，并且更新了VBO的内存，我们就必须重新配置顶点属性指针。之前是这样：

更新后的VBO内存中的数据现在看起来像这样：

对应的代码修改为：

// 位置属性 glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)0); glEnableVertexAttribArray(0); // 颜色属性 glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)(3* sizeof(GLfloat))); glEnableVertexAttribArray(1); 

我们有3个顶点，和相应的3个颜色，从这个三角形的像素来看它可能包含50000左右的片段，片段着色器为这些像素进行插值颜色。如果你仔细看这些颜色就应该能明白了：红首先变成到紫再变为蓝色。片段插值会被应用到片段着色器的所有输入属性上。所以最终产生的效果如下所示：

4 Uniform变量

Uniform是 从CPU中的应用向GPU中的着色器发送数据的方式，但uniform和顶点属性有些不同。

uniform是全局的(Global)。
无论你把uniform值设置成什么，uniform会一直保存它们的数据，直到它们被重置或更新。
通过GLSL语言，可以通过uniform设置三角形的颜色，着色器代码如下：

#version 330 core out vec4 color; uniform vec4 ourColor; // 在OpenGL程序代码中设定这个变量 void main() { color = ourColor; } 

接下来我们在应用代码中做如下设置，代码如下：

//获取运行的秒数。 GLfloat timeValue = glfwGetTime(); //使用sin函数让颜色在0.0到1.0之间改变，最后将结果储存到greenValue，持续变化 GLfloat greenValue = (sin(timeValue) / 2) + 0.5; //查询uniform ourColor的位置值。查询函数参数为：着色器程序 和 uniform名字 GLint vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor"); glUseProgram(shaderProgram); //设置uniform值 glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f); 

知道如何设置uniform变量的值，就可以使用它们来渲染了。可以在每次渲染循环时更新uniform，渲染部分代码如下：

while(!glfwWindowShouldClose(window)) { glfwPollEvents(); glClearColor(0.2f, 0.4f, 0.3f, 1.0f); glClear(GL_COLOR_BUFFER_BIT); glUseProgram(shaderProgram); //新添加部分:更新uniform颜色 GLfloat timeValue = glfwGetTime(); GLfloat greenValue = (sin(timeValue) / 2) + 0.5; GLint vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor"); glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f); glBindVertexArray(VAO); glDrawArrays(GL_TRIANGLES, 0, 3); glBindVertexArray(0); } 

5. GPGPU图像处理Demo(AVGraphics)

流程说明：

int Watermark::init()
创建两个Textures
glGenTextures(1, &mTextureOes);
glBindTexture(GL_TEXTURE_EXTERNAL_OES, mTextureOes);
glTexParameterf(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glBindTexture(GL_TEXTURE_EXTERNAL_OES, 0);
glGenTextures(1, &mTexture2D);
glBindTexture(GL_TEXTURE_2D, mTexture2D);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, mWatermarkWidth, mWatermarkHeight, 0, GL_RGBA,
GL_UNSIGNED_BYTE, mWatermarkPixel);

获取变量：
mCameraTextureLoc = glGetUniformLocation(mProgram, “sCameraTexture”);
mWatermarkTextureLoc = glGetUniformLocation(mProgram, “sWatermarkTexture”);
在draw的时候active起来, 传入：
void Watermark::draw(GLfloat *cameraMatrix, GLfloat *watermarkMatrix) {

glViewport(0, 0, mWidth, mHeight);
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(mProgram);

glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_EXTERNAL_OES, mTextureOes); glUniform1i(mCameraTextureLoc, 0); glActiveTexture(GL_TEXTURE1); glBindTexture(GL_TEXTURE_2D, mTexture2D); glUniform1i(mWatermarkTextureLoc, 1); //传输水印纹理 

源码全部：

#version 300 es layout(location=0) in vec4 aPosition; layout(location=1) in vec4 aCameraTexCoord; layout(location=2) in vec4 aWatermarkTexCoord; uniform mat4 mCameraMatrix; uniform mat4 mWatermarkMatrix; out vec2 vCameraTexCoord; out vec2 vWatermarkTexCoord; void main() { vCameraTexCoord = (mCameraMatrix * aCameraTexCoord).xy; vWatermarkTexCoord = (mWatermarkMatrix * aWatermarkTexCoord).xy; gl_Position = aPosition; } 

#version 300 es #extension GL_OES_EGL_image_external_essl3 : require precision highp float; uniform samplerExternalOES sCameraTexture; uniform sampler2D sWatermarkTexture; in vec2 vCameraTexCoord; in vec2 vWatermarkTexCoord; layout(location=0) out vec4 fragColor; void main() { vec4 camera = texture(sCameraTexture, vCameraTexCoord); vec4 watermark = texture(sWatermarkTexture, vWatermarkTexCoord); // 水印之外的区域显示为相机预览图 float r = watermark.r + (1.0 - watermark.a) * camera.r; float g = watermark.g + (1.0 - watermark.a) * camera.g; float b = watermark.b + (1.0 - watermark.a) * camera.b; fragColor = vec4(r, g, b, 1.0); } 

app c++

// // Created by Administrator on 2018/8/23 0023. // #include <cstring> #include <GLES2/gl2.h> #include <GLES2/gl2ext.h> #include <log.h> #include "Watermark.h" #include "glutil.h" const static GLfloat VERTICES[] = { -1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f, 1.0f, -1.0f }; const static GLfloat CAMERA_COORDS[] = { 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f, }; const static GLfloat WATERMARK_COORD[] = { 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, }; const static GLushort INDICES[] = { 0, 1, 2, 0, 2, 3 }; const static GLuint ATTRIB_POSITION = 0; const static GLuint ATTRIB_CAMERA_COORD = 1; const static GLuint ATTRIB_WATERMARK_COORD = 2; const static GLuint VERTEX_POS_SIZE = 2; const static GLuint CAMERA_COORD_SIZE = 2; const static GLuint WATERMARK_COORD_SIZE = 2; const static GLuint INDEX_NUMBER = 6; Watermark::Watermark(ANativeWindow *window) : mWindow(window), mEGLCore(new EGLCore()), mTextureOes(0), mAssetManager(nullptr), mCameraMatrixLoc(0), mCameraTextureLoc(0), mWatermarkMatrixLoc(0), mWatermarkTextureLoc(0), mWatermarkWidth(0), mWatermarkHeight(0), mWatermarkPixel(nullptr) { } Watermark::~Watermark() { if (mWindow) { ANativeWindow_release(mWindow); mWindow = nullptr; } if (mEGLCore) { delete mEGLCore; mEGLCore = nullptr; } if (mWatermarkPixel) { delete mWatermarkPixel; mWatermarkPixel = nullptr; } mAssetManager = nullptr; } void Watermark::setAssetManager(AAssetManager *assetManager) { mAssetManager = assetManager; } void Watermark::setWatermark(uint8_t *watermarkPixel, size_t length, GLint width, GLint height) { mWatermarkWidth = width; mWatermarkHeight = height; if (!mWatermarkPixel) { mWatermarkPixel = new uint8_t[length]; } memcpy(mWatermarkPixel, watermarkPixel, length); } int Watermark::init() { if (!mEGLCore->buildContext(mWindow)) { return -1; } std::string *vShader = readShaderFromAsset(mAssetManager, "watermark.vert"); std::string *fShader = readShaderFromAsset(mAssetManager, "watermark.frag"); mProgram = loadProgram(vShader->c_str(), fShader->c_str()); glGenTextures(1, &mTextureOes); glBindTexture(GL_TEXTURE_EXTERNAL_OES, mTextureOes); glTexParameterf(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameterf(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glBindTexture(GL_TEXTURE_EXTERNAL_OES, 0); glGenTextures(1, &mTexture2D); glBindTexture(GL_TEXTURE_2D, mTexture2D); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, mWatermarkWidth, mWatermarkHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, mWatermarkPixel); mCameraMatrixLoc = glGetUniformLocation(mProgram, "mCameraMatrix"); mWatermarkMatrixLoc = glGetUniformLocation(mProgram, "mWatermarkMatrix"); mCameraTextureLoc = glGetUniformLocation(mProgram, "sCameraTexture"); mWatermarkTextureLoc = glGetUniformLocation(mProgram, "sWatermarkTexture"); glClearColor(1.0f, 1.0f, 1.0f, 1.0f); delete vShader; delete fShader; return mTextureOes; } void Watermark::draw(GLfloat *cameraMatrix, GLfloat *watermarkMatrix) { glViewport(0, 0, mWidth, mHeight); glClear(GL_COLOR_BUFFER_BIT); glUseProgram(mProgram); glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_EXTERNAL_OES, mTextureOes); glUniform1i(mCameraTextureLoc, 0); glActiveTexture(GL_TEXTURE1); glBindTexture(GL_TEXTURE_2D, mTexture2D); glUniform1i(mWatermarkTextureLoc, 1); glUniformMatrix4fv(mCameraMatrixLoc, 1, GL_FALSE, cameraMatrix); glUniformMatrix4fv(mWatermarkMatrixLoc, 1, GL_FALSE, watermarkMatrix); glEnableVertexAttribArray(ATTRIB_POSITION); glVertexAttribPointer(ATTRIB_POSITION, VERTEX_POS_SIZE, GL_FLOAT, GL_FALSE, 0, VERTICES); glEnableVertexAttribArray(ATTRIB_CAMERA_COORD); glVertexAttribPointer(ATTRIB_CAMERA_COORD, CAMERA_COORD_SIZE, GL_FLOAT, GL_FALSE, 0, CAMERA_COORDS); glEnableVertexAttribArray(ATTRIB_WATERMARK_COORD); glVertexAttribPointer(ATTRIB_WATERMARK_COORD, WATERMARK_COORD_SIZE, GL_FLOAT, GL_FALSE, 0, WATERMARK_COORD); // glDrawArrays(GL_TRIANGLE_STRIP, 0, VERTEX_NUM); glDrawElements(GL_TRIANGLES, INDEX_NUMBER, GL_UNSIGNED_SHORT, INDICES); glDisableVertexAttribArray(ATTRIB_POSITION); glDisableVertexAttribArray(ATTRIB_CAMERA_COORD); glDisableVertexAttribArray(ATTRIB_WATERMARK_COORD); glFlush(); mEGLCore->swapBuffer(); } void Watermark::stop() { glDeleteTextures(1, &mTextureOes); glDeleteTextures(1, &mTexture2D); glDeleteProgram(mProgram); mEGLCore->release(); } 

Watermark *watermark = nullptr; extern "C" JNIEXPORT jint JNICALL Java_com_steven_avgraphics_activity_gles_WatermarkActivity__1init(JNIEnv *env, jclass type, jobject surface, jint width, jint height, jbyteArray data_, jint dataLen, jint watermarkWidth, jint watermarkHeight, jobject manager_) { jbyte *data = env->GetByteArrayElements(data_, NULL); unique_lock<mutex> lock(gMutex); if (watermark) { watermark->stop(); delete watermark; } ANativeWindow *window = ANativeWindow_fromSurface(env, surface); AAssetManager *manager = AAssetManager_fromJava(env, manager_); watermark = new Watermark(window); watermark->setAssetManager(manager); watermark->resize(width, height); watermark->setWatermark((uint8_t *) data, (size_t) dataLen, watermarkWidth, watermarkHeight); env->ReleaseByteArrayElements(data_, data, 0); return watermark->init(); } extern "C" JNIEXPORT void JNICALL Java_com_steven_avgraphics_activity_gles_WatermarkActivity__1draw(JNIEnv *env, jclass type, jfloatArray cameraMatrix_, jfloatArray watermarkMatrix_) { jfloat *cameraMatrix = env->GetFloatArrayElements(cameraMatrix_, NULL); jfloat *watermarkMatrix = env->GetFloatArrayElements(watermarkMatrix_, NULL); unique_lock<mutex> lock(gMutex); if (!watermark) { LOGE("draw error, watermark is null"); return; } watermark->draw(cameraMatrix, watermarkMatrix); env->ReleaseFloatArrayElements(cameraMatrix_, cameraMatrix, 0); env->ReleaseFloatArrayElements(watermarkMatrix_, watermarkMatrix, 0); } 

该系列文章主要参考openGL官网 和学习 learnopenGL官网 进行知识体系的梳理和重构，重在形成自己对openGL知识的理解和知识体系。

参考相关链接总站：https://learnopengl-cn.readthedocs.io/zh/latest/
参考OpenGL官网：https://www.opengl.org/about/
同时也参考了网上其他内容知识 进而 进行整合。
————————————————
版权声明：本文为CSDN博主「图王大胜」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/vviccc/article/details/