Change HolographicButton and Button3D renderingGroupId

Questions
, ,
1

Hi everyone,
I’m struggling on something for days. I imported a glb file (a room) then created HolographicButton and Button3D, but these buttons are always on top, even when I move to an other room, I see the buttons through the wall and can click them (which I don’t want).

Here is my code:

const manager = new GUI.GUI3DManager(this.scene)
const panel = new GUI.StackPanel3D(true)
panel.useBitmapCache=true
panel.margin = 0.02
panel.blockLayout = true;
manager.addControl(panel)

// --button//--
const button = new GUI.HolographicButton("Btn")
button.useBitmapCache=true
panel.addControl(button)
const btnText = new GUI.TextBlock()
btnText.text = "Click me"
button.content = btnText

// --title//--
const title = new GUI.Button3D("Title")
panel.addControl(title)
const titleText = new GUI.TextBlock()
titleText.text = "I am a 3D title"
title.content = titleText
title.mesh.isPickable = false

panel.blockLayout = false;

Thanks for your help :blush:.

2

Hello! Are you able to set up your scene in a Playground? This would help us figure out what’s going on :slight_smile:

3

Been there, saw that :grin:
You may want to give a look at my topic (kindly solved by @sebavan)

Sidenote: Since the solution adds lot of drawcalls, I ended-up building it differently. I’m now hiding the 3D GUI when the interaction is over (actually when moving away from the interaction area).

1 Like
4

Forgot to mention (if you have no post) then it’s likely you are not choosing the right approach and not actually accessing the manager layer.
To access the manager layer you need to go something like:

        manager.utilityLayer.setRenderCamera(camera2);

And then since the manager (utility layer) IS a separate layer drawn on top of everything, changing the rendering group id outside this layer will have no effect. So, I use a multicam approach with layerMasks.

5

@carolhmj I was trying to find a solution to use playground ('cause my model is private :sweat_smile:).
But as @mawa said, when I remove the post, everything work perfectly.

6

Thanks, the solution is in your answer, I’ll try it out. If it can’t get it work, I’ll find a new way to display my content.

-----------Update:
I added following code from this playground, and now I can properly use 3D GUI and Image Post without issue.
:heartpulse: Thanks go to @mawa

Maybe some limitation should be added in the Image Post Doc?

// ...scene creation code
const depthRenderer = scene.enableDepthRenderer(camera, true, true);
const shader = `
    varying vec2 vUV;

    uniform sampler2D textureSampler;

    void main(void) 
    {
        vec4 backgroundColor = texture2D(textureSampler, vUV);
        gl_FragColor = vec4(0., (backgroundColor.r), 0., 1.0);
        gl_FragDepth = backgroundColor.r;
    }
`;
const renderer = new BABYLON.EffectRenderer(engine);
const effectWrapper = new BABYLON.EffectWrapper({
    engine: engine,
    name: "Transition",
    fragmentShader: shader,
    uniformNames: ["scale"],
    samplerNames: ["textureSampler"],
});
scene.onAfterRenderCameraObservable.add((cam) => {
    if (cam !== camera) return;
    if (!effectWrapper.effect.isReady()) return;

    renderer.setViewport();

    renderer.applyEffectWrapper(effectWrapper);

    effectWrapper.effect.setTexture("textureSampler", depthRenderer.getDepthMap());

    scene.getEngine().setColorWrite(false);

    scene.getEngine().clear(null, false, true, true)
    
    scene.getEngine().setDepthBuffer(true);

    renderer.draw();

    scene.getEngine().setColorWrite(true);
}, undefined, true);
1 Like