I am trying to learn PBR but having some issue understanding/implementing.
I have created a PG here https://www.babylonjs-playground.com/#Y0JJVF#1
I have used texture wall object in PG from Tiles 008 on CC0 Textures
// there is 5th image “Tiles008_2K_Displacement” where to use it in PG?
why my wall texture in PG looks different than this? how can I make it look like this? https://cdn3.struffelproductions.com/file/CC0-Textures/media/sphere/1024-JPG/Tiles008_PREVIEW.jpg
Thanks for any guidance
A good doc about PBR:
https://doc.babylonjs.com/how_to/physically_based_rendering
https://doc.babylonjs.com/how_to/physically_based_rendering_master
I’m afraid we are not supporting displacement map at the moment
I have read both of those pages, that’s how I was able to create PG
https://www.babylonjs-playground.com/#Y0JJVF#1
Now no matter what I apply, I still can’t produce same result of PBR as is here Tiles 008 on CC0 Textures. If I could see a working example of my PG I will understand whole concept.
Thanks <3
Hi. You can’t reproduce this material without displacement. But you can reproduce surface with thin instances
Sorry but i don’t have time. Use Thin Instances - Babylon.js Documentation
You need recreate part of your wall(brick) with details like displacement on geometry with blender or mathematics and with thin instance you can use this geometry like texture with no cost of draw calls. All your geometry with thin instance is 1 drawcall like texture. But in your case on flat wall you need simply normalmap because you don’t see difference
You should not set roughness to 1, else the bump can’t be seen. Also, using a directional light will produce better lighting effects:
https://www.babylonjs-playground.com/#Y0JJVF#3
Regarding the file named Tiles008_2K_Displacement, we don’t support displacement mapping but you can still use it for parallax mapping.
To do that, create a png file where rgb=normal.rgb and alpha channel = displacement map (in your case, you can use any of the r, g or b channel of the Tiles008_2K_Displacement.jpg file as they are the same).
Then, use this png file as your bump file in the PG and use:
pbrMat1.useParallax = true;
pbrMat1.useParallaxOcclusion = true;
pbrMat1.parallaxScaleBias = 0.01;
Last two lines are to enable parallax occlusion mapping, which is heavier in computation but better looking. See this doc: Use Parallax Mapping - Babylon.js Documentation
Here’s a comparison without parallax and with parallax occlusion. The quality is not very good because I could not produce a 2048x2048 bump texture when combining the normal + displacement files (I don’t have the right tools to do that), my bump file is only 256x231:
