Playing in the Babylon.js sandbox and editor
- Posted: Jan 08, 2014 at 6:00AM
- 12,896 views
Today's Web Wednesday project takes us to Babylon. No, not the place, but the awesome WebGL project, Babylon.js, in an article written by Friend of the Blog, David Rousset.
David shows off a simple, but pretty cool, Babylon.js/webgl based viewer and editor. Given a modern web browser, you can quickly create some "real" 3D objects. No install, no downloading, just you and your browser...
First, what is Babylon.js?
- Complete scene graph with lights, cameras, materials and meshes
- Collisions engine
- Scene picking
- Animations engine
- Particles Systems
- Sprites and 2D layers
- Optimizations engines:
- Frustum clipping
- Sub-meshes clipping
- Hardware scaling
- Selection octrees
- Offline mode (Assets are saved locally to prevent reloading them)
- Incremental loading
- Standard material is a per pixel material that supports:
- Diffuse lightning and texture
- Ambient lightning and texture
- Specular lightning
- Opacity texture
- Reflection texture (Spheric, planar, cubic and projection)
- Mirror texture
- Emissive texture
- Specular texture
- Bump texture
- Up to 4 lights (points, directionals, spots, hemispherics)
- Custom materials
- Vertex color
- 4 bones per vertex
- Special FX
- Alpha blending
- Alpha testing
- Fullscreen mode
- Shadow Maps and Variance Shadow Maps
- Rendering layers
- Post-processes (blur, refraction, black'n'white, fxaa, customs...)
- Lens flares
- Render target textures
- Dynamic textures (canvas)
- Video textures
- Arc rotate camera
- Free camera
- Touch camera
- Mesh cloning
- Dynamic meshes
- Height maps
- Babylon scene file can be converted from .OBJ, .FBX, .MXB
- Exporter for Blender
- Support for drag'n'drop
Some of our past coverage:
We’re created a set of simple tools to help you testing your 3D assets in our Babylon.JS engine without any line of code. The first one is a sandbox tool where you can open files from your hard drive and directly load them into our engine via a simple drag’n’drop. The second one is a simple editor that let you play with some of the primitives available and that can be coupled with some of the code of the sandbox. This tool has been written by our cool intern Muriel Surmely!
Thanks to all these tools, if you are a 3D designer who doesn’t want to see a single line of code to see your assets living in WebGL, now you can! Talking about 3D designers, I’d like to give again some special kudos to our own 3D designer Michel Rousseau who designed the UI of the Sandbox and the Editor.
Using the Babylon.JS Sandbox
Well, using the Babylon.JS Sandbox is pretty straightforward. You simply need to have your assets ready in the .babylon format. For that, you have several options:
1 – Export your job into the .babylon format from Blender using our exporter plug-in. You can follow this article for that: Babylon.js: How to load a .babylon file produced with Blender
2 – Convert your existing assets (.FBX, .DAE, .OBJ and .MXB) via our online assets converter or using the converter tool available in the github repository.
Once done, open the Babylon.JS Sandbox in your favorite browser: http://www.babylonjs.com/sandbox
Using the Babylon.JS Editor
We’ve designed a simple editor to let you play with some of the primitives of the engine. It’s available here: http://www.babylonjs.com/editor
Again, it’s designed to be very simple to use. It hasn’t been made to replace a real 3D modeler like Blender, Clara.io or Maya.
Still, have a look to this short 2min video demonstrating how you can create a very cool scene like this Christmas one in a simple way:
Now I wonder if this can be used in the new Windows 8.1 3D printing world... hum...