OpenGL超级宝典学习笔记——片段着色器（二）

嗜简如命 2015-02-25

图像处理

图像处理是一种独立于顶点着色器的特殊处理程序。在不使用片段着色器的情况下绘制场景之后，可以按照各种方式应用卷积核。

为了保持着色器的简洁，使用硬件加速，我们限制总卷积的大小为3X3.

在示例程序中，调用glCopyTexIamge2D把帧缓冲区拷贝到纹理中。纹理的大下为小于窗口的2的最大N次方值（在2.0中则没有这个限制）。然后在窗口的中间绘制一个片段着色的四边形，大小与这个纹理相同，其纹理坐标从左下角（0，0）到右上角（1，1）。

片段着色器基于纹理坐标，在以其为核心的相邻的3X3纹理中进行采样，然后进行过滤，得到这个中心点的颜色。

模糊

模糊可能是最常见的过滤器。它能够平滑一些高频率的特性，例如物体边缘的锯齿。它也叫做低通滤波器。它允许低频率的特性通过，而截留高频率的特性。

如果我们只用3X3的卷积核，那么在单次采样时不会有太明显的变化。我们可以进行多次采样。

下面是着色器代码：

//blur.fs
#version 120
//采样的纹理
uniform sampler2D sampler0;
//采样的偏移
uniform vec2 tc_offset[9];

void main(void)
{
    vec4 sampler[9];
    for (int i = 0; i < 9; ++i)
    {
        //获得采样数据
        sampler[i] = texture2D(sampler0, gl_TexCoord[0].st + tc_offset[i]);
    }

  //1 2 1
    //2 1 2  /13
    //1 2 1
    //计算结果
    gl_FragColor = (sampler[0] + sampler[1] * 2.0 + sampler[2] +  sampler[3] * 2.0 + sampler[4] +
                                     sampler[5]  * 2.0 + sampler[6] + sampler[7] * 2.0 + sampler[8])/ 13.0;
}

在这个过程中，首先我们先不使用着色器绘制好图形，然后启用着色器程序，设置好sampler0和tc_offse，把帧缓冲拷贝到纹理中。再设置好纹理坐标，绘制一个正方形，使用着色器处理纹理。下面是部分关建代码：

void ChangeSize()
{
...
 windowWidth = textureWidth = w;
  windowHeight = textureHeight = h;
  //不支持非2的n次纹理
  if (!GLEE_ARB_texture_non_power_of_two)
  {
    int n = 1;
    while ((1 << n) < windowWidth)
    {
      n++;
    }
    textureWidth = (1 << (n-1));

    n = 1;
    while ((1 << n) < windowHeight)
    {
      n++;
    }
    textureHeight = (1 << (n-1));
  }

  glViewport(0 ,0, w, h);
  TwWindowSize(w, h);
  GLfloat xIn = 1.0f/textureWidth;
  GLfloat yIn = 1.0f/textureHeight;
  //构造偏移数组
  for (int i = 0; i < 3; ++i)
  {
    for (int j = 0; j < 3; ++j)
    {
      tc_offset[3 * i + j][0] = (i - 1.0f) * xIn;
      tc_offset[3 * i + j][1] = (j - 1.0f) * yIn;
    }
  }
}
void RenderScene()
{
....
  //不使用着色器，绘制图形到帧缓冲区
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  glUseProgram(0);
  glLightfv(GL_LIGHT0, GL_POSITION, g_lightPos);
  glMatrixMode(GL_PROJECTION);
  glLoadIdentity();
  gluPerspective(35.0, (GLfloat)windowWidth/(GLfloat)windowHeight, 1.0, 100.0);
  glMatrixMode(GL_MODELVIEW);
  glPushMatrix();
    gluLookAt(cameraPos[0], cameraPos[1], cameraPos[2], 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
    glTranslatef(xTrans, yTrans, zTrans);
    float mat[4*4];
    ConvertQuaternionToMatrix(g_Rotate, mat);

    glMultMatrixf(mat);

    DrawGround();
    DrawObjects();
  glPopMatrix();
  //开启片段着色器，进行模糊处理
  glDisable(GL_DEPTH_TEST);
  glMatrixMode(GL_PROJECTION);
  glLoadIdentity();
  glMatrixMode(GL_MODELVIEW);
  glLoadIdentity();
  glUseProgram(program[whichShader]);

  uniformLoc = glGetUniformLocation(program[whichShader], "sampler0");
  if (uniformLoc != -1)
  {
    glUniform1i(uniformLoc, sampler);
  }
  uniformLoc = glGetUniformLocation(program[whichShader], "tc_offset");
  if (uniformLoc != -1)
  {
    glUniform2fv(uniformLoc, 9, &tc_offset[0][0]);
  }
  //通过着色器的次数
  for (int i = 0; i < numPass; ++i)
  {
    //从帧缓冲区中读取数据到纹理中
    glCopyTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, windowWidth-textureWidth, windowHeight-textureHeight,
      textureWidth, textureHeight, 0);
    //清空帧缓冲区
    glClear(GL_COLOR_BUFFER_BIT);
    glBegin(GL_QUADS);
      glTexCoord2f(0.0f, 0.0f);  
      glVertex2f((-(GLfloat)textureWidth/(GLfloat)windowWidth), -((GLfloat)textureHeight/(GLfloat)windowHeight));
      glTexCoord2f(1.0f, 0.0f);
      glVertex2f((GLfloat)textureWidth/(GLfloat)windowWidth, -((GLfloat)textureHeight/(GLfloat)windowHeight));
      glTexCoord2f(1.0f, 1.0f);
      glVertex2f((GLfloat)textureWidth/(GLfloat)windowWidth,  (GLfloat)textureHeight/(GLfloat)windowHeight);
      glTexCoord2f(0.0f, 1.0f);
      glVertex2f(-(GLfloat)textureWidth/(GLfloat)windowWidth,  (GLfloat)textureHeight/(GLfloat)windowHeight);
    glEnd();
  }

  glEnable(GL_DEPTH_TEST);
  glutSwapBuffers();
}

只进行一次采样：

OpenGL超级宝典学习笔记——片段着色器（二）

5次采样：

OpenGL超级宝典学习笔记——片段着色器（二）

锐化

锐化与模糊相反，它是使得物体的边缘更加明显和文字容易阅读。

锐化的着色器代码：

//sharpen.fs/
#version 120

uniform sampler2D sampler0;
uniform vec2 tc_offset[9];

void main(void)
{
    vec4 sampler[9];
    for (int i = 0; i < 9; ++i)
    {
        sampler[i] = texture2D(sampler0, gl_TexCoord[0].st + tc_offset[i]);
    }

    //-1 -1 -1
    //-1  9 -1 //锐化的卷积 和为1
    //-1 -1 -1
    gl_FragColor = (-sampler[0] - sampler[1] - sampler[2] - sampler[3] + 9 * sampler[4]
                                    -sampler[5] - sampler[6] - sampler[7] - sampler[8]);
}

注意这个卷积核相加的结果为1,这和模糊过滤器相同。这个操作保证了这种过滤器不会增强或减弱亮度。

锐化效果图

OpenGL超级宝典学习笔记——片段着色器（二）

膨胀和腐蚀

膨胀和腐蚀都属于形态过滤器，这意味着它们会改变物体的形态。膨胀扩大明亮物体的大小，而腐蚀则缩小明亮物体的大小。（对于暗的物体则是相反的）。

膨胀只是简单的找到相邻的最大值。

//dilation.fs
#version 120

uniform sampler2D sampler0;
uniform vec2 tc_offset[9];

void main(void)
{
    vec4 sampler[9];
    //find the max value
    vec4 maxValue = vec4(0.0);
    for (int i = 0; i < 9; ++i)
    {
        sampler[i] = texture2D(sampler0, gl_TexCoord[0].st + tc_offset[i]);
        maxValue = max(sampler[i], maxValue);
    }

    gl_FragColor = maxValue;
}

OpenGL超级宝典学习笔记——片段着色器（二）

腐蚀取周围相邻的最小值。

//erosion.fs
#version 120

uniform sampler2D sampler0;
uniform vec2 tc_offset[9];

void main(void)
{
    vec4 sampler[9];
    vec4 minValue = vec4(1.0);
    for (int i = 0; i < 9; ++i)
    {
        sampler[i] = texture2D(sampler0, gl_TexCoord[0].st + tc_offset[i]);
        minValue = min(minValue, sampler[i]);
    }

    gl_FragColor = minValue;
}

OpenGL超级宝典学习笔记——片段着色器（二）

边缘检测

比较有价值的过滤器是边缘检测。图像的边缘是颜色变化快的地方，而边缘检测则是选取这部分颜色急剧变化的地方并高亮它们。

有三种边缘检测器Laplacian,Sobel和Prewitt. Sobel和Prewitt梯度过滤器，它们检测每个通道强度的一阶导数的变化，只是在单个方向上进行。Laplacian则检测二阶导数的零值，也就是颜色的强度梯度从暗变亮的地方（或相反）。它可以用于所有的边缘。

下面的代码使用Laplacian过滤器。

//edgedetetion.fs
#version 120

uniform sampler2D sampler0;
uniform vec2 tc_offset[9];

void main(void)
{
    vec4 sampler[9];
    for (int i = 0; i < 9; ++i)
    {
        sampler[i] = texture2D(sampler0, gl_TexCoord[0].st + tc_offset[i]);
    }

    //-1 -1 -1
    //-1  8 -1
    //-1 -1 -1
    gl_FragColor = (8.0 * sampler[4]) - (sampler[0] + sampler[1] + sampler[2]
                        + sampler[3] + sampler[5] + sampler[6] + sampler[7] + sampler[8]);

}

OpenGL超级宝典学习笔记——片段着色器（二）

它和锐化过滤器的区别就是中间的那个值是8不是9,这样系数之和就是0。这也说明了为何图形中间是黑的。因为图元中间的颜色相近，通过卷积核过滤之后就接近于0了。只有在图元边缘颜色变化剧烈的地方，才有较大的颜色值。

光照

在此之前，我们讨论过逐顶点的光照。还讨论了通过分离镜面光和使用纹理查找的方式来提升光照效果。在这里我们使用片段着色器的方式来处理光照。算法是一样的。

在这里我们结合顶点着色器和片段着色器来实现。顶点着色器对法线、光照向量沿着线和三角形进行插值。然后，片段着色器处理顶点着色器产生的值得到最终的结果。

散射光照

公式：

Cdiff = max{N • L, 0} * Cmat * Cli

// diffuse.vs
//

uniform vec3 lightPos[1];
varying vec3 N, L;

void main(void)
{
    // vertex MVP transform
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;

    // eye-space normal
    N = gl_NormalMatrix * gl_Normal;

    // eye-space light vector
    vec4 V = gl_ModelViewMatrix * gl_Vertex;
    L = lightPos[0] - V.xyz;

    // Copy the primary color
    gl_FrontColor = gl_Color;
}

这与之前只用顶点着色器不同的是，这里用varyings修饰的标识符N和L作为输出，在片段着色器中用一样的名称就可以访问到N，L。这种方式比之前使用纹理坐标作为输出的方式更容易理解，也不容易出错（试想不小心把L输出到textureCoord[1]中，但实际使用的是textureCoord[0], 不会产生编译错误，但得不到想要的结果）。

下面是片段着色器代码：

//diffuse.fs
#version 120
varying vec3 N, L;

void main(void)
{
    float intensity = max(0.0, dot(normalize(N), normalize(L)));
    gl_FragColor = gl_Color;
    gl_FragColor.rgb *= intensity;
}

OpenGL超级宝典学习笔记——片段着色器（二）
多个镜面光

镜面光公式：

Cspec = max{N • H, 0}Sexp * Cmat * Cli

VS有多个L的输出

//3light.vs
#version 120

uniform vec3 lightPos[3];
varying vec3 N, L[3];
void main(void)
{
      //MVP transform
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
    //eye-space 
    vec4 V = gl_ModelViewMatrix * gl_Vertex;
    //eye-space noraml vector
    N = gl_NormalMatrix * gl_Normal;

    for (int i = 0; i < 3; ++i)
        {
      L[i] = lightPos[i] - V.xyz;
        }
    //primary vector
        gl_FrontColor = gl_Color;
}
//3light.fs
#version 120

varying vec3 N, L1[3];

void main(void)
{
    vec3 NN = normalize(N);
    gl_FragColor = vec4(0.0);
    //3个光的颜色    
    vec3 lightCol[3];
    lightCol[0] = vec3(0.5, 0.5, 1.0);
    lightCol[1] = vec3(0.2, 0.3, 0.5);
    lightCol[2] = vec3(0.8, 0.4, 0.8);
    const float expose = 128.0f;
    for (int i = 0; i < 3; ++i)
    {
        vec3 NL = normalize(L1[i]);
        vec3 H = normalize(NL + vec3(0.0, 0.0, 1.0));
        float NdotL = max(0.0, dot(NN, NL));
        //diffuse
        gl_FragColor.rgb += gl_Color.rgb * lightCol[i] * NdotL;

        //specular
        if (NdotL > 0.0)
        {
            gl_FragColor.rgb += lightCol[i] * pow(max(0.0, dot(NN, H)), expose);
        }
    }
    gl_FragColor.a = gl_Color.a;
}

OpenGL超级宝典学习笔记——片段着色器（二）

 

源码：https://github.com/sweetdark/openglex

嗜简如命

嗜简如命

相关推荐

OpenGl固定管线各种存储着色器

固定管线使用使用存储着色渲染,好处在于我们不要考虑到渲染中到底是顶点着色器还是片元着色器.所以我们在使用存储着色器时,不需要思考传递数据,该有那种方式传送.你只需要传递不同存储器所需要的数据到参数列表就可以了. 至于它的底层是如何实现的,并不需要关心.因为

sxaudq0 / 0评论 2020-05-09

OpenGL 中的三维纹理操作

= 0 ) // 补充数据，直到i是的倍数。++i; // 本来还有更快的算法，

夕加加 / 0评论 2019-10-27

opengl 相关概念

连接信息告诉流水线顶点如何组成图元。此阶段还负责视景体裁剪和背面剔除。片断是指一块数据，用来更新帧缓存中特定位置的一个像素。此外，这一阶段还可以进行雾化处理。一旦你使用了顶点shader，顶点处理器的所有固定功能都将被替换。最后用VAO将多个VBO，IBO

wanghualin0 / 0评论 2014-05-19

openGL碰到的一些小问题

最近试写了一些opengl的程序，发现的一些小问题，准备记录下来，如果日后理解了在回头看看，应该也算见证了一些成长。首先交代下上下文。其实我们知道color着色，可以分为直接使用颜色glColor4f();也可以使用顶点数组来着色glColorPointe

dayenglish / 0评论 2013-04-12

opengl学习（五）------ 视图（一）

好吧，我没有思路，就把用到的函数及其含义先罗列出来，等到有思路的时候，再来完成吧。gluLookAt:设置视觉坐标系。在实际的编程应用中，用户在完成场景的建模后，往往需要选择一个合适的视角或者不停地变换视角，以对场景作为观察。参数指定了视口的左下角，wid

wanghualin0 / 0评论 2012-04-07

OpenGL超级宝典学习笔记——纹理高级（三）

OpenGL的纹理组合器可以控制多重纹理的片段是如何组合的。一般情况下，我们可以简单的为每个纹理单元设置一个纹理环境模式，把每个纹理应用的结果添加到下一个纹理单元中。然而纹理组合器提供了一个新的纹理环境GL_COMBINE允许我们显示地控制每一个纹理单元的

perseverancep / 0评论 2015-02-25

OpenGL阴影贴图详解

既然模拟出了光照,那么也少不了阴影,阴影的产生是因为距离光线较近的物体遮挡了距离较远的物体,导致被遮挡的物体接受的光照少于遮挡物的,因此阴影的产生与否与物体到光源的位置有关系,静态物体的阴影可以用光照贴图来模拟,而动态阴影要用阴影锥或者阴影贴图实现,阴影锥

hankern / 0评论 2015-02-25

OpenGL中的FBO如何使用模板缓冲区

FBO常用框架一般需求只有color buffer，depth buffer，前者一般用纹理，后者一般用rbo。

小可 / 0评论 2014-03-25

Qt中OpenGL模块下将图片转化为纹理，并传入shader中

glBindTexture;//将纹理绑定到目标纹理上

曾少贤 / 0评论 2018-04-05

【计算机图形学】openGL常用函数

glAccum操作累加缓冲区。glAlphaFunc允许设置alpha检测功能。glArrayElement定义一个被用于顶点渲染的数组成分。glBegin,glEnd定义一个或一组原始的顶点。glBindTexture允许建立一个绑定到目标纹理的有名称的

编程爱好者联盟 / 0评论 2016-12-11