Is it possible to recreate the Smithsonian 3d explorer using Babylon.js?

[jokyfoot]

I've been spending the last two days searching the web for an online 3d javascript enviroment and I've been looking for something specific: Interactive user controlled lighting. I've gone though at least 20 different 3D viewers but none of them seen to have this feature.

 

Last night, I came across this website: http://3d.si.edu/browser

 

It has an amazing 3d interface, the most creative, and user friendly UI for controling lighting. You can control the scene lighting, by moving a point along the surface of a Sphere. It changes both the position and direction of the light with a single mouse click. Additionally, you can have up to 3 lights, and you can also change the color and intensity.

 

[

 

Unfortunately, it was designed by Autodesk specifically for the Smithsonian website, so I am unable to use it for mine.

 

Would something like this be possible/easy using babylon.js?

[GameMonetize]

You can have a look at this project for a good start: 

http://www.castorengine.com/castorengine/

[Dad72]

The link Deltakosh gives you is to test the editor. Do used only for purposes of testing only.

 

And you can download it on the deposit for personal use:

 

https://bitbucket.org/Dad72/castorengine/overview

 

I wonder if I will not host online castorEngine and do a session system and storage space limit per project as does PlayCanvas and other online editor. ca gonna be the next step to make castorEngine I think its easy access.

[iiceman]

Well, dad72s editor might be a bit too much to start with (it would be for me at least). I think it should be possible and it shouldn't be too hard to achieve what you want. If it's just about the light you can do something like that: http://www.babylonjs-playground.com/#10RHFF It's far from perfect but I think it shows that user controlled light can be done preeettty easy

 

With the help of the community you should be able to recreate pretty much all of the effects seen in that Smithsonian 3D viewer (that thing is pretty cool). I would love to see it done with babylon. js!

 

By the way: Hi and welcome to the forum jokyfoot

[dbawel]

Hey iceman,

 

It shouldn't be difficult at all to recreate what Autodesk built for the Smithsonian viewer.  With all of the recent posts on the BJS forum focusing on GUIs and object transforms, as well as dragging and dropping .babylon files and other media directly into the browser, most any and all of the scripts required have been posted in just the past few months. And most all of them have been reviewed and tested to present the most optmized processes for each of the many diferent methods to build more universally applicable tools.  As for GUIs,  I've become a fan of bGUI, but in testing all of the gui extensions published recently, each one has their own unique features to offer.

 

I doubt it would take someone as talented as you much time at all to build a very general GUI with all of the features you are requesting.  BabylonJS has taken a huge leap this year and is now comparable to three.js and practically all other WebGL frameworks - at least in my opinion.  However, I find BabylonJS far more practical and very familiar to my experience in developing user friendly tools; and certainly game oriented apps (games, of course.)  I'm surprised that the user base is still relatively small, but I'm certain this will change rapidly as this year progresses.  The experience level of the average user of this forum is amazing to me, and due to the dedication and commitment to quality found here, most all scripts and certainly extensions have been thoroughly tested and optimized to where practically anyone visiting for the first time can reasonably grasp what is happening within the code.  So why not?  I think you're the person to do what you're asking - and if it turns out to be an extension, then all the better. 

[jokyfoot]

I'll check out the castor Engline, though I need something elegant and simple that a user can understand immediately.

 

Well, dad72s editor might be a bit too much to start with (it would be for me at least). I think it should be possible and it shouldn't be too hard to achieve what you want. If it's just about the light you can do something like that: http://www.babylonjs-playground.com/#10RHFF It's far from perfect but I think it shows that user controlled light can be done preeettty easy

 

With the help of the community you should be able to recreate pretty much all of the effects seen in that Smithsonian 3D viewer (that thing is pretty cool). I would love to see it done with babylon. js!

 

By the way: Hi and welcome to the forum jokyfoot

 

Thank you, this is really awesome. I'm suprized that it took so few lines of code to create that.

The project I'm working on is an Art Model/Still Life reference library for artists, where users can load a model, change the camera angle, lighting, and maybe even depth of field and other camera controls, until they've set up a scene they'd like to draw.

 

I really only know enough javascript to get by as a wordpress designer, but what you've shown me is inspiring enough to learn this.

To get that example you posted working as a part of a user interface, and also effect the lighting of a model in another main window, would I need to create two scenes?

[dbawel]

Hi jokyfoot,

 

Interesting username.  There are two primary extensions for creating GUIs (user interfaces) in BJS - the Dialogue extension from JCPalmer and the bGUI extension from Temechon.  They can both be found on GitHub in the BabylonJS directory under extensions.  

 

 

Here are links if you need them:

 

bGUI extension by Temechon:

     - Source code : https://github.com/Temechon/bGUI

     - Demo : http://temechon.github.io/bGUI/

     - Documentation : http://doc.babylonjs...age.php?p=25102

 

Dialogue extension by JCPalmer:

     https://github.com/B...e/master/Dialog

 

I recommend using one of these extensions for your interface as they have simple functions for creating GUI elements without the need for you to code everything yourself.  These have saved me countless hours of work, as you are able to build full functioning GUIs extremely fast - and the time required is dependant on the graphics you use of course. I tend to use the bGUI extension more often, as I'm simply more familiar with this - although both will save you tons of time and cut your lines of code down dramaticaly.

 

I've been able to create beautiful graphic interfaces with bGUI, using icons and interface elements I build in Photoshop - which look as good as any full color interface for the most widely used graphic applications.  In bGUI - you are able to use 3D objects as buttons and apply the graphics as textures - which I generally use planes as opposed to other 3D objects for more traditional GUI appearance.  Dialogue extension is similar, and both have their own unique strengths.  Either way, it only requires 1 canvas for both the GUI elements and your babylon scene.  Check out the links and the demos that each one of these brilliant guys have created as examples.  In looking at the GUI for the Smithsonian you posted, it wouldn't take me more than a few hours to build all the graphic elements in Photoshop and code these into any babylon scene as controls - and it would look and function EXACTLY as the interface Autodesk built.  Otherwise, you're looking at days of work with mixed results if you try and build a GUI from scratch without using one of these extensions.

 

Please post the link to any GUIs you might build using either one of these extensions, as they are relatively new, and there are few examples at this early time in their life. This will help and encourage others to use these as well.  Again, I must have saved myself at least 40 hours of work on my last app using bGUI, and cut the lines of code I had to script by at least by 30 to 40%.

[Dad72]

@dbawel. It also has to the extentions CastorGUI.  It is part of the extensions to create GUI which create a layer above the canvas. It is as simple to use.
 
Topic:
http://www.html5gamedevs.com/topic/15121-extension-castorgui-a-gui-library-for-canvas/?p=85691
 
Extention:
https://github.com/BabylonJS/Extensions
 
Demo:
http://www.castorengine.com/castorengine/Data/JS/CastorGUI/demo/

[dbawel]

Hey Dad,

 

I just responded to another post on the release of your GUI extension.  I look forward to integrating the GUI extension to the "Castor Engine" in a new app this week. The app is a multiuser social app with browser integration, music sharing, real-time video sharing, photo database, and an interactive toolkit (details coming later), so I'm not sure if any of the GUI extensions will suffice.  However, I'm eager to try your GUI extension and see if it might provide the functionality I need.

 

Sorry, I didn't mean to overlook your GUI extension, but I was a little confused as the Caster Engine has so many different functions.  The more I check it out, the more impressed I am and can't believe all of the hard work and countless hours you must have spent in its development thus far.  It's unbelievable just how many functions are available in the Castor Engine now.  Are you still calling it the "Castor Engine?"  I'll be reading through all the availale documentation today, as I'm sure there's allot of functionality I'm not yet famililar with.  You almost make developing in WebGL too easy.    If you keep on developing such simple APIs, I'll soon be out of a job.

[jokyfoot]

Hi jokyfoot,

 

Interesting username.  There are two primary extensions for creating GUIs (user interfaces) in BJS - the Dialogue extension from JCPalmer and the bGUI extension from Temechon.  They can both be found on GitHub in the BabylonJS directory under extensions.  

 

 

Here are links if you need them:

 

bGUI extension by Temechon:

     - Source code : https://github.com/Temechon/bGUI

     - Demo : http://temechon.github.io/bGUI/

     - Documentation : http://doc.babylonjs...age.php?p=25102

 

Dialogue extension by JCPalmer:

     https://github.com/B...e/master/Dialog

 

I recommend using one of these extensions for your interface as they have simple functions for creating GUI elements without the need for you to code everything yourself.  These have saved me countless hours of work, as you are able to build full functioning GUIs extremely fast - and the time required is dependant on the graphics you use of course. I tend to use the bGUI extension more often, as I'm simply more familiar with this - although both will save you tons of time and cut your lines of code down dramaticaly.

 

I've been able to create beautiful graphic interfaces with bGUI, using icons and interface elements I build in Photoshop - which look as good as any full color interface for the most widely used graphic applications.  In bGUI - you are able to use 3D objects as buttons and apply the graphics as textures - which I generally use planes as opposed to other 3D objects for more traditional GUI appearance.  Dialogue extension is similar, and both have their own unique strengths.  Either way, it only requires 1 canvas for both the GUI elements and your babylon scene.  Check out the links and the demos that each one of these brilliant guys have created as examples.  In looking at the GUI for the Smithsonian you posted, it wouldn't take me more than a few hours to build all the graphic elements in Photoshop and code these into any babylon scene as controls - and it would look and function EXACTLY as the interface Autodesk built.

Cool, If you can do it in just a few hours maybe I should just pay you to do it. Are you interested?

[Dad72]

Thank you Dbawel for your pleasant comment about CastorEngine. Yes there is a lot of work on it, I have the most complete keeping the ease of use and efficiencies and have the idea for the future of integration directly on the web and allocate spaces users to avoid their download and install. Yes the name is still CastorEngine.

CastorGUI is derived from CastorEngine to create a GUI via scripts on editor but can be used separately for any project with HTML5 canvas.

 

Do not hesitate if you have questions about CastorGUI or CastorEngine on its main topic.

 

 

[dbawel]

@dad72 - I will certainly let you know when I have questions, as I'm sure I will with a new extension.  Again, thanks for doing all of the hard work and allowing us all to share in the fruits of your labor.  I hope one day I can find the time to contribute a tool to benefit others as well.  Right now I only have time to advise with whatever experience I might have.

 

@jokeyfoot - I don't have any time in the next few weeks, but I'm certainly happy to assist you with the integration if you haven't had the experience.  It all depends on the functions of the application and what you're controlling with the interface.  There are some limitations to using the GUI extensions, as there isn't complete compatability with multiple canvas' - depending again on what other functions are in your script.  In mentioning building this in a few hours, this is what it would take to build the GUI and the graphic objects.  But the total time required is all relevant to your application as well as server commands that are passing through to the application.  If it's primarily booleen operations that you're passing through to your application, then it's fairly straight forward.  

 

The application needs to be completely functioning before attaching any GUI controls, so you'll need to control your application by keyboard commands and/or controllers that could then be replaced with GUI elements.  If you don't have your application built yet, then you will definately want to design the app and GUI together in advance before you begin building the application. Then the application needs to be built and completely functioning before you commit to building the GUI - as applications always change during development, and you certainly don't want to waste time building GUI elements that will never be used.  Also, the application is the most important element.  I know this sounds obvious, but I've seen developers sacrifice function for aesthetics.

 

What most people have trouble with in viewing your application example would be the color wheels - but this is something I've built before, and can certainly direct you in getting this to work. I have never used the application you referenced, but the controls are all familiar.  Let me know if you have your application built, or when you might have this complete.  I'll then be happy to help you with how to build a beautiful GUI as quickly as possible and to attach this to your app.

 

I hope I'm not telling you things that you already know - I don't want to presume anything.

 

So I can certainly help accelerate the process, but you'll want to take advantage of the enormous resource here on the BabylonJS forum. There are literally decades of experience on this forum, and I'm continually amazed at the level of knowledge and the generousity of the sharing of knowledge by this community.

 

Message me if you like, and I can certainly advise and help overcome the pitfalls I'm aware of.  But the fastest way to complete your app is to share as much as you can on this forum.  By the way, your username still cracks me up.

 

Cheers,

 

DB

[dbawel]

@ jokeyfoot - I just re-read your initial post.  The application you're considering is fairly straight forward to write and integrate a GUI to control.  However, what is the application that you would apply this tool?  I could create a scene with interactive lighting and an identical GUI to what Autodesk created, but would this be a stand alone app?  I suppose it could be, as you could then write out the positions and color of your lights.  But the tool would need a few more features to make it practical.  The setup from the application would then need to be translated into Javascript for the BJS or other WebGL framework - which perhaps is more difficult than it sounds - unless you pass through an application such as Blender, Maya, or Max to write out a .babylon file.  But you might also look at a new file format for lighting and camera setups.  That's not a bad idea at all, and I'm certain that DK would support it natively if you put in the effort.

 

I might propose a new file format called a ".setup" file and an app where you can drag and drop .babylon files and other files into this browser app, and use the interface controls to add cameras, add and control the color of lights, change camera position and all light attributes and do this in real time for precise lighting and camera framing. The main advantage would be similar to what I and others typically build for film projects in pre production which is a similar set of controls, and a single exporter to write out a camera and lighting file which can then simply be referenced and loaded in many scenes for consistant lighting.  This would cut the amount of coding down to a single file to load - as opposed to creating cameras and lights and all of the attributes required for each element in every scene.  Allot of time is wasted doing this, and jokeyfoot is right, as there is no repeatable method for setting up lights and cameras, as well as light intensity, camera interest, etc. This would be a tool and a file format that I'm sure everyone would use to become a standard element in BJS.

[jokyfoot]

@ jokeyfoot - I just re-read your initial post.  The application you're considering is fairly straight forward to write and integrate a GUI to control.  However, what is the application that you would apply this tool?  I could create a scene with interactive lighting and an identical GUI to what Autodesk created, but would this be a stand alone app?  I suppose it could be, as you could then write out the positions and color of your lights.  But the tool would need a few more features to make it practical.  The setup from the application would then need to be translated into Javascript for the BJS or other WebGL framework - which perhaps is more difficult than it sounds - unless you pass through an application such as Blender, Maya, or Max to write out a .babylon file.  But you might also look at a new file format for lighting and camera setups.  That's not a bad idea at all, and I'm certain that DK would support it natively if you put in the effort.

 

I might propose a new file format called a ".setup" file and an app where you can drag and drop .babylon files and other files into this browser app, and use the interface controls to add cameras, add and control the color of lights, change camera position and all light attributes and do this in real time for precise lighting and camera framing. The main advantage would be similar to what I and others typically build for film projects in pre production which is a similar set of controls, and a single exporter to write out a camera and lighting file which can then simply be referenced and loaded in many scenes for consistant lighting.  This would cut the amount of coding down to a single file to load - as opposed to creating cameras and lights and all of the attributes required for each element in every scene.  Allot of time is wasted doing this, and jokeyfoot is right, as there is no repeatable method for setting up lights and cameras, as well as light intensity, camera interest, etc. This would be a tool and a file format that I'm sure everyone would use to become a standard element in BJS.

 

I would be using it as a simple model viewer for artists to view a .babylon file with lighting options, so it'd just be a standalone app. It would be cool to save the settings too

 

I love the ".setup" file idea

[dbawel]

If I built this, would anyone besides jokeyfoot use it?  Is the concept clear enough to everyone?  Any and all thoughts are welcome, as I'm considering it.

 

DB

[iiceman]

Would be a very cool way to show models for sure! Hard to tell if I would use it... only created one model so far.... but always enjoying looking at models of other people. So yeah, I guess I would at least use it to check out the cool stuff other people made...

[dbawel]

I thought it would be useful as an API interface to graphically create lights and cameras, and place them interactively in a scene - as you would be able to render your scene while interactively in real time placing lights (and their attibutes), cameras, and potentially models used to shadow (or "flag" in lighting terms) scene objects for lighting effects.  We could even introduce some shaders such as lens flares and place them interactively in our scenes.  Then simply write out a new file format named ".setup" which creates a new scene object containing these elements.

 

And when building a babylon script, there would need to be a new loader to load the .setup file which would load these elements without having to declare each one independantly with its attributes as we do now.  This would optimize code, but would also provide consistant cameras and lights from scene to scene.

 

I hope this explanation makes more sense, as I'm considering building this if DK might consider creating a new loader for this new file format, and providing I make the time necessary to build this.

 

DB

[jokyfoot]

Awesome, you should totally do it. I'm still in the process of learning Babylon.js, but I've made some visual references to show the tools mentioned:

 

[iiceman]

Sooo... when will it be ready?

[jokyfoot]

lol, that's just a photoshop mock up. I'm still learning this, so I haven't even started yet

[iiceman]

I know I know... but a good concept will help alot. By the way: that's not a 3D Model in that screen... or is it?

[jokyfoot]

Yep, that's a 3d model. Scanned from life.