How to create Holographic Buttons with different colors and images?

Hello everyone!

I wanted to ask if it is possible to have 3 different buttons in different colors and have different images on them. Right now I am trying to create a 3D Stack Panel with HolographicButton, but when i try to set different image on one of the buttons, it shows only one button and I’ve set one color for one button but all of them are one color now.

I would really appreciate it if you could help me! I am still learning how to make 3D GUI for WebXR. :))

Hey there @sevdev and welcome back!

Do you have a playground with your setup so I can take a look? :slight_smile: In the meantime, I’ll try to create my own.

Yes, sure! :slight_smile:

Here is my playground: Babylon.js Playground

(It doesn’t look the best since I usually do it in VS Code)

Hello again.

As promised I tried to make my own bit. (Let’s see if I can add images next). I actually learned a couple of things I never knew before since I don’t use 3D as often as 2D.

In my demo I have it so that when you click each of the buttons it changes to a different color. I do this on line 28 for example:

    button.onPointerUpObservable.add(function(){
        button.plateMaterial.alphaMode = BABYLON.Engine.ALPHA_ONEONE;
        button.plateMaterial.diffuseColor = new BABYLON.Color3(0,0,255);
    });

What was more interesting to me was I was not able to get plateMaterial right away when creating the button. I assume there is some kind of load that makes it undefined before its rendered. I will look what I need to do right away as well as your demo now to debug what’s going on. :slight_smile:

Ok so I can confirm that difference between ours is you are using FrontMaterial and BackMaterial while I am using PlateMaterial.

A modified version of my demo https://playground.babylonjs.com/#2YZFA0#309 shows the same issue you are having. :open_mouth: It appears front and back materials are being shared by the entire GUI rendering even if I create a new one for each button. My question will be if this is a bug or international. Feels like a bug though. The solution I would recommend for now is using the plateMaterial which is working uniquely for each button.

Hi @sevdev

This should help:

@msDestiny14 this is NOT a bug.

In the constructor for the holographic button there is a boolean property for setting whether the button should share materials or not. By simply setting this boolean to false, you can change the materials for each button created.

Hi @sevdev just checking in, has your question been answered?