(May 2023) Monthly WIP Screenshot Thread

Looks nice :slightly_smiling_face:

Is that waterfall on the big rock? Did you make it via stock JME particle system or use some in-house shader?

By the way, let me know if you want to integrate some gradient fog filter into your editor, I can share some code.

1 Like

Hi @Ali_RS ,
Thanks for the comment.
Yes, I have implemented the standard jME particle system. Nothing special really.
I am also using the standard FogFilter.

It would be amazing if you would share your shader so that I can implement it.
It looks very good and would fit the purpose of this editor very well.

1 Like

Well, it is not my code, I just modified Riccardo’s gradient fog he wrote for his render pipeline to work with the current JME’s filter post-processor.

public class GradientFogFilter extends Filter {

    private Texture fogGradient;
    private float fogIntensity = 1f;
    private float fogDistanceNear = 1f;
    private float fogDistanceFar = 1000f;

    @Override
    protected void initFilter(AssetManager manager, RenderManager renderManager, ViewPort vp, int w, int h) {
        material = new Material(manager, "MatDefs/Post/GradientFog.j3md");
        if (fogGradient == null) {
            fogGradient = manager.loadTexture("Textures/gradient_ramp2.png");
        }
        material.setTexture("FogGradient", fogGradient);
        material.setFloat("FogIntensity", fogIntensity);
        material.setFloat("FogDistanceNear", fogDistanceNear);
        material.setFloat("FogDistanceFar", fogDistanceFar);
    }

    @Override
    protected Material getMaterial() {
        return material;
    }

    @Override
    protected boolean isRequiresDepthTexture() {
        return true;
    }

    public Texture getFogGradient() {
        return fogGradient;
    }

    public void setFogGradient(Texture fogGradient) {
        if (material != null) {
            material.setTexture("FogGradient", fogGradient);
        }

        this.fogGradient = fogGradient;
    }

    public float getFogIntensity() {
        return fogIntensity;
    }

    public void setFogIntensity(float fogIntensity) {
        if (material != null) {
            material.setFloat("FogIntensity", fogIntensity);
        }
        this.fogIntensity = fogIntensity;
    }

    public float getFogDistanceNear() {
        return fogDistanceNear;
    }

    public void setFogDistanceNear(float fogDistanceNear) {
        if (material != null) {
            material.setFloat("FogDistanceNear", fogDistanceNear);
        }

        this.fogDistanceNear = fogDistanceNear;
    }

    public float getFogDistanceFar() {
        return fogDistanceFar;
    }

    public void setFogDistanceFar(float fogDistanceFar) {
        if (material != null) {
            material.setFloat("FogDistanceFar", fogDistanceFar);
        }

        this.fogDistanceFar = fogDistanceFar;
    }
}

GradientFog.j3md:

MaterialDef GradientFog {
    MaterialParameters {
        Int NumSamples
        Int NumSamplesDepth
        Texture2D Texture
        Texture2D DepthTexture
        Texture2D FogGradient
        Float FogIntensity
        Float FogDistanceNear
        Float FogDistanceFar
    }

    Technique {
        VertexShader GLSL150:   Common/MatDefs/Post/Post.vert
        FragmentShader GLSL150: Shaders/Post/GradientFog.frag

        WorldParameters {
        }

        Defines {
            RESOLVE_MS : NumSamples
            RESOLVE_DEPTH_MS : NumSamplesDepth
        }
    }
}

GradientFog.frag:

#import "Common/ShaderLib/GLSLCompat.glsllib"
#import "Common/ShaderLib/MultiSample.glsllib"
#extension GL_ARB_explicit_attrib_location : enable

uniform COLORTEXTURE m_Texture;
uniform DEPTHTEXTURE m_DepthTexture;
varying vec2 texCoord;

uniform sampler2D m_FogGradient;
uniform float m_FogIntensity;
uniform float m_FogDistanceNear;
uniform float m_FogDistanceFar;

// depth is in [0, 1]
float getDistance(in float depth) {
    float near = 1.0;
    float far = m_FogDistanceFar;
    float d = 2.0 * depth -1.0;
    return (2. * near * far) / (far + near - d * (far - near));
}

float linear01Depth(in float depth) {
    float distance = getDistance(depth);
    float near = m_FogDistanceNear;
    float far = m_FogDistanceFar;
    distance = clamp(distance, near, far);
    return (distance - near) / (far - near);
}

vec4 sampleWithFog(in sampler2D sceneTx, in sampler2D depthTx, in sampler2D gradientTx){
    float depth = linear01Depth(texture(depthTx, texCoord).r);
    vec4 fogGradient = texture(gradientTx, vec2(depth, 0));
    vec4 color = texture(sceneTx, texCoord);
    color.rgb = mix(color.rgb, fogGradient.rgb, fogGradient.a * m_FogIntensity);
    return color;
}

void main(){
    gl_FragColor = sampleWithFog(m_Texture, m_DepthTexture, m_FogGradient);
}

gradient_ramp.png: (from here)

gradient_ramp2.png: (from here)

gradient_ramp2-1.png: (from here)

gradient_ramp7.png: (I made with Gimp)
gradient_ramp7

Usage example:

        // Setup fog
        gradientFog = new GradientFogFilter();
        gradientFog.setFogGradient(assets.loadTexture("Textures/gradient_ramp7.png"));
        gradientFog.setFogDistanceNear(0);
        gradientFog.setFogDistanceFar(400);
        gradientFog.setFogIntensity(0.45f);
        gradientFog.setEnabled(true);
        fpp.addFilter(gradientFog);

Edit:
Sorry to drill the WIP Screenshot thread!

6 Likes

This is cool. Thanks for sharing.

1 Like

First screenshot of GradientFog implemented into editor.

9 Likes

Anti-aliasing on and it is a painting! Nice!

1 Like

Some more eye candy.

7 Likes

Nice

By the way, here is another gradient ramp, if you like to go purple!

It’s from Riccardo’s repo:

Thanks, I will adjust my editor to take in any gradient texture you pass it.
By the way, do you know maybe how to solve this issue? Seems like there is some edge bleeding, anti-anti aliasing happening on the edges if I enable GradientFog:

1 Like

Not sure, maybe try FXAA filter.

FXAA is on. Something strange.

Hmm, make sure FXAA filter is added after the fog filter. AFAIK the filter orders matter.

1 Like

That also did not help.
Are you getting the same behaviour?

Checked it closely and yes seems I also get some weird aliasing issues when gradient fog is enabled. See the mountain edges

1 Like

I created a new topic for gradient fog, you can report issues or your improvements to the filter there:

@ndebruyn if you do not mind, I borrowed some of your screenshots for the above thread :slightly_smiling_face:

1 Like

No problem

1 Like

Today I enjoyed playing around with my editor, suppose to test my implementation of Occlusion Culling but got distracted with the awesome models one can find on Sketchfab.

Got the Baby grood model from this guy. CAPTAAINR - Sketchfab
Just added a nice Emission texture and we have a big mamma baby groot.

11 Likes

Cottage in the fog!

With two different gradient ramps

Making some enhancements (refactoring?) to the fog shader not knowing what the underlying math does :wink: noooooooob!!

I am surprised that every shader I looked was using a different math to get the actual z distance from the camera depth texture :thinking:

9 Likes

Hehe @Ali_RS , I feel the same when it comes to shaders, Noob. :rofl:
Looking very good though.

Let me know if you figure something out with the Anti-aliasing.

2 Likes

Thanks @ndebruyn

I will soon update the original thread with the new code, you can then try it out.

3 Likes