Getting Babylon.js in project

classic12 · January 20, 2019, 6:14pm

Hi guys,

as usual things that should be easy baffle my ageing brain.

I have tried to follow this tutorial and get it to work in NSBasic.

https://doc.babylonjs.com ( the getting started project )

I have created the there js files and dragged them into my project. ( this includes the js files )
babylon.js
onjs.loaders.min.js
pep.js

Added a container id = renderCanvas

I put the code on the Form1 on show event ( Is this correct ? )

Form1.onshow=function(){
        // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');

            // load the 3D engine
            var engine = new BABYLON.Engine(canvas, true);

            // createScene function that creates and return the scene
            var createScene = function(){
                // create a basic BJS Scene object
                var scene = new BABYLON.Scene(engine);

                // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

                // target the camera to scene origin
                camera.setTarget(BABYLON.Vector3.Zero());

                // attach the camera to the canvas
                camera.attachControl(canvas, false);

                // create a basic light, aiming 0,1,0 - meaning, to the sky
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

                // create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation 
                var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

                // move the sphere upward 1/2 of its height
                sphere.position.y = 1;

                // create a built-in "ground" shape;
                var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

                // return the created scene
                return scene;
            }

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

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

            // the canvas/window resize event handler
            window.addEventListener('resize', function(){
                engine.resize();
            });
}

When I run it I am getting some errors.

Project1 ](Project1 babylon3.appstudio.zip (1.0 MB)

Any ideas where I am going wrong here ?

Cheers
Steve Warby

classic12 · January 22, 2019, 9:41pm

The Babylon forum states I need a canvasElement not a container so I added an image and gave that the ID renderCanvas.

I have removed the .js files and added this to the header files.

<script src="https://preview.babylonjs.com/babylon.js"></script>
    <!-- Link to the last version of BabylonJS loaders to enable loading filetypes such as .gltf -->
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- Link to pep.js to ensure pointer events work consistently in all browsers -->
    <script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>

I still get the same error.

Does this mean the library is not loaded ? How do I rectify this

TypeError: this._gl.getContextAttributes is not a function. (In ‘this._gl.getContextAttributes()’, ‘this._gl.getContextAttributes’ is undefined)

I added a button to run the code to ensure time for the library to load but still same problem.

PPetree · January 22, 2019, 10:03pm

Steve,

If you’re using jquery trying loading with this code:

      $.getScript("https://preview.babylonjs.com/babylon.js", function( data, textStatus, jqxhr) {
            doSomeInitWork();
      }).fail(function(xhr, textStatus, error) { jsLoadError(xhr, textStatus, error, "babylon"); });

And then check the results like this:

function jsLoadError(xhr, textStatus, error, js)
{
  alert("The '" +js +"' functionality is not currently available. Your device said: " +textStatus);
}

If you’ve already implemented a Content Security Policy then make sure babylon.js is added.

classic12 · January 23, 2019, 12:04am

Thank PPetree,

I’m following the gestated code here:

I have removed everything from the extra headers and changed the code to:



      
doSomeInitWork=function(){
        // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');

            // load the 3D engine
            var engine = new BABYLON.Engine(canvas, true);

            // createScene function that creates and return the scene
            var createScene = function(){
                // create a basic BJS Scene object
                var scene = new BABYLON.Scene(engine);

                // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

                // target the camera to scene origin
                camera.setTarget(BABYLON.Vector3.Zero());

                // attach the camera to the canvas
                camera.attachControl(canvas, false);

                // create a basic light, aiming 0,1,0 - meaning, to the sky
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

                // create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation 
                var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

                // move the sphere upward 1/2 of its height
                sphere.position.y = 1;

                // create a built-in "ground" shape;
                var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

                // return the created scene
                return scene;
            }

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

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

            // the canvas/window resize event handler
            window.addEventListener('resize', function(){
                engine.resize();
            });
}



btnGetBabylonJS.onclick=function(){
    $.getScript("https://preview.babylonjs.com/babylon.js", function( data, textStatus, jqxhr) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});  
}

btngetBabylonLoader.onclick=function(){
    $.getScript( "https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});
}

btnGetPepJS.onclick=function(){
   $.getScript( "https://code.jquery.com/pep/0.4.1/pep.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
}); 
}

btnRunCode.onclick=function(){
    doSomeInitWork();
}

but I still get the error

TypeError: this._gl.getContextAttributes is not a function. (In 'this._gl.getContextAttributes()', 'this._gl.getContextAttributes' is undefined)

http://toolfolks.com/babylon3/

project http://toolfolks.com/babylon3/babylon3.appstudio.zip

Cheers

Steve Warburton

PPetree · January 23, 2019, 12:23am

You really only needed to use the $.get on the Babylon code as we needed to test if it was able to be loaded. If you didn’t get any errors on the console then it’s being downloaded, parsed and inserted into the DOM.

I’d run one other check… set a breakpoint where you’re making your first call to the Babylon code and then step into that call… if the code was loaded, you should be able to step in with no problems… if it’s not loaded then you’ll know that OR you may be running into a this._ context/scope problem

(As an FYI, if this is mobile app, you’ll want to package these .js files as relying on a CDN will break your app when it’s offline.)

classic12 · January 23, 2019, 8:29am

Each click of the buttons show success

The error occurs at this line

var engine = new BABYLON.Engine(canvas, true);

classic12 · January 23, 2019, 8:39am

Is the image component a canvas element?

PPetree · January 23, 2019, 11:41am

What ID did you assign to the canvas element?

ghenne · January 23, 2019, 12:34pm

There are two ways to get a Canvas element (or more):

Use a PictureBox control. It’s really an HTML Canvas.
Use a Container control and set the HTMLTag property to canvas.

classic12 · January 23, 2019, 1:36pm

The pictureBox worked…

http://toolfolks.com/babylon3/

If only the error message was something like


You idiot the component you set to renderCanvas is not a canvas element

Cheers

Steve Warby

PPetree · January 23, 2019, 2:24pm

LOL It happens to the best of us!