Libgdx 高级渲染之 高斯模糊

Libgdx 高级渲染之 高斯模糊

 

一、 什么是高斯模糊

               首先，当然是先了解什么是高斯模糊。高斯模糊，在Photoshop中是一种滤镜特效，网上有详细的讲解， 笔者就不浪费口舌。

   具体原理，请看 云彩挂上的二叉树 高斯模糊算法的实现和优化，有关于高斯模糊高阶知识。在游戏开发中，可以作为一种很有趣的特效，比如游戏暂停时，将主游戏界面进行模糊，同时，有不至于太过于静态，比如，将特定的界面进行模糊，得到较好的用户体验。

 

  二、 在Libgdx中的实现

          那么，在Libgdx中是怎么实现？ 先上效果图对比一下。

                                                                           未进行高斯模糊

                                                                 进行高斯模糊处理

    本基于libgdx1.5.4开发。

      因为没装好Eclipse Gradle 插件,为了方便，楼主只创建的Desktop工程：

          实际上笔者只是创建一个Demo，在stage绘制一张图片，当然，你也可以单独对一张图片进行渲染。对单个Stage整体进行渲染，并非完整游戏。在此，只需要了解BlurUils.java这个类。该类是笔者将高斯模糊封装为一个工具类。

1.创建GLSL着色器

         为什么使用GLSL？GLSL是OpenGL着色语言，笔者对GLSL语言不甚了解，其语法类似C语言。下面这两个着色器是笔者在官网wiki

https://github.com/mattdesl/lwjgl-basics/wiki/Shaders上找来再修改的。里面有对高斯模糊的详细描述，不过是英文版的。

首先是顶点着色器 vertex.vert

//combined projection and view matrix
 uniform mat4 u_projTrans;
//"in" attributes from our SpriteBatch
 attribute vec2 a_position; attribute vec2 a_texCoord0;
attribute vec4 a_color;
//"out" varyings to our fragment shader
varying vec4 vColor;
varying vec2 vTexCoord;
void main() {
vColor = a_color; vTexCoord= a_texCoord0; gl_Position = u_projTrans * vec4(a_position,0.0, 1.0); }

u_projTrans  投影和视图矩阵联合，stage的矩阵

a_position 顶点数据

a_texCoord0 传入的纹理

这个着色器实际上是对纹理数据进行初始化

 

片段着色器 fragment.frag

//"in" attributes from our vertex shader
varying vec4 vColor;
varying vec2 vTexCoord;

//declare uniforms
uniform sampler2D u_texture;
uniform float resolution;
uniform float radius;
uniform vec2 dir;

void main() {
    //this will be our RGBA sum
    vec4 sum = vec4(0.0);
    
    //our original texcoord for this fragment
    vec2 tc = vTexCoord;
    
    //the amount to blur, i.e. how far off center to sample from 
    //1.0 -> blur by one pixel
    //2.0 -> blur by two pixels, etc.
    float blur = radius/resolution; 
    
    //the direction of our blur
    //(1.0, 0.0) -> x-axis blur
    //(0.0, 1.0) -> y-axis blur
    float hstep = dir.x;
    float vstep = dir.y;
    
    
    //apply blurring, using a 9-tap filter with predefined gaussian weights
    
    sum += texture2D(u_texture, vec2(tc.x - 4.0*blur*hstep, tc.y - 4.0*blur*vstep)) * 0.0162162162;
    sum += texture2D(u_texture, vec2(tc.x - 3.0*blur*hstep, tc.y - 3.0*blur*vstep)) * 0.0540540541;
    sum += texture2D(u_texture, vec2(tc.x - 2.0*blur*hstep, tc.y - 2.0*blur*vstep)) * 0.1216216216;
    sum += texture2D(u_texture, vec2(tc.x - 1.0*blur*hstep, tc.y - 1.0*blur*vstep)) * 0.1945945946;
    
    sum += texture2D(u_texture, vec2(tc.x, tc.y)) * 0.2270270270;
    
    sum += texture2D(u_texture, vec2(tc.x + 1.0*blur*hstep, tc.y + 1.0*blur*vstep)) * 0.1945945946;
    sum += texture2D(u_texture, vec2(tc.x + 2.0*blur*hstep, tc.y + 2.0*blur*vste