Text2D Canvas I cant get it to work

Recommended Posts

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  It has a compilation error. 


I tried a modified version like this and get an error.

Cannot set property 'tabIndex' of undefined

In this example

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


Share this post

Link to post
Share on other sites

I recreated the cube example and tried to use that.

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. 


Share this post

Link to post
Share on other sites

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

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

Share this post

Link to post
Share on other sites

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 



Share this post

Link to post
Share on other sites


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.


Share this post

Link to post
Share on other sites

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... ... 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?  :D  (Aren't I helpful? Yikes!)

Let's see...

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

Share this post

Link to post
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.