Bump map (normal map) shadows?

Questions
, ,
1

For example:

nms_demo

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

nms01
nms011280×720 311 KB

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

2

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
 
//copy this in your fragment shader main

		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);
		
        //here you need to load your normal map. Be carefull  texture instead texture2D in webgl2
		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 :blush:

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

1 Like
3
3 Likes
4

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

2 Likes
5

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.

6

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
7

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