Jump to content

Dynamic Texture (text) rotation.?


Recommended Posts

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

        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)


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?



Link to comment
Share on other sites

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

Link to comment
Share on other sites

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()?



Link to comment
Share on other sites


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.  :)

Link to comment
Share on other sites

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... : )

Link to comment
Share on other sites


//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 = '';
            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;
            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;
            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.

Link to comment
Share on other sites

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.)  :o


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?

Link to comment
Share on other sites

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.



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...