[转载] GLSL基础篇

文森88

已于 2022-10-22 02:14:56 修改

阅读量2.8k

点赞数

文章标签：线性代数矩阵

于 2022-10-21 01:16:25 首次发布

原文链接：https://blog.csdn.net/vviccc/article/details/118730292

版权

文章目录

前几个章节主要是使用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/118730292