Leanring BabylonJS local publishing

BP72 · June 16, 2016

For the life of me I cant get the page to load in IE 11 or in Chrome but works fine in Firefox.

Can anyone please advise?

Thank you in advance.

The code...

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>babylon.js - browser testing</title>
        <script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>
        <script src="http://www.babylonjs.com/cannon.js"></script>
        <script src="http://www.babylonjs.com/oimo.js"></script>
        <script src="http://www.babylonjs.com/babylon.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>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function () {
            var scene = new BABYLON.Scene(engine);
        
            //Adding a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
        
            //Adding an Arc Rotate Camera
			var camera = new BABYLON.ArcRotateCamera("Camera", 5, 1.2, 30, BABYLON.Vector3.Zero(), scene);
    		camera.attachControl(canvas, false);
        
            // The first parameter can be used to specify which mesh to import. Here we import all meshes
            BABYLON.SceneLoader.ImportMesh("", "scenes7/", "aws_scene7.babylon", scene, function (newMeshes) {
                // Set the target of the camera to the first imported mesh
                camera.target = newMeshes[0];
            });
        
            // Move the light with the camera
            scene.registerBeforeRender(function () {
                light.position = camera.position;
            });
        
            return scene;
        }
        
        var scene = createScene();

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

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

GameMonetize · June 16, 2016

Hello

what kind of error do you get? (console, network?)

BP72 · June 16, 2016

Just a blank screen nothing loads in IE 11 or Chrome but fires right up on Firefox.

dbawel · June 16, 2016

@BP72 -

I think you might have an issue in calling "function (newMeshes)" in your lines below:

// The first parameter can be used to specify which mesh to import. Here we import all meshes BABYLON.SceneLoader.ImportMesh("", "scenes7/", "aws_scene7.babylon", scene, function (newMeshes) { // Set the target of the camera to the first imported mesh camera.target = newMeshes[0]; });

Otherwise, I don't see any specific reasons why this file wouldn't load, but there are ways to quicky troubleshoot. First, I would remark out the above lines and replace them with the creation of a native babylon mesh such as a cube or sphere:

I assume your scene should then render and you can add elements back as necessary. So the following shouldn't be necessary - but we're troubleshooting, and browsers change frequently. So I would next try the following one by one:

Remark out touch action, margin, padding, and overflow
Define a .css file

And when you add your ImportMesh code back into your script, declare the "name, id" of your object and not leave this as "". and I would also declare your paths completely instead of "scenes7/" - I would write as "./scenes7/" . Again, should not be necessary, but I've seen stranger things.

This should locate the issue. Good luck.

DB

BP72 · June 16, 2016

1 hour ago, dbawel said:

@BP72 -

I think you might have an issue in calling "function (newMeshes)" in your lines below:

// The first parameter can be used to specify which mesh to import. Here we import all meshes BABYLON.SceneLoader.ImportMesh("", "scenes7/", "aws_scene7.babylon", scene, function (newMeshes) { // Set the target of the camera to the first imported mesh camera.target = newMeshes[0]; });

Otherwise, I don't see any specific reasons why this file wouldn't load, but there are ways to quicky troubleshoot. First, I would remark out the above lines and replace them with the creation of a native babylon mesh such as a cube or sphere:

I assume your scene should then render and you can add elements back as necessary. So the following shouldn't be necessary - but we're troubleshooting, and browsers change frequently. So I would next try the following one by one:

Remark out touch action, margin, padding, and overflow

Define a .css file

And when you add your ImportMesh code back into your script, declare the "name, id" of your object and not leave this as "". and I would also declare your paths completely instead of "scenes7/" - I would write as "./scenes7/" . Again, should not be necessary, but I've seen stranger things.

This should locate the issue. Good luck.

DB

@dbawel I used the code found in the Playground specifically "16 - Import Mesh" since the example loads in IE, Chrome and Firefox.

I changed up the camera angle and lighting a little http://www.babylonjs-playground.com/#18AB0K

I did the following with no result.

removed touch action
margin
padding
overflow
Defined a css file

Unfortunately removing the "" resulted in a blank page.

i will have to work on it some more tonight and remove the following and replace with a native mesh to figure out what the problem is.

            // The first parameter can be used to specify which mesh to import. Here we import all meshes
            BABYLON.SceneLoader.ImportMesh("", "./scenes7/", "aws_scene7.babylon", scene, function (newMeshes) {
            	// Set the target of the camera to the first imported mesh
            	camera.target = newMeshes[0];

With it working in the playground as a Import Mesh example i am unsure why it wont work locally in anything but Firefox but will display online in the playground fine on IE, Chrome and Firefox.

Maybe i am just missing something so simple it is hard to see.

dbawel · June 16, 2016

You can't remove the "" from the ImportMesh function, as you are required to declare a name - so I was recommending that instead of using "" that you use "your object name here" as just an example, as any valid object name will work - but a value must be declared. However, I don't believe that this is your issue, and the function inside the ImportMesh function is most likely the problem as you are not declaring a "newMeshes function in your script - and this should not qualify as a valid process to call a function named "newMeshes".

So I definately advise as I did previously that you remove or remark out the lines of code I recommended in you code example where tyou are calling the Babylon.SceneLoader.ImportMesh() function, and replace this with the creation of a native babylon mesh. If you need the code for this I can provide this, however I would expect that you are familiar with creating native babylon.js mesh objects and code examples are available in a majority of playground scenes if you are not familiar with this.

I assume that if you do the above, your scen will render in all 3 browsers, and then you can add your ImportMesh function step by step to see where the problem lies. The steps you took to troubleshoot above were only secondary to replacing the ImportMesh function and camera.target declaration, and were only additional troubleshooting steps as a contigency to replacing the lines of code I first advised trying - as I didn't expect these to be the problem, but mentioned these as there have been errors in specific browsers from time to time with these elements. However, it would be extremely rare for any of these to have a problematic effect in rendering your scene in 2 browsers, but I'm almost certain that it is an issue with your import of a mesh into your scene. So I still believe this is the best method to try - and if this doesn't result in a render in all 3 bowsers, I will be happy to test on my own to find a solution to your problem. Just let me know after you remove and replace the ImportMesh function.

DB

Dad72 · June 16, 2016

idea 1) Can be in the IE settings: Enable WebGL, hardware acceleration. . .

I shall see no error in the code. the use of the name in the first parameter can be empty, so the error does not come of that. I think more to enable a setting in IE browser.

idea 2) On the model you load of this demo is quite long to load. wait 10 seconds to 1 minutes depending on your internet connection.

BP72 · June 17, 2016

15 hours ago, dbawel said:

You can't remove the "" from the ImportMesh function, as you are required to declare a name - so I was recommending that instead of using "" that you use "your object name here" as just an example, as any valid object name will work - but a value must be declared. However, I don't believe that this is your issue, and the function inside the ImportMesh function is most likely the problem as you are not declaring a "newMeshes function in your script - and this should not qualify as a valid process to call a function named "newMeshes".

So I definately advise as I did previously that you remove or remark out the lines of code I recommended in you code example where tyou are calling the Babylon.SceneLoader.ImportMesh() function, and replace this with the creation of a native babylon mesh. If you need the code for this I can provide this, however I would expect that you are familiar with creating native babylon.js mesh objects and code examples are available in a majority of playground scenes if you are not familiar with this.

I assume that if you do the above, your scen will render in all 3 browsers, and then you can add your ImportMesh function step by step to see where the problem lies. The steps you took to troubleshoot above were only secondary to replacing the ImportMesh function and camera.target declaration, and were only additional troubleshooting steps as a contigency to replacing the lines of code I first advised trying - as I didn't expect these to be the problem, but mentioned these as there have been errors in specific browsers from time to time with these elements. However, it would be extremely rare for any of these to have a problematic effect in rendering your scene in 2 browsers, but I'm almost certain that it is an issue with your import of a mesh into your scene. So I still believe this is the best method to try - and if this doesn't result in a render in all 3 bowsers, I will be happy to test on my own to find a solution to your problem. Just let me know after you remove and replace the ImportMesh function.

DB

My bad i misunderstood you. Thank you for clarifying.

BP72 · June 17, 2016

14 hours ago, Dad72 said:

idea 1) Can be in the IE settings: Enable WebGL, hardware acceleration. . .

I shall see no error in the code. the use of the name in the first parameter can be empty, so the error does not come of that. I think more to enable a setting in IE browser.

idea 2) On the model you load of this demo is quite long to load. wait 10 seconds to 1 minutes depending on your internet connection.

Firefox, IE and Chrome work just fine when viewing the web page http://www.babylonjs-playground.com/#18AB0K

However, downloading the example and trying to view it local the page will only display in Firefox

From my reading you cant enable or disable WebGL in IE
https://support.daqri.com/support/solutions/articles/1000158110-how-to-enable-webgl-in-your-browser

Dad72 · June 17, 2016

You must use a web server like Apache to visualize the scenes locally.

EasyPHP or Wamp can do the trick.

dbawel · June 17, 2016

@BP72 -

See, with all of the info we can help. I made this mistake when I first began developing in WebGL - you won't be able to test locally - unless you take steps to do so, which don't tell you anything about a user experience. So as @Dad72 gives you a couple of tools to do this, this is not recommended - unless you are in the middle of South America, Africa, or Asia where there is no internet connection. But seeing you on the forum makes me think different.

DB

BP72 · June 17, 2016

4 hours ago, Dad72 said:

You must use a web server like Apache to visualize the scenes locally.

EasyPHP or Wamp can do the trick.

So using this as a standalone solution on a DVD isnt going to work unless they use Firefox.

Well... hmmmm....

Thank you for the info. i have used Xampp before but broke down a long time ago and got DesktopServer (built on Xampp) https://serverpress.com/.

BP72 · June 17, 2016

2 hours ago, dbawel said:

@BP72 -

See, with all of the info we can help. I made this mistake when I first began developing in WebGL - you won't be able to test locally - unless you take steps to do so, which don't tell you anything about a user experience. So as @Dad72 gives you a couple of tools to do this, this is not recommended - unless you are in the middle of South America, Africa, or Asia where there is no internet connection. But seeing you on the forum makes me think different.

DB

Sorry should of worded it differently other than "view local".. Well, that was a good week long learning experience for me. *sigh*

dbawel · June 17, 2016

And this changes often, and even when it does work on a specific browser and OS, the user will need to self-configure their device and/or browser, so it's not at all practical to build an application for public use without your scene hosted on a server. However, the enormous advantages of this are that your scene can render on most any OS, device, and display - which is a huge advantage above UE4, Unity, or any other local exe.

You might be able to ship a DVD with many of your elemnts such as meshes, textures, environments, etc. and simply require them to be connected to the internet to download very small files and scripts - if you want to limit the download bandwidth required. So for me, the advantages of WebGL far outweigh the limitation of requiring an internet connection (if this is even considered a limitation.)

I went through the same process you're currently experiencing when I first began using WebGL, but very quickly found that what might be perceived as negatives are not negatives for me any longer, but now are all positives, and provide a great deal more flexability and support for most all devices which allow me far more power to develop personally.

DB

BP72 · June 20, 2016

@dbawel My first introduction into converting 3D models to be displayed online was Blend4Web unfortunately the license they have really kills it for government contract work, most elearning contracts but with the new license some commercial clients might adopt it. For someone like me with my primary experience being 3D, Babylon is outstanding with the amount of documentation and extremely clear tutorials for getting started. If i can learn 3D Studio Max and zBrush I can learn this with the proper documentation and some extreemly patient people in forums.

I can see the need for something like Babylon with Chromebooks being used in schools and Flash becoming more and more of a distant memory with each new vulnerability and the sincere need for the ability to display more than 3D gaming content in browsers. I'm not throwing in the towel anytime soon on learning this.

Thank you all for your patience and guidance.

Leanring BabylonJS local publishing

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members