Leaderboard


Popular Content

Showing content with the highest reputation since 02/23/2018 in all areas

  1. 24 points
    Deltakosh

    Babylon.js v3.2 is out

    It's celebration time! I'm so thrilled to announce that Babylon.js v3.2 is now out. Once again this could not have being possible without all of you (contributors, testers, bug hunters, doc writers)! Thanks folks! We have a wonderful vibrant community. So feel proud, share it, love it, use it Here is the release notes: http://doc.babylonjs.com/whats-new The blog will it the social network at 10am PST! And the announcement video:
  2. 23 points
    Hello, I thought to place this on the demos and projects thread, however I decided to post this here as it is more a topic for which framework to use and why. I was hired by an elite software development group at Sony Electronics to help them navigate through WebGL to build a pipeline to deliver content for the South By Southwest convention and to create a foundation to quickly develop games and online media for future projects. In short, I was tasked to escape the limitations of 2D media and help Sony move forward into 3D content taking advantage of the WebGL rendering standards. This was no esay task, as I was hired Dec. 11th, and was given a hard deadline of March 5 to deliver 2 multiplayer games which were to be the focus of Sony's booth at SXSW in Austin Texas. But first I had to run a quick evaluation and convince a very proficient team of Engineers which framework was the best fit for Sony to invest considerable resources into for SXSW and which was the right coice to take them into future projects. Yhis wa a huge consideration as the WebGL framework which was to be chosen was to play a much greater role at Sony Electronics considering the group I was assigned to works well ahead of the rest of the industry... developing what most likely will be native intelligent applications on Sony devices (especially smartphones) in the near future. These are applications which benefit the consumer in making their day to day interactions simple and informative. Thus the WebGL framework to be chosen needed to be an element in displaying information as well as entertainment for a greater core technology which is developing daily in a unique tool set used by the software engineers to build applications which allows Sony to remain the leader not only in hardware technology, but in the applications which consumers want to use on Sony devices. But as I was working for Sony, I also had a greater task as there were existing expectations in developing a game on Sony devices which needed to be on par with what consumers already were experiencing with their Playstation consoles. As unrealistic as this might initially appear, that had to be the target as we couldn't take a step back from the quality and playability the consumer was already accustomed to. So back to the first task... selecting the WebGL framework for Sony Electronics to use moving forward. Rather than telling a story, I'll simply outline why there was little discussion as to which framework to choose. Initially Sony requested someone with Three.js experience as is more than often the case. So when they approached me for the position, I told them I would only consider the position if they were open to other frameworks as well. They were very forthcoming to open their minds to any framework as their goal was not political in any way - as they only cared about which framework was going to provide them with the best set of tools and features to meet their needs. And one might certainly assume that since Sony Playstation is in direct competition with Microsoft Xbox, and Microsoft is now providing the resources in house to develop babylon.js, that Sony Electronics might see a PR conflict in selecting babylon.js as their WebGL development framework. However, I'm proud to say that there was never a question from anyone at Sony. I was very impressed that their only goal was to select the very best tools for the development work, and to look beyond the perceived politics and to develop the very best applications for the consumer and to fulfill their obligations to their shareholders in building tools that consumers want on their smartphones and other electronic devices. So once again... Three.js vs. Babylon.js. This was a very short evaluation. What it came down to was that three.js had far more libraries and extensions - however, this was not the strength of three.js since there is no cohesive development cycles with three.js and although many libraries, tools, and extensions exist, more than often they are not maintained. So it was easy to demonstrate that practically any tool or extension we would require for the SXSW production would require myself or the team updating the extension or tool to be compatible with the other tools we might use on the project. This was due to the failings of the framework since each developer who writes an extension for three.js is writing for a specific compatibility for their own project needs... and not for the overall framework... as this is not within the scope of any developer or group of developers. Thus I find that it requires weeks if not months of of maintenance in three.js prior to building content, just to ensure compatibility between all of the tools and extensions needed to use for most projects. As for babylon.js, the wheel is not generally re-invented as it is with three.js, as most extensions are quickly absorbed into a cohesive framework quickly - provided they have universal appeal - and this integration ensures compatibility as there are fewer and fewer extensions to use, but instead an integrated set of tools which are thoroughly tested and used in production revealing any incompatibilities quickly. The bottom line is that there are no alpha, beta, and development cycles in three.js, thus no stable releases. Whereas the opposite exists with babylon.js. There is a cohesive development of the tools, and Sony is smart enough to see beyond the politics and to realize that having Microsoft support the development of babylon.js is a huge bonus for an open source framework. And if anyone had to choose a company to support the development of a WebGL or any framework, who better than Microsoft? With practically every other useful WebGL framework in existence spawned by MIT, most all are barely useful at best. And why would anyone pay to use a limited WebGL framework such as PlayCanvas when Babylon.js is far more functional, stable, and free? This baffles me and most anyone who chooses one project using babylon.js. The only argument against babylon.js is that the development of the framework is now supported in house by Microsoft. But for myself and others, this is a positive, not a negative. I've been assured by the creators and lead developers of babylon.js that they have secured an agreement with Microsoft ensuring the framework remain open source and free. This ensures that anyone is able to contribute and review all code in the framework, and that it remains in the public domain. Sony gets this and we quickly moved forward adopting babylon.js as the WebGL framework within at least one division of Sony Electronics. At the end of this post I'll provide a link on youtube to a news report of not only the games we built for SXSW, but the exciting new technology on built on Sony phones which uses the phones camera to capture a hight resolution (yet optimized) 3D scan of a person's head. This is only a prototype today, but will be a native app on Sony phones in the future. So our task was not only to develop multiplayer games of 15+ players simultaneous in real-time, but to have a continuous game which adds a new player as people come through the booth and using a Sony phone, has their head scanned. This was an additional challenge, and I must say that I was very fortunate to work with a group of extremely talented software engineers. The team at Sony is the best of the best, I must say. All in all, it was an easy choice in choosing babylon.js for the WebGL framework at Sony Electronics in San Diego. Below is a news report from SXSW which shows the new scanning technoogy in use, as well as a brief example of one of the games on the large booth screen. And using Electron (a stand-alone version of Chromium), I was able to render 15 high resolution scanned heads, vehicles for each head, animation on each vehicle, particles on each vehicle, and many more animations, collisions, and effects without any limitations on the game - all running at approx. 40 fps. The highlight of the show was when the officers from Sony Japan came through the booth... which are the real people we work for... gave their thumbs up, as they were very happy with hat we achieved in such a short time. And these were the people who wanted to see graphics and playability comparable to what the Playstation delivered. And they approved. Link: Thanks to babylon.js. DB
  3. 13 points
    Hi Everyone, I recently launched a preview version of my game made with BJS, and you can try it here. It's a 3d billiards game, but currently only Snooker available in this preview version. Hope you'll like it, and have fun. It currently supports these browsers on desktop: Firefox, Chrome, Safari and Edge. (To BJS team: I have added a "powered by babylon.js" in the 'about' page of the game, please let me know if it is allowed to use your logo, and if I have used the right logo, since I just grabbed it from your home page, and converted to png.)
  4. 13 points
    The default pipeline has been updated to add Depth of field, Grain, Chromatic aberration and MSAA post processing. The existing bloom effect has also been updated to only bloom the bright highlights instead of blurring the entire image. See the updated demo and docs. Please let me know if you have any feedback. Thanks!
  5. 13 points
    Deltakosh

    Animation weights

    Hey team! @MackeyK24 asked for it with so much energy that I spent my entire week end working on a new feature: the animation weights support To learn more about it, please read the doc here: http://doc.babylonjs.com/babylon101/animations#animation-weights A demo can be found here: https://www.babylonjs-playground.com/#IQN716#3 As always, any feedback is welcome! Note: I could have added a third animation to the demo (a run animation) but the model animation for run is a bit bad (it looked like the model was flying). If you have a better model, feel free to let me know
  6. 12 points
    Deltakosh

    New Class API documentation

    Hello team! I'm thrilled to announce that the new API doc is online. It is still beta so please report here any issue you may find. We moved to Typedoc to generate our doc in order to get: - Better readibility - Better Typescript support - More flexibility You can find it here: http://doc.babylonjs.com/api.html Have fun reading the doc PS: We are still looking for more volunteers to help writing API code comments
  7. 11 points
    Cryptovoxels is my ethereum virtual world. You can buy parcels of land in the world, then build shops and stores using the in world voxel tools. I started this project in babylon.js about 3 months ago and sold the first parcels of land last week. A video of the editing tools: The world is multiuser, I use websockets + a node.js server (using babylon on the server side) so that you can see other players as they explore the world. The voxel engine uses a greedy mesher with ambient occlusion to generate the meshes, and then a custom fragment shader to do the texture lookup in a texture atlas. The performance is really good on mobile, and it works well in VR as well (mobile VR and desktop). Babylon.js has been really awesome to work with, the typescript bindings are great and the playground has helped me out heaps. I also created a .docset file for browsing the documentation using Dash on os x. Glad to be part of babylon.js community!
  8. 11 points
    Deltakosh

    New GUI control: The Grid

    Hey guys!!! I'm glad to announce the availability of a new container for GUI: The grid Doc here: http://doc.babylonjs.com/how_to/gui#grid With this new tool, it's gonna be easier than ever to build complex UI
  9. 11 points
    Samuel Girardin

    Energy.js playground

    Hi, I've made few playgrounds using energy.js (it's a physic engine) , so you can test the engine live. It's still an alpha version, but you can fun ! bounce box ball joint wood machine vehicle (arrow keys) Typescript sources, grunt, etc : github It's quite tricky to get the engine works on the playground (append script and refresh), maybe you can have after multiple run a memory error). sam
  10. 10 points
    Deltakosh

    New examples tab in documentation

    Hello team! I'm glad to announce the availability of the new Examples tab: http://doc.babylonjs.com/examples/ The goal is to present useful PG in a filterable way. Every example will open the PG in the right iframe and you can then click on edit to see it directly in the Playground. If you want to add more please just update this file: https://github.com/BabylonJS/Documentation/blob/master/examples/list.json Icons are saved here: https://github.com/BabylonJS/Documentation/tree/master/examples/icons and must be 125x125 images Hope you will find it useful!
  11. 9 points
    ozRocker

    Dancing in tracksuit pants

    Another demo with fabric animation. Just some dude who's doing some cool dance moves. https://punkoffice.com/tracksuit/
  12. 9 points
    Deltakosh

    More examples for PG

    Hey team! Did you see that ?
  13. 9 points
    Deltakosh

    //Build 2018

    Hello team! I won't be able to help on the forum until this Thursday as I will be with @davrous, @Sebavan and @trevordev on the Babylon.js booth at Build 2018 (Seattle) If by chance you are around please come and say hi:)
  14. 9 points
    Deltakosh

    //Build 2018

    Some pictures of the booth:
  15. 9 points
    Sebavan

    Webgl 2 Shadows

    Hello, Thanks to Webgl 2, we have been able to introduce two new kind of shadows: PCF (improved version of poisson sampling) and PCSS (contact hardening shadows). They are only available on Webgl 2 and will fallback to poisson sampling on other devices. Here is a quick shot at how contact hardening tries to simulate real life by getting softer when the blocker is further away from the receiver: https://playground.babylonjs.com/#ZT8BKT#2 And a real use in a scene with self shadows: https://www.babylonjs-playground.com/#EYEPRI#3 As usual, the doc have been upgraded: https://doc.babylonjs.com/babylon101/shadows#percentage-closer-filtering-webgl2-only And to properly setup self shadow: https://doc.babylonjs.com/babylon101/shadows#self-shadow Hope you ll enjoy it.
  16. 9 points
    brianzinn

    3D Level Editor

    A bit on the early side, but I've been working on a 3D level editor and a game to go with it. I did look for 3D WebGL map editors when I started and didn't come across any open source (besides Voxel type) and I want to use ie: glTF models inside the editor and integrate in a game and one day a easy to use game creation engine. The editor itself will be open sourced (right now it's too tightly integrated with the game). Hoping it will make game development easier and faster for games with small maps (2D, 2.5D or 3D) - users often have better ideas than game creators ever could have imagined! Partly inspired by this project https://brianzinn.github.io/react-redux-babylonjs-starter-kit/quarto (I copied the game from @Temechon). The first version of the level editor is here: http://robolo.co/game/build It's very PoC (Proof of Concept) material with lots of known issues and bugs. My next idea is instead of having the semi circle of things to instead have a tray that slides out in front of the board (and board slides back). Then I won't need all the popups with tiny text and it will work in VR. Right now the levels that you create can be published to the game, but not always published correctly, sorry . Publishing a level creates a URL you can share, though! To give an idea of how some bots work I created a 4 level tutorial: http://robolo.co/game/play (if the roboloco logo is spinning a level is loading... i'm on an affordable tier!) The game received lots of constructive feedback from an Indie game dev meetup this week, so will be working on those ideas, but unfortunately really busy on other things as well So, back to the drawing board... again. Thanks!
  17. 8 points
    The Leftover

    Illuminated City

    This is wobbling to market. Crime analysis tools: prototypes built on open data. The "strive" was for great presentation fast, slicing a lot of data in many useful ways. I started with SVG - and still use it for conventional charts. A lot of the data is presented on a map. In January, I elected to dispense with Google Maps and put the whole thing on a Babylon Canvas. I already felt late so it has been an intense period. Images are below and you can use it at https://sanfrancisco.ca.illuminated.city, https://chicago.il.illuminated.city and https://boston.ma.illuminated.city. The 3d part is called "geo-location". (You may need to sit and the landing page for a few counts before trying to navigate.) Thank you all for making Babylon. It has changed my life. Also, a shout out to JohnK for suggesting SPS, which have served me well. Comments, suggestions, conversation all welcome. Notes: ~ I applied scene.pick to allow the user to enumerate details of crimes in a specific area. ~ Chicago is mammoth, with about 400K crime records and a bazillion hexagons, but it still works Image 1: Assault and Battery in San Francisco for the past three years. Image 2: Theft from motor vehicle. Color indicates increase/decrease; elevation indicates current level
  18. 8 points
    The Babylon field editor has gone into version 2.0 and is more stable. Many corrections, optimizations and improvements have been made. The interface has also undergone some small modifications with some patches. What you can do with the TerrainEditor : Create a new terrain with 5 sizes to choose from or load a recording. Rename or copy a loaded terrain or delete one. Create mountains or dig lakes, rivers. Smooth the terrain to soften your mountains or rivers. Raise trays rather than mountains. Paint up to 8 different diffuse textures for maximum terrain customization. (Thanks @Luaacro for the mixMaterial) Create ramps on the highlands or mountains to access your characters. Create holes in the ground to enter the basement, cellar / cellar ... Export the land in babylon format with all the textures used. An example file and html test is exported with. Export file meshes separate added in the terrain. Import and add meshes in the terrain Edit meshes with Inspector of properties Add water areas in the scene Add collision boxs in the terrain Add sound and music areas in the terrain Add portals in the terrain Each tool can be controlled to have more or less radius of your brush. You can choose the type of brush to have different shapes to paint textures. The brush is visible by a red allo on the floor following your mouse. Its radius defines what the brush will paint with precision. For texture paints, you can control the hardness and scale in addition to the radius of the brush. When raising mountains, you can control the maximum height limit of your mountains or the minimum limit if you dig. A grid allows you to see the sea level and is set to coordinate 0,0,0. This is useful when digging your rivers and lakes. You can save your work at any time and resume it on another day. When your field seems finished, you can export it for use in any project using the Babylon engine. Just take the hardware code of the export of the html file. I do not think that a publisher's documentation is necessary, but if you think you need it, leave me a message and I'll do one. But I think the editor is very easy to use. I hope this comprehensive field editor will help you. Do not hesitate to tell me if you have problems and tell me what you think, the improvements to make ... The publisher is open-source. You can download it on this repository The editor integrates a mini server to start it: https://bitbucket.org/JSbabylon/terraineditor/downloads/ Enjoy. Some screenshots:
  19. 8 points
    NasimiAsl

    geometry Builder product design

    full design bu GeometryBuilder | size :GB model size = 50 kb with html - main .obj model size = 65 MB https://demos.5kb.me/Revival/index4.html
  20. 8 points
    jerome

    Car Light Physics Engine

    Hi people, I'm currently investigating about some car games (car races in towns or on circuits or on mountain roads, etc). I know BJS can work great with some nice physics engine like Cannon, Oimo or Energy but I like to have lighter and more dedicated stuff when possible. That's why I took a look at this nice library : https://github.com/spacejack/carphysics2d There's a live demo here : http://www.spacejack.ca/projects/carphysics2d/ Use up and down arrow to push the gas throttle or the brake, the left and right arrow to steer the wheels and the space bar to pull the e-brake... drifting is so fun. Well, this is a light 2D library dedicated only to the car physics : you know, all the stuff about mass transfert on the wheel axis, acceleration, frictions, tire gripping, etc, etc. It's really light : the commented and un-compressed part of the code about the physics themselves is about 100 LOC only. So I just had a quick try to adjust it to work with a BJS example. This is not a real port, not even an adaptation in some BJS-esque style, just a plug to make it work with some 3D objects instead of 2D ones. Of course, I had to add some tiny logic to have 4 wheels rotating according to the current car speed. Here's a first quick and dirty proto : http://jerome.bousquie.fr/BJS/test/carSim1.html The car front is blue, the back is red. Up and Down arrow to speed up or to brake. Space bar to pull the e-brake. Just click once in the canvas before because the keyboard controls of the ArcRotateCamera have been disabled in order to be used as car controls instead. Note : the car can't drive backwards 😉 This could be proted, refactored in the BJS way and optimized then (added to my todo list).
  21. 8 points
    Samuel Girardin

    Energy.js on github

    Hello, Energy.js is now on github : https://github.com/samuelgirardin/Energy.js sam
  22. 7 points
    xtreemze

    Defend

    Hi everyone, Been away for a while but I've kept practicing with Babylon. This is at a prototype phase with no 3d/sound/artwork. Just pure javascript code for now. Trying to get the mechanics working properly first. One question I have is how the projectile rotationQuaternion is cloned. It seems to follow the lookAt() quaternion from the origin tower even after the quaternion is cloned. How can I ensure that the rotationQuaternion is not linked to the original quaternion it is taken from? This causes problems when a tower shoots a projectile and then rotates to target another enemy. The previously mentioned projectile rotates in midair still copying the rotation of the tower. Here's the relevant code taken from line 53 of https://github.com/xtreemze/defend/blob/master/src/js/main/projectiles.ts const clonedRotation = originMesh.rotationQuaternion.clone(); clonedRotation.normalize(); projectile.rotationQuaternion.copyFrom(clonedRotation); Comments, questions are welcome! The project is hosted here with open source: https://github.com/xtreemze/defend View the project here: https://xtreemze.github.io/defend
  23. 7 points
    This happens a lot in Melbourne, Australia too. webGL jobs always mention three.js. Its simply because that's the only webGL framework they've heard of. If I'm on a project and no work, or minimal work has been done with the three.js framework I can always convince them to switch to babylon.js. For the record, I actually started with three.js and it got frustrating. Parts of it felt incomplete and broken, so I switched to babylon.js and never looked back.
  24. 7 points
    Antriel

    ScaleManager.SHOW_ALL

    I'm using code from that example (game and cameras resize) + some basic css. It could be part of Phaser, but honestly that's all I will ever need. If you want proper responsive game, you have to implement it yourself anyway. This is my custom ScaleManager's initialize method that I call after I create the Game instance (Haxe code). public static function initialize(game:Dynamic):Void { function resize() { var w = js.Browser.window.innerWidth; var h = js.Browser.window.innerHeight; var scale = Math.min(w / Config.DEFAULT_WIDTH, h / Config.DEFAULT_HEIGHT); game.canvas.setAttribute('style', ' -ms-transform: scale(' + scale + '); -webkit-transform: scale3d(' + scale + ', 1);' + ' -moz-transform: scale(' + scale + '); -o-transform: scale(' + scale + '); transform: scale(' + scale + ');' + ' transform-origin: top left;' ); width = w / scale; height = h / scale; game.resize(width, height); game.scene.scenes.forEach(function (scene) { scene.cameras.main.setViewport(0, 0, width, height); }); } js.Browser.window.addEventListener('resize', resize); if(game.isBooted) resize(); else game.events.once('boot', resize); }
  25. 7 points
    jonathanlurie

    Texture 3D, is it real?

    YEAH! it works perfectly! Thanks for adding that to the core! For loading the MRI data I use Pixpipe , which is a lib I am developing at the Montreal Neurological Hospital. I will share this example in a git page because I am not too sure how to deal with dependencies and remote data in a PG, and also the MRI has to be loaded in advance and use a callback that only then creates the scene -- I'm not sure we can do that in the playground. I will update this thread when I have a cleaner source to share! But in the meantime, here is a youtube capture of it in action: Cheers!