Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Error "No camera defined" on scene.dispose()

Borjan

By Borjan,
in Questions & Answers

 Share

Recommended Posts

Borjan Newbie

Borjan

Posted
Posted (edited)

X.htmlI intend to use Babylon.js for displaying digraphs that are uploaded by the end-user.

I've noticed that that the memory grows after each upload (and the rotations and panning are getting slower).

Obviously, I have to get rid of the previously loaded graphs, so I've declared scene as a global variable and have included the statement: if (scene != null) scene.dispose(); before creating the next scene. However, if the scene exist, I receive the error "No camera defined" and I have to reload the page.
I'm a novice to javascript, babylon.js and 3D - I'm presuming I'm doing something obviously wrong. 

The error (SCRIPT5022) is in: babylon.2.5.js (12,14463)

- Tried to attach the page file, but the uploading is failing with err -200 .... Here is the complete page, erroring statement marked red:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <title>Babylon - Getting Started</title>
    <script src="babylon.2.5.js"></script>
    <script src="hand-1.3.7.js"></script>

    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }

        .button {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 18px;
            font: verdana;
        }
    </style>
</head>
<body>
    <script>
        var fName = '...';
        var displayModel;
        var engine;
        var xhr;
        var scene;
        window.addEventListener('DOMContentLoaded', function () {
            // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');

            // load the 3D engine
            engine = new BABYLON.Engine(canvas, true);
            window.addEventListener('resize', function () {
                engine.resize();
            });
        }
        );

        // *************************************************************************************************************************************
        //http://borjan5/ArchLS/api/SoaScape3D/Render25D/62b702b6-7903-49f4-b609-5ccda2bdba4f
        function renderApiTest() {
            var url = "http://borjan5/ArchLS/api/SoaScape3D/Render25D/62b702b6-7903-49f4-b609-5ccda2bdba4f";
            xhr = new XMLHttpRequest();
            xhr.open("GET", url, false);
            xhr.setRequestHeader("Content-type", "application/json");
            xhr.addEventListener("load", apiComplete, false);
            /*
            xhr.addEventListener("error", apiFailed, false);
            xhr.addEventListener("abort", apiCanceled, false); */
            xhr.send();
        }
        function renderFile25D() {
            var url = "http://borjan5/ArchLS/api/SoaScape3D/Render25D/62b702b6-7903-49f4-b609-5ccda2bdba4f";
            xhr = new XMLHttpRequest();
            xhr.open("GET", url,true);
            xhr.setRequestHeader("Content-type", "application/json");
            xhr.addEventListener("load", apiComplete, false);
            xhr.send();
        }

        function renderFile() {
            alert('Not there yet');
        }

        // *************************************************************************************************************************************
        function renderDemo() {
            var url = "http://borjan5/ArchLS/api/SoaScape3D/RenderDemo";
            xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.setRequestHeader("Content-type", "application/json");
            xhr.addEventListener("load", apiComplete, false);
            
            xhr.addEventListener("error", apiFailed, false);
            xhr.addEventListener("abort", apiCanceled, false); 
            xhr.send();
        }

        // *************************************************************************************************************************************
        function renderBuiltIn() {
            displayModel = {
                "Title": "Built-in Data", "Mode": 1,
                "Applications": [
                    { "Name": "APPL1", "Form": 0, "Id": 0, "ToolTip": "", "V3": 0, "X": 46.5826874, "Y": 30.3723526, "Z": 0.0 },
                    { "Name": "APPL2", "Form": 0, "Id": 1, "ToolTip": "", "V3": 0, "X": 91.46761, "Y": 50.6884537, "Z": 36.0399628 },
                    { "Name": "APPL3", "Form": 0, "Id": 2, "ToolTip": "", "V3": 0, "X": 51.7862473, "Y": 81.5939941, "Z": 36.0399628 }
                ],
                "Services": [
                    { "Name": "SERVICE1", "ProviderId": 0, "Form": 1, "Id": 0, "ToolTip": "", "V3": 0, "X": 50.97662, "Y": 36.7166367, "Z": 6.359515 }
                ], "ConsumingRelations": [{ "ConsumerId": 1, "ServiceId": 0, "ProviderId": 0 }, { "ConsumerId": 2, "ServiceId": 0, "ProviderId": 0 }
                ],
                "DisplayBoundary": { "Form": 0, "X": 69.025146484375, "Y": 55.983173370361328, "Z": 36.039962768554688, "W": 22.442462921142578, "H": 25.610820770263672 },
                "LastError": ""
            };
            showDisplayModel();
        }       
        // *************************************************************************************************************************************
        // *************************************************************************************************************************************
        function myUpload() {
            var file = document.getElementById('9999').files[0];
            var ajax = new XMLHttpRequest;
            var formData = new FormData;
            formData.append('archimateFile', file);
            //alert('aa1');
            ajax.upload.addEventListener("progress", myProgressHandler, false);
            //ajax.addEventListener('');
            ajax.addEventListener('load', myOnLoadHandler, false);
            fName = generateUUID();
            ajax.open('PUT', 'http://BORJAN5/BAB_DATA/' + fName + '.xml', true);
            ajax.send(formData);
        }
        function generateUUID() {
            var d = new Date().getTime();
            if (window.performance && typeof window.performance.now === "function") {
                d += performance.now();
            }
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        }
        function myProgressHandler(event) {
            //your code to track upload progress
            var p = Math.floor(event.loaded / event.total * 100);
            document.getElementById("uuid").textContent = fName + '  ' + p + '%';
        }
        function myOnLoadHandler(event) {
            // your code on finished upload
            // document.title = event.target.responseText;
            document.getElementById("25D").disabled = false;
            document.getElementById("3D").disabled = false;
            document.getElementById("2D").disabled = false;
            // alert('DONE ' + event.target.responseText);
            document.getElementById("uuid").textContent = '  File uploaded: ' + fName + ".xml";
        }
        function apiComplete(evt) {
            var data = xhr.responseText;
            //alert('API DONE: ' + data);
            displayModel = JSON.parse(data);
            showDisplayModel();
        }
        function showDisplayModel() {
            var scene = createSceneAndShow();
            engine.runRenderLoop(function () {
                scene.render();
            });
        }
        function apiFailed(evt) {
            alert("An error occurred while transferring the file.");
        }
        function apiCanceled(evt) {
            alert("The transfer has been canceled by the user.");
        }
        // *************************************************************************************************************************************
        function createSceneAndShow () {
            var canvas = document.getElementById('renderCanvas');
            if (scene) scene.dispose();
            scene = new BABYLON.Scene(engine);
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 600, new BABYLON.Vector3(50, 50, 50), scene);
            camera.attachControl(canvas, false);
            var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
            var material1 = new BABYLON.StandardMaterial("mat", scene);
            var material2 = new BABYLON.StandardMaterial("mat", scene);
            for (var key in displayModel.Applications) {
                if (displayModel.Applications.hasOwnProperty(key)) {
                    var sphere = BABYLON.Mesh.CreateSphere(displayModel.Applications[key].Name, 16, 4, scene);
                    displayModel.Applications[key].V3 = new BABYLON.Vector3(displayModel.Applications[key].X,
                        displayModel.Applications[key].Z,
                        displayModel.Applications[key].Y);
                    sphere.position = displayModel.Applications[key].V3;
                    sphere.material = material1;
                }
            }
            material1.diffuseColor = new BABYLON.Color3(1.5, 0, 0);
            var linesColor1 = new BABYLON.Color3(1, 0.2, 0.1);
            for (var key in displayModel.Services) {
                if (displayModel.Services.hasOwnProperty(key)) {
                    var obj = BABYLON.Mesh.CreateSphere(displayModel.Services[key].Name, 16, 4, scene);
                    displayModel.Services[key].V3 = new BABYLON.Vector3(displayModel.Services[key].X,
                        displayModel.Services[key].Z,
                        displayModel.Services[key].Y);
                    obj.position = displayModel.Services[key].V3;
                    var pId = displayModel.Services[key].ProviderId;
                    var myLines = BABYLON.Mesh.CreateLines("a", [obj.position, displayModel.Applications[pId].V3], scene);
                    myLines.color = linesColor1;
                }
            }
            for (var key in displayModel.ConsumingRelations) {
                if (displayModel.ConsumingRelations.hasOwnProperty(key)) {
                    var idA = displayModel.ConsumingRelations[key].ConsumerId;
                    var idS = displayModel.ConsumingRelations[key].ServiceId;
                    var myLines = BABYLON.Mesh.CreateLines("a", [displayModel.Services[idS].V3, displayModel.Applications[idA].V3], scene);
                }
            }
            return scene;
        }
    </script>
    <div id="bts" style="color:#0000FF">
        <span>
            <input id="9999" style="background-color: #4CAF50; width: 30%" type="file" name="archimateFile" onchange="myUpload()">
            <span id="uuid">...</span>
        </span>
        <button id="2D" class="button" style="background-color: #BCAC00" name="render2" onclick="renderFile()">SHOW 2D</button>
        <button id="25D" class="button" style="background-color: #1387F5" name="render25" onclick="renderFile25D()">SHOW 2,5D</button>
        <button id="3D" class="button" style="background-color: #E70000" name="render3" onclick="renderFile()">SHOW 3D</button>
        <button id="DEMO" class="button" style="background-color: #D490B8; color: black" name="demo" onclick="renderDemo()">SoaScape Demo</button>
        <button id="DEMO" class="button" style="background-color: #D4CE90; color: black" name="demo" onclick="renderApiTest()">API Test</button>
        <button id="DEMO" class="button" style="background-color: #90D4AC; color: black" name="demo" onclick="renderBuiltIn()">Built in data</button>
    </div>
    <div>
        <canvas id="renderCanvas"></canvas>
    </div>
</body>
</html>

Edited by Borjan
code uploading failed with -200
Link to comment
Share on other sites
Borjan Newbie

Borjan

Posted
  • Author
Posted
15 minutes ago, adam said:

I think you should be disposing the meshes instead of the whole scene.

https://www.babylonjs-playground.com/index2_5.html#CAVBUX#4

Thank you Adam, I've tested it and it solves most of the problem. However, the memory continues growing (not by 50 MB, but by some 10-15 MB). It seems to me that some other resources could be disposed too.

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.

Guest
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.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

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