Dynamic Texture (text) rotation.?

[JackFalcon]

Dynamic Texture applied to Plane, is rotated sideways. Need it always readable, even after rotation.

How to rotate DynamicTexture... like BILLBOARD_MODE?

Here is the code:

    var txtTiles = [];
    function createTxtTiles(){
        var txtTilePositions = [
            {x:18,z:18},{x:-18,z:18},{x:18,z:-18},{x:-18,z:-18}, //deca
            {x:48,z:48},{x:-48,z:48},{x:48,z:-48},{x:-48,z:-48}
        ];

        var txtTile;
        for (var i=0;i<txtTilePositions.length;i++) {
            txtTile = BABYLON.MeshBuilder.CreateBox("txtTile"+i, {width:32,height:1,depth:32}, scene);  
            txtTile.parent = baseObj;

            //Create dynamic texture
            var textureResolution = 512;
            var textureGround = new BABYLON.DynamicTexture("dynamic texture", {width:512, height:256}, scene);   
            var textureContext = textureGround.getContext();
            
            var materialGround = new BABYLON.StandardMaterial("Mat", scene);                    
            materialGround.diffuseTexture = textureGround;
            // ground.material = materialGround;
            txtTile.material = materialGround;
            
            //Add text to dynamic texture
            var font = "124px fantasy";
            textureGround.drawText(i+1, 255, 175, font, "steelblue", "white", true, true);

            txtTile.position.y = 1;
            txtTile.position.x = txtTilePositions[i].x;
            txtTile.position.z = txtTilePositions[i].z;
            console.log('f: '+txtTile.position)
            txtTiles.push(txtTile)

        }
    }

Here is image of text needing rotation...

Looking for BILLBOARD_MODE in DynamicTexture, doesn't seem to be there (https://doc.babylonjs.com/api/classes/babylon.dynamictexture) 

Probably need BILLBOARD_MODE on the Box?

BABYLON.Mesh.BILLBOARDMODE_Y???

Thx.

[JohnK]

Hi @aFalcon first of all it does really help us to help you when you create a playground for us to work with, even a simplified version of your issue. Saves us making assumptions about the code that goes around your function which we can get wrong.

Why not just rotate your tiles? https://www.babylonjs-playground.com/#KU0XSI

[JackFalcon]

Hi @JohnK thanks. Yes playground not always possible to reduce to POC (for me [for whatever reason<maybe i try harder>])

Correct, single rotation works, but not in the case of rotating a 3Dworld (which is why playground not possible in context).

Great playground. Question would be: how to get numbers to always face camera? Without rotating the tiles?

Latest Code: 

            txtTile.rotation.y = Math.PI/2; 
            txtTile.billboardMode = BABYLON.Mesh.BILLBOARDMODE_Y;
            

That works as well, as all the numbers are readable at all orientations. But lose grid layout (as expected).

So, maybe solution is to detect world rotation and apply to localspace?

Ah wait,... it would only be y rotation. Interesting...

Otherwise, how to rotate the DynamicTexture (text)?

Is there a way to rotate the ctx or drawText()?

Thx. 

 

[Wingnut]

https://www.babylonjs-playground.com/#KU0XSI#2

Goofy!  Works pretty good, though.  Rotatin' the GUI controls per camera.alpha (with a little rotational offset of -90 degrees).

This uses planes, not boxes.... but stuff can be done.  GUI for mesh... friend of everyone.

Update:  Let's have some fun with the gradient radial/linear fill features I found on ADT.background.  https://www.babylonjs-playground.com/#KU0XSI#3

Purrrrrty.    Line 149... markAsDirty is unnecessary and should be removed for performance reasons!  Not sure why, but this PG seems a little CPU-heavy during camera pans.

I suppose we need to fig how to eliminate that thin border line on the buttons, or, change to GUI textBlocks instead of GUI buttons.  I had some problems getting my textBlocks to work, so I switched to buttons. 

[JackFalcon]

That is really awesome... and it could work. Looking... thanks.

RadialGradient (rocks) and hello... AdvancedDynamicTexture

Like: txtGUIs[adt].rootContainer._children[0].rotation = -camera.alpha - Math.PI/2;

UPDATE: trying to detect Quaternion rotation (then apply adjustment), woah! What? Wikipedia... : )

[JackFalcon]

SOLUTION:

//RayCast top of the world to find orientation.
    function getFarPlane() { //detects far plane to determine precise orientation.
        var planeItems = [boxigon1.top,boxigon1.north,boxigon1.east,boxigon1.south,boxigon1.west,boxigon1.far];
        var direction = new BABYLON.Vector3(0,0,-1);
        var origin = new BABYLON.Vector3(0, 0, 165);
        var length = 10;
        var ray = new BABYLON.Ray(origin, direction, length);
        var picks = ray.intersectsMeshes(planeItems);  //FARRAY-.
        var farPlane = '';
        if(picks.length){
            farPlane = picks[0].pickedMesh.id;
        }
        return farPlane;
    }

//Then, use the orientation to rotate the tile to be readable.
    basePlane.initView = function(farPlane){
        var dynRotation=0;
        if(farPlane==='platefar'){
            dynRotation = Math.PI/2;
        } else if (farPlane==='platewest'){
            dynRotation = 0;
        } else if (farPlane==='plateeast'){
            dynRotation = Math.PI;
        } else if (farPlane==='platetop'){
            dynRotation = -1*Math.PI/2;
        }
        if(dynRotation){
            for (var i=0;i<txtTiles.length;i++) {
                var txtTile = txtTiles[i];
                txtTile.rotation.y = dynRotation; 
            }  
        }
    }

If there is a way to rotate txt ctx, please lmk... Thx.

[Wingnut]

Show us a PG, AFalc... so we can FINALLY see what the heck you are trying to accomplish... ok?

What's wrong with wAng?  (I've asked MYSELF that question, often, but it's usually a bedroom thing.) 

https://www.babylonjs-playground.com/#KU0XSI#4

wAng... breakfast of champions.  Am I missing something?  Am I chasing an incorrect objective?

Are we supposed to be rotating the tile itself, not JUST the numbers?

[JohnK]

Two excellent solutions (?) @Wingnut particularly the use of the ADT. Setting thickness to zero gets rid of the border https://www.babylonjs-playground.com/#KU0XSI#5

Clever use of wAng(ing) in the other.

 

[JackFalcon]

lol. Thanks @JohnK I try PG. And I ended up going with your solution. @Wingnut... remember the square planet? Working on that.  Didn't know wAng was a thing. Thanks.

UPDATE: found ctx.rotate(), Tried it, and the img went black. Fun! New tool for a later day. Thanks for your help gentlemen.

Oh great... the wAng solution was good. Not much I can say on that. Thanks for the tip.