Option to use 4 channel (32 bit) height map for `displacementMap`

Is your feature request related to a problem? Please describe. I would like to utilize additional color channels (32 bit) when creating a displacement map to increase level of detail in my renders. I believe currently, only RGB 8-bit image is supported.

From wikipedia: “a standard RGB 8-bit image can only show 256 values of grey and hence only 256 heights. By using colors, a greater number of heights can be stored (for a 24-bit image, 2563 = 16,777,216 heights can be represented (2564 = 4,294,967,296 if the alpha channel is also used)).”

Describe the solution you’d like I’d like to see the option to pass in a displacement map with more channels (32 bit). A solution has been suggested on this StackOverflow thread but I think others would benefit from an official implementation.

Current displacementmap_vertex.glsl:

transformed += 
	normalize( objectNormal ) * (
		texture2D( displacementMap, vUv ).x * displacementScale + displacementBias
	);

If I’m not mistaken, three.js uses the RGBA color representation (vs say ARGB), so this could be done something like so for three channels:

transformed +=
	normalize(objectNormal) *
		(
			texture2D(displacementMap, vUv).r * 256.0 * 256.0  +
			texture2D(displacementMap, vUv).g * 256.0  +
			texture2D(displacementMap, vUv).b 
		) * displacementScale + displacementBias;

Four channels:

transformed +=
	normalize(objectNormal) *
		(
			texture2D(displacementMap, vUv).r * 256.0 * 256.0 * 256.0  +
			texture2D(displacementMap, vUv).g * 256.0  * 256.0 +
			texture2D(displacementMap, vUv).b * 256.0 +
                         texture2D(displacementMap, vUv).a
		) * displacementScale + displacementBias;

Describe alternatives you’ve considered It is possible to convert 4 channel height maps to single channel before using, but at the cost of accuracy and detail.

Additional context

An example of non vs colored height maps:

[WestLangley]

Something like this should work.

const displacementMapChunk = [

	'#ifdef USE_DISPLACEMENTMAP',

		'transformed += normalize( objectNormal ) * ( unpackRGBAToDepth( texture2D( displacementMap, vUv ) ) * displacementScale + displacementBias );',

	'#endif'

].join( '\n' );

material.onBeforeCompile = function( shader ) {

	shader.vertexShader = shader.vertexShader
		.replace( '#include <common>', '#include <common>\n#include <packing>' )
		.replace( '#include <displacementmap_vertex>', displacementMapChunk );

};

[Mugen87]

Since this feature request is a bit specific, I do not vote to change the shader code but let the user patch the displacementmap_vertex shader chunk via Material.onBeforeCompile() for now.

If more users come up with this, we can reconsider this approach. Or just provide a solution based on node material.