Jump to content

Sponza demo


Recommended Posts



The babylon.js team is proud to share the last project we’ve been working on during the last weeks during our free evening & week-ends. We’ve done a lot of things into this new demo, I’ll blog about it later on.


               You can check it there: http://babylonjs.com/demos/sponza  


               It uses almost all cool HTML5 available features: WebGL, Web Audio (with some 3D sounds), CSS3 transitions (during the demo mode), Fullscreen, Pointer Events (across platforms via jQuery PEP), Gamepad & IndexedDB/HTML5 Offline API.


               We’re using our new Universal camera that provide a FPS like experience using either keyboard/mouse, touch or gamepad. So if you’re using a PC, you’ll be able to move using keyboard/mouse, on a mobile device using touch and on Xbox One using gamepad. It’s the same code completely transparent for the user. This new Universal camera is now used by default by Babylon.js (for instance on BabylonJS.com, all demos can now be used using mouse, touch or gamepad)


               Michel has done an awesome job optimizing the original scene from Crytek to create a beautiful experience but still very performant. For instance, it runs at 60 fps on an iPhone 6s!


               Some cool demo scripts to test. On Windows 10, use MS Edge:


               1 – Launch the demo on a touch enabled laptop

               2 – Click on the “camera icon” and then move using keyboard/mouse

               3 – Move using a finger touching the screen

               4 – Plug a Xbox controller in one of the USB port and move using the controller

               5 – Click on “Pin this page to Start” and you’ll be able to show the various tiles defined.

               6 – Switch to airplane mode or disconnect from Internet. Click on the pinned Sponza site.

               7 – The web app still loads and provide the very same experience! (thanks to our IDB engine and the HTML5 offline API/manifest)


             You can follow the same procedure on iPhone/Android devices. I've created a big set of icons/tiles for all platforms.


               On Xbox One:


               1 – Navigate to http://babylonjs.com/demos/sponza  

               2 – Use the Xbox pad with the A button to switch between interactive/demo mode

               3 – Use the Y button to display our debug layer

               4 – Use the gamepad normally to navigate inside the 3D scene J





Link to comment
Share on other sites

Awesome! It works smoothly on Lumia 930 with Windows Mobile 10 Insider. But good to see that it has the same problems on Windows Mobile 10 Insider just like the game I am currently doing (wanted to report it later when there is something to see):

Mobile Edge somehow has a HUGE input delay when heavy babylonjs stuff is happening (didn't really debug into it. My guess it heavy WebGL demos in general). For example I touched the fullscreen button and it took like 5s for Edge to go fullscreen (while the demo was playing completely smoothly). I am observing the same thing with my game. I too have some html overlay with some controls. Touching would trigger jumping and the event is just triggering way too slowly. Some 1s-5s late. It makes it unplayable on windows mobile 10 (which is not my real target platform so it is not really a problem for me :) ).

Link to comment
Share on other sites

  • 1 month later...
  • 3 weeks later...

Thanks David! I did see the source tree for the demo and the scenes. I also made sure that .babylon files are served by the server by setting the correct mime types. I can see that Sponza.babylon is being downloaded. (from localhost/samplesmaster/Scenes/Sponza/Sponza.babylon)

The console displays this:

BJS - [15:56:59]: Babylon.js engine (v2.3.0-alpha) launched
babylon.js:3 GET http://localhost/samplesmaster/Scenes/Sponza/firePart1 404 (Not Found)h @ babylon.js:3r.LoadFile @ babylon.js:3t @ babylon.js:22t.Parse @ babylon.js:23e.SceneLoader.RegisterPlugin.load @ babylon.js:13u @ babylon.js:13e.onreadystatechange @ babylon.js:3
babylon.js:3 Uncaught Error: Error status: 404 - Unable to load ../../Scenes/Sponza/firePart1e.onreadystatechange @ babylon.js:3
babylon.js:3 GET http://localhost/samplesmaster/Scenes/Sponza/firePart2 404 (Not Found)h @ babylon.js:3r.LoadFile @ babylon.js:3t @ babylon.js:22t.Parse @ babylon.js:23e.SceneLoader.RegisterPlugin.load @ babylon.js:13u @ babylon.js:13e.onreadystatechange @ babylon.js:3
babylon.js:3 GET http://localhost/samplesmaster/Scenes/Sponza/firePart3 404 (Not Found)

I am using  a WAMP Apache (v2.2.1)  server I added the following line to the .htaccess file

AddType application/babylon .babylon
AddType application/fx .fx
AddType application/babylonmeshdata .babylonmeshdata

Should I be doing something else or adding some other settings to make this work?


Link to comment
Share on other sites

  • 2 weeks later...

[This comment is mentioned in another thread on these forums as well: http://www.html5gamedevs.com/topic/21610-apache-server-setup-for-sponza-demo/#comment-123070 ]Update to 2.4 Preview release fixes the issue! But now there is another issue - the demo plays but does not fill the whole screen. The credits part seems to fill the whole screen, while the actual scenes in the demo are in the upper left hand side of the screen. Please see attached screen shot. Will dig in to see what's up - but any ideas on why this is happening are welcome! 


Link to comment
Share on other sites

Me being a newbie and trying to create a demo version of the scene -   I was wondering if you could describe how the non interactive walk through ( or moving through the scenes ) works? There is a demo.json which seems to be guiding the demo, but it would be really helpful if you could comment on how you achieve moving through the scenes! Thanks in advance for your help!

Link to comment
Share on other sites

  • 1 year later...

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.

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.


  • Recently Browsing   0 members

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