Popular Content

Showing most liked content since 09/23/2016 in all areas

  1. 20 points
    Hello everybody, As you surely noticed it, the old debug layer has been reworked in something bigger... called the "inspector". This tool has the goal to become the 'F12 tool' of our beloved engine, without replacing the official editor. It's dedicated to HELP the developer by providing some debug features. You will find almost every feature from the debug layer, and much more: display shaders code, display textures used on materials, check stats, enable lights... All properties are refreshed almost in real time (actually every 200ms for performances reasons). AND you can update any value (among strings, numbers and booleans) by clicking on it and pressing 'enter'. Sure, there is still work to do and bugs to fix. But in the current state, we decided that it is already more useful than the debug layer was. I'm still working hard on it, don't worry ! You can also help me a lot by reporting every kind of bugs in this thread and even contribute to its development. In the next days, I'll first fix all the annoying display and integration bugs. Then, I'll work on : - Restore clickables labels from the old debug layer (for Dad72 and DK ) - Update the documentation (of course) - How to contribute (add a new tab, add a new tool, change panel color theme...) - Add new features ! (Cameras, particles, textures, audio, animations...) - <insert your suggestion here> I'm having a lot of fun to work on this, and I really hope you will find it as useful as I do ! Cheers
  2. 20 points

    Babylon.js 2.5

    We're done my friends!!! Thank to this wonderful community we managed to close and ship v2.5: https://github.com/BabylonJS/Babylon.js/releases/tag/v2.5.0 Here is the announcement tweet: Please RT
  3. 19 points

    New Playground features

    Hello community! As you know, the playground is a very valuable tool if you want to try, experiment and share your Babylon scenes. You can even search for a specific word in the whole snippet database from the documentation website, that make it easy to find and discover a new snippet. And because we know it's a very powerful tool, we worked hard last month with @Deltakosh on a better user experience when searching for playground. From now on, when saving a new playground, you'll have to fill several information: a title, a description and some tags. It will be asked only once at the playground creation, and all next iterations of this PG will share these metadata. You won't be able to redefine it afterwards. For all PG that don't have any metadata, you will be asked to fill it only once. The search has also been improved. You can search for a word in the PG code like usual, but you can also search for a word into a PG title/description, or a specific tag. The overall quality of search had also been improved (ou can now search with several words, that will return all PG that contain these words, and several bugs have been fixed). All this work couldn't have been done without @Jaskar and @DeathSoul who wrote all the code (back and front-end), and @Deltakosh of course So go try it : http://doc.babylonjs.com/playground Please helps us by reporting all bugs you can have in this thread Thank you very much !!
  4. 19 points

    Announcing Babylon.js v3.0

    We did it again Congrats to all our great community, we've just shipped Babylon.js v3.0: https://github.com/BabylonJS/Babylon.js/releases/tag/v3.0.0 I hope you'll like it! And the blog post: https://github.com/BabylonJS/Babylon.js/releases/tag/v3.0.7
  5. 18 points

    Road to Babylon.js v3.0

    Hello all, next version will certainly be 3.0 depending on my progress regarding WebGL2.0 support I'll use this thread to track progress. Done so far: WebGL 2.0 context initialization Shaders migration Texture LOD: used by PBR shader Depth Frag: Used by logarithmic depth buffer Vertex Array objects: Used to speed up vertex buffer submission Standard derivatives: Used by bump Multisample Rendertarget: Used to apply antialiasing to render targets (mirrors for instance) Uniform buffer objects: Used to speed GPU communication up Multiple render targets: Used to render to multiple textures simulteanously I also started a documentation page to better explain every feature: http://doc.babylonjs.com/overviews/webgl2
  6. 17 points

    Announcing Babylon.GUI

    Hey all, I'm really pleased to announce the availability of Babylon.GUI. http://doc.babylonjs.com/overviews/gui In a nutshell, Babylon.GUI is a GUI layer which can be used inside your scene. It is an alternative to DOM or Canvas2D. Please try it and give me any feedback
  7. 17 points
    Hello team! Since the very first version of Babylon.js materials are working in a pull mode. This means that every time a mesh needs to be rendered, its material has to ask the engine about a lot of information in order to compile the best shader possible for the given mesh. For instance, here is an incomplete list of states required to compile a shader: - Lights affecting the mesh (taking in account inclusion and exclusion lists and masks) - Textures and channels (including associated parameters like parallax for bump or reflection mode for reflections) - Fog, clip planes, point rendering or wireframe - Mesh attributes (does the mesh contains UV? tangent? colors?) This leads to a pretty expensive function named Material.isReady. Due to the previous reasons, the function is really CPU intensive. Here is for instance the profile of the "materials" playground: The highlighted functions are part of the IsReady root function. The scene is extremely simple and you can see that the isReady is taking almost 13% of the CPU time While it was ok because of the complexity of the task assigned to this function, I decided recently to change it to a clever model: The push mode. When a material is in this mode, instead of asking on every frame for every state, the states will push updates to the material when they change. Obviously the performance boost is immense. Look at the same profile with the new mode: We are now at 2.51%. On bigger scene like Sponza, this function could take up to 30%: And now with the new mechanism: ONLY 3%!!!!!!!!!! But obviously with such a big change, there will be some bugs.. So please use this thread to report any issue with StandardMaterial. If everything is fine, I'll update the PBR to push mode in one or two weeks. Associated PR: https://github.com/BabylonJS/Babylon.js/pull/1959/
  8. 17 points
    I can actually provide some insights on this point since prior to starting my indie game venture I was working as Technical Lead for an American brokerage firm in London (7 years) and prior to this, I worked for 3 years as C++ dev for a bank in Paris. As a dev in the financial sector you can expect to earn a lot more than in any other sector coupled with high bonuses and generous packages. Financial stability is definitely easier to achieve with these kind of careers. There are however some constraints that money cannot offset. Money cannot buy time lost (I started my life in an orphanage in Korea and there was things that I really ought to do regarding this personal matter). After 10 years of career abroad I realised that time was just flying by... being able to untie myself from constraints while making money was my main motivation to start with and this is something that I managed to do. When I told the company that I was leaving to create an indie game business they were understandably surprised. They offered me a higher package, I explained my personal circumstances, they suggested part time freelancing or that I take a short sabbatical leave to focus on my personal situation but I wanted to start anew and have no further constraints. On top of having a much better quality of life now, my indie game business allowed me to focus on these and this is my greatest pride so far. Now I am not saying you should leave your day to day job today. I had savings when starting Okijin Games and a career (with 10 years experience) to go back to "in case of failure" so the risk was mitigated. I also got lucky as my first game (Zombies Can't Jump) was a success on Windows Phone and on the licensing market so it started generating revenue immediately and I actually did not have to tap into my savings despite a one game only catalogue. But what I am saying is that it is perfectly viable to make it as an indie dev in the HTML5 game industry provided you pay attention to the right opportunities and partnerships. Some markets in the game industry are saturated by extremely high expectations, this is definitely not the case with HTML5 games where there is so much room for development. If you read the latest news you will even find that 2017 is likely to be full of development. To debunk even further, last month my work consisted on successfully negotiating 7 non-exclusives for my latest game Sailor Pop ($1100 average per license), adding to this a discounted sale across my older game catalogue ($1300) and passive revenue from rev. share and stores ($2350). I also went to sign a deal for distribution on several Asian Markets. Most of my revenue comes from these type of deals as I do almost no client / freelancing work (in 3 years I took only 2 contracts for clients and refused many more). Client work may feel safer but you are not building your assets, no scaling prospect nor repeat sales which is one of the most important component of a business along with its structure - I believe that if you ever want to grow your income and value over time then this is a dead end. I also don't necessarily make games on a treadmill, I took one month off development work to offset the burnout from my latest game and I am now 1 month into my next project (my first multiplayer HTML5 game) although I ought to finish all my projects within 3 months max. There are obviously other viable ways to make it as an indie (like discussed above), we can also look at the exceptionally successful stories, but in the shades there are many ways to make it decently while having fun with less constraints (that's what "independent" stands for after all). To conclude I also agree that in all this, there is also the prospect of one day making it big with one hit! But in between it does not mean that making a living is impossible.
  9. 16 points

    Build your own Babylon.js

    Hello team! I'm glad to announce the availability of Version Builder: http://www.babylonjs.com/versionBuilder/ Now that we have a lot of satellite services, you can use this page to build a custom merged version of babylon.js!
  10. 14 points

    Help wanted!

    Hey team! we were clearly heads down working on 3.0. Now that we successfully shipped it I would like to get the help of our wonderful community. I would like to improve the content of our documentation. If you go there: https://github.com/BabylonJS/Documentation/issues you will find a list of issues related to the doc. There are 2 kinds of issues: Missing documentation: These issues are used to flag a missing tutorial / documentation / overview Incomplete documentation: These issues flag articles / topics where we consider we should add more info If you want to help, you can: Create more issues to help identify what is missing / incomplete / unclear / using bad english / whatever could be wrong Take one issue and fix it: My favorite one Pick an issue, read this small tutorial and contribute to the best doc ever made for a 3d engine One of the goal of the 3.1 will be to add helpers everywhere to make common tasks even simpler. And I'm convinced that doc will be an important part of this simplification as well. Thanks a LOT
  11. 14 points

    Webgl Spector

    Hello, I am happy to announce the release of my last Dev: http://spector.babylonjs.com This will help any of you willing to troubleshoot or understand what are the webgl commands generated by the engine ! Have fun,
  12. 14 points
    Hello team! as part of 3.0 version, I'm proud to announce the availability of ESM shadows (Exponential Shadow Maps). I updated the great doc done by @Wingnut to take this in account: http://doc.babylonjs.com/tutorials/shadows VSM (variance shadow maps) were removed (to keep backward compatibility the properties are still here but they will trigger a warning in the console). ESM are great because they can be blurred. Here is an example of all kind of shadows we have now: http://www.babylonjs-playground.com/#20FROK#2 ESM are great because they allow you to deal with selfshadowing: http://www.babylonjs-playground.com/#1CXNXC#3 Hope you like it!
  13. 14 points

    Happy Christmas!

    Hello my beloved community! It has been a really cool year for our little babylon.js! We (as a community) did so many improvements to the engine, the doc, the website that I can't count them I wanted to wish a WONDERFUL CHRISTMAS to you and your families. I won't be too much available until early January as this is the first Christmas for my daughter (the first where she can understand what is happening). But I'm not worried as I know that we have a team of extraordinary people dedicating time to help each others. Please take some time to spend time with your friends and family. I'll try to swing by sometimes but not like right now (my current pace is once or twice a day :)).+ PS: If you really need my help, just wait for early January and ping me on your topic!
  14. 14 points

    A Ghost of Christmas Past

    I had hoped to create a brand new Babylon Christmas Card - but real life gets in the way of virtual Reality So I decided to bring back my first Christmas effort with a few changes - I know @dbawel likes it. Basically some added geometry - a cottage, a sign and chimneys. The chimneys gave me the opportunity to experiment with particles - in addition to the particle effect I stole from @Wingnut; a long time ago. I had to create 5 textures, and I also tweaked the terrain. Anyway here it is: A Babylon Christmas Card You can also change the volume of the music Up or Down with the "u" and "d" keys, and if you, for what ever reason, would rather have no music, it can be toggled On/Off by hitting the "o" key. The camera speed can be made slower or faster with the "s" or "f" keys. Have fun. Ohh and the sign - do whatever you can do Nadolig Llawen, Merry Christmas, Joyeux Noel, Feliz Navidad, Frohe Weihnachten, to one and all. Next year, hopefully a new Village cheers, gryff
  15. 14 points
    Hi, One of our intern in Microsoft France and now core member of the team, @Luaacro, has been working with us building an online editor for Babylon.js: http://editor.babylonjs.com. In order to showcase what you could do with it, he decided to build a complete impressive scene: http://www.babylonjs.com/demos/ruins Yes, it has been entirely built with our editor! It uses a lot of high end effects we have in the engine like a standard pipeline, dynamic shadow generators and particles. He has written a small article about it: https://medium.com/babylon-js/babylon-js-editor-demo-is-now-live-a8fc217a6324#.wp85aq2kx As the scene could be a bit hard to render on every machine (you need a GTX970+ to render it without issue), I’ve added some code to monitor performance based on the last 60 frames rendered. If the fps is too low, I’m: - First lowering the size of the render canvas to 66% and removing the standard pipeline (post processes cost a lot of perf) - Lowering the size of the render canvas to 50% if it’s not enough If fps goes up again, I’m doing the opposite but will never re-enable the standard pipeline. It means that if your machine is able to render the complete demo in full resolution from the first frame to the last one, it has a great GPU and/or a great browser. Enjoy! David
  16. 13 points

    PBR composer ( node based )

    Hello, I'm happy to announce that the node based PBR Composer is on the road. What is PBR Composer ? In short, PBR Composer helps you design and visualize a PBR Material in an efficient way. Parameterizing takes place by dragging and connecting specific nodes from a palette (typically textures, colors and uv-coordinates) to the output node, which represents the PBR Material. A preview panel lets you see all changes in realtime and the corresponding js-sourcecode will be updated as well. The resulting graph can be downloaded in JSON format for later use. Images can be inserted via preview fileselect dialog and/or Drag&Drop, in latter case the images will be transformed to embedded data-urls so the javascript functions can be reused without dependencies. Different meshes and environment-maps are available to see the material under different geometry and reflective light conditions. Motivation for PBR Composer: Due to the complexity of the PBR material (soo many combinations with soo much amazing effects) there is a need of having realtime feedback reflecting the changing parameters. Other than some editor already out using a bunch of parameters in confusing properties panels, nodes lets you to concentrate only on the parameters you need giving a nice overview in form of a graph. Nodes can also be shared and avoids therfore redundancy in the sourcecode. The goal is/was to make the user interface as efficient as possible. The idea for realizing the PBR Composer was inspired from Shader Editor. Technical details: PBR Composer is a web application based on dat.gui, w2ui, litegraph.js and of course on BABYLON.js TODO: At the moment, PBR Composer is customized for PBR-Glossy materials. The current activity is realizing a function for switching between Glossy and Metallic paradigms. Any questions? Let me know... PS: PBR Composer is still in alpha stage but will be deployed in beta stage soon Here it is te demo ...
  17. 13 points

    Forum Downtime - The forum is moving

    Hi all, Yesterday, starting at 4pm GMT, the forum suffered a comprehensive, well-coordinated DDoS attack. This was a properly distributed attack, meant to disable the site (which it did), not just some script kiddies playing around. We had thousands of open connections blocking ports and exhausting our httpd service, with sustained inbound traffic floods of 20GB per second (the equivalent of saturating a dedicated 40Mbps T3 line). I spent the entire night working diligently with my host to resolve the problem. As a side effect, the attack also took down other sites hosted on the same server, including the Phaser site. The target, however, was the forum. We finally managed to block the attack, but there were 12 hours of downtime and ripples of it carrying on throughout today. It cost me a lot of time, money, and effort. Although no-one has claimed to be responsible we have evidence indicating it was related to a previous altercation that took place on the forum. As a result, several things are happening: 1) The forum is moving to a different host. It will be hosted directly by Invision, the company who make the forum software. They are in the process of transferring the forum, and in approximately 6 hours time it will be offline as the transfer takes place. They will retain all member accounts, forum posts and file uploads. Custom plugins will also be kept. My thanks to the Babylon.js team to helping fund this move. 2) The Chat room has been disabled, and will not be bought back after the move. 3) The forum will be offline as the domain name is transferred over the course of this weekend. Honestly, I'd just wait until Monday and come back then. 4) I am personally taking the decision to remove a member of the community a lot of you may know: TrueValhala. To be clear, I do not believe he is responsible for orchestrating the DDoS at all. However, he constantly clashes with other forum members (some of it warranted, some most certainly not), and I am regularly receiving complaints to the point where I cannot ignore them any longer. This DDoS attack was the final straw. I've given this situation a lot of thought, and for many years I have let his actions slide because it was always just a form of 'passive aggressiveness' and over-reaction, rather than anything malicious, and sometimes it was justified too (he receives his own fair share of vitriol now and again.) If you are one of those who has attacked him in the past, perhaps you helped contribute to his polemical responses? But I've moderated forums for over 20 years now, and can confidently say this is one is the most helpful and friendliest ones I've had the pleasure to be part of, and I'm not willing to let it be negatively impacted like this any longer. I'm genuinely upset it had to come to down to this. I know a lot of you follow TV and admire his work, and personally, I admire greatly what he has achieved with html5 on a business level. I'm only writing about him here because I know a lot of you will ask why he is 'banned', I didn't wish to single him out, but he's a prominent part of the community, and you don't just remove that without justifying it first. I genuinely wish him the best for the future and hope he can find another forum to share his insights on, for when you strip away the scathing elements, what is left is usually really informative. You're welcome to email me directly about any of this.
  18. 13 points

    3D scan using a single iPhone only

    Most people here know that I have an 82 DSLR cammera scanning rig. I use this specifically for scanning in people at the shortest time possible (which is currently 1/300th of a second). However, such a complex rig is not required for scanning objects. You don't even need a DSLR camera or a handheld scanner. In this demo I used a simple iPhone 6+ and walked around a statue. We took 89 photos from different angles. My web designer had to stand on my shoulders for the top row of photos. The bust needed to have smooth shading but the base has sharp edges which I needed to preserve so I wanted flat shading for that. With babylon.js you can't pick and choose which edges to smooth. In order to pull this off I made the base and bust 2 separate meshes and turned off smooth shading on the base. It still doesn't look perfect, but it was much better than everything smoothed or everything flat. This is my first test scanning with an iPhone and I usually scan people so this is a rough demo. www.punkoffice.com/statue
  19. 13 points
    Take a look at where I'm going with this and let me what you think. It is basically a heavily modified Babylon Unity Exporter Demo Video Link U3D - BabylonJS Game Editor Toolkit Quick Intro Demo API Update Warning: I tried to make it shorter, i took a deep breath and spoke as fast I could but it still took about 1 hour and 20 minutes. But the technical folks who are up to it and want to see how to use and how i put together a Manage Scene Component API with a light weight 'Unity-Style' life cycle with native babylon scene hooks for 'start, update and destroy' stages... Then this is for you U3D - BabylonJS Scene Component API Intro Note: I found the problem at the end of the video with the getSceneMarkup function. I had to move the controller.ready() to AFTER the scene.manager has been set. But you should still where i was going with that
  20. 13 points

    The Wingnut Chronicles

    'Twas the frame beforeRender, and all through the scene, Not a vertex was indexed, the canvas was clean. Observers were hung on event loops with care, In hopes that St. Deltakosh... soon would grow hair. The cameras were nestled on Y-offset peds, The lights well-positioned in greens blues and reds. A box and a sphere and a tube with a cap, A torus, a plane, and a fresh-baked light map. When out of the engine arose such a clatter, It woke-up young Davrous to check on the matter. Away to the Windows... he flew in a flash, To resize the viewport and refresh the cache. The specular shined on a heightMap of snow, The includedMeshes were starting to show. When what to his wondering eyes did appear, A Wingy-made bobsled and 12-pack of beer. The BJS framework so lively and quick, Was rendering elves each with onPointer pick. They all went to work wearing new Christmas formals, Connecting the verts and adjusting the normals. A beautiful pano on isBackground Layer, And cool twinkle lights... it just couldn't be gayer. This holiday playground was now well-awake, So Davrous relaxed with a nice Christmas cake. More rapid than beagles the elves made their fame, They yelled at observers, and called them by name: "OnPointer, onReady, onActivate true." "onAfterUnbind, onBeforeRender, too!" The scene came to life at a fine framerate speed, The particle snows had a great random seed. The post-process pipe added gorgeous effects, The boys at Three JS were all nervous wrecks. Ol' Davrous and DK and all of the puppies, Were dancing and singing like freshly-fed Guppies. And Davrous, he smiled and he started to sing... “Merry Christmas to all, and to all a good ping!” It's party day! Nov 1 - The Wingnut Chronicles reaches 50,000 views, Dec 9 - Wingnut reaches 3 yrs on-forum, Dec 13 - The Wingnut Chronicles - 3 years on-forum, Dec 15 - Wingnut - 59 years of continuous air-usage (piss-poor resources management, eh?)
  21. 12 points

    Babylon.js v3.0 is almost done

    Hey team! we plan to ship bjs 3.0 on 7/12/2017. Please consider adding what you want before end of this week (7/7) or it will have to wait for a couple of weeks (We will keep the code frozen for one week to do the final validation)
  22. 12 points

    Introducing morph targets

    Hey team!!! I'm pleased to announce the availability of morph targets! Please read more here:http://doc.babylonjs.com/tutorials/how_to_use_morphtargets
  23. 12 points
    Thanks to the awesome Babylon framework, I'm creating a city building and simulation game; I thought I'd share the progress so I can ask some questions in case I get stuck. Here's a sample town (read-only at the moment because the UI is far from complete): http://misc.blicky.net/c2/?id=1 (desktop only) Some screenshots.. Current issues: Shadows are way too 1990's, even though the targetTexture is 4096 in size. It would be nice if the shadowGenerator's matrix would adopt to only include faces that are in the camera frustum. That way shadows would look good from afar and close-up. Solved Road intersections are a pita. The current solution, using CSGs on the road segments (extruded shapes) and some math to create a plane is barely acceptable and rather slow/error-prone. Performance. While 'idle' FPS is not bad, when adding more structures, the browser will lag because it is using MergeMeshes() to merge the new structures to the existing meshes. I'm currently transitioning to SPS meshes, because they build a lot faster, however are also more restrictive. So my question is: why is MergeMeshes() slower than SPS.buildMesh() and can it be made to match the latters' speed?
  24. 12 points
    Hi guys, This weekend I joined ludum dare again and I managed to build a game using babylonJS. The theme that was chosen was "one room". This is the game I created: http://jppresents.net/static/ld37/ You play with the mouse, holding down the mouse button fires the laser. Not much more to say.. obviously you don't want them to reach the bed. Pressing "s" toggles sound on and off. And here is a short timelapse of the creation within about 13 hours. (This includes creating everything from code to assets, except for the custom loading screen.) Thank you guys for the cool engine and the awesome playground examples. Special thanks to everyone from http://www.html5gamedevs.com/topic/21992-creating-a-scanning-laser-effect/
  25. 12 points

    Bird vs. Stars

    A small kind of Christmas themed flappy bird style game. Click or press space bar repeatedly to fly and gather as many stars as you can in one minute. Don't touch the ground, that resets the multiplier. http://www.yavsadventskalender.de/fly Features I played around with for this: - fixed aspect ratio - shadow generator for bird & stars - wrapping around an area - 2dCanvas for score & time display - custom loading screen - also more tinkering with blender animations
  26. 11 points

    Improved shadows

    Hey team! We ( @Sebavan and I) spent a lot of time improving the accuracy of our shadow engine. This means that we have now better precision and more reliable shadows generator. You should need less tweaking (bias, etc...). But as the topic is pretty complex please use this thread to report any issue regarding shadows that you may have
  27. 11 points

    Playground version selector

    Hello my friends!! I'm happy to announce that the Playground can now let you pick the version you want to use (latest or 2.5 so far). We did it because of the upcoming breaking changes introduced by 3.0 (I'm removing all functions or features marked as deprecated in previous versions)
  28. 11 points

    Multiplayer games challenge - The games

    Hi guys, First of all, thanks to everyone who played my game! Congrats to pepa, BlueManCZ and Athelios! Why congrats? Well they killed the Megaslime together! This is so very cool! I love that you guys organized to play all three classes together, level up and then coodinated to kill the boss. They did that on March 7th and I didn't even notice until now. I am very happy about this - I was really hoping some group of players would do exactly that. Some stats: There were 75 characters created, 7 reached the maximum level of 5. 50 of the characters stayed at level 1, so they just had a quick look at the game/class. Thanks to @RaananW for coming up with the challenge and managing it. Thanks to @Nockawa for implementing Canvas2d. Thanks to all contributers to babylonJS. And a very special thank you to @Deltakosh for creating and maintaining babylonJS!
  29. 11 points
    I'm going to answer that as I'm the one who forced @Deltakosh to switch to TypeScript. First, TypeScript is "just" a superset of JavaScript, adding types and supporting future features of ECMAScript by transpiling down to ES5 or ES6. This means that we don't break anything with regular users that will just use the compiled JS version in ES5 or ES6 and will never see it comes from TypeScript. Thanks to the switch we've made 3 years ago, we've managed to find bugs that were just under our eyes and difficult to find in plain JavaScript and we've also managed to boost our productivity on the engine, which is good for us and our community/customers. @Deltakosh has done a great article on that: https://www.eternalcoding.com/?p=103 On my side, 3 years ago, I was also concerned on the fact we were spending a lot of time answering basic questions of our users, trying to understand if there was a bug in their code or in our code. All this time was our spare time and wasn't used to improve the engine. I've then started to discuss with @Deltakosh on ways to solve that and again TypeScript was a good candidate. Why? Again, thanks to the types exposed, I’ve discovered great possibilities such as the TypeScript playground: http://www.typescriptlang.org/play/index.html I’ve then told to @Deltakosh we could do something similar, having autocompletion in the browser, building some basic sample codes to help our users, learning by live discovering the API. Deltakosh ended up building a much better playground with great features such as saving your code to share it with your colleagues or on the forum for review, downloading the ZIP, etc. Something which would have been much more difficult without TypeScript. TypeScript also offers us to use future features of ES now to add clarity to our code: module, class, arrow functions, generators, async/await, etc. Those are not TypeScript specifics. You will have to learn them to be able to write ES2016/ES2017 code anyway. Regarding the fact it comes from Microsoft, this is really not what influenced us (everybody knows deltakosh and I are MSFTees). Deltakosh was even against at the beginning but quickly changed his mind when he discovered the potential behind without affecting our users. Even if it comes from Microsoft, the web community enjoys TypeScript and other big companies such as Google is using it for Angular 2. TypeScript also offers another great benefit for us: we managed to attract talented developers such as @Nockawa writing the awesome Canvas2D extension who was mainly a C# developer. C#, C++ and Java developers tends to have difficulties understanding some paradigms of JS at the beginning such as the prototype oriented programming, the classical issue with capturing this for closure, writing module/class like with self-executed anonymous functions, etc. TypeScript is hiding that by still generating perfectly written JavaScript under the hood. I tend to find TypeScript also better to work as a team. At last, as said before, we managed to attract some customers using Babylon.js because it is written in TypeScript and you can them fully develop with the .ts version of our engine instead of the .js to have a full typed experience during your development process. Another great benefit: I can compile an ES6 (ES2015) or ES7 (ES2016) version today without changing a single line of code of Babylon. If we would be in plain JavaScript, we would have been forced to rewrite everything to switch from ES3/ES5 to ES6 for instance. The only caveat is that it’s a bit more complex for contributors to the code to do PR to fix bugs or add features. But to be honest, as said, it’s just the JavaScript we will all use in 1 to 2 years. Except this small part, TS doesn’t affect our users because it’s transparent for them, we’re improving the quality of the code, we’re going faster, we’re attracting more diverse talented developers, we’re ready for the future. I really don’t see where the problem is then.
  30. 11 points

    Procedural City experience

    Hello, Here is a fun little project I came with this weekend. You can check it here: http://www.pixelcodr.com/games/procedural-city/index.html The code is on Github: https://github.com/Temechon/procedural-city
  31. 11 points


    I thrilled to announce that www.remix3d.com is using...Babylon.js
  32. 10 points

    js13kGames 2017

    It's that time of the year again - time to start thinking about the js13kGames competition. The sixth edition will start on August 13th, 13:00 CEST and will run for a month. For those who don't know it yet: it's an online competition for HTML5 game developers where the fun part is the file size limit set to 13 kilobytes. Check the rules for details. There are always notable judges, lots of cool prizes, and free t-shirts for all entries shipped worldwide. See the forum topics from previous years for reference: 2013, 2014, 2015, 2016. Follow the compo profiles on Twitter and Facebook to be up to date with all the news and announcements. I'm looking for prizes and sponsors, so if you can help with either of those please get in touch! So, who's going to participate?
  33. 10 points

    BabylonJS Mansion in WebVR

    Hello, I'm having fun while writing our next big tutorial on building WebVR scene with Babylon v3. Here's a preview of what I'm working on. The Mansion scene is really a great experience in VR! You can use the VR controllers to teleport, it sends a yellow ray by default. If the ray turns blue, it means you're pointing to an actionable item (using our Action Manager). Pressing the VR controller button will run the action on it, most of the time an animation + sound like in the regular version of Mansion: http://www.babylonjs.com/demos/mansion Enjoy! David
  34. 10 points

    Metallic Workflow

    Metallic workflow is now supported by the BJS PBRMaterial: http://www.babylonjs-playground.com/#12CWQQ#0 You can now precise your metallic texture and what channel to extract the roughness from with those properties on the pbr material: material.metallicTexture = new BABYLON.Texture("https://dl.dropboxusercontent.com/u/55657011/metallicmerge.jpg", scene); material.useRoughnessFromMetallicTextureAlpha = false; material.useRoughnessFromMetallicTextureGreen = true;
  35. This post cannot be displayed because it is in a forum which requires at least 5 posts to view.
  36. 10 points

    Furniture designer

    Hey guys, I've made a furniture designing app using babylon js. Go here to start customizing -> http://portfolio.meble.design/app/ Go here to view a premade model: http://portfolio.meble.design/app/?conf=10041720 or http://portfolio.meble.design/app/?conf=19031726 or http://portfolio.meble.design/app/?conf=19031728 I've also designed a furniture model in the app and then produced it myself to fit into my apartment, it looks like this -> http://i.imgur.com/E06iE5B.jpg
  37. 10 points
    Hi beloved community, The implementation of WebVR 1.1 is in pretty good shape, @RaananW has done an impressive work. We're still in the process of polishing and finding ways to make it simple & powerful, the spirit behind Babylon.js since the beginning. You can read the documentation here: http://doc.babylonjs.com/overviews/webvr_camera and you'll discover that you can map your controllers (HTC Vive Wand or Oculus Rift Touch) to a mesh to the final sample shared at the end: http://www.babylonjs-playground.com/#5MV04 (you need a recent version of Chromium or Firefox with gamepad extension enabled you may find on http://webvr.info) I'm in the process of integrating the 3D models of both controllers. For instance: - HTC Vive Wand model: http://www.babylonjs-playground.com/#NCLFI - Left Touch: http://www.babylonjs-playground.com/#NCLFI#12 - Right Touch: http://www.babylonjs-playground.com/#NCLFI#13 I'd like to animate them by default when you'll press the trigger & the button to enhance immersion and provide you a default behavior that'll match most use cases. We still need to work on that with Raanan. I'm also experimenting turning Sponza in VR mode: http://aka.ms/sponzaVR . You can play with it if you've got a WebVR 1.1 device but beware, I'm still breaking it frequently. It also works on smartphone using Cardboard as we're falling back to VRDeviceOrientation camera in case of non WebVR support. VR for all!!! Regarding WebVR, it currently works in: - Edge Windows 10 Insider fast version that ships WebVR on by default. You can try it using the Mixed Reality Portal simulator: https://mixed.reality.news/news/try-windows-10s-mixed-reality-portal-your-pc-with-insider-build-15048-no-headset-required-0176419/ - Chromium with HTC Vive & Oculus Touch Stay tuned, we're continuing building great stuff you'd like. Cheers, David
  38. 10 points


    Knightmare: A very simple DOOM-like game built in BabylonJS Hello guys! I've been working on this little project for around 2 weeks now, And I'm excited to release a VERY alpha build! It features 3 types of enemies, and only 1 level. I plan on adding FAR more complex maps (currently it's built with a tilemap editor), as well as more monsters, And a backstory. Try it out, give me your thoughts. Hope you enjoy the VERY basic level! (Note: currently there is no way to end a level, so just kill everything and you won!) Play: Knightmare v0.1 Storyline You play as a great Knight of Vasteran - protector of the realm. After a great journey, you return to your village, to find your wife in great peril. She has been cursed by dark magic, which has made her fall into a deep sleep. All is not lost, however - the courtmage has declared that you, if you dare, may enter her dreams and destroy her demons. Fearing nothing, and willing to sacrifice your life for your woman, you plunge straight into death itself, into your wife's darkest nightmares. Spooooky. Future Plans I do not plan on adding too many weapons in the game... in fact, I may end up having only 2 weapons, or possibly 3. I'm going to focus on having each weapon be very different from the next, and important in strategy. Strategy is very important in this game - not because the game ever blatantly tells you it's important, but because to survive those Goblin attacks, you need to dodge the blows - or have a skeleton or mage shoot a projectile at them, or set a trap, etc etc. It's an automatic process for us humans to be strategic, and most likely half of what players figure out was never designed in the first place. Storyline will not be major in the least. It will only be referenced in the beginning, and the end most likely. Although not originally in the design, I'm thinking I may have to add 3D models instead of sprites - this is due to my inability to draw, and my ability to model. Here are a couple models I threw together:
  39. 10 points

    My babylon js game

    Hello! I am making a step-by-step strategy game (like Fallout tactics, JA2) i uploaded demo on the site. You can test it now. i am working alone and it is my first experience with babylon engine. i am going to make online PvP battles (in the future), but now you can play with bots only. I made some levels and the boss in the end. Now you can: -run on the map, bots will run to you; -change the player (by clicking on the bottom icons); -shot the bots, kill bots (bots have simple ai and can kill you); -use 3 types of weapons (sword, gun and melee); -open the inventory, move items in the inventory; -finish your turn and see enemie's turn; -refresh browser window (server saves the state). -your players can hide in "invisible mode" (invisible icon located near the inventory icon) Some models do not have textures, it is ok. GUI is quite simple. AI is stupid now. (game is using php server for bot's AI calculatiuons, so you can't play offline) Thank you.
  40. 10 points

    Open-sourcing the Playground

    After ages of discussion, I'm thrilled to announce that the playground is now OPEN SOURCE Feel free to PR https://github.com/BabylonJS/Babylon.js/tree/master/Playground
  41. 10 points

    A Guide To BabylonJS

    This is a new Guide I am writing for BJS which I think (hope) is ready to be announced even though it is nowhere near finished. (Only just got going really). My original idea was to re-organise the pages of the BJS Docs into a way I preferred. Some of the pages in the Guide are a result of that first idea. Then I came across a questions in the forum that I though I could answer (on rotations) but it turned out my knowledge was not quite up to my own opinion of it. So I set out to try to really understand what it was all about. As I gained understanding (well I think I did) I started to put more explanation in the Guide based on that new understanding which I hope will help others. My aim now is to pick out parts of BJS that interest me, develop my knowledge and add explanations to the guide. Shaders are something I played with once so perhaps I will go for that next. My idea is that the Guide should be complementary to the Docs. Like the BJS Docs I generate my pages from MarkDown files which can be found at https://github.com/BabylonJSGuide/Generator Any feedback is welcome I'll just ignore the bits I don't like
  42. 9 points
    Edit 10: New "blog"-post: New post 27.2.2017 Edit 9: New "blog"-post: New post 25.2.2017 Edit 8: New "blog"-post: New post 21.2.2017 Edit 7: Gameplay Video: Video Edit 6: New "blog"-post: New post 8.2.2017 Edit 5: New "blog"-post: New post 1.2.2017 Edit 4: New "blog"-post: New post 21.1.2017 Edit 3: New "blog"-post: New post 14.1.2017 Edit 2: New "blog"-post: New post 6.1.2017 Edit 1: New "blog"-post: New post -- Hi BabylonJS-Community, Last friday I joined the Babylon.js 2.5 challenge. I decided to post my progress here. Maybe this will motivate others to join the challenge and I hope it will keep me motivated to finish the project I came up with. Also there might be some tips or things I find out that might help others. Here is my vision: A cooperative multiplayer action roleplaying game that is real time and is designed for a play session of about 15 minutes. It should offer content to a single player as well as a challenge that is only beatable by three or more players. This way you can just open up the game and try it out, if you like it you can coordinate with friends or people from the html5gamedevs board to beat the multiplayer part. Since I am going to make everything from scratch things will be created as simple as possible. This means: flat shaded low poly blender models. Here is what I have so far: The blue girl is the heroine the players control. The yellow slime is the first enemy, controlled by the server. The slimes idle around, if a player comes too close they begin to follow and attack the player once they are in range. Upon loosing all health the player dies. The green & red highlight at the end is the mouse over effect that is going to be used to indicate targets and if they are friendly or not. Some info on the tech: node.js server (using "ws" for websockets) that controls all gameobjects babylon 2.5 client using the browser webSocket object for communication Communication is done via sending JSON objects over the websocket. Since I struggled a bit putting text on billboards, here is a small playground showing my solution: Nameplate Playground I also ran into a small hickup with the highlight layer, using the it together with cloned meshes: Cloning a mesh does not generate a new unique id. If you add one cloned mesh to the highlight array all clones will be highlighted. The solution I found: Set unique Ids (mesh.id = …) for all cloned meshes. That's it for now. Hopefully I will have more to show next week.
  43. 9 points

    SPS experiments

    Hi, People usually love the Solid Particle System (aka SPS). Some of them sometimes ask for new features like the ability to extend it once created (coming soon) or for some extra speed by the ability to disable some computations. I made some study about how things could get faster. The short answer is : go to a lower lever in the implementation (replace the arrays of objects by typed arrays of floats, for instance), then use if possible other processes (GPU or workers). Well, here are the current status of my prototypes, so you can compare on your computer and browser the differences. The SPS of reference is really big, filled with 40K (yes, 40, 000 !) boxes and tetrahedrons. It's far more than we usually ask to a SPS with animated solid particles in the PG examples you could find in the forum posts. So your browser may suffer a bit ... Reference legacy SPS : http://jerome.bousquie.fr/BJS/test/spsReference.html Then comes the lighter typed array based version : http://jerome.bousquie.fr/BJS/test/spsBuffer.html As you can notice, it's a bit faster. Not only because of the usage of buffers/typed arrays, but also because it has less features than the legacy SPS for now. Let's go on... [EDIT] (from here, your need to have a browser with sharedArrayBuffer enabled) Here comes his new friend, the worker based SPS : http://jerome.bousquie.fr/BJS/test/spsProtoWorker.html This one is really faster. In this version, the particle logic (what the user want them to do) is still in the main thread and the worker only computes the transformations (the final vertex coordinates from the particle rotations, positions, scaling values, etc). At last, here's the second worker version : http://jerome.bousquie.fr/BJS/test/spsProtoWorker2.html It looks faster ... at least on my browsers. In this last version, the particle logic is deported in the worker. The main thread only carries for updating the mesh from the vertex buffers. In both worker versions, the worker computations are decoupled from the render loop. This means that the worker computes, then answers the main thread it has finished and this one just order it to compute again, whatever the render loop is currently doing at this moment. The render loop just reads the data currently updated by the worker in a shared buffer (shared between the worker and the main thread) Next study step to come (not soon) : the GPU based SPS Please wait for a while until the frame counter stabilizes to the current average value if you run the tests.
  44. 9 points
    Hi beloved community, We're proud to announce that we've got a full support of the Windows Mixed Reality headsets AND Spatial Controllers in v3.1 : We even have very cool animation of the controllers to enhance immersion. We're also working on simplifying a lot the creation of WebVR experiences in Babylon.js via the VRHelper. Stay tuned. But using only 2 lines of code, we will soon be able to cover 80% of use cases David
  45. 9 points

    Shell Shockers

    http://shellshock.io My first BabylonJS project is a whacky multiplayer first person shooter featuring, well, eggs, of course! It's in very early development and still fairly rough around the edges, but it's super easy to jump in quickly and play. It's just been made public, so finding people to shoot may be a little hit and miss (pun intended). Enjoy! Facebook: http://www.facebook.com/ShellShockGame Twitter: https://twitter.com/eggcombat
  46. 9 points

    Dynamic Terrain

    Hi folks, Maybe some of you followed this topic for while : Well, now I'm proud to announce the fully documented first release of the Dynamic Terrain Extension : https://github.com/BabylonJS/Extensions/tree/master/DynamicTerrain Its documentation is one the same repo : https://github.com/BabylonJS/Extensions/blob/master/DynamicTerrain/documentation/dynamicTerrainDocumentation.md Have fun Some more demos and features to come
  47. 9 points

    PBR Breaking Changes

    Hello, After one year of the PBR Material, we collected most of the required feedback to make it Awesome. But unfortunately, this will go with some breaking changes.. I am really not happy to integrate them but they are for the best and I will fully document them. Knowing our backward compatibility Philosophy in BJS, I just want to give a long time ahead with our plan to ensure this will cause the lowest level of disruption on your projects. Strikeout tasks have been completed. First thing, is the migration of the current PBRMaterial in MaterialsLibrary under the name LegacyPBRMaterial to ensure that the ones among you relying on it can continue to find the current version as of today. This will not be fully maintained but mainly keep for reference during the time everybody migrates to the newer/greater one. Only urgent fixes will be addressed on it. As nobody seems to rely on them, the overloaded values used for debug but taking quite a big amount of code will be removed from the material. All the scalar values will be multiply by their respective maps like albedoColor * albedoTexureSampled (currently it is totally inconsistent and depends of the channel) The different channels will be renamed to map with the GLTF nomenclature (At least I will not have anymore issues in naming :-) ) to allow an easier adoption of BJS and less ramp up for everybody. For example, the material microsurface will be named back to glossiness and reflectivity to specular... All the Maths issues and bugs presents in the material will be fixed. The environment blur will be fixed through offline and/or loadtime GPU generation. (This should be compatible with browser not supporting both FullFloat and Texture LOD) A migration from full float to LUV is in our minds for the environment to allow the use of none full float buffers with HDR compatibility. UBO, Push Mode and the full sets of greatest new features will be added to the new version. A new light type will be created to ensure an easier management of the intensity value in PBR mode. I should not forget a lot here and I hope you understand the future change. This is planned to happen during this month so do not hesitate if you have any feedback, think about any blockers or other evolution you would like to see in. As a consolation gift for the breaking change, I can propose to add the pbr exporter in 3dsMax or blender ?
  48. 9 points

    New Terrain Splatmap Material

    New Terrain Splatmap Material (Based Off BABYLON.TerrainMaterial)... Supports up to 4 splatmaps using up to 12 textures for terrain painting. The new splatmapMateral.ts will be added to the the babylon Materials Library soon but check out how i am using it for native terrain support using the U3D BabylonJS Toolkit. [UPDATE] Sorry, but you will NEED the toolkit to use the new BABYLON.SplatmapMaterial... I had to move the splatmatting into my Scene Manager API available on BabylonJS/Extensions. The way i use splatmaps now hook into the native shader pipeline and pick up (or make available) all the standard PBR features plus all the ShaderMaterial features, plus Scene Component Life-Cycle... I then automatically generates all the splatmaps from the actual terrain data... All the code will be available ... Just NOT as a materialLibrary (although i guess i could make a lightweight version for manual usage.) U3D - BabylonJS Toolkit: Terrain Splatmap Material Overview Hey @Deltakosh , @Sebavan , @davrous , @RaananW , @Dad72 , @MrVR ... Hey guys please check this out... I am pretty proud of this... Its my FIRST venture into the low level shader parts (using the terrainMaterial.ts as a guide)... But i think it turned out beautifully
  49. 9 points
    Thanks Haha I know the feeling, I also had major performance problems in my first babylon projects. But here are a few pointers though that I learned over the months that increased performance a lot for me: MergeMeshes() and/or SPS for static objects is highly superior in performance to createInstance(). If I'd use instances for all the buildings/props/etc, the draw calls would be the same but the FPS would likely be < 10. This is because Babylon by default computes the matrix for every instance for every frame. mesh.computeWorldMatrix() was consistently at the top of the chrome profiler on my other scenes before I figured this out. The first point will also be also have a more drastic impact if you use texture atlases for your meshes, so even different meshes can be combined into one draw call. In case you have many meshes that move or billboard (like the cars and the lens flares in my scene) you will have to take shortcuts like only animating the cars close to the camera. The others are frozen by .freezeWorldMatrix(). Don't use .isVisible = false; rather use isEnabled(false). Don't use rays, or only one per frame. Use mesh.isPickable is false for any mesh that doesn't need interaction. Any mesh that is static, use mesh.freezeWorldMatrix(); Any material that doesn't change, use material.freeze(); however its glitchy for any mesh that is animating. Sometimes I even remove meshes from the scene.meshes array in case I need them for something (like a parent to other meshes) but they will never be visible nor will they ever move. Saves another mesh babylon will have to iterate over every frame. Use the browsers' profiler to see what functions consume the most time. Hope this helps your project(s) With all these in place I think I can fill the whole map with more buildings and foliage without running into serious performance issues, but we will see.
  50. 9 points

    The Man From Babylon

    Well this little demo started when I began investigating IK rigging in Blender and then exporting to a .babylon file. But I saw a video on Youtube (in French about BJS -I think) and it evolved from there. The rigged figure was made in MakeHuman and exported to Blender. I then added a a simple Ik rig and removed a number of bones from the MH rig. On export, the final number of bones - 26 The scene, once loaded, is then driven by the sound script. An audio file plays and when it is finished the camera switches and a new audio file plays ... and repeat. The video I mentioned above suggested humour, so, I tried ... A question gets asked - and I have no idea what the answer is. But one person on this forum does Tested on XP (Firefox), Win 7 (Firefox & Chrome) and Win10 (Edge, Firefox, Chrome). The Man from Babylon This is my 1000th post - I hope I do not cause any offence. cheers, gryff