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

Babylon Beginner Blues

Mark Bufton

By Mark Bufton,
in Questions & Answers

 Share

Recommended Posts

Mark Bufton Newbie

Mark Bufton

Posted
Posted

Hi everybody,

I'm really sorry for sucking eggs here but perhaps someone can help me work out where I'm going wrong.

I've not been so well of late and therefore had a lot of time to myself. Not wanting to waste it I downloaded the SoloLearn C++ tutorial app from Google Play. Enjoyed it so much I then downloaded all the others. Some C#, Java and JS later and I discovered BJS. Being an artist and a model maker my little eyes lit up. Suddenly my creativity might know no bounds. I think I may have even shed a tear.

So I set to work checking out the tutorials, playground and forum and generally playing around with the basics, bearing in mind I struggle to programme the washing machine. Ok, so maybe I'm not THAT bad. I designed some simple websites in my teens and early 20s and considering I'm 29 now, it wasn't quite long enough ago to have forgotten everything...just most of it.

Anyway, I'm having a bit of bother with image textures (I can get normal colours fine) and have been racking my brains and pulling out grey hairs trying to figure out why, or at least to seem intelligent enough to look like I know what I'm doing.

I'm limited to using my tablet (EE Harrier Tab) though Chrome is the latest version (V.15 I think?) and all the tutorials work fine in the playground so it can't be an issue with the Android OS. I've downloaded via Zip the entire BJS framework (2.4) and work mostly offline, using the library as a local source (ok, so I'm not fluent in programming jargon so I hope I'm making sense). I THINK I've linked them correctly in the header. I'm trying to get the misc.jpg image on sphere3 but no matter what I try, or which BJS version I link to it doesn't seem to want to work (it even disappeared completely with a couple of the older versions).

I'm sorry for being a drag but if anyone has any suggestions that will make me feel smart and relieve the onset of premature manual baldness I'd be very grateful.

Nice to meet you all. Hope the screenshots and code help.

Mark ? 

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

    <title>3D Programming Exercises</title>
       <!-- Babylon.js -->
       <script src="js/lib/sourceFiles/hand.js"></script>
       <script src="js/lib/sourceFiles/cannon.js"></script>
       <script src="js/lib/sourceFiles/Oimo.js"></script>
       <script src="js/lib/sourceFiles/babylon.2.4.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>
      
               //CANVAS, ENGINE AND SCENE:
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);

         var createScene = function () {
         var scene = new BABYLON.Scene(engine);
        
               //LIGHT:
         var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), scene);
        
               //CAMERA;
            var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, 1.0, 110, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);
            
//----------END OF SET UP SECTION----------
        
              //SCENE CONTENTS:
            var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 20, 9.0, scene);
            var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 20, 9.0, scene);//Only two segments
            var sphere3 = BABYLON.Mesh.CreateSphere("Sphere3", 20, 9.0, scene);
            var sphere4 = BABYLON.Mesh.CreateSphere("Sphere4", 20, 9.0, scene);
            var sphere5 = BABYLON.Mesh.CreateSphere("Sphere5", 20, 9.0, scene);
            var sphere6 = BABYLON.Mesh.CreateSphere("Sphere6", 20, 9.0, scene);
        
            //Position the spheres
            sphere1.position.x = 40;
            sphere2.position.x = 25;
            sphere3.position.x = 10;
            sphere4.position.x = -5;
            sphere5.position.x = -20;
            sphere6.position.x = -35;
        
            //Creation of a plane
            var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene);
            plane.position.y = -5;
            plane.rotation.x = Math.PI/2;
        
            //Creation of a material with wireFrame
            var materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
            materialSphere1.wireframe = true;
        
            //Creation of a red material with alpha (transparency)
            var materialSphere2 = new BABYLON.StandardMaterial("texture2", scene);
            materialSphere2.diffuseColor = new BABYLON.Color3(0, .8, 0); //Red,Green,Blue
            materialSphere2.alpha = .6
       
            //Creation of a material with an image texture
            var materialSphere3 = new BABYLON.StandardMaterial("texture3", scene);
            materialSphere3.diffuseTexture = new BABYLON.Texture("assets/textures/misc.jpg", scene);
            sphere3.material = materialSphere3;
        
            //Creation of a material with translated texture
            sphere4.material = new BABYLON.StandardMaterial("texture4", scene);
        
            //Creation of a material with an alpha texture
            sphere5.material = new BABYLON.StandardMaterial("texture5", scene);
        
            //Creation of a material and show all the faces
            sphere6.material = new BABYLON.StandardMaterial("texture6", scene);
            
            //Creation of a repeated textured material
            plane.material = new BABYLON.StandardMaterial("texturePlane", scene);
        
            //Apply the materials to meshes
            sphere1.material = materialSphere1;
            sphere2.material = materialSphere2;
   
            //TUBE EXPERIMENT:    
            var v1 = new BABYLON.Vector3(-2, -3, 0);
            var v2 = new BABYLON.Vector3(2, -3, 0);
        
            var tube = BABYLON.Mesh.CreateTube("tube", [v1, v2], 1, 25, null, BABYLON.Mesh.CAP_ALL, scene, false, BABYLON.Mesh.DEFAULTSIDE);
        
            tube.position.y=20;
            
            var materialTube = new BABYLON.StandardMaterial("tube1", scene);
            materialTube.diffuseColor = new BABYLON.Color3(0, 0.5, 0.5);
            materialTube.alpha = .5;
            
            tube.material = materialTube;
            
            var tube2 = BABYLON.Mesh.CreateTube("tube2", [v1, v2], 0.4, 15, null, BABYLON.Mesh.CAP_ALL, scene, false, BABYLON.Mesh.DEFAULTSIDE);
        
            tube2.position.y=20;
            
            var materialTube2 = new BABYLON.StandardMaterial("tube1", scene);
            materialTube2.emissiveColor = new BABYLON.Color3(0, 0.5, 0.5);
            materialTube2.alpha = .5;
            
            tube2.material = materialTube2;
            
            tube.scaling.x = 20;
            tube2.scaling.x = 20;
            tube.position.z = -20;
            tube2.position.z = -20;
        
        
//----------END OF CONTENTS SECTION----------

return scene;
        };
        
            //SCENE RENDERING:
var scene = createScene();

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

            //WINDOWN ENGINE RESIZE FUNCTION:
window.addEventListener("resize", function () {
   engine.resize();
});
    </script>
</body>
</html>

 

Screenshot_2016-08-26-17-04-52.png

Screenshot_2016-08-26-17-05-35.png

Link to comment
Share on other sites
mightymarcus Newbie

mightymarcus

Posted
Posted

Try that url www.tutorialsforblender3d.com/Textures/Tile/Textured/BlueMarbleSlabs.png with http://

I think you need a local server to emulate beeing on the internet and load your image from a http request instead of the local file system.

Update: ok, I think you already have a server. Put your assets/image in the htdocs or where your source files are.

It's because some browsers do not allow getting resources from file://

You can check with F12 (chrome and Firefox) to see error log. Maybe Same-Origin Policy.

 

Update2: Ok, you have no server ... you'll need one, either way. There are some small http servers for android. Forgot the name.

Link to comment
Share on other sites
dbawel Newbie

dbawel

Posted
Posted

@Mark Bufton -

@mightymarcus nailed it. Most browsers will not allow you to load resources offline locally for security reasons. You can certainly work off of the Playground (which I highly recommend anyway for most forum assistance,) but regardless, keep your media remote on dropbox, your server, etc. Or - which I recommend as the best method, is as in the following to keep all files on a remote server; otherwise, it's far too much trouble to try and work offline locally, and you'll never avoid the security and other limitations associated.

And immediately seperate your HTML, CSS, and JS scripts - even for the simplest test scene. It can only cause potential issues otherwise. Congrats on finding babylon.js. Honestly, I'm only slightly biased, however, I'm overexgerating my bias as you sound like you already get it. There is absolutely nothing comperable to babylon.js in looking at all advantages it has over every other framework. It sounds like the kid has found the candyshop.

Cheers,

DB

Link to comment
Share on other sites
JohnK Newbie

JohnK

Posted
Posted

If all the files are saved locally then I do not see the problem with loading local images locally, after all your babylon.2.4.js loads locally, else you would not get anything and you are getting the scene. I am using Firefox on Android and got this OK

2016_08_27_15.06.45.png

are you absolutely sure that your images are in the referenced folder? The black and red check design is the default material used when the referenced image is not found.

 

Link to comment
Share on other sites
Pryme8 Newbie

Pryme8

Posted
Posted

I load local stuff all day...

You can even load from a file input element and just stringify the file before you call in in BJS.

if you could not load files offline locally your computer browser while offline would be useless basically.
 

Link to comment
Share on other sites
Mark Bufton Newbie

Mark Bufton

Posted
  • Author
Posted (edited)

Thanks for the replies guys. Certainly gives me some ideas to work with. I'm tempted to download Firefox and see if that solves the whole offline issue.

I don't have any particular reason for working offline other than it saves using additional mobile data but a lot of great ideas. Thank you ?

Update: I downloaded Firefox to see if it was indeed a problem with Chrome's offline security settings and this was the result. If only you could all see the smile that is strewn across my face right now. Once again, thank you all!!!

Screenshot_2016-08-27-19-25-32.png

Edited by Mark Bufton
Update
Link to comment
Share on other sites
mightymarcus Newbie

mightymarcus

Posted
Posted
5 hours ago, Pryme8 said:

I load local stuff all day...

You can even load from a file input element and just stringify the file before you call in in BJS.

if you could not load files offline locally your computer browser while offline would be useless basically.
 

I build my stuff on localhost and I use apache for the server. I need backend scripts anyway. ;)

Link to comment
Share on other sites
dbawel Newbie

dbawel

Posted
Posted

You can certainly load files locally all day; I'm not suggesting that this is not possible as I often do this as well, and have an app in beta which allows remote users to load the media they work with locally, as well as to upload these to the server for sync purposes. However, there are definative security issues in most all browsers - in which some require a local event by the user to initiate some specific events - even with media. And overall - if there is no specific reason for your game or app to load assets, files, and/or media locally, then you'll certainly find that working remotely from a server removes most limitations in working with files (including media) which are loaded locally; allowing you to remove the possability of errors created by working with local files - which in turn will shorten the list of possible causes of errors in your console or de-bugging tools.

Media is generally less of a concern (depending on how you manage the files locally in your browser), but will still hold limitations in many circumstances. And loading other files locally such as JS and other scripts is generally a "no-no" as this will quite often cause errors. So please understand that I'm not saying you won't be able to load files locally, however, for most developers - exspecially newbies - I highly recommend loading all files remotely from your server to avoid any errors or limitations you may not and probably are not yet familiar with. Unless of course, your game or app requires the local loading of media and/or files. Just know that this increases the potential for security and other browser errors to rise dramatically; and I personally would avoid alltogether until as a developer, you are familiar with what the limitations are in working with local files in your browser.

Cheers,

DB

Link to comment
Share on other sites
  • 2 weeks later...
Mark Bufton Newbie

Mark Bufton

Posted
  • Author
Posted

Well it all worked well. I have continued to practice but do have another question.

Some of the meshes I have created contain a large amount of code, leading me to worry about possible performance issues. Many included CSG cuttings etc so have been built up in several stages. I worry this might cause me problems further down the line but have no idea really how to avoid that, particularly as I'm solely using JavaScript and BJS at the moment.

If I have made a mesh in one file (eg. Master.js - something like in the picture) and want to incorporate one or more of those finished meshes into a separate file of the same type (Shed.js?) which contains the finished product, is it possible to "call" the mesh from the new file or something of that sort? I'm thinking maybe if I could somehow have the master file(s) load in the background (yeah, no idea how to do that either, especially on a tablet), and simply call the elements as they are needed? I've no idea. Perhaps you guys can suggest something?

Kind regards

Mark

Screenshot_2016-09-04-17-34-33.png

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