Crossfade two materials on a single mesh?

Questions
, , , ,
12

I think I’m close, but no luck yet. Here we moneky patch setupOutput on two materials to get their output nodes, however no change happens to the output visual when I try to blend the nodes together:

const material2 = new THREE.MeshPhongNodeMaterial({ color: 'cornflowerblue' });
let material2OutputNode
{
	const setupOutput = material2.setupOutput
	
	material2.setupOutput = function(builder, outputNode) {
		outputNode = setupOutput.call(this, builder, outputNode)
		material2OutputNode = outputNode
		console.log('setupOutput 2', outputNode)
		return outputNode
	}
	
	scene.add(new THREE.Mesh(new THREE.BoxGeometry(0,0,0), material2));
}

const material1 = new THREE.MeshPhysicalNodeMaterial({metalness: 0.7, roughness: 0.1, envMap: new THREE.TextureLoader().load('https://assets.codepen.io/191583/iss-interior-equirect.jpg')});
{
	const setupOutput = material1.setupOutput
	material1.setupOutput = function(builder, outputNode) {
		outputNode = setupOutput.call(this, builder, outputNode)
		console.log('setupOutput 1', outputNode.mul)
		outputNode = outputNode.mul(0.1).add( material2OutputNode.mul(0.9) )
		return outputNode
	}
}

const geometry = new THREE.BoxGeometry(120, 120, 120);
const mesh = new THREE.Mesh(geometry, material1);
scene.add(mesh);

This pen shows what I have so far, only material1 output is visible, but I expected it to be closer to material2:

Here’s an example that shows that replacing the outputNode with a vec4 makes it have a flat color:

	material1.setupOutput = function(builder, outputNode) {
		outputNode = setupOutput.call(this, builder, outputNode)
		outputNode = THREE.vec4(THREE.color(0xff6600), 1) // REPLACE
		return outputNode
	}

So the merging of the two outputNodes is what isn’t working yet. Hmmm.