Jump to content

Leanring BabylonJS local publishing


BP72
 Share

Recommended Posts

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>

 

Link to comment
Share on other sites

@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

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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. :D

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.

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

  • Recently Browsing   0 members

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