Hi There,
I know I am missing something simple… but I kept looking around and trying things and need some help. Here is my playground: https://playground.babylonjs.com/#5ZCGRM#946 . I’m just trying to get the background to be transparent so you can only see the text (I might also make the text emissive, hoping that’s also easy). Thank you.
Is this what you want to achieve?
https://playground.babylonjs.com/#5ZCGRM#949
Handle text edge better caused by antialising below. But @JohnK’s solution should be the single truth.
https://playground.babylonjs.com/#5ZCGRM#951
Alternative https://playground.babylonjs.com/#5ZCGRM#950
Yes, the one where you could clearly see the language; this is awesome. Thank you so much for your help. I’m not going to study this example.
I guess my lingering question on this is why is the “white” gray? https://playground.babylonjs.com/#5ZCGRM#953
You can increase brightness of your light:
light.intensity = 2.5;lol yr right that was it!!! haha thank you!
Check this out: https://playground.babylonjs.com/#5ZCGRM#970
I’m going to try to dynamically change the text (in the update loop).
Do you know if there is a preferred method to do this, or should I just muddle my way through?
I’m basically trying to create a really bizarre 3D text billboard situation (that changes over time).
Not really seeing a “text” variable in here:
_context: CanvasRenderingContext2D
canvas: canvas
direction: “ltr”
fillStyle: “#ffffff”
filter: “none”
font: “bold 56.0388px monospace”
globalAlpha: 1
globalCompositeOperation: “source-over”
imageSmoothingEnabled: true
imageSmoothingQuality: “low”
lineCap: “butt”
lineDashOffset: 0
lineJoin: “miter”
lineWidth: 1
miterLimit: 10
shadowBlur: 0
shadowColor: “rgba(0, 0, 0, 0)”
shadowOffsetX: 0
shadowOffsetY: 0
strokeStyle: “#000000”
textAlign: “start”
textBaseline: “alphabetic”
proto: CanvasRenderingContext2D
Please check this PG: It changes original text to ‘Hello World’ after 3 seconds.
https://playground.babylonjs.com/#5ZCGRM#972
My changes are highlighted below:
setTimeout(() => {
// width and height equal to textureGround dimensions
textureContext.clearRect(0,0, 512, 256);
textureContext.fillText('Hello World', 75, 135);
textureGround.update();
}, 3000);Thank you.
Take a look: https://playground.babylonjs.com/#5ZCGRM#973
This creature actually goes in this vr world: https://www.instagram.com/p/CImmSfRlbvY/
I guess what I’m noticing is that (a.) you have a draw text method which initializes the text and then (b.) you have a fill text method changes the text.
The last positional thing I’m trying to do here (I may add a bloom later?) is change the font-size of the text dynamically as well. Do you have a suggestion for that?
Also, I want to learn what you know about re: this text drawing stuff; do you know if there is a good tutorial on the docs? and/or which documentation is most important to look at? (the basic tutorial did not cover these more advanced aspects we are looking at right now).
Hi @saitogroup
You are welcome. Not sure if you notice the different of initializing text and my code for updating the text.
Initializating text (your original code) is invoked on DynamicTexture. It is a BABYLON API. I believe underlying it updates the 2D canvas used as texture.
textureGround.drawText("complexity", 75, 135, font, "white", "transparent", true, true);
The text update call I added was the following. It is invoked directly on the 2D canvas.
textureContext.fillText(stanza[wordCounter], 75, 135);
So basically, BABYLON DynamicTexture is using the content on the 2D canvas ‘textureContext’ and applies it on the mesh (the plane mesh variable ‘ground’ you created).
Now to update the content, you only need to update the 2D canvas as I showed by calling fillText method. This 2D canvas context is of type CanvasRenderingContext2D. It is standard HTML5 canvas directly supported by modern browser. It has nothing to do BABYLON. You can find all the available API functions you can use: CanvasRenderingContext2D - Web APIs | MDN
Changing text styles is described in this section: Text styles
You can also search for html5 canvas there should be plenty examples and tutorials online.
Ah ha! That’s where it all is, lol. OK, I got that thing I wanted working, and now I’m just studying that canvas stuff…
I thought I should chime in as I have just answered a thread (Light colored text with alpha = aliasing artifacts? - #10 by Evgeni_Popov) that had the same problem than the original question of this thread:
If you want a really good blending, you should generate the dynamic texture as a pre-multiplied alpha texture (by calling textureGround.update(true, true)) and override the OpenGL blending factors (you also need to set materialGround.useAlphaFromDiffuseTexture = true; as you are setting the dynamic texture to the diffuse slot):
https://playground.babylonjs.com/#5ZCGRM#980
Old code:
New code:
I am trying to get this working with emissive rather than diffusive textures.
I am looking at https://playground.babylonjs.com/#5ZCGRM#951
and by changing:
materialGround.diffuseTexture = textureGround;
to
materialGround.emissiveTexture = textureGround;
The text then just disappears.
Does anyone know why this happens?
Thanks.
Welcome aboard!
There’s no injection point for the emissive color as there is for the diffuse one. Maybe you can just use the baseColor as the final color:
Thanks!
Problem solved by just adding a hemi light and using diffuse textures for the things I wanted to make transparent.
A great benefit is that the page now loads on iPhones, where previously the AdvancedDynamicTexture/Buttons approach was causing crashes.
Hi, this looks pretty good! But im using right hand system, and the text is mirrored. How can I flip it ? I try to use scale(1, -1), but it turns to black instead of transparent. Could you help me with it?
Perhaps you just have to rotate your camera 
