使用libgdx在屏幕矩形中应用模糊效果

Question

我一直在四处寻找一种方法，将模糊效果应用到简单移动应用程序的一部分屏幕上，如图所示：

如何使用libgdx实现此效果？

Answer 1

过程是：

1. 将场景渲染为帧缓冲区
2. 使用默认着色器
将帧缓冲区渲染到屏幕
3. 使用蓝色着色器
将帧缓冲区渲染为矩形

伪代码以演示基本算法。

RenderOnTexture rot=new RenderOnTexture(1);
Shader blurShader=new Shader("shaders/blur.frag","shaders/blur.vert");
Shader defaultShader=new Shader("shaders/default.frag","shaders/default.vert");

public void render(){
    Director.spriteBatch.setShader(defaultShader);
    //on your render method
    rot.begin();

//render your scene as usual(it will be stored to the framebuffer)
scene.render();

//render the framebuffer to the Screen with the default shader
TextureRegion regionScene=rot.endAndRender();

Director.spriteBatch.setShader(blurShader);

//Now render the blurred rectange using the regionScene TextureRegion



   }


public class RenderOnTexture {



private float m_fboScaler = 1.5f;
private boolean m_fboEnabled = true;
private FrameBuffer m_fbo = null;
private TextureRegion m_fboRegion = null;
OrthographicCamera camera;
public RenderOnTexture(float scale) {
    int width = (int) (Gdx.graphics.getWidth()*scale);
    int height = (int) (Gdx.graphics.getHeight()*scale);
    m_fbo = new FrameBuffer(Format.RGB565, (int)(width * m_fboScaler), (int)(height * m_fboScaler), false);
    m_fboRegion = new TextureRegion(m_fbo.getColorBufferTexture());
    m_fboRegion.flip(false,false);
    camera=new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
}
public gColor clearColor=new gColor(0,0,0,1);
public void begin(){
    if(m_fboEnabled)
    {                  
        m_fbo.begin();
        Gdx.gl.glClearColor(clearColor.r,clearColor.g,clearColor.b,clearColor.a);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    }
}
public TextureRegion end(){
    if(m_fbo != null)
    {
        m_fbo.end();
        return m_fboRegion;
    }  
    return null;
}
public TextureRegion endAndRender(){
    if(m_fbo == null)return null;
    m_fbo.end();
    Director.spriteBatch.setProjectionMatrix(camera.combined);
    Director.spriteBatch.setBlendFunction(GL20.GL_SRC_ALPHA, GL20.GL_ONE);
    Director.spriteBatch.disableBlending();
    boolean draw=Director.spriteBatch.isDrawing();
    if(!draw)Director.spriteBatch.begin();
    Director.spriteBatch.setColor(1,1,1,1);
    Director.spriteBatch.draw(m_fboRegion,-Gdx.graphics.getWidth()/2, -Gdx.graphics.getHeight()/2, Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
    if(!draw)Director.spriteBatch.end();
    return m_fboRegion;
}
}

模糊片段着色器（您需要传递（屏幕的）宽度和高度属性。

#ifdef GL_ES
#define LOWP lowp
precision mediump float;
#else
#define LOWP 
#endif

varying vec4 v_color;
varying vec2 v_texCoords;
uniform sampler2D u_texture;

varying vec4 vertexWorldPos;
uniform vec4 backColor;

uniform float width;
uniform float height;
void main() {
    vec2 tex;
    vec4 color2=vec4(0.0,0.0,0.0,0);

float stepx=(1.0/width)*4.0;
float stepy=(1.0/height)*4.0;
vec4 color;

tex.x=v_texCoords.x+stepx;
tex.y=v_texCoords.y+stepy;
color=v_color * texture2D(u_texture, tex);
color2.r+=color.r;
color2.g+=color.g;
color2.b+=color.b;
color2.a+=color.a;

tex.x=v_texCoords.x-stepx;
tex.y=v_texCoords.y+stepy;
color=v_color * texture2D(u_texture, tex);
color2.r+=color.r;
color2.g+=color.g;
color2.b+=color.b;
color2.a+=color.a;

tex.x=v_texCoords.x-stepx;
tex.y=v_texCoords.y-stepy;
color=v_color * texture2D(u_texture, tex);
color2.r+=color.r;
color2.g+=color.g;
color2.b+=color.b;
color2.a+=color.a;

tex.x=v_texCoords.x+stepx;
tex.y=v_texCoords.y-stepy;
color=v_color * texture2D(u_texture, tex);
color2.r+=color.r;
color2.g+=color.g;
color2.b+=color.b;
color2.a+=color.a;

tex.x=v_texCoords.x;
tex.y=v_texCoords.y;
color=v_color * texture2D(u_texture, tex);
color2.r+=color.r;
color2.g+=color.g;
color2.b+=color.b;
color2.a+=color.a;

color2.r/=5.0;
color2.g/=5.0;
color2.b/=5.0;
color2.a/=5.0;


gl_FragColor = color2;

}

很抱歉代码格式，我是唯一一个在代码编辑器方面遇到问题的人吗？...