Parallax map looks noisy

aegroto · January 2, 2015, 1:36pm

Hi,

I’m working on a map and i tried to use Lighting.j3md to implement Normal,Parallax and Steep Parallax.

With just normal map mesh looks decent:

But when i implement parallax and steep parallax it becomes like this:

This is the code i use for material:

       mat = new Material(getAM(), "MatDefs/Light/Lighting.j3md");
        mat.setTexture("DiffuseMap",getAM().loadTexture(new TextureKey("Textures/textures/map_texture.png",false)));
        mat.setTexture("NormalMap",getAM().loadTexture(new TextureKey("Textures/textures/normals/map_normals.png",false)));
        mat.setTexture("ParallaxMap",getAM().loadTexture(new TextureKey("Textures/textures/parallax/map_parallax.png",false)));
        mat.setBoolean("UseMaterialColors", true);
        mat.setColor("Diffuse",ColorRGBA.White);
        mat.setColor("Specular",ColorRGBA.White);
        mat.setFloat("Shininess",64f);  // [0,128] 
        //mat.setFloat("ParallaxHeight",0.1f);
        mat.setBoolean("SteepParallax", true);

And this is normal and parallax map:

I think parallax map is not made correctly,but i’m not totally sure…can somebody explain me how the parallax map should be built?

pspeed · January 2, 2015, 2:25pm

Does your mesh have tangents?

aegroto · January 2, 2015, 9:12pm

Yes it has

TangentBinormalGenerator.generate(map);

aegroto · January 18, 2015, 10:59pm

I tried to disable parallax and to reduce parallax height.I also inverted colors in the parallax map but some noises still remain…did somebody have my same problem?

aegroto · February 23, 2015, 1:34pm

This is gonna make me crazy.

Parallax: http://postimg.org/image/6f1fwnlp3/

Steep Parallax: http://s7.postimg.org/dgzdiupay/background9.jpg

I heard about a bug on steep angle ( [Patch] Bug in Steep Parallax Mapping of Lighting shader ) but this is old and it seems to be fixed in the shader that i use…

nehon · February 23, 2015, 2:05pm

Your parallax map is not a valid parallax map. It’s not just a matter of making your normal map grey scaled…
holes you be black and spikes should be white…

aegroto · February 23, 2015, 4:01pm

Can you explain me a little how to make a proper parallax map?

EDIT:
There are some screenshots: http://postimg.org/gallery/2zwqxpay/1df1792e/

Parallax,normals and the result.

nehon · February 23, 2015, 4:36pm

It’s not something you can paint unless you have a very simple shape. usually you generate them with a tool.
Look for heightmap generator, bump map generator. see what the heightmap in JME examples looks like

It has different levels of gray, and doesn’t roughly jump from black to white.
see this Parallax Map - polycount

aegroto · February 23, 2015, 4:44pm

Ok,thanks! I’ll read all that papers.And what about the distortion that increases when i start reaching the steep angle?

nehon · February 23, 2015, 4:46pm

because the steeper the angle is the more you see the layers…
Parallax mapping is a trick of the eyes, and since your map is wrong, the effect is never really tricking you. And up close it’s worst

aegroto · February 23, 2015, 5:33pm

I also tried to use a total white map but the middle bar still remains :\ But anyway does anyone know a good linux program to generate heightmaps?I tried with gimp but even if mapping looks good i still see the texture deformed when i reach steep angle.

This is the code i use to register the material,maybe this can help understanding what i’m doing:

        Texture map_diffuse = getAM().loadTexture(new TextureKey("Textures/textures/map_texture.png",false));
        map_diffuse.setMagFilter(Texture.MagFilter.Bilinear);
        map_diffuse.setMinFilter(Texture.MinFilter.Trilinear);
        map_diffuse.setAnisotropicFilter(4); 
        mat = new Material(getAM(), "MatDefs/LodLight/LodLighting.j3md");
        mat.setTexture("DiffuseMap",map_diffuse); 
        mat.setBoolean("UseMaterialColors", true);
        //mat.setBoolean("HighQuality", true);
        mat.setColor("Diffuse",ColorRGBA.White);
        mat.setColor("Specular",ColorRGBA.Gray);
        mat.setColor("Ambient",ColorRGBA.Black); 
        if(Options.useNormals) {
            Texture map_normal = getAM().loadTexture(new TextureKey("Textures/textures/normals/map_normals.png",false));  
            //map_normal.setMagFilter(Texture.MagFilter.Bilinear);
            //map_normal.setMinFilter(Texture.MinFilter.Trilinear);
            map_normal.setAnisotropicFilter(4);
            mat.setTexture("NormalMap",map_normal);
            //mat.setBoolean("WardIso",true);
            mat.setFloat("Shininess",0f);  // [0,128] 
        }
        if(Options.useParallax) {
            Texture map_parallax = getAM().loadTexture(new TextureKey("Textures/textures/parallax/map_parallax.png",false));
            //map_parallax.setMagFilter(Texture.MagFilter.Bilinear);
            //map_parallax.setMinFilter(Texture.MinFilter.Trilinear);
            map_parallax.setAnisotropicFilter(4);     
            mat.setTexture("ParallaxMap",map_parallax);
            mat.setFloat("ParallaxHeight",0.2f);
            mat.setBoolean("SteepParallax", true);
            mat.setFloat("LodDistance",1500);
        }

LodLighting is just a modified version of the Lighting shader i made to disable effects after a certain distance,however the normal/parallax code is untouched and i already tried using the default Lighting.j3md material.

nehon · February 23, 2015, 5:39pm

What does this test case looks like

github.com

jMonkeyEngine/jmonkeyengine/blob/master/jme3-examples/src/main/java/jme3test/material/TestParallax.java#L53


import com.jme3.scene.Geometry;
import com.jme3.scene.Node;
import com.jme3.scene.Spatial;
import com.jme3.scene.shape.Quad;
import com.jme3.util.SkyFactory;
import com.jme3.util.TangentBinormalGenerator;
public class TestParallax extends SimpleApplication {
    private final Vector3f lightDir = new Vector3f(-1, -1, .5f).normalizeLocal();
    public static void main(String[] args) {
        TestParallax app = new TestParallax();
        app.start();
    }
    public void setupSkyBox() {
        rootNode.attachChild(SkyFactory.createSky(assetManager, "Scenes/Beach/FullskiesSunset0068.dds", SkyFactory.EnvMapType.CubeMap));
    }
    DirectionalLight dl;

aegroto · February 23, 2015, 5:56pm

Already tried that and it looks good,i’ll post you a screen.

http://s7.postimg.org/9g0w01huz/background11.png

EDIT: I tried to replace the texture using bricks and this is the result:

http://s2.postimg.org/ydvddijvd/background12.png

So i think this is probably something about the model :\

nehon · February 23, 2015, 8:07pm

Well then it all boils down to the Texture then.
I use the substance suite for texturing and they have a software called Bitmap2material that generate pretty much anything from a bitmap
https://www.allegorithmic.com/products/bitmap2material
Though that’s a charged product. But maybe the free trial can help.

I saw a tutorial with blender once, but that was more a hack rather than proper baking, and you need a high poly mesh.
I’ve seen some tuts for Gimp http://www.gamedzine.com/index.php/bare-bones-tutorials/unity-snippets
But that’s not gonna help you to generate the heightmap from a bitmap

aegroto · February 23, 2015, 8:29pm

^^^

But i tested with the brick texture and the noise still remains.

nehon · February 23, 2015, 8:38pm

if by noise you mean the slight horizontal lines you see, that’s what parallax mapping does. To avoid this you need to increase the number of samples, but at the cost of performance.
If you mean the strange thing in the background on the right, I have no clue of what it is.

aegroto · February 23, 2015, 8:59pm

Yeah,i made some other testing and i think that the shader repeats the UV map,it reaches the pink texture and that’s what is the bar made.

I’ll try to resolve this,maybe by using triplanar mapping

nehon · February 23, 2015, 9:01pm

ho maybe you didn’t set the texture to repeat?

aegroto · February 23, 2015, 9:15pm

I tried with WrapMode.repeat but this still not works.

aegroto · February 25, 2015, 6:19pm

I divided the map into 2 meshes,i redesigned normals and parallax but there’s still the same exact bug.

The test is still good,there are diffuse/normals/parallax: http://postimg.org/gallery/rva7joi6/7f74acce/

I have totally no idea what to try now,anyhow classic parallax looks ok.

EDIT: There’s a video → - YouTube