Dynamic texture: quality problems

[Fenryll]

Hello everybody,

here is my problem, these cards are objects containing two plans that I dynamically create.
The rendering quality is perfect when I texture them in a “static/standard” way (as the card that is out), but I might have some use cases where I should be able to write some text on them, so I am trying to use a dynamicTexture instead, and this is where I am struggling with quality issue (e.g. last right card).

The cardWidth and cardHeight I am using to create the plans are some float numbers smaller than 2 that are calculated somewhere else based on different ratios (cardWidth:1.3028757088046878, cardHeight:1.9902825244930509), and the png I am using are actually 1630 x 2490… I already tried different combinations, but none of them are working

Big thanks!

let rectoMat = new BABYLON.StandardMaterial("rectoMat", scene);


    if(value%2==0){
        value=7;
        rectoMat.diffuseTexture = new BABYLON.Texture(require('../assets/game/cards/'+jeuDeCarte[value]+quality+'.png'), scene);
    }
    else{
        let w=163;
        let h=249;

        // let rectoDynText = new BABYLON.DynamicTexture("dynamic texture", {width:cardWidth, height:cardHeight},scene);
        let rectoDynText = new BABYLON.DynamicTexture("dynamic texture", {width:w, height:h},scene);
        let ctx = rectoDynText.getContext();
        //ctx.drawImage(game.roiTrefle,0, 0,cardWidth,cardHeight);
        ctx.drawImage(game.roiTrefle,0, 0,w,h);

        // console.log("new card, cardWidth:"+cardWidth+", cardHeight:"+cardHeight);
        rectoDynText.update();

        rectoMat.diffuseTexture =rectoDynText;
    }
  
    rectoMat.diffuseTexture.hasAlpha = true;
    rectoMat.useAlphaFromDiffuseTexture;
    rectoMat.hasAlpha = true;

    this.mesh = BABYLON.MeshBuilder.CreatePlane(name, {width: cardWidth, height: cardHeight}, scene, true, BABYLON.MeshBuilder.FRONTSIDE);
    this.mesh.material = rectoMat;

[JohnK]

As an alternative you could use dynamic texture on a plane to place the text in front of a card as used in this topic When the DynamicTexture set null,the background color is transparent but the text can not update

[Fenryll]

Thanks @JohnK !

I am currently messing around with something that is already working very nicely, and your alternative will allow me to stop to break it and build on top: I like it very much

[Fenryll]

so, works… but @JohnK, you look to be a DynamicTexture expert, so maybe you can answer the next question:

I did several tries, but I always have a kind of pixelate result for these numbers on the cards… I thought it would display as nice as the texts in the bubble or in the nicknames… but no success so far and, I have an additional question, I have problem to add some alpha to the these numbers… I am using rgba(0, 0, 0, 0.4) -> alpha won’t apply, but below 0.4, the text is not visible anymore…

here is the code:

if(value%9<5){
        let writingPlane = this.mesh.clone("writingPlane");
        writingPlane.parent = this.mesh;
        writingPlane.position.z = -0.01;
        //Create dynamic texture
        let size = 500;
        let dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", size, scene);
        let font_size = 300;
        //let font_type = "Arial";
        let font_type = "Verdana";
       // let font ="bold " + font_size + "px " + font_type;
        let font =font_size + "px " + font_type;
        let text= value%9+6;

        //Draw text
        //dynamicTexture.drawText(text, null, 220, font, "#66666666", "transparent", true);

        dynamicTexture.drawText(text, null, 220, font,  'rgba(0, 0, 0, 0.3)', "transparent", true);

        var mat = new BABYLON.StandardMaterial("mat", scene);
        mat.diffuseTexture = dynamicTexture;
        mat.diffuseTexture.hasAlpha = true;

        //apply material
        writingPlane.material = mat;
    }

[JohnK]

@Fenryll

I always have a kind of pixelate result

See if this helps Dynamic Texture Text appears distorted

and
https://doc.babylonjs.com/how_to/dynamictexture#text-and-area-matching

Alpha problem I will need to look at when back on PC

[JohnK]

The alpha problem, I think, is due to what’s on a canvas being used as an image. If you look at this PG (I hope you are not red/green colorblind) https://www.babylonjs-playground.com/#TMHF80#15

The ‘font’ has been made transparent by setting the alpha value for the whole image (line 45). However this sets the transparency level for the whole image darkening whatever is behind it (the grass) I have compensated for this by increasing the light intensity (from 0.9 to 1.8).

I have not found a way of just making the font color partially transparent, the value for a in rgba seems to make the font either invisible or opaque.

[Fenryll]

yup, I just tried on my project, weird behaviour… then I played a bit with your playground, so setting mat.alpha to 1 makes the text full red and keep rest of the plane “transparent”, but less than 1 is changing the alpha of the plane, 0.9 makes it almost black… hum… @Deltakosh is it a bug ?

[Deltakosh]

Not a bug I recommend using the opacity texture channel to get smooth alpha values:
https://www.babylonjs-playground.com/#TMHF80#17

[Fenryll]

thanks! this line 47 mat.opacityTexture = dynamicTexture; solved everything

one stone, two birds: It solved also a problem I had with a fade-in animation try for my bubbles

3 birds actually: I exported my bubbles with some alpha on their white body, setting the opacityTexture made it also work

[Deltakosh]

I glad it helped ;D