Displacement example ?

fkossyvas

I am trying to create a displacement shader to apply on a spite using a Height map picture, just like this:

The image i've included is from cpetry.github.io/NormalMap-Online/ I have tried to study the 2D Normal Mapping example but i cannot really understand what should i do to achieve the displacement. Once having replaced the normal map texture with mine (the concentric circles) in the 2D Normal Maping example, the result is this one but i see no height difference (shown by horizontal/vertical displacement) but just only shadows. ****

Could you tell me where am i failing ? Thank you

memer

If you look at that page you will see that there are several textures. The normal map is meant to be applied to fragments in the fragment shader, which it looks like you have done. This only affects lighting calculations as you have seen.

The displacement map is separate and you need to apply it to the vertices of the mesh, so needs to be applied in the vertex shader. You will need a sprite quad that is tessellated heavily so that the vertices will be moved finely enough to look correct, and I don't think it will work with the built-in sprite because it is just a quad with two triangles.

fkossyvas

Thank you fro your answer but this solution includes vertex shaders while what i am trying to achieve is the effect shown at io7m.com/documents/displacement2d/#st200_s2ss2 I think that just modifying the fragment shader should do it but i cannot understand how the "output" pixel color works in Godot. I see this Normal but where is gl_FragColor ?

memer

Sorry, I thought you were trying to get the 3D displacement effect shown in cpetry.github.io/NormalMap-Online/

There are several output colors: https://godot.readthedocs.io/en/2.1/learning/features/shading/shading_language.html

DIFFUSE / DIFFUSE_ALPHA, SPECULAR, and EMISSION. You probably want to output to DIFFUSE or EMISSION. There is no gl_FragColor because that is the final output color for the pixel, which Godot calculates from your material outputs.

Also it is hard to tell what you are doing wrong without seeing your code. If you just switched in a different image for the normal map and kept the normal mapping code then you won't get the right result because normal mapping and displacement are different effects.

fkossyvas

After looking at the shading language from the link you gave me and watching the Intro to shaders in Godot 2 video i finally understood where i was wrong. I couldn't show you any code because i didn't had one ;) Now having an image as Base and a displacement map image as Map i have this as a result : The code i've written is for the Fragment part :

uniform texture base;
uniform texture map;
uniform float maximum=0.05;

vec4 displace  = tex(map, UV);
float displace_k  = displace.g * maximum;
vec2 uv_displaced = vec2(UV.x + displace_k,UV.y + displace_k);
COLOR = tex(base, uv_displaced);

Now i have done it by having an extra input (the Base image) while i would like using a Sprite's Texture directly.This could be done by using a backbuffer as stated in the Screen-reading shaders docs so ... more things to study :)
Thank you for your help memer ! I've included my project file if anyone wants to see it.

memer

Good that you got it working.