How to make Bloom work on Sprite?

Troubleshooting graphics
1

I’d like to apply a Bloom filter to a Sprite. I don’t have a glow map, I’d just like to apply it to the whote sprite (as in BloomFilter.GlowMode.Scene, but only to the Sprite I want). So I tried with this:

Material matshoot = new Material(getApplication().getAssetManager(), "Common/MatDefs/Misc/Unshaded.j3md");
matshoot.setTexture("ColorMap", getApplication().getAssetManager().loadTexture("Textures/bullet.png"));
matshoot.setColor("GlowColor",ColorRGBA.White);
matshoot.getAdditionalRenderState().setBlendMode(RenderState.BlendMode.Alpha);

Unfortunately, I get a Bloom-ized white rectangle (it ignores the alpha channel). Any advice? Thanks!

2 
gl_FragColor =  m_GlowColor;

The above line was taken from the Glow shader’s code. It means that the GlowColor is applied for every pixel of the geometry. You need to use custom material with custom shader which override Glow technique and blend GlowColor with alpha value of the ColorMap.

3

Now the alpha is right, but the color is solid (instead of the glow effect, I just have a white silhouette)… :frowning:

4

Show me your j3md file and glow’s shaders.

5 
MaterialDef Anim {

    MaterialParameters {
        Texture2D ColorMap
        Float SizeX : 1
        Float SizeY : 1
        Float Position
        Float HitTime
        Color GlowColor
    }

    Technique {
        VertexShader GLSL100:   MatDefs/Anim.vert
        FragmentShader GLSL100: MatDefs/Anim.frag

        WorldParameters {
            WorldViewProjectionMatrix        
        }

        Defines {          
            HAS_GLOWCOLOR : GlowColor
        }
    }

}



uniform sampler2D m_ColorMap;
uniform float g_Time;
uniform float m_HitTime;
uniform vec4 m_GlowColor;

varying vec2 texCoord;

void main(){  

    vec4 color = texture2D(m_ColorMap, texCoord);

vec4 overlay =  vec4(1.0,1.0,1.0,1.0);
  gl_FragColor =  mix(color, overlay, m_HitTime);
gl_FragColor =  m_GlowColor;
gl_FragColor.a = color.a;
}
6

No no no. Default technique ‘draws things on the screen’. You need to have a Glow technique (which is used by BloomFilter), take it from Unshaded for example, modify glow’s shaders to blend GlowColor with alpha. You don’t need to use GlowColor in default one.

The best thing you can do is to copy Unshaded.j3md to MyUnshaded.j3md and use your own vertex/fragment shader in Glow. Pass there the ColorMap and use it.

1 Like
7

Being a shader n00b, I find a bit difficult to follow you. I’ve taken the glow technique from Unshaded and added to my material:

MaterialDef Anim {

    MaterialParameters {
        Texture2D ColorMap
        Float SizeX : 1
        Float SizeY : 1
        Float Position
        Float HitTime
        Color GlowColor
    }

    Technique {
        VertexShader GLSL100:   MatDefs/Anim.vert
        FragmentShader GLSL100: MatDefs/Anim.frag

        WorldParameters {
            WorldViewProjectionMatrix        
        }

        Defines {          
            HAS_GLOWCOLOR : GlowColor
        }
    }
    Technique Glow {

        VertexShader GLSL100:   Common/MatDefs/Misc/Unshaded.vert
        FragmentShader GLSL100: Common/MatDefs/Light/Glow.frag

        WorldParameters {
            WorldViewProjectionMatrix
            ViewProjectionMatrix
            ViewMatrix
        }

        Defines {
            NEED_TEXCOORD1
            HAS_GLOWMAP : GlowMap
            HAS_GLOWCOLOR : GlowColor
            NUM_BONES : NumberOfBones
        INSTANCING : UseInstancing
        }
    }
}

Not sure what to do next… :stuck_out_tongue:

8

Ok, once again:

  1. Make a copy of unshaded.j3md

  2. Using a copy, modify Glow technique:

     FragmentShader GLSL100: Common/MatDefs/Light/Glow.frag

into:

    FragmentShader GLSL100: MyShaders/MyGlow.frag
  1. Copy Glow.frag → MyGlow.frag and modify it by adding and using m_ColorMap
1 Like