Canvas2D, actionManager, dispose

Virtuell · August 30, 2016

Hi! First time posting.

I ran in to an issue I've battled with for a several days. When calling the canvas2d.dispose the error: "Uncaught TypeError: Cannot read property 'modelKey' of null" sometimes occur. I did a fair bit of research but I don't see that I am calling anything incorrecly. While posting I realised that I can probably circumvent the problem by creating a "RepositionGUI" function but I would like to understand the problem.

In the example the error occurs in chrome after the button is pressed.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <!--- link to the last version of babylon --->
    <script src="babylon.2.5-alpha.js"></script>
    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }

        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
window.addEventListener('DOMContentLoaded', function() {
    // get the canvas DOM element
    var canvas = document.getElementById('renderCanvas');
    // load the 3D engine
    var engine = new BABYLON.Engine(canvas, true);
    var scene;
    var canvas2d;

    var createScene = function() {
        scene = new BABYLON.Scene(engine);
        var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
        var cam = new BABYLON.ArcRotateCamera("ArcRotateCamera", Math.PI / 3, Math.PI / 3, 200, new BABYLON.Vector3(-10, 30, 10), scene);

        cam.attachControl(canvas);
        scene.executeWhenReady(createGUI);
        return scene;
    };

  
var createGUI = function() {
            canvas2d = new BABYLON.ScreenSpaceCanvas2D(scene, {
                id: "ScreenCanvas",
                enableInteraction: true
            });


            //buttons
            var button1 = new BABYLON.Rectangle2D({
                parent: canvas2d,
                id: "button1",
                x: canvas.width /2 - 150,
                y: canvas.height / 2 ,
                width: 300,
                height: 80,
                fill: "#ffffffff",
                border: "#DADDDEFF",
                borderThickness: 8,
                children: [new BABYLON.Text2D("Button 1", { fontName: "32pt Arial", defaultFontColor: new BABYLON.Color4(0.2, 0.2, 0.2, 2), marginAlignment: "h: center, v: center", fontSuperSample: true })]
            });
           
            var text1 = new BABYLON.Rectangle2D({
                parent: canvas2d,
                id: "text1",
                x: canvas.width /2 - 125,
                y: canvas.height / 2 - 300,
                width: 250,
                height: 80,
                fill: "#e4e4e4ff",
                border: "#DADDDEFF",
                borderThickness: 8,
                children: [
                    new BABYLON.Text2D("Text 1", { fontName: "24pt Arial", defaultFontColor: new BABYLON.Color4(0.2, 0.2, 0.2, 2), marginAlignment: "h: center, v: center", fontSuperSample: true })
                ]
            });

           
            var text2 = new BABYLON.Rectangle2D({
                parent: canvas2d,
                id: "text2",
                isVisible: false,
                x: canvas.width /2 - 125,
                y: canvas.height / 2 - 300,
                width: 250,
                height: 80,
                fill: "#e4e4e4ff",
                border: "#DADDDEFF",
                borderThickness: 8,
                children: [
                    new BABYLON.Text2D("TempText2", { fontName: "24pt Arial", defaultFontColor: new BABYLON.Color4(0.2, 0.2, 0.2, 2), marginAlignment: "h: center, v: center", fontSuperSample: true })
                ]
            });


            /*specific button function*/
            button1.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger,
                text1, "levelVisible", false));
            button1.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger,
                text2, "levelVisible", true));
        };

    // call the createScene function
    scene = createScene();


    // run the render loop
    engine.runRenderLoop(function() {
        scene.render();
    });

    // the canvas/window resize event handler
    window.addEventListener('resize', function() {
        engine.resize();
        canvas2d.dispose();//this is not working, some of the canvas is not disposed, textfield disapears bottommenu does not
        createGUI();
    });
});
    </script>
</body>
</html>

Wingnut · August 30, 2016

Hi @Virtuell, welcome to the forum. I don't have any good news for you, yet... but we forum helpers REALLY like having the code put into a Babylon.js Playground, and that way everyone can easily experiment/test. So, I did one: http://playground.babylonjs.com/#2BFQLS#0

I changed a few things... nothing too drastic. You can do edits, hit RUN many times, SAVE as often as you like, grab a ZIP version, you cannot hurt anything in the BJS playground. Experiment freely, and share URL's of future SAVES... in this thread... if you discover something interesting.

One way to test this... is to put the playground window into "restored" condition (so it is edge-drag resizable), and do some window drag resizing. The screenSpaceCanvas2D should disappear upon drag-size, then re-appear after about 2 seconds. It seems to work... once. hmm.

After the first time, all further window resizing... act differently. Things don't seem to dispose well.

It could be a mistake by me, though. I do those often. I'm still testing and learning.

Besides the color/corner changes in lines 9-10, I tried a cachingStrategy in line 11, fishing for a solution. No joy. More testing ahead... we'll talk. Help from ANYONE... certainly welcome.

Virtuell · August 30, 2016

Thanks for taking interest I see that the playground is clearly superior to just dumping the code in a box.

I did implement my previous idea of a reposition function and ended up not calling the dispose function at all to quicker get to a different solution since this one is very hard to debug.

example:

http://playground.babylonjs.com/#2BFQLS#2

One problem with the solution is that I can't get it to work together with the canvas2d marginAlignment and everything has to use the default origin: bottom, left .

I don't understand why the previous solution is not working.

Sign In

Canvas2D, actionManager, dispose

Recommended Posts

Virtuell

Link to comment

Share on other sites

Wingnut

Link to comment

Share on other sites

Virtuell

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity