Looks nice 
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)
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
Anti-aliasing on and it is a painting! Nice!
1 Like
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
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.
12 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 
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 
10 Likes
Hehe @Ali_RS , I feel the same when it comes to shaders, Noob. 
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