Posterization Post Processing Filter

Well, as announced earlier today, another post processor: Posterization

This one was way easier than the Crosshatch but it appears that the combination of these two together may improve visuals (even more ink styled drawings, yay!)



I suppose I do not need to post any pics of what it does, it’s well known anyway.

I added a strength value to the filter to control how much this filter influences the actual image. That way, one may have a mix of the posterized result

with the original images. The result will be a bit more drawn like image while not making too crisp edges. Give it a shot if you want to learn more, I suggest adding this line for a test/demo:

[java]posterization.setStrength(FastMath.sin(floatState*2) * 0.5f + 0.5f);[/java]



By the way, I want to point out that in Fog.j3md there is a slight mistake:

[java]MaterialDef Fade {[/java]

I suppose it should be Fog :wink:



PosterizationFilter.java

[java]package shaders;



import com.jme3.asset.AssetManager;

import com.jme3.material.Material;

import com.jme3.post.Filter;

import com.jme3.renderer.RenderManager;

import com.jme3.renderer.Renderer;

import com.jme3.renderer.ViewPort;



/**

  • A Post Processing filter to change colors appear with sharp edges as if the
  • available amount of colors available was not enough to draw the true image.
  • Possibly useful in cartoon styled games. Use the strength variable to lessen
  • influence of this filter on the total result. Values from 0.2 to 0.7 appear
  • to give nice results.

    *
  • Based on an article from Geeks3D:
  • http://www.geeks3d.com/20091027/shader-library-posterization-post-processing-effect-glsl/<br />
    

*

  • @author: Roy Straver a.k.a. Baal Garnaal

    /

    public class PosterizationFilter extends Filter {

    private int numColors = 8;

    private float gamma = 0.6f;

    private float strength = 1.0f;



    public PosterizationFilter() {

    super("PosterizationFilter");

    }



    public PosterizationFilter(int numColors) {

    this();

    this.numColors = numColors;

    }



    public PosterizationFilter(int numColors, float gamma) {

    this(numColors);

    this.gamma = gamma;

    }



    @Override

    public boolean isRequiresDepthTexture() {

    return false;

    }



    @Override

    public void initFilter(AssetManager manager, RenderManager renderManager, ViewPort vp, int w, int h) {

    material = new Material(manager, "/MatDefs/Post/Posterization.j3md");

    material.setInt("NumColors", numColors);

    material.setFloat("Gamma", gamma);

    material.setFloat("Strength", strength);

    }



    @Override

    public Material getMaterial() {

    return material;

    }



    @Override

    public void preRender(RenderManager renderManager, ViewPort viewPort) {

    }



    @Override

    public void cleanUpFilter(Renderer r) {

    }



    /

  • Sets number of color levels used to draw the screen

    /

    public void setNumColors(int numColors){

    this.numColors = numColors;

    if (material != null)

    material.setInt("NumColors", numColors);

    }



    /

  • Sets gamma level used to enhange visual quality

    /

    public void setGamma(float gamma){

    this.gamma = gamma;

    if (material != null)

    material.setFloat("Gamma", gamma);

    }



    /

  • Sets urrent strength value, i.e. influence on final image

    /

    public void setStrength(float strength){

    this.strength = strength;

    if (material != null)

    material.setFloat("Strength", strength);

    }



    /

  • Returns number of color levels used

    /

    public int getNumColors() {

    return numColors;

    }



    /

  • Returns current gamma value

    /

    public float getGamma() {

    return gamma;

    }



    /

  • Returns current strength value, i.e. influence on final image

    */

    public float getStrength() {

    return strength;

    }

    }[/java]



    Posterization.j3md

    [java]MaterialDef Posterization {



    MaterialParameters {

    Int NumSamples

    Texture2D Texture;

    Int NumColors;

    Float Gamma;

    Float Strength;

    }



    Technique {

    VertexShader GLSL150: Common/MatDefs/Post/Post15.vert

    FragmentShader GLSL150: MatDefs/Post/Posterization15.frag



    WorldParameters {

    WorldViewProjectionMatrix

    }

    }



    Technique {

    VertexShader GLSL100: Common/MatDefs/Post/Post.vert

    FragmentShader GLSL100: MatDefs/Post/Posterization.frag



    WorldParameters {

    WorldViewProjectionMatrix

    }

    }



    Technique FixedFunc {

    }



    }[/java]



    Posterization15.frag

    [java]#import "Common/ShaderLib/MultiSample.glsllib"



    uniform COLORTEXTURE m_Texture;

    in vec2 texCoord;



    uniform int m_NumColors;

    uniform float m_Gamma;

    uniform float m_Strength;



    void main() {

    vec4 texVal = getColor(m_Texture, texCoord);



    texVal = pow(texVal, vec4(m_Gamma));

    texVal = texVal * m_NumColors;

    texVal = floor(texVal);

    texVal = texVal / m_NumColors;

    texVal = pow(texVal, vec4(1.0/m_Gamma));



    gl_FragColor = mix(getColor(m_Texture, texCoord), texVal, m_Strength);

    }

    [/java]



    Posterization.frag

    [java]uniform sampler2D m_Texture;

    varying vec2 texCoord;



    uniform int m_NumColors;

    uniform float m_Gamma;

    uniform float m_Strength;



    void main() {

    vec4 texVal = texture2D(m_Texture, texCoord);



    texVal = pow(texVal, vec4(m_Gamma));

    texVal = texVal * m_NumColors;

    texVal = floor(texVal);

    texVal = texVal / m_NumColors;

    texVal = pow(texVal, vec4(1.0/m_Gamma));



    gl_FragColor = mix(texture2D(m_Texture, texCoord), texVal, m_Strength);

    }[/java]
5 Likes
baalgarnaal said:
By the way, I want to point out that in Fog.j3md there is a slight mistake:
[java]MaterialDef Fade {[/java]
I suppose it should be Fog ;)

Lol yeah, i also use a lot of copy/paste ;)

Thanks for this new filter!

Hello!



Geeeeeeeeebz. Two shaders in probably less than two days. Do you give lessons? :stuck_out_tongue: Or can I just sit near you and absorb knowledge via proximity? :stuck_out_tongue:



Great job baalgarnaal! :smiley:



Cheers!

~FlaH

Actually, 3, I did the dreamvision too but I think it’s too boring to even share it as it is, I mean its just a diagonal blur without colors. I’m thinking about expanding it and adding more options to it for a better effect, might post it after that :stuck_out_tongue: Plus I gave the heat blur a shot but that one gave me a headache, stared too long into badly blurred images… Need to rethink a bit on that, did get some nice effects with it tho.



It’s not hard to make them, I mean, look at the other examples and just move bits around :stuck_out_tongue:

Awesome, love to see you learning and having success and fun while OSS’ing your stuff, community ftw :slight_smile: This is what jME is made of.

And that’s in too

Thanks @baalgarnaal