Using Dynamic Texture with transparency

Questions
1

Hello

I’m trying to add a simple plane with some dynamic text to my scene and I’d really like the background colour to be transparent. Is this possible and if so how?

Here’s my (unsuccessful) attempt so far:

let board = BABYLON.MeshBuilder.CreatePlane(“plane”, {height:3, width: 3, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, sceneToRender);

board.position = new BABYLON.Vector3(0, 1, 1.5);

//Create dynamic texture        

let boardDT = new BABYLON.DynamicTexture("dynamic texture", {width:512, height:256}, sceneToRender);  

let boardDTC = boardDT.getContext();

let boardMat = new BABYLON.StandardMaterial("Mat", sceneToRender);                  

boardMat.diffuseTexture = boardDT;

boardMat.diffuseTexture.hasAlpha = true;

board.material = boardMat;

//Add text to dynamic texture

let font = "bold 60px Arial";

boardDT.drawText("Some Text", 20, 150, font, "white", "transparent", true, true);
2

Hello @DesG , how are you doing?

I did a small Playground example with your code and the Dynamic texture seem to be correctly transparent. Can you provide a Playground example with the issue you are facing?

Here is the Playground with the transparent dynamic texture.

3

Hi Sergio - many thanks for the response.

Well, that’s embarrassing, it works for me now too. I guess I must have had a caching or refresh issue - sorry to waste your time.
My only problem now is that the plane is in the wrong orientation, but that should be trivial to fix.

Thanks once again.

Des

1 Like
4

No problem at all @DesG , we are here to help the community!

If you have any issue or question please let us know.

1 Like
5

Thanks again

If you’re interested, you can see the text + transparency at work in this early release https://qublit.com - though you’ll need to solve the quiz first!

Not too happy yet about materials and lighting. Would welcome any suggestions to make things look better.

Des