Direct support for Decal textures like bump and color texture

[nayanpts]

Hello team,

This is a feature request:
I was wondering if there is a possible way in three.js to implement decal textures directly like bump and color texture.

Let's say I have a JSON file containing a cube with 6 faces, one of its face has a decal texture (a .png image with part of image transparent) and a color (red),
Once load it into three.js scene, we can see both decal texture and color behind it.

Thanks.

[WestLangley]

You can monkey-patch decal support using a pattern like the following:

THREE.ShaderChunk.map_fragment = THREE.ShaderChunk.map_fragment.replace(

	`diffuseColor *= texelColor;`,

	`
	#ifndef DECAL
		diffuseColor *= texelColor;
	#else
		diffuseColor = vec4( mix( diffuse, texelColor.rgb, texelColor.a ), opacity );
	#endif
	`

);

Usage:

var material = new THREE.MeshPhongMaterial( { // or Basic, Lambert, Standard, Physical
	color: 0xff0000,
	map: texture
} );

material.defines = material.defines || {};
material.defines.DECAL = ""; // set as needed

If there is interest, we can support this feature via either a material.decal = true flag, or if the map and decal map need to be supported concurrently, a separate material.decalMap property.

[nayanpts]

Hello Team,

Thank you very much..

This solution worked for us.

Also, it would be really great if something like material.decalMap existed, so that we could apply both color texture and decal texture on the same face.

Thanks.

[WestLangley]

so that we could apply both color texture and decal texture on the same face.

You can use the approach explained in this post to do that.

[pailhead]

@WestLangley

Any chance you could give some thoughts on why you're suggesting this:

You can monkey-patch decal support using a pattern like the following:

Rather than using material.onBeforeCompile?

Why would you monkey patch this and override it globally?

@nayanpts

Also, it would be really great if something like material.decalMap existed, so that we could apply both color texture and decal texture on the same face.

Three doesn't have that specific map with that specific name, but it has #11475 which allows you to add any map to any existing shader. However, i think the API is slightly different than what's suggested above.

Rather than somehow constructing a chunk, and have three just use it, you have to know a bit non-GLSL syntax like #include <some_chunk> and you have to work with the raw string.

//step 1
const myModifiedChunk =  THREE.ShaderChunk.some_chunk.replace('some glsl', 'my glsl')

//step 2
myModifiedMaterial.onBeforeCompile = shader=>{ shader.vertexShader.replace('#include <some_chunk>', myModifiedChunk) }

[WestLangley]

Any chance you could give some thoughts on why you're suggesting this:

Because it was easy.

Why would you monkey patch this and override it globally?

The built-in materials still work as they did prior to the monkey patch, and the new decal feature works with multiple built-in materials.

[pailhead]

Because it was easy.

Easy for this specific example, or easy overall? Would you do this instead of the onBeforeCompile or you wouldn't have #ifdef branching if you changed the shader for a specific material? Not trying to be a smart-ass, just trying to understand the way of thinking.

[WestLangley]

I did not give it that much thought. onBeforeCompile() is a perfectly fine solution, too.

[Mugen87]

Closing. Using Material.onBeforeCompile seems the best way to extend built-in materials with such small enhancements. The introduction of a separate decalMap seems too use case specific.

Alternatively, NodeMaterial would also be a good choice.