Custom Preloader Progress and Hiding Meshes

[royibernthal]

I'm creating a custom preloader as described in here:

http://doc.babylonjs.com/tutorials/Creating_a_custom_loading_screen

1) In this preloader I'd like to be able to display the loading progress. Is there no support for it yet?

2) Loaded meshes are displayed automatically in the loading screen before I get the chance to hide them. Is there a way to not automatically add loaded meshes to the scene? A workaround for this might be using 2 scenes, but I was hoping for a prettier solution.

[dbawel]

@royibernthal -

I use jQuery (in general) for what you are trying to do, and jQuery also contains practically every feature you might ever need; as it probably already exists. But I'll first assume you have worked with jQuery; so I won't go through the essential need to know it and use it regardless. However, if you're not yet familiar, then I highly advise you learn it, as it will open a whole lot of features and options you either won't be able to build and use in many cases, or won't have the time to build, test, and maintain. But for a progress display in providing info while loading assets, it will only require a few minutes to write and integrate, and perhaps a few more to make as graphically dynamic and "pretty" as your imagination might want to consider... that is, if you even want to display onto the canvas.

Cheers,

DB

[royibernthal]

@dbawel I'm familiar with jQuery. Should I use it instead of bjs AssetsManager? Wouldn't I have to use both in that case? jQuery to load and show progress and then AssetsManager to "load again" so that files can be recognized in bjs?

By "pretty" I didn't mean visually, but rather a more sophisticated and straightforward solution to the problem.

Do you have any idea about my second question?

[Pryme8]

4 hours ago, dbawel said:

@royibernthal -

I use jQuery (in general) for what you are trying to do, and jQuery also contains practically every feature you might ever need; as it probably already exists. But I'll first assume you have worked with jQuery; so I won't go through the essential need to know it and use it regardless. However, if you're not yet familiar, then I highly advise you learn it, as it will open a whole lot of features and options you either won't be able to build and use in many cases, or won't have the time to build, test, and maintain. But for a progress display in providing info while loading assets, it will only require a few minutes to write and integrate, and perhaps a few more to make as graphically dynamic and "pretty" as your imagination might want to consider... that is, if you even want to display onto the canvas.

Cheers,

DB

Native JS is pretty easy to do this as well.


as far as them appearing in the scene before you want them to, if you are loading them and setting their visibility off (or even better disable them) the second they load they should never see a draw call

[dbawel]

 

 

@royibernthal - You'll definately be using the AssetsManager in BJS to load scenes, append scenes, and so much more. jQuery is something very different, and generally a choice (low on the list for most) for a whole plethera of functions and features; and as @Pryme8 mentioned, there is much you can do without jQuery - and I myself didn't really use it much until recently. Having said this, if you take a look at the HUGE number of  existing callbacks, features, object attributes, object managment, etc., you'll find what I've recently discovered - which is that I have been able to accomplish tasks which are quite difficult using only JS, and for tackling most operations, you would generally require a seperte extension to build anyway. However, as you know jQuery provides a compatability and an integration with HTML and other type objects which far exceed most any extension you might require at some point in developing games and apps within any WebGL framework.

And although there is generally a bit of a learning curve associated with integrating jQuery into many of the functions and features in the babylon.js framework, as well as soring through general usage with Javascript and HTML documents and objects; I've personally found considerably more abilities and flexabilities - even in the available attributes once an object is declared - such as simplifying my work with videoTextures in using jQuery to handle to HTML video and all of the available attribure control, even down to calling the filename string values and propogating an HTML form with available media which requires me to write considerable additional code and the time involved, and again considerably more compatability especially if the app design takes this into consideration and jQuery is no an afterthought.

So it is perhaps not that important nor is it essential for most developers and the games or apps which are currently in development according to what I read on the forum. However, currently for myself and my team, we would be writing and/or adopting additional extensions  and allot more code for a sizeable percentage of operations we are currently using - which in our case jQuery is providing. And if only to be experienced in efficient ways of using and integrating jQuery with Javascript and specifically the babylon.js framework, we find that we have far less limitations than last year prior to our team adopting jQuery as a standard withing all of our sites and apps. And this reall helps us develop much more quickly without the worry of compatability, as well as providing so many additional functions in managing and monitoring files and media - as we are now uploading much of our media to the Amazon servers and passing any liability to Amazon - as well as saving money in bandwidth and in efficiency. And jQuery assists us tremendously with integrating this and other media and data easily back into our WebGL scenes. 

I was never a big fan either way on using jQuery; however, the more I develop using jQuery integrated with BJS and JS in general, I wish I already had spent the time in years past fully understanding just how far it can be integrated, as well as learning to overcome what are considered limitations in using within JS frameworks, WebGL objects, and in 'event' security within browsers - as what I previously thought could not be done we are now doing. And this inclused how we manage media on our's and other media servers. Simply providing file readers and loaders, aquiring and setting all of the available attributes and document info, and syncing files between multiple users - using jQuery (when useful and appropriate) has personally saved me thousands of lines of code and countless time to develop and manage the code and processes while maintaining full compatability in many of our apps today. I'm no derious advocate of jQuery beyond what you most likely already know. However, I did have an adverse opinion and thought it was somewhat of a nightmare integrating prior to my experience recently - which has clearly showed that as a standard (which I would consider jQuery to be), I have been able to accomplish operations which do not exist within BJS and/or without other extensions; as well as to find myself far less limited in what functionality I can create and integrate in far less time than ever before - and with far greter flexability that I had thought possible. I'm just embarassed that it took me so long to get on the train and simply spend the time gaining the experience which now allows me to unlock this immense power that was always starring me right in the face.

So this post goes far, far beyond what I thought I would reply, however, it's more about my ignorance to jQuery than it is to the immense power available when understanding when and how to use it. I doubt this post will help anyone, but if just one person takes the time to really learn how and when to use and integrate jQuery witin the WebGL framework, then it was worth my time writing. Otherwise, I know I'm siply preaching to the chior, and that this pobably reads more like a motivational speech than an answer on a developer's forum.

Cheers,

DB

 

EDIT - @royibernth - I didn't answer your question:

11 hours ago, royibernthal said:

I'm familiar with jQuery. Should I use it instead of bjs AssetsManager? Wouldn't I have to use both in that case? jQuery to load and show progress and then AssetsManager to "load again" so that files can be recognized in bjs?

You won't be required to "load again" using the BJS AssetsManager. I typically make my assisgnements to variables using the AssetsManager in BJS, and ither pass values from jQuery to the variables, and/or use jQuery to manage the "assets" or whatever you are loading or appending as this will potentially provide you with additional functions and control over attribures of your "assets." However, there are amny ways to integrate jQuery with the AssetsManager - if necessary at all. One exmple might be to make use of a file reader or file loader using jQuery, and pass any loaded assets tothe AssetsManager. Or once an "asset" is set up with jQuery attributes, you then are able to manage such assets to a greater degree with little code work - depending on the asset, of course. But you won't be loading more than once, but simply passing values and enabling the ability to make easy and compatable usage of attributes and functions with which you can associate your assets.

I hope this makes sense, and we can get into specifics if you have a Playground scene you need assitance with in what might be available which without jQuery would not be unless you use and extension or spend time writing unnecessary code.

 

[royibernthal]

@Pryme8 Thanks, I'll take a closer look at the meshes issue and see if it can be solved that way.

 

@dbawel I would've guessed you are a jQuery salesman if I didn't know better

Sadly, since I'm familiar with jQuery like I said, I didn't really personally take anything from all of that, but I do appreciate the time you put into writing that long response, and like you said hopefully it'll help someone else in the future.

Given the nature of my project I'll probably use native js for the preloader in order to avoid the extra jQuery file size. If I'll find myself needing to tackle more issues like this in bjs in the future I'll definitely remember your recommendation.

I would just like to understand the answer to the first question, I'll try to give a concrete example:

I'd like to load images a, b and c in order to use them as textures inside bjs

1) Loading a, b and c using native js / jQuery and displaying the preloader in the canvas

2) Initializing bjs into the canvas

3) Loading a, b and c again using bjs AssetsManager to be able to use them as textures inside bjs

Is that how you'd accomplish it? If not, how?

[dbawel]

@royibernthal - I'm happy to her you come with experience I didn't have when I stumbled upon the babylon.js framework in the very early days - lucky for me to choose this over three.js. Not that three.js is a poor framework, but BJS is far more suitable for my development needs. I did add an edit to my lengthy post on this topic since you last read it (at least commented), but it doesn't answer the above. My last post was written more for the potential benefit of newbies, as I wish I had personally focused on just a few specifics such as jQuery before I began to develop products for release in languages I hd little experience using previously.

However, as for your last question, obviously there are many methods you might use to accomplish the same end result; and with little difference in overall performance. So I wouldn't want to be too specific, as I assume I would be covering areas which you are already familiar - such as using literal declarations as opposed to global varialbles and flags. But it all depends on your specific game and/or app.

So I'm a bit hesitant to proceed based upon your broadly asked question, as most of what I'm providing below are standard JS and BJS operations. But here goes anyway - I just ask that all of the "amazing" users on this forum know that this is simply my own preference; if I'm buiding a "generic" app based upon the above question asked.

So if I'm actually building and not testing, I prefer declaring literal objects - especially in developing a product, but it's good to exercise this in any case. Again, the following is most likely not necessary as it doesn't necessarily relate directly to your questions and isn't directly referenced in the code below, but I'll provide this from my most recent app as an example to simply demonstrate to anyone who may not be familiar with literal object declaration and the distinct advantages in using literal declarations:

       PacImgShow :{
      "jsonrpc":"2.0",
      "method": "Show",
      "type": "Img" ,
      "tstamp": "0",
      "id": "0",
      },

And, I do utilize simple global variables as well, but as few as possible. 

 

The following is also a limited and selected code example from my current app, and covers most of questions #1, #2 and #3 - and is how I generally declare and call scene, canvas, etc. - otherwise is mostly standard JS and BJS calls (In the following code I was initially advised by @Temechon for some of the usage of the AssetsManager since I initially integrated bGUI for elements of my GUI) Of course, I have apps which use somewhat different methods as required - this is simply one example to answer your questions:

window.addEventListener("contextmenu", function (evt){    evt.preventDefault();});    

window.addEventListener("DOMContentLoaded", function() {
    var canvas          = document.getElementById("game");
    var engine          = new BABYLON.Engine(canvas, true);
    var scene           = new BABYLON.Scene(engine);
    var camera          = null;
   
    var assets = []; 

    var loader = new BABYLON.AssetsManager(scene);

//Example to load textures and assets to call in scene
    var myLoad = [
        {name : "assetName1", src : "./filename1" },

        {name : "assetName2", src : "./filename2" },

    ];

    myLoad.forEach(function(obj) {
        var img = loader.addTextureTask(obj.name, obj.src);
        img.onSuccess = function(t) {
            assets[t.name] = t.texture;
        };
    });

    loader.onFinish = function() {

//if (logon_success == 1) {

        init3d(scene, canvas);
        scene.activeCamera.layerMask    = 1;
        setTimeout(function() {

        }

   }

},5)
 

And to use the objects loaded into the assets[] array, (below is specific to call for the bGUI extension) but the usage is as follows:

var button_rev = new bGUI.GUIPanel("button_rev", assets["button_rev"], null, gui);

 

Function to initiate canvas:

function init3d (scene, canvas) {  

};

(I didn't check my syntax, so use caution if you copy/paste.)

 

As for a good example of setting up jQuery objects and using them in BJS - the following uses jQuery to load an HTML video file; and then uses the video file as a videoTexture on a standard material. So the following Playground scene will provide you with the method as well as most all of the syntax usage required in integrating a window event listener in JS and passing the window event to provide the 'click' event for the "handleFileSelect(evt);" function:

http://www.babylonjs-playground.com/#VNVOU#12

The link above was provided to me by @Nabroski which I finally received after wasting allot of time believing I could quickly find a good working process to do this myself. And that's about it. I know this doesn't set out with an answer specifically following the steps and answering the questions in the manner you laid out, however, there's more here than asked for - and if you would really like to have the specific process built out in your above questions, and set up on the playground, then I, @Wingnut, @Nabroski, or a host of other users could certainly build this quick enough;  however, what's the fun in that?

So I hope this answers your questions, as I tried to provide as much info as possible here. Although I'm certain you know most of the above, however what you read above took me quite some time to really grasp and generate what I find to be the best method for me in most cases - to set up a scene similar to what you're asking. And I'm absolutely certain that my code would be far less efficient and most likely very different from the above had I not had this forum and all of the amazing developers here who took the time to help me grasp languages I never thought interesting before - as you obviously know much of this (if not all) since I see you are not a newbie. I hope I've shared some info of value - at least for others who came into this as I did - completely clueless. 

Cheers,

DB

[Wingnut]

49 minutes ago, dbawel said:

came into this as I did - completely clueless

Don't believe that for a second, people.    @dbawel is a friggin' genius and a darned nice guy to boot.

http://www.imdb.com/name/nm0062616/

Need I say more?  It's a total tripendicular honor to have DB hanging around with me/us.  Truly.

He speaks in a language called linear algebra, sometimes, but other than that, he's perfect... and a genius. 

But I heard a rumor that his feet stink, so... watch out for that. 

[dbawel]

@Wingnut -

I never know how to respond to you, as you are under the disillusion that I have any clue as to what I'm doing. Yes, I did get very lucky to have been able to work on some great movies and games, but trust me - I was one of the lucky ones. I only wish I had the experience in Web languages that you and others have on this forum, and am only able to give advise on a narrow band of subjects - or the basics of working in BJS and WebGL, only because of my work in OpenGL. 

But thank you for the PR - as I'm all for getting respect - even if it's not deserving. Wingman, you're my buddy, and I'll always respect the help you provide myself and others here on this forum. Again, thanks for the over-qualified applause, and perhaps I might even be up to assisting you with a project one day.

Cheers my Friend,

David

[Nabroski]

last post here for a while

@royibernthal

try to copy paste
https://github.com/BabylonJS/Samples/tree/master/Demos/Sponza

 

@dbawel. NICE! I work as production designer form time to time. I'm getting old should start working continuous.

Good luck everyone! 
[mic drop]
 

[royibernthal]

@dbawel Not sure if you tried to hint it, but I ended up just adding tasks to total as I add them to the AssetsManager and add to progress onTaskSuccess, it helps me display a simple ratio of filesLoaded / filesTotal.

 

@Pryme8 You were right about the meshes.

 

@Nabroski I'm not much of a copy paste guy (except for shaders which I have no clue about so I have no choice). I'm using tScreenSpaceCanvas2D to display the preloader rather than html elements.

It seems this example is using SceneLoader, which forces me to use .babylon files, correct me if I'm wrong. I'd like to avoid that and stick to AssetsManager.

I have a working preloader, and now I'd just like to make it more accurate by getting access to the loaded file size instead of just counting the number of loaded files.

Please go to my new thread and see if you can help:

http://www.html5gamedevs.com/topic/24868-get-size-of-loaded-file-when-using-assetsmanager/