Crossfade two materials on a single mesh?

Questions
, , , ,
7

That’s interesting. That’s almost the same as drawing three separate meshes that are exactly positioned in the same place right? The materials array on that “single mesh” become three separate draw calls, one per material, last I checked, as if drawing one mesh per material.

Although that’ll be fine for many cases, I’m keen to make it happen in a single draw call (single material) for the case that I have lots of objects (f.e. if I had 30 objects, 30 draw calls would be better than 90 draw calls).

Also something tells me that the depthFunc and transparent requirements are gonna further reduce the cases where this works well, and will otherwise cause unexpected sorting/transparency issues in an overall scene.

Here's an example of the same method with separate meshes (untested, but will have the same issues)

something like the following (again, not tested):

let firstMaterial = new THREE.MeshStandardMaterial({
        color:'red'});
let secondMaterial = new THREE.MeshBasicMaterial({
        color:"blue",
        transparent:true, // Need this to blend to material behind...
        depthFunc:THREE.EqualDepth, //Need this or depth test will prevent the second material
        opacity:.5, //Fade 50% between the materials...
        })
let thirdMaterial = new THREE.MeshPhongMaterial({
        color:"green",
        transparent:true, // Need this to blend to material behind...
        depthFunc:THREE.EqualDepth, //Need this or depth test will prevent the second material
        opacity:.5, //Fade 50% between the materials...
        })

const geom = new THREE.SphereGeometry(16,16,16)

let bx1 = new THREE.Mesh(geom, firstMaterial);
let bx2 = new THREE.Mesh(geom, secondMaterial);
let bx3 = new THREE.Mesh(geom, thirdMaterial);

scene.add(bx1, bx2, bx3);

const bxs = [bx1, bx2, bx3]

setInterval(()=>{
    bxs[(Math.random()*3)|0].material.opacity = Math.random()
})

I’m starting to come to the conclusion that migrating from these “legacy” materials to TSL materials is the key to all the future possibilities, including blending effects together (basically what I’m asking about here in this thread) without introducing sorting/transparency issues

With TSL, effects can be blended within a single material, regardless of the material’s opacity, depth testing, or transparency, etc. The resulting effects can effectively become the color of the material without affecting anything else.

I believe my goal now is to port any of my libs and frameworks onto TSL, then move forward without using the “classic” (or “legacy”) materials.