# Bump map (normal map) shadows?

For example:

In the next shot, both sides have same geometry for the ground, but one has normal map shadow.

Looks like this doesn’t exist in Three (wasn’t able to find anything) and needs code injected into shaders.

Yes, the shadow is something you have to do in the fragment shader. Explaining the whole theory would be a bit extensive. Here is the elementary shader code

In the vertex shader you need to send vPosition, vNormal and vUv to the fragment shader and include it in the fragment shader

``````//in the fragment shader

vec3 p_dx = dFdx(vPosition);
vec3 p_dy = dFdy(vPosition);

vec2 tc_dx = dFdx(vUv);
vec2 tc_dy = dFdy(vUv);

vec3 tangent = normalize( tc_dy.y * p_dx - tc_dx.y * p_dy );
vec3 bitangent = normalize(tc_dy.x * p_dx - tc_dx.x * p_dy );

// get new tangent from a given mesh normal
vec3 x = cross(vNormal, tangent);
tangent = cross(x, vNormal);
tangent = normalize(tangent);

// get updated bi-tangent
x = cross(bitangent, vNormal);
bitangent = cross(vNormal, x);
bitangent = normalize(bitangent);
mat3 TBN = mat3( tangent, bitangent, vNormal);

vec3 normal = texture2D(normalTexture, vUv).rgb * 2. - 1.;
normal = normalize(normal);
vec3 finalNormal = normalize(TBN * normal);

//you need to set the sun position
vec3 vLL = normalize(sunPosition - vPosition);
float ndotl = dot (vLL, finalNormal);	//normal dot light

//multiply your fragment color with ndotl

``````

P.S. Oh, it’s you trusktr, then I don’t have to worry about. You know shaders very well

Here’s a little theory if you’re interested:

1 Like
3 Likes

I’ve heard this referred to as Parallax Mapping, if that’s any help:

2 Likes

Wow, it has concepts from way back in 2000. I think these would be sweet features to have. I wonder if there’s a reason it isn’t already in Three.

We had a parallax mapping example in the repository but it has been removed in `r132`. Parallax mapping was implemented as a custom shader without lighting support which made the implementation not very useful in production. It was considered to enhance the built-on materials with parallax mapping but there hasn’t been any demand for that since the removal.

If you are interested in the former example, it is still available here:

https://rawcdn.githack.com/mrdoob/three.js/r131/examples/webgl_materials_parallaxmap.html

3 Likes

Yeah, basically not too useful without lighting. It would be interesting to bring it back with lighting.