Double image of 3D buttons in WebXR

Questions
1

My problem seems fairly basic but hard to put into a PG due to the integrated nature of our product. I’ll describe the issue as fully as possible and of course answer further questions.

I have a 3d stack panel of 3d buttons in the scene with StandardMaterial applied to the button meshes. All is good in non-immersive mode. In immersive mode the left-eye camera holds the scene coorectly in place while the right-eye moves the 3d buttons all around the eye’s version of the buttons like a double-vision. Without the material applied the issue doesn’t exist.

The buttons and their textures are being made and applied through a loop. I had created a single button before that didn’t have this issue. I’m sorry if this is too vague but I have been at this for days and thought this post was worth a shot.

2

Could you not extract only the button creation with their materials in the playground ?

cc @RaananW if he has an idea but I doubt there is smthg easy without a repro :frowning:

1 Like
3

would be great to see the loop you are using. it might be an issue with camera update, but it is hard to say without seeing a repro. I saw that you said it will be hard to reproduce. If possible, I will also be happy to debug a project that reproduces this, so i can run it locally. will that be possible?

4

Well it’s happening even without the loop. It’s not a specific application, fairly boilerplate stuff. When a material (tested standardMaterial and pbrMaterial) is applied to a Button3D the fault appears in Immersive Mode. It’s not visible through WebXR Emulator but is with Quest 2. Here is a code snippet:

let x = 0;
// When creating buttons, store a reference to each button’s material
buttonConfigurations.forEach(config => {
const button = new BABYLON.GUI.Button3D(playbackButton${x});
panel.addControl(button);

            const buttonMaterial = new BABYLON.StandardMaterial(`buttonMaterial${x}`, this.scene);
            buttonMaterial.diffuseColor = config.color;
            buttonMaterial.diffuseTexture = new BABYLON.Texture(`${iconsPath}${config.icon}`, this.scene);
            buttonMaterial.specularColor = new BABYLON.Color3(0, 0, 0); // Remove specular highlights
            // material causes double image.
            if (button) {
                button.mesh.material = buttonMaterial;
            }

            // Store a reference to the material using the button's id
            buttonMaterials[config.id] = buttonMaterial;

            button.onPointerDownObservable.add(() => config.action(buttonMaterial));
            x++;
            console.log(button);
        });

        const button = new BABYLON.GUI.Button3D(`playbackButtonTest`);
        panel.addControl(button);
        console.log(button);

I’m trying all sorts to get it working. Is there a working example PG I can use?