Text2D Canvas I cant get it to work

[chicagobob123]

I have been playing with this stuff all morning and cant seem to get want I need from it. 

What I want is simple. A rounded corner rectangle with text2D on it that acts like a plane that I can position and rotate. 

I have played with a great many examples. Some dont even compile. 

This is a example from 

http://babylonjs-playground.com/#1BKDEO#3  It has a compilation error. 

 

I tried a modified version like this and get an error. 
http://babylonjs-playground.com/#91ITE

Cannot set property 'tabIndex' of undefined

In this example http://babylonjs-playground.com/#1BKDEO#3

I dont want to rect to rotate I want to position and rotate the entire canvas 

 

[Nabroski]

just be course everything has changed

around 20pages
https://doc.babylonjs.com/tutorials/Using_the_Canvas2D

[chicagobob123]

Still not getting it. 

http://babylonjs-playground.com/#1BKDEO#129

I tried this but the canvas doesn't move. 

[Nabroski]

Yes, the Canvas2d Playground is a bit buggy, you should switch to your local server and use babylonjs 2.5 current build from github

the workaround is to press Ctrl+F5

http://www.babylonjs-playground.com/#2EJ0JT#0

Good Luck

[chicagobob123]

Downloaded the latest from GitHub still have problems. Its not working. 

What I mean by that is the text doesnt even show up. 

I am going to look at the example with the cubes. Maybe that will work better. 

 

[chicagobob123]

I recreated the cube example and tried to use that.

http://www.babylonjs-playground.com/#1N9RJY#12

First I could not move the placement of the labels. I altered the Vector and nothing.

Next the labels for some reason ended up everywhere. I add them as new vehicles show up. 

Create a new ScreenSpaceCanvas2D for each vehicle. 

It all looks create for a while. Then it goes badly. 

 

[Nabroski]

nice

[chicagobob123]

I really need to learn proof read. 

I Create a new ScreenSpaceCanvas2D for each vehicle. 

It all looks great for a while.

Then it goes bad. Duplicate labels end up everywhere

[chicagobob123]

Here is an image when I rotate the camera 

[Wingnut]

Ok, so, where we at, CB?  Can you reproduce the problem with a playground? 

http://www.babylonjs-playground.com/#1N9RJY#32

Your fast-version-adding playground demo looks fine... using one group per label.  (except for a little flash of labels in the lower left)

The actual shipping port project... uses one ScreenSpaceCanvas2D per label?

I'm confused (not unusual). 

[Nabroski]

cleanup

http://www.babylonjs-playground.com/#1N9RJY#33

[chicagobob123]

I had a meeting thought I posed this. 

I have not been able to get this into playground 

This is what the code looks like. 

     var canvas = new BABYLON.ScreenSpaceCanvas2D(scene, {
        id: "ScreenCanvas",
        cachingStrategy: BABYLON.Canvas2D.CACHESTRATEGY_DONTCACHE
     });

   vec = new BABYLON.Vector2(0,heighty * 10);
   var group =  new BABYLON.Group2D({
            parent: canvas, id: mytext, adjustedwidth, adjustedheight, trackNode: vehiclemesh, origin: vec,
            children: [
                new BABYLON.Rectangle2D({ id: "firstRect", width: adjustedwidth, height: adjustedheight, x: 0, y: -topoffset, origin: BABYLON.Vector2.Zero(), border: "#FFFFFFFF", fill: "#808080FF", children: [
                        new BABYLON.Text2D(mytext, { marginAlignment: "h: center, v:center", fontName: "bold 12px Arial" })
                    ]
                })
            ]
        });

  

Basically a modified version of the code that attaches to the cube. Instead of adding them to an array of cubes. 

I add each one to a vehicle for identification. 

Two problems.

1) is when I turn the camera and move in the other direction as you can see by the screen show the labels from vehicles that are on the other side show up

2) I can't adjust the position of the label. I have tried to adjust the Origin Vector but it does nothing far as I can tell. 

I like these labels because they larger as you zoom back. This may be on purpose or a bug but its something I could use and the text is very clear. 

 

I have tried the same kind of thing like this using a WorldSpaceCanvas2D and that doesnt even show up even though it works in playground.    

    var canvas = new BABYLON.WorldSpaceCanvas2D(scene, new BABYLON.Size(adjustedwidth, adjustedheight), {
    id: mytext,
    worldPosition: new BABYLON.Vector3(0, 0, 0),
    worldRotation: BABYLON.Quaternion.RotationYawPitchRoll(Math.PI / 4, Math.PI / 4, 0),
    enableInteraction: true,
    backgroundFill: "#C0C0C040",
    backgroundRoundRadius: 4,
    children: [
        new BABYLON.Text2D(mytext, { fontName: "bold 12px Arial", marginAlignment: "h: center, v: bottom" })
    ]
});

Currently I am stuck using inferior looking text using a DynamicTexture and fillText 

 

 

[Nabroski]

Hello 

Sorry, i would like, but i have to time to code, right now, maybe at the weekend

Here are some good examples how to copy a hole Canvas Element and manipulate it, run a loop, animation Frame, change Colors etc.

 

[Wingnut]

Oh, CB, this is the z-order blues.  (btw, thx 4 cleanup, nabsi)

Sing it now.

"I got them low-down z-order blues... from head down to my shooooooze"

Rendering depth.  Why am I talking?  Like I know ANYTHING about adjusting the z-depth of group2D's. 

Ok, let's go here... http://playground.babylonjs.com/?2 ... turn ON debug layer, turn OFF statistics, turn ON clickable labels, and start panning-around the cam.  Yep, you can see the labels for mesh, even if it is blocked from view by the big sphere.  Cuz why?  Cuz... I dunno.  Do I LOOK like a depth layer engineer?    (Aren't I helpful? Yikes!)

Let's see...

if (group2d.trackedNode.distanceToCamera > far) { de-visibilize(group2d.trackedNode.label) }    // errr