davrous Posted February 3, 2016 Share Posted February 3, 2016 Hi, 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 Enjoy! David adam, Dad72, Samuel Girardin and 10 others 13 Quote Link to comment Share on other sites More sharing options...
jerome Posted February 3, 2016 Share Posted February 3, 2016 Greatissimo !!!! Quote Link to comment Share on other sites More sharing options...
GrimPanda Posted February 3, 2016 Share Posted February 3, 2016 Very very nice. Absolutely great work here. Quote Link to comment Share on other sites More sharing options...
satguru Posted February 3, 2016 Share Posted February 3, 2016 WOW! Quote Link to comment Share on other sites More sharing options...
mop Posted February 4, 2016 Share Posted February 4, 2016 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 ). Quote Link to comment Share on other sites More sharing options...
Dad72 Posted February 4, 2016 Share Posted February 4, 2016 This is really is perfect. woaw. Quote Link to comment Share on other sites More sharing options...
davrous Posted February 4, 2016 Author Share Posted February 4, 2016 Hi mop, Yes, we are aware of this perf problem on MS Edge on Windows Mobile 10. I've opened a couple of bugs to address those issues. The engineering team is working on it. Cheers, David adam and mop 2 Quote Link to comment Share on other sites More sharing options...
davrous Posted February 5, 2016 Author Share Posted February 5, 2016 Here is a detailed article on how we've built the Sponza demo: https://blogs.msdn.microsoft.com/davrous/2016/02/05/discovering-sponza-by-babylon-js-and-sharing-tips-on-how-to-build-a-cross-platforms-webgl-game/ Enjoy! David jerome, Samuel Girardin, GameMonetize and 2 others 5 Quote Link to comment Share on other sites More sharing options...
jerome Posted February 5, 2016 Share Posted February 5, 2016 a must read ! Quote Link to comment Share on other sites More sharing options...
Boz Posted February 6, 2016 Share Posted February 6, 2016 The demo is really nice, and taking time to write an article on it like you did is even better Thank you Quote Link to comment Share on other sites More sharing options...
JohnK Posted February 7, 2016 Share Posted February 7, 2016 Wow to both demo and article. My flabber is well and truly ghasted (Mon époust est bel et bien ouflé) (according to Google translate) Quote Link to comment Share on other sites More sharing options...
jerome Posted February 7, 2016 Share Posted February 7, 2016 aaarfff... Google translate is quite weak for this one, I would have chosen one of these : http://dictionnaire.reverso.net/anglais-francais/flabbergasted what all express quite the same astonishment in french Quote Link to comment Share on other sites More sharing options...
mop Posted March 12, 2016 Share Posted March 12, 2016 @davrous is there any publically visible tracker to watch progress on the edge mobile performance issue? Quote Link to comment Share on other sites More sharing options...
davrous Posted March 14, 2016 Author Share Posted March 14, 2016 @mop unfortunately, no. Quote Link to comment Share on other sites More sharing options...
Cacuser Posted March 29, 2016 Share Posted March 29, 2016 This is a wonderful demo! Specially the adaptive performance and lovely graphics. I tried to download and run the demo locally to learn more. The source does not seem to include the scenes. All seven scenes are missing. How can we get the scenes - I would really like to learn from this sample! ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
davrous Posted March 30, 2016 Author Share Posted March 30, 2016 The scene content is here: https://github.com/BabylonJS/Samples/tree/master/Scenes/Sponza and the code of the demo is here: https://github.com/BabylonJS/Samples/tree/master/Scenes/Sponza David Quote Link to comment Share on other sites More sharing options...
Cacuser Posted March 30, 2016 Share Posted March 30, 2016 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? Quote Link to comment Share on other sites More sharing options...
Cacuser Posted April 11, 2016 Share Posted April 11, 2016 [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! Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted April 11, 2016 Share Posted April 11, 2016 Hey can you check that you have the right CSS? Quote Link to comment Share on other sites More sharing options...
Cacuser Posted April 11, 2016 Share Posted April 11, 2016 I did see that it is not loading index.css (from here samplesmaster/css/index.css). I cannot seem to find the css file at https://github.com/BabylonJS/Samples) Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted April 11, 2016 Share Posted April 11, 2016 A quick fix: jsut set the canvas to absolute position with height and width set to 100% Quote Link to comment Share on other sites More sharing options...
Cacuser Posted April 11, 2016 Share Posted April 11, 2016 Yeah- I downloaded the css file from the online demo and now everything is fine!. Thanks! Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted April 11, 2016 Share Posted April 11, 2016 excellent! Quote Link to comment Share on other sites More sharing options...
Cacuser Posted April 13, 2016 Share Posted April 13, 2016 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! Quote Link to comment Share on other sites More sharing options...
rgalindox Posted June 6, 2017 Share Posted June 6, 2017 Hi, I'm testing BabylonJS using Electron for Desktop-Multiplatform. It is possible to download the sponza project so I can test how well it runs loading all assets from a local Hard Disk using Electron? Thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.