Usage of Displacement Map using PBRs

[lokkiii]

Hello Admins, Devs and Users, any help would be appreciated.

I am trying to use the displacement maps to get the displaced effect rather than create a geometry for my 3D models which will go into millions of faces. On the web, I was able to get these instructions for an older version of Defold which is no longer valid:

1. Create a New Project:

   • Open Defold and create a new project using the “Basic 3D” template.

2. Import Textures:

   • Drag your diffuse map (e.g., diffuse.png) and displacement (height) map (e.g., height.png) into the assets folder in your Defold project.

3. Create a Material:

   • Go to Game → Materials and create a new material file named displacement.material.

4. Setup the Vertex Shader:

   • Right-click on the assets folder, go to New → Shader, and create a new shader named displacement.vp.
   • Open displacement.vp and paste the following code:

     attribute vec4 position;
     attribute vec2 texcoord0;
     uniform mat4 view_proj;
     uniform sampler2D displacementMap;
     
     varying vec2 var_texcoord0;
     
     void main() {
         float displacement = texture2D(displacementMap, texcoord0).r;
         vec4 displaced_position = position + vec4(0.0, displacement * 0.1, 0.0, 0.0); // Adjust multiplier for displacement strength
         gl_Position = view_proj * displaced_position;
         var_texcoord0 = texcoord0;
     }
     

5. Setup the Fragment Shader:

   • Right-click on the assets folder, go to New → Shader, and create a new shader named displacement.fp.
   • Open displacement.fp and paste the following code:

     varying vec2 var_texcoord0;
     uniform sampler2D diffuseMap;
     
     void main() {
         gl_FragColor = texture2D(diffuseMap, var_texcoord0);
     }
     

6. Link Shaders in the Material:

   • Open displacement.material and set the Vertex Program to displacement.vp and Fragment Program to displacement.fp.
   • Set the Tag to displacement.

7. Assign Textures in the Material:

   • In displacement.material, add two texture units:
     • Name: diffuseMap, Type: texture
     • Name: displacementMap, Type: texture

8. Create a Material File:

   • Create a new .material file in the assets folder (e.g., displacement.material) and set up the following properties:
     • Vertex Shader: displacement.vp
     • Fragment Shader: displacement.fp
     • Textures: diffuseMap, displacementMap
     • Tag: displacement

9. Create a Model:

   • Right-click on the assets folder, go to New → Model, and create a new model file named plane.model.
   • Set the material to displacement.material.
   • Assign the plane geometry (e.g., plane.dae) to the model.

10. Assign Textures to the Model:

    • In plane.model, assign diffuse.png to the diffuseMap slot and height.png to the displacementMap slot.

11. Update the Render Script:

    • Open your render script (e.g., main.render_script) and ensure it includes the material tag displacement.

12. Run the Project:

    • Save all changes and run your project.
    • You should see your plane surface displaced based on the height map.

Can anyone help me with creating displaced surfaces using the Height Maps/Displacement Maps?

I just want to know how to take a “Plane” mesh(just flat surface) and give it artificial geometry so as to save the game from millions and billions of polys.

Any help please?

[lokkiii]

You can find that there is a PBR extension/library written here:
defold/defold-pbr

But this does not give any guidance in me trying to achieve the displaced geometry.

Defold is lacking a way to do as Godot engine does with PBR so easily by just dragging and dropping the PBR materials. The above github thing only helps with normal maps which only gives the illusion and shadow like output, making it look like 3d, but when playing a game, if you see the surface, you will see it is flat.

Godot, Unity, Unreal, CryEngine, etc gives us the height at each pixel of the map, making it look like real geometry with uneven surface, even if there is only one face. You can create an Plane object with 1 face in Godot, and apply the PBRs and it gives amazing results.

Please guide me to achieve that in Defold plssssss.

[britzl]

@lokkiii

On the web, I was able to get these instructions for an older version of Defold which is no longer valid

Which part is not valid anymore?

[lokkiii]

Thanks for responding @britzl …
From the 7th step I am unable to execute the steps.

When I open the “displacement.material”, I do not find the any slots in it, where I can add the “texture units”.

I have attached the screenshot for it.

Maybe an older version of defold had some slots for texture units, but in the latest version, I cannot find any.

Or maybe I am looking in the wrong place…

kindly help me complete from steps 7 to 12…

[lokkiii]

I was unable to find the slots for adding “Texture Units”…

[MasterMind]

You can add samplers for this purpose then assign a texture in the model properties , for the model that uses the material.

[lokkiii]

When I click on the “+” button below samplers, it does not add a row/anything to the slot.

when I right click inside the pane, and try to choose the “add” option, it still does nothing.

[britzl]

@lokkiii

when I right click inside the pane, and try to choose the “add” option, it still does nothing.

It should work. Can you please zip your project and share it here so that we can take a look?

[lokkiii]

Sure… Please find the attached project…
Basic 3D project.zip (4.6 MB)

Like I said, I am not sure where I have gone wrong.

If you can guide me even from the beginning, like when I start with template “Basic 3D Template” / “Basic Empty” and how to proceed from there, then it would be great.

[britzl]

I took a look at the project files and in your “displacement9.vp” you have a sampler named “displacementMap”:

attribute vec4 position;
attribute vec2 texcoord0;
uniform mat4 view_proj;
uniform sampler2D displacementMap;

varying vec2 var_texcoord0;

void main() {
	float displacement = texture2D(displacementMap, texcoord0).r;
	vec4 displaced_position = position + vec4(0.0, displacement * 0.1, 0.0, 0.0); // Adjust multiplier for displacement strength
	gl_Position = view_proj * displaced_position;
	var_texcoord0 = texcoord0;
}

In order for the program to work you also need to add the corresponding sampler to “displacement9.material”:

As soon as you add a sampler to a .material file it will show up as a new property in the properties view of any model which uses the material. In your case it is the “PlaneMesh.model”: