I can't get the WorldSpaceCanvas2D to work

[MacSkelly]

I keep getting the console error "o._cacheNode.getInnerPosToRef is not a function".

I just want to get it into the scene for now but I can't get it to show. I may be missing something obvious:

var mainCanvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(mainCanvas, true);

var createScene = function () {

    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(mainCanvas, true);

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    var text2d = new BABYLON.Text2D("A", { fontName: "24pt Arial", marginAlignment: "h: center, v: bottom", fontSuperSample: true });

    var canvas = new BABYLON.WorldSpaceCanvas2D(scene, new BABYLON.Size(150, 150), {
        id: "WorldSpaceCanvas",
        worldPosition: new BABYLON.Vector3(0, 0, 0),
        enableInteraction: true,
        backgroundFill: "#C0C0C040",
        backgroundRoundRadius: 20,
        children: [
            text2d
        ]
    });

    var box1 = BABYLON.Mesh.CreateBox("Box1", 2.0, scene);
    var materialBox = new BABYLON.StandardMaterial("texture1", scene);
    materialBox.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
    box1.material = materialBox;

    var animationBox = new BABYLON.Animation("boxAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                                                                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
    // Animation keys
    var keys = [];
    keys.push({
        frame: 0,
        value: 20
    });

    keys.push({
        frame: 60,
        value: -10
    });

    animationBox.setKeys(keys);

    box1.animations.push(animationBox);

    scene.beginAnimation(box1, 0, 100, true);

    return scene;

};

var scene = createScene();

engine.runRenderLoop(function () {
    scene.render();
});

// Resize
window.addEventListener("resize", function () {
    engine.resize();
});

 

[Wingnut]

Hi @MacSkelly.

http://www.babylonjs-playground.com/#1ENUAW#1

Your canvas was pretty big and close-to the camera.  You might have been looking-through it, and not known it.  I've done that myself.

I down-sized a few things and backed-out the camera.  I see a canvas2d canvas, now.  Hope this helps.  Be well.

[MacSkelly]

@Wingnut The problem is though that nothing loads. Its just a white screen with the console error "o._cacheNode.getInnerPosToRef is not a function".

Removing the WorldSpaceCanvas2D makes everything okay again.

[Wingnut]

Ohhh, I thought you were having an issue with making the worldSpaceCanvas2D "show".  Ok, there's some loaders failing in the same scene?  And you think the loading problem is caused by the canvas2D system?  When you remove it, mesh loading works fine?  More details, please.  thx.

Using latest BJS and latest Canvas2D extension?  *nod*  hmm.  Thinkin'.

[MacSkelly]

@Wingnut Basically the playground you linked but without the WorldSpaceCanvas2D works fine but adding it shows the console error "o._cacheNode.getInnerPosToRef is not a function" and the scene doesn't load. The code that I added in my first post was all the code I'm using. Sorry if this isn't helpful.

[MacSkelly]

The playground you linked works fine in the playground but when I add it to my local project it doesn't work.

[Wingnut]

Ahh, ok, thanks for extra info.  Just off the top of my head, I'd say play with versions-changing (perhaps for both Canvas2d AND BJS). 

Canvas2D system is not within the 'extensions' repository anymore.  I think it still IS one (needs adding via another <script> element). 

But, I'mnot sure... I hardly ever do home projects. I work, mostly, in the playground.

Here's the absolute latest... https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview release/canvas2D

Still two calls to .getInnerPosToRef in there... so... maybe I'm grasping at straws.  Could be a bug, I suppose.

Let's ping @Nockawa and see if he has any advice/words.  He's been a little off-forum busy, lately, I suspect, but maybe he'll stop-by.

Sorry that I have no solution, yet.  I'll keep thinkin' and you keep experimentin', ok?  Tell us... if you discover information about this, thx.

[Nockawa]

Hello People,

Sorry for the delay, I was on a two weeks roadtrip visiting a small part of @Wingnut's country (mostly west coast national parks) and I didn't have 1 minute for me the whole time!

@MacSkelly can you please confirm or try with the latest preview of bjs and c2d that you will find here and tell me if you still have the issue... Look like you're in a case where the node's not ready and my code is assuming it is!

Thanks

[R0b0D3vil]

Hi @Nockawa

I have exactly the same issue. I tried to test the code used by the following playground

http://www.babylonjs-playground.com/#1KYG17#1

But the result it is exactly the same described by @MacSkelly in his first post.

Uncaught TypeError: rd._cacheNode.getInnerPosToRef is not a function.

Any possibility to fix this one ?

Cheers

R0b0