Add support for black and white Bump Maps to compute normals

[dongho-shin]

Always thanks you for maintain amazing library

I tried to add bumpMap support like three.js
but I got half success(bumpMap Rendered in only two faces and other faces are black) of it do you guys have any ideas?

I use this bumpTexture

PhysicalPathTracingMaterial's vertex shader i add vViewPosition

// https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/bumpmap_pars_fragment.glsl.js
	vec3 perturbNormalArb( vec3 surf_pos, vec3 surf_norm, vec2 dHdxy, float faceDirection ) {
	
		// normalize is done to ensure that the bump map looks the same regardless of the texture's scale
		vec3 vSigmaX = normalize( dFdx( surf_pos.xyz ) );
		vec3 vSigmaY = normalize( dFdy( surf_pos.xyz ) );
		vec3 vN = surf_norm; // normalized
		
		vec3 R1 = cross( vSigmaY, vN );
		vec3 R2 = cross( vN, vSigmaX );
		
		float fDet = dot( vSigmaX, R1 ) * faceDirection; //fDet is 0
		vec3 vGrad = sign( fDet ) * ( dHdxy.x * R1 + dHdxy.y * R2 );
		vec3 result = normalize( abs( fDet ) * surf_norm - vGrad );
		
		return result;

	}

                // getSurfaceRecord.glsl.js at line 164
		vec3 baseNormal = normal;
		if ( material.normalMap != - 1 ) {

			vec4 tangentSample = textureSampleBarycoord(
				attributesArray,
				ATTR_TANGENT,
				surfaceHit.barycoord,
				surfaceHit.faceIndices.xyz
			);

			// some provided tangents can be malformed (0, 0, 0) causing the normal to be degenerate
			// resulting in NaNs and slow path tracing.
			if ( length( tangentSample.xyz ) > 0.0 ) {

				vec3 tangent = normalize( tangentSample.xyz );
				vec3 bitangent = normalize( cross( normal, tangent ) * tangentSample.w );
				mat3 vTBN = mat3( tangent, bitangent, normal );

				vec3 uvPrime = material.normalMapTransform * vec3( uv, 1 );
				vec3 texNormal = texture2D( textures, vec3( uvPrime.xy, material.normalMap ) ).xyz * 2.0 - 1.0;
				texNormal.xy *= material.normalScale;
				normal = vTBN * texNormal;

			}

		} else if( material.bumpMap != -1) {

			vec3 uvPrime = material.bumpMapTransform * vec3( uv, 1 );
			float bumpScale = material.bumpScale;
				
			vec2 dSTdx = dFdx( uvPrime.xy );
			vec2 dSTdy = dFdy( uvPrime.xy );
	
			float Hll = bumpScale * texture2D( textures, vec3( uvPrime.xy, material.bumpMap ) ).x;
			float dBx = bumpScale * texture2D( textures, vec3( uvPrime.xy + dSTdx, material.bumpMap ) ).x - Hll;
			float dBy = bumpScale * texture2D( textures, vec3( uvPrime.xy + dSTdy, material.bumpMap ) ).x - Hll;
		
			vec2 dHdxy = vec2( dBx, dBy );
	
			normal = perturbNormalArb( - viewPosition, surfaceHit.faceNormal, dHdxy,  1.0 );

		}

Is it wrong to put normal sampled by barycentric coord into a function based on tangent space?

[gkjohnson]

Hello! this might be easier if you make a PR so I can see the code in context - but it would be nice to add support for bump maps.

But that aside we can't treat bump maps in exactly the same way that three.js does. the dFdx / dFdy functions will not work, for example, because they rely on the samples that neighboring pixels have made. Instead we'll need to sample sibling pixels to manually take the derivative and compute the resulting normal.

You'll also see that normal maps require tangents to define the surface normal frame rather than the view direction as three.js uses since that's not really a viable option for path tracing. We'll want to do the same thing for bump maps, as well.

[dongho-shin]

Thanks for reply! I'll open PR soon

[dongho-shin]

@gkjohnson #559 I open pull request
always respect and thanks to quick reply

[dongho-shin]

I tried to find a way to implement this issue but
I can't find a way without baked normalMap from bumpMap rendererd at rasterized view
I checked a blender, it seems to use the baked normalMap

[gkjohnson]

I can't find a way without baked normalMap from bumpMap rendererd at rasterized view

Yes I think generating a normal map is the easiest approach for now. Perhaps in the future bump maps can be added but they seem less common.