Text handling Groundplane transparent.

[chicagobob123]

I have a problem that I just can't figure and some code text handling code that you might find handy. (I did)

Can a ground plane be transparent? I put some text on it and used it here but its not transparent

http://www.babylonjs-playground.com/#1MCWZJ#14

 

 

[gryff]

How about adding this at line 196

ground.visibility = 0;

 

[chicagobob123]

Hey Sorry must not be clear, this is the plane I want to make transparent. 

     // used a ground so I can have a X/Y ? Not sure this is right.
     // may be a better way 
     var textMesh1 = BABYLON.Mesh.CreateGround("MJID"+mytext, width, height[2], 2, scene);
     textMesh1.material = MaterialText;
     Setting the visibility to 0 makes the text disappear. 
     textMesh1.visibility = 0;

What I want is the black rectangle to be transparent. 

[dbawel]

You need to create an alpha channel for your texture to make the black area of your texture transparent when rendered on you ground plane. Simply copy your image to a new layer in photoshop, and select the black area in your image (texture), and use the "delete button to delete this color. Then delete the original layer in your image file, and this will result in adding an 8 bit alpha channel that will save if you save in an image format such as .png which I often prefer as it is an efficient compression format. Applying the new .png image back onto your mesh will not display the black area of your image.

If you re already familiar with creating n alpha channel for selective transparency, please ignore the tutorial above, however I hope it might be valuable to those who don't yet have the experience in generating alpha channels.

DB

[chicagobob123]

I don't have an image. I just used a virtual texture and added text. So I don't have alpha. 

[dbawel]

Sorry, misunderstood. Here is your solution:

http://www.babylonjs-playground.com/#1MCWZJ#17

DB

[chicagobob123]

Thanks a bunch.