Hiding Overlaps in Transparent Mesh

Questions
1

Is there a way to hide the overlaps of a transparent mesh?

async function loadRoot() {
    const rootData = await gltfLoader.loadAsync('./assets/refactor-root.glb');
    const rootModel = setupRootModel(rootData);

    return rootModel;
}

function setupRootModel(data) {
    const model = data.scene.children[0];

    model.material = createRootMaterial();

    return model;
}

function createRootMaterial() {
    const material = new MeshStandardMaterial({
        color: 0xC9C9C9,
        transparent: true,
        opacity: 0.4,

    });

    return material;
}

I’ve played around with depthTest and depthWrite, but these seem to do the opposite of what I want. Same goes for alphaHash.

Here’s what I currently have:

image
image309×113 15 KB

Of course, I’d still like to view inner meshes. I’m using an ambient light (if that changes anything).

1 Like
2

Render the model twice..

first time with opacity = .001, depthWrite:true, depthTest:true
then render the transparent version with depthFunc==EqualDepth.

You can achieve this by making a .clone of the original.. applying the opacity = .001, setting mesh.renderOrder = 0

and then setting the transparent version to renderOrder = 5, and depthFunc==EqualDepth