I was wondering is there a way to detect if a text is behind another text?
I am using DynamicTexture and MeshBuilder.CreatePlane to create and position a number of texts in the scene but in some cases, as you can see in the image I attached, a text may position behind of another text. I need a way to detects such cases. I applied the intersectsMesh function but did not work.
why not just make the plane that they are on transparent besides the text?
In this special case, yep making the plane transparent works, but I have some cases that the texts are overlapping together.
then add a white outline to your text, maybe even a slight fade to transparent.
how are you generating your text?
K give me a second.
Ok so let’s look at the elements of this function.
What it is doing is taking advantage of the dynamic texture object Use Dynamic Texture - Babylon.js Documentation
So we know that we have access to all normal canvas functionality (plus some), but for this instance let’s take a look at using the dynamic objects context.
If you follow along with me here ill keep editing this post as I play by play this for you.
UPDATE
So right away lets grab that function and port it to a clean scene then test that it still works.
https://www.babylonjs-playground.com/#LIACGC
Bazinga!
hold for next update
UPDATE 2
ok so now that we see the function is working lets trim the bloat:
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true)
Can go and all the semi-colons can as well (DEATH TO THE ;!)
Then let’s add some things that will make this work a little better.
Let’s drop all the constructor arguments for this format:
(name, args = {}, scene)
this is a little closer to a standard BJS method and will get you thinking a little more like Core conventions… anyways, sense we change the structure of the constructor we will need to change the function a little bit and while we are at it let’s pull it out of the scene scope.
https://www.babylonjs-playground.com/#LIACGC#1
Hold for next update:
UPDATE 3
So now we go ahead and define some default arguments and open up access to manipulating the context of the dynamic texture.
https://www.babylonjs-playground.com/#LIACGC#2
This pretty much gives us most of what we are going to need to fully extend this to create whatever text we will need. Now it’s simply leveraging the standard Canvas API - Web APIs | MDN methods on the dynamic texture.
I’ll post a outline fade one next:
https://www.babylonjs-playground.com/#LIACGC#3
This should get you in the right direction… I’m not sure why the alpha is not smooth fading I bet its just a blending issue. I have to get back to work though and cant put much more time into this.
Hope you get your solution from this!
UPDATE
https://www.babylonjs-playground.com/#LIACGC#5
Here you go. @Ebrahim, I remembered we needed an opacityTexture…
I might also take a look at adding a secondary thing where you have an array of all your text planes, and then on a BeforeSceneRender function iterate through it and then set the planes visibility 0-1 on a distance calculation of camera max-min.z so that way they have additional depth definition.
1 Like
@Pryme8 A very big thanks. You saved me a lot. Really appreciated for your time and help. Once I know a text is behind another text from the camera point of view, I can shift it.
While we are here, how is it easy to add a flag to a text to decide whether the text can be resizeable/scalable in zooming?
What do you mean?
if you are talking about keeping some text in screen space vs scene space then you might want to kick in the BJS GUI extension.
Yes, I did it in the GUI extension using TextBlock. I thought it may be possible to do in BJS too.
yeah, but it would require two cameras or two rtt’s composited together and starts making things complicatedish