Transparency Groups?

[Jpg]

Hello!

Is there a way to group meshes/materials to ignore each other when dealing with transparency?

I am making a game where the character has swappable clothes and hair and I can see the objects from the other side.

Issue:

Goals/Use Cases:

I set up a simple example to demonstrate my issue:

Babylon.js Playground

I have tried a bunch of things and nothing seemed to work perfectly.

• I noticed alphaIndex + needDepthPrePass works until I move the camera to certain angles.
• I made a RTT with a simple shader and it worked, but felt like this was a hack and not the right way to do things. I am concerned about performance and flexibility (if I had multiple characters each with their own RTT so that I could animate the invisibility effect).
• I looked at Multi Render Targets too, but I’m not yet familiar with how they work.

Here are some pictures to help demonstrate what I mean:

If I could hide the red from this angle that would be great, it’s visible through the green here.

At this angle if I could hide the green but still show the blue box in the background that would be nice too.

If anybody can help me, this would be a lifesaver, I’ve been tackling this issue for the past couple of days.

[Pryme8]

You would probably need to render the scene without the group then grab stencil pass or a mask, then capture the group full color in an RTT then draw it back onto the main scene with your transparency amount masked by the stencil or mask RTT you made.

[Jpg]

That is somewhat what I was doing. But I am unsure of performance.

BABYLON.Effect.ShadersStore["invisibilityFragmentShader"] = `
    precision highp float;

    varying vec2 vUV;

    uniform sampler2D textureSampler;  
    uniform sampler2D backgroundSampler; 
    uniform float amount;

    void main(void) {
        vec4 sceneColor = texture2D(textureSampler, vUV);
        vec4 bgColor = texture2D(backgroundSampler, vUV);

        gl_FragColor = mix(sceneColor, bgColor, amount);
    }
`;

const bgTexture = new BABYLON.RenderTargetTexture("bgRTT", { width: engine.getRenderWidth(), height: engine.getRenderHeight() }, scene);
scene.customRenderTargets.push(bgTexture);
const renderList = [];
let effectAmount = 0.0;

function addToRenderList(rootNode) {
    rootNode.getChildMeshes().forEach(m => renderList.push(m));
    bgTexture.renderList = scene.meshes.filter(m => !renderList.includes(m));
    effectAmount = 0.7;
}

function removeFromRenderList (rootNode) {
    rootNode.getChildMeshes().forEach(m => renderList.splice(renderList.indexOf(m), 1));
    bgTexture.renderList = scene.meshes.filter(m => !renderList.includes(m));
    if (renderList.length == 0) effectAmount = 0.0;
};

const postProcess = new BABYLON.PostProcess(
    "invisiblePP", "invisibility", ["amount"], ["backgroundSampler"], 1.0, camera
);

postProcess.onApply = (effect) => {
    effect.setTexture("backgroundSampler", bgTexture);
    effect.setFloat("amount", effectAmount);
};

addToRenderList(player);

[Pryme8]

Performance should be fine as long as you don’t over use it, its just adding a couple draw calls for the one group id imagine.

[Jpg]

I’ve just learned about RTTs yesterday, can clarify what you mean by group id?

Don’t RTTs do a full re-render and render everything in the scene an additional time? Or perhaps I’m misunderstanding how render target textures work.

I thought maybe a visibility/alpha method would be better.

[Pryme8]

Give me one second Ill whip something up for you.

[Pryme8]

Babylon.js Playground

@jpg let me know if you have any questions.

[Jpg]

Thank you!

I spent the last couple hours going through it. I simplified the code just so I can what was really happening.

Others may view that here:

Babylon.js Playground

I am not sure what the overall performance gains are with this versus what I had. I know this renders the groups separately, but I’m concerned about now having two render target textures now, and also constantly updating a ghost camera.

Using alpha/visibility still seems to be the most performant way, but this approach is interesting.

[Jpg]

I decided to go with RTTs instead of transparency. I am doing it a slightly different way though. I realized I could implement other effects other than just transparency, such as glow, warp, etc.

Examples from games:

I tested the performance with a few characters and saw a very small frame rate increase. I am not sure how it will play out with more complex scenes.

[Pryme8]

Yuup! Once you understand the basics of what we did then it unlocks a ton of possibilities. Remember you can capture any kind of 3d buffer and convert the coordinates in your shader to do magic. Its all just passing data around so you can use it. You would be amazed how many effects actually happen in screenspace.

[Jpg]

Okay I managed to get it to work.

So there’s an issue with layer masks and animations.

Babylon.js docs

BUT I managed to get it working with a depth renderer + an RTT. Essentially the code I posted earlier + a depth renderer + using the samplers you get from them in the GLSL.