Draw text on transparent texture with emissive material

[inxs]

Hi all,

Im trying to draw a text on a transparent plane/ground using the emissive color.

It is working with diffuse color:

http://www.babylonjs-playground.com/#9U086#129

But not with emissive color ( The transparency is ignored and the text looks pretty ugly):

http://www.babylonjs-playground.com/#9U086#130

 

Thanks for your help

Jonny

[GameMonetize]

You just need to use the texture in opacityTexture as well: http://www.babylonjs-playground.com/#9U086#131

Did you see this btw: http://doc.babylonjs.com/overviews/gui

[inxs]

Thank you deltakosh!

1. Can I improve the rendering quality of the text?

2. Yes I tried it, but I dont want the text to be always on top, I want to have it integrated into the 3D space.

[GameMonetize]

1. Text rendering quality can be improve by using a bigger texture plus bilinear filtering

2. Text is not always on top  You can project the GUI to a texture: http://www.babylonjs-playground.com/#ZI9AK7#1

 

[inxs]

Hello Deltakosh,

thanks for your answer!

1. Can you show me an example how to do this, currently my text is looking like this.

2. Currently Im rendering on a 200x200 plane. This way it is not possible for me to align the text to the right, depending on how large the text is. Do you know a better solution for this?

Thanks

Jonny

[GameMonetize]

Like this: https://www.babylonjs-playground.com/#0AZUVK

[inxs]

Hello Deltakosh,

as always thanks for your answer

What you suggested works good when the camera is close:

But not when you zoom out :/

[GameMonetize]

This is because of mipmapping.To ensure that mimapping works you have to define a power of two resolution for your texture (like 1024x1024)

[inxs]

Thank you it works. The text is looking a lot better now!

Still I have the problem that - based on the zoomlevel - my text gets kind of a dark border when i zoom out.

It is not as "bright" orange as I would expect. If I zoom close it is looking wonderful.

This is my code for this section:

    const size = 1024;
    const textureSize = size * 4;
    const planeSize = size / 8.0;
    const textSize = size / 16.0;

    // Adding text
    const texture = new BABYLON.DynamicTexture('texture1', textureSize, this.scene, true, BABYLON.DynamicTexture.TRILINEAR_SAMPLINGMODE);

    // Rount Text to max. 2 trailing digits. the '+' removes trailing zeros
    texture.drawText(+value.toFixed(2) + ' mm', 0, (textureSize / 2) + (textSize) - (textSize * 3.5), '200 ' + textSize + 'em Roboto', '#ef890f', 'transparent', true);
    texture.hasAlpha = true;

    const textMaterial = new BABYLON.StandardMaterial('textureMaterial', this.scene);

    textMaterial.emissiveTexture = texture;
     textMaterial.opacityTexture = texture;
    textMaterial.disableLighting = true;

    textMaterial.freeze();

    const plane = BABYLON.Mesh.CreatePlane('', planeSize, this.scene);

    plane.material = textMaterial;
    plane.parent = this.dimmensions;
    plane.rotation = rotation;
    plane.bakeCurrentTransformIntoVertices();
    plane.position = position;

 

[GameMonetize]

I would need a repro on the PG to help ;D

[inxs]

Here you go:

https://www.babylonjs-playground.com/#F8E6EA

 

Please notice the "black" or dark border around the text.

[GameMonetize]

I must be stupid but I see no border