Popular Content

Showing most liked content since 09/20/2017 in all areas

  1. 11 points
    Samuel Girardin

    New Physics Engine Progress

    Hi, Few news about energyJS, It's still in dev. Here is a quick very alpha preview with examples. This is not a bjs plugin version. @RaananW worked one year ago on the plugin. We need to talk about that, For the moment it reproduces more the c inteface of ODE c++ project(http:// www.ode.org). It's quite usefull, ODE documentation is really good, and I kept all the method name. Energyjs is port of Open dynamic engine to JS with EMSscripten (http://kripken.github.io/emscripten-site/) . Tuto1_friction Tuto2_friction2 Tuto3_bounce Tuto4_rolling_friction Tuto5_rolling_friction2 Tuto6_contact_cfm_erp Tuto7_contact_cfm_erp2 Tuto8_motion Tuto1_auto_disable_body WoodMachine BallJoint Trimeshes Vehicle (maybe you need to refresh the html page - loading is async and I forgot to fix that,, same for v+trailers) Vehicle+trailers (arrow key to control the vehicle, d to flip the vehicle) It's only cpu dependent, maybe a little more faster than oimo and canon. Really well documented on ODE's part. You may have a TOTAL_MEMORY bug, search '167108864' in js/energy.js and increased this value. This is just a start. I will publish this week the the typescript dev commented on github .
  2. 8 points


  3. 8 points
    Hi, @Deltakosh and I were delivering several session during a big French event named Microsoft Experiences 17. We've done a couple of babylon.js related session. One of the most popular session is named Coding4Fun and I've created a small demo scene intro acting as the agenda of the session. You'll find it there: It uses our new GUI engine, some cool Post Processes like VLS/Godrays and so on. I've also composed the music for it. Thanks to @Stvsynrj who has created most of the awesome content used in this demo! During the same session, I've been building a fun WebVR experiement I'll share later on my on blog Enjoy! David
  4. 8 points


    Dear Babylon.js Team, I came across babylon.js in February of this year. After sticking with Python for 10+ years to satisfy my hobby and work needs, babylon made me say: that's it, I am learning javascript now :-) So after about 7 months of tinkering I just put my hobby website out there tonight (rea3d.com). I probably did everything possible wrong - I am sorry for all the terrible inefficiencies and clumsiness you may see on the page. There are only so many things one can absorb at around 10pm after a long work day :-) Consider it a work in progress and hopefully it will only get better :-) Anyway I wanted to thank you for creating babylon.js. It is 100% amazing. I wish something like this existed way back when I was in college and had all this free time :-) Thank you!!
  5. 8 points

    Full NPM support for BabylonJS 3.1.x

    Hello dear people, As already hinted in some other topics, I have finished the implementation of NPM packages for BabylonJS and its submodules. Starting babylonjs 3.1.0-alpha3.4 you can use NPM to include BabylonJS and its modules in both JavaScript and TypeScript projects. The available npm packages can be found here - https://www.npmjs.com/~babylonjs . Full usage is currently being documented, but here is a simple way to get started: First install the latest babylonjs npm install --save babylonjs babylonjs-gui babylonjs-materials then, use those modules in your JS/TS file: import * as BABYLON from 'babylonjs'; import 'babylonjs-materials'; import * as GUI from 'babylonjs-gui'; let engine = new BABYLON.Engine(.........) I will update here when the documentation will be ready.
  6. 6 points
  7. 6 points

    Car Configurator

    Hello guys. I'm extremely happy to share with you my last challange for https://www.smarteam3d.com. Please feel free to play with it, test it, report bugs, come with suggestions. Here is the link : https://www.smarteam3d.com/portfolio/car_config.html Thank Babylonjs for making this possible. PS: It works pretty well on mobile device too, but there i have a problem with the GUI, and I'll expose it on Questions section.
  8. 5 points

    SPS Particle Depth Sort

    As you know, the SPS is a standard mesh. Applying the transparency to a standard mesh leads to well-known issues ... not when visualizing other opaque or transparent meshes through this current transparent mesh, but when visualizing some parts of this transparent mesh through itself. Indeed, when passing the mesh geometry to the GPU, this one draws the mesh in the order the mesh facets are sorted in the indices array : first triangle, second one, etc ... whatever the position of the camera. The shader only respects the geometry order and this geometry is fixed. As the SPS is a standard mesh, it has the same issue when dealing with transparent particles (rotate the camera) : http://playground.babylonjs.com/#EPBTB7#3 A new feature allows now to sort the internal mesh geometry live according to the current camera position : http://playground.babylonjs.com/#EPBTB7#2 It sorts the SPS particles only, not all the facets, for performance reasons. To enable it, just create your SPS with the parameter enableDepthSort to true. By default, each next call to setParticles() will sort the particles according to the camera global position. If for some reasons (immobile camera and sps), you want to stop (or reactivate) the sort on the next calls to setParticles(), just set the property sps.depthSortParticles to false (or true to reactivate it) // create a particle depth sort enabled SPS var sps = new BABYLON.SolidParticleSystem("sps", scene, {enableDepthSort: true}); // then later, only do ... sps.setParticles(); // and the particle are depth sorted each call // We can skip the sorting at any time (or reactive it) : sps and camera not moving anymore sps.depthSortParticles = false; // true by default when enableDepthSort is set to true initial post : Documentation coming soon ...
  9. 5 points
    Here we are: http://doc.babylonjs.com/generals/nullengine
  10. 5 points

    Phaser Particle Editor

    Hi folks! Let me introduce you phaser particle editor. This tool helps you to create phaser particle effects visually. It is of course open source and you are welcome to contribute! Editor also has plugin to help you create particles based on JSON data generated by Editor.
  11. 5 points
    click on door to open and close them ! goo.gl/BswF63
  12. 4 points

    Lightmap With OcclusionMap Support

    Hello we need to first release a version of your toolkit. I cannot keep adding features without giving the export to the community. Please stop adding new feature just for a while, publish the tool and the documentation (you can even call it 0.5 if you want) Because so far, I can't even test what I add for you
  13. 4 points
    Actually most of the code is done Here is a node.js sample:https://github.com/BabylonJS/Babylon.js/tree/master/tests/nullEngine
  14. 4 points

    Ambiani Projet

    Hello, After 1 year of work the project is visible. For the full Gallic coins of the Alfred Danicourt Museum in 3d (400 models). You can consult the site on http://www.ambiani.fr/ (an English version to come ...) You will also find an application to hit your own coin online (http://www.ambiani.fr/le-petit-atelier-du-statere-gaulois/) All this possible with the great 3d engine BABYLON.js !!! Thanks to you for your wonderful engine.
  15. 4 points
    Just to bring more precision from the actual behavior, I would say shadow is like karma: http://www.keepcalmandposters.com/poster/5597154_keep_calm_because_karma_is_a_btch Precision is an important part of it and there is no single method that works, but a bunch of different more or less adapted to your scene. To have an adaptative solution we are planing to integrate cascaded shadows at some point to help with bigger scenes. In your particular case, you could make the point light act as a spot light in a self shadow like mode which should solve your issues a bit like this: https://www.babylonjs-playground.com/#ITTNDX#10
  16. 4 points

    Create sphere from height map?

    http://www.babylonjs-playground.com/#1ZEABJ#54 but that work for me
  17. 4 points

    BABYLON.Augmented Reality ... in AR.JS

    Hi @Dad72 : ) Great idea on a tutorial! Backs up dump-truck... Beep! : ) UPDATE: thoughts collected & terrible jokes removed, mostly... The trickiest part of AR, at first -> was navigating the support across different devices. You need to get a 'proven-stack'. Because... AR is asking for camera context access to OS (...) -> and not all browsers play the same way (sound familiar). So the biggest win was to find a confirmed 1st Prototype, getting that first AR working... . After that is a "now what" moment. But first, you should anticipate a few -> "peculiar-AR-issues" encountered in 1st Prototype . The Laptop was easy, Chrome worked. Then tablet I needed Explorer, and phone (I got a new one, ... pixel) : ) There is a list of supported devices, on AR.js readme. good read. .... It is a wild-west of options. Hard to tell how all (core, kit, webkit, tango, aruco) options exist across browsers. History repeats itself... Getting that first AR prototype has a few tiny hurdles with "marker-targeting": - distance, lighting, bending the paper,.... printing out the target, and which target to use? Hiro. For example, one test, do NOT put my thumb over target! Lol. Simple but important peculiAR-issues..... to be anticipated. After a successful render, then... how close to hold the device to the marker to device. Far away is sometimes good. Too close stops render detection. Just like... too far stops render detection! That surprised me - too close fails... Another one ... the camera will show quickly, but if the framework is still loading in the background... the experience is a delayed non-render. Which may need a background loading indicator. : ) Probably easy.... Last, confirming which way was UP turned out to be a big deal.... because, as usual - it was I who was confused (imagining AR which sticks to walls [lol]). Seems simple, not always. The Z or the scale can also be off pretty easily. Then - all things hidden behind camera (joy, pure joy... : ). Ok getting down to INSTRUCTIONS: How does it work. 1. Check out AR.JS, download it. 2. Find "HIRO" marker (somewhere down in ARJS, or google). Print that out.. 3. Inside AR.JS there is support for BabylonJS down in a folder: babylon.js/example 4. Inside that folder is a basic example! Run that in a server. localhost. Click Yes, Access Camera. Show the camera the Target = render on target "marker". Wait! It might work... : ) - For example...make sure light is good. Not too close. Not bent. And thumb isn't in the way. And in dev - that RENDER Z IS NOT BEHIND CAMERA - st(ar)angely common. - Look for stuff like that. 5. There are three new demos almost ready (solar-system, PBR, & forest-fire), for BABYLONJS/ARJS. 6. Once you get 1st Prototype running then - what now? - challenges like "hiding the skybox". Water reflecting hidden sky? Scale parentMatrix down... (ah,ha!) 7. Still you need to check "cross-device" compatibility... like run a local server to get a demo on tablet... 8. FYI: Two Concurrent Experiments: 9. BABYLON Extension - awesome, although remember those "peculiar-ar-issues" - they are back! AR is weird for packing into BABYLON extension. In progress... - Suggestions on how to build BABYLON extensions welcome! Whiteboard time... 10. Another experiment: Loading ARJS/BABYLON into Ionic App. What I am working on now mostly... - I wonder if Camera Context is improved from within Native App Context - it should be. Right? Derp, Jokes removed...: ) Which engine to choose...? That is a thing!?! Do I have to choose an engine, or how does that work? ... question. default arwebkit - go! But also configure out how to render on a table (tango?, arkit?, core?). And there are others, just saw a new one the other day... IMPROVED: previously edited late night writing... :] UPDATE: more jokes removed... :]
  18. 4 points
    I'm excited to announce the open-sourcing of PlayCanvasAR - a cool extension to PlayCanvas that enables browser-based AR games (and other apps), even on mobile: https://github.com/playcanvas/playcanvas-ar Here's a little video: We tweeted about it here: https://twitter.com/playcanvas/status/913212518956384256 Please help us spread the word with a retweet if you like what you see! And let us know what you think!
  19. 3 points

    BABYLON.Augmented Reality ... in AR.JS

    SOLUTION: Babylon AR in Ionic App ~ with HTML5 WebCam... That was intense... !
  20. 3 points
    You could use CustomMaterial: https://playground.babylonjs.com/#AFRP1L
  21. 3 points

    [WIP][Phaser] They Are Everywhere!

    This is my newest project with Phaser, 2D platformer which aims to bring the best from the present and the past in one game. Curentlly it is still WIP but you can see how the development progress is moving on. Some of you may have seen it on twitter but for those who didn't here are a few gifs: As far as tools and frameworks are concerned I'm using: Phaser - for coding Aseprite - for pixel art Tiled -for level design I'm alone working on this game, graphics, programming and design, so if you see any flaws please do not hesitate to criticize me. Cool part about being solo dev beside not having anyone to mess with my ideas is that when I get bored doing programming, I draw assets for my games, when I run out of inspirations for drawing I design levels, when get tired with that I move back to programming and so on! I hope that playable demo will be available by the end of the month. Thanks everyone for taking a look. Cheers!
  22. 3 points
    Hello This is my first HTML5 game, please play and share your ideas. "Kickin' it : with freestyle masters" is a simple yet challenging soccer ball juggling game. You are controlling the player to keep the ball on air as long as possible. You need to tap ( press keys for pc ) just as the ball is about to hit your foot. Pressing too late or too early and will miss the ball. Mobile : Tapping the left of the screen kicks out your left foot, tapping the right kicks out your right foot. PC : Pressing the left/A of the keyboard kicks out your left foot, Pressing the right/D of the keyboard kicks out your right foot. Unlock new player by collecting coins Share score and challenge your friends Play Demo https://putrefied-aptitude.000webhostapp.com/kickinit/ Thank You Francis Davidson
  23. 3 points
    Ok so i happened to encounter a wild @Wingnut out and about and he actually had a great solution. No need to use buttons or anything crazy like that, instead there is a isPointerBlocker property that works just fine on GUI.Rectangle. http://playground.babylonjs.com/#84Q5FX#3 So big ups to our nutman for this tip!
  24. 3 points

    Phaser with Kotlin

    Hello. I've made a repository with a template and ported 568 examples of Phaser with Kotlin. Kotlin is a modern statically typed programming language that compiles to Javascript and now it can be used to code Phaser games! https://github.com/hiperbou/kotlin-phaser
  25. 3 points

    Compiling bjs source

    Perfect. You guys did a wonderful job there, it's very easy and convenient to modify and test bjs source.
  26. 3 points

    Github Universe

    Hello, I am lucky enough to go next week with @RaananW at the Github Universe event: https://githubuniverse.com/ We ll be there with cool WebVR and playground Demos chatting about how Babylon is Awesome. So if you are going there, please, come and meet us, we ll be all day the 11 and 12 in the Explore Lounge :-) In case you are not going, you can still take part in the challenge : https://www.babylonjs.com/githubuniverse.html
  27. 3 points

    React Fiber Renderer

    I created a very early, very alpha React renderer for PIXI. There's some other projects out there but I wanted to start from scratch. You can get it at https://github.com/dakom/react-pixi-renderer However, be warned, performance kindof sucks if you use it for lots of nodes. See this test/demo I wrote that tries to figure out where the bottleneck is: https://dakom.github.io/react-renderer-test/ Turns out that the bottleneck is basically React itself and the size of the tree. The React-pixi-renderer could be really useful for declaratively describing a few of a small number of items - I get a solid framerate for like <4000 bunnies on desktop. If performance is an issue for lots of items, you can squeeze more juice out of it by constructing the architecture so that the edge nodes render null rather than proper elements, though that means ditching the inherent pipeline and managing your own objects. That technique can work with any renderer and using ReactDOM vs. this custom renderer, so there's no real point in using this renderer if you go that route. Have fun!
  28. 3 points
    Hi Chimaira... welcome to the forum, good to have you aboard. (Just wanted to reciprocate your nice greeting.) I'm not in agreement with these guys... claiming that bias is the solution, here. (I've been known to be wrong quite often, though) If we push the ground into the shadowMap with that .004 bias, things REALLY go to hell. Something doesn't feel right with the framework, here, imho. Granted, I don't use shadows very often, but NEEDING TO deal-with this micro-bias adjusting during scene assembly... would quickly turn-me-off to using shadows. Our shadows system should be MUCH easier to deal-with.... than this. If I make enemies of my heroes by saying this, that's tough. I am going to hold my ground until proven wrong. Never should a shadow be cast toward the light, and as far as I can tell, that is what is happening, a bit. *shrug* Throw stuff at me, at will, guys.
  29. 3 points
    Another way would be to rely on stencil buffer and play a bit with the different shapes in the scene: https://playground.babylonjs.com/#XU86GQ#2 not the most efficient but depending on your use case, could be the fastest to put in place.
  30. 3 points

    Visual Novel Engine RenJS

    Hi! I'm a developer from Argentina and I just released a visual novel engine based on Phaser and inspired by Ren'Py, called RenJS. The stories are written in yaml on a list of actions, and then interpreted and executed with Javascript and Phaser. It's easy to use by non programmers and it's super easy to extend and modify for anyone that knows a bit of phaser. I invite you to check the tutorial game I made with the engine itself in https://lunafromthemoon.itch.io/renjs, you can also get the code from https://gitlab.com/lunafromthemoon/RenJSTutorial, download it, play it locally and grab the files to make your own visual novels. There's no official documentation of it yet, but I'm working on it. I hope to get some feedback from you all, thank you!
  31. 3 points

    [Phaser] Jelly Haven

    Hey guys, I just wanted to let you know about my first HTML5 game made with Phaser! It is an action-arcade game in which you control a jellyfish going through the space gathering shiny gems and avoid being hit by dangerous obstacles like meteors and rockets. Link to game: http://37dev.ga/jelly Quick Gameplay: https://youtu.be/nRIHGlr1X64 The game starts off slowly but it gets really fast paced as you purchase upgrades from the store which helps you survive much longer. Endless fun game with great performance. Optimized for mobile devices but fully playable in desktop as well. Audio support for all mobile operating systems. Easily localized as the texts are stored in a .json file. Saving/loading game with cookies system. Translated in 9 languages: English, Russian, French, German, Italian, Spanish, Portuguese, Turkish and Romanian. The game is currently looking for sponsorship and has not yet been published before. Let me know what you guys think! Enjoy!
  32. 3 points

    Rotating a heightmap with physics

    @RaananW... @Wingnut... seriously, you guys are the best.
  33. 3 points

    Circle curve from beziers?

  34. 3 points
    Found it by myself - so in case anyone will find it handy, you have to use also - along with autoPreventDefault = false: renderer.view.style['touch-action'] = 'auto'; or any other value according to CSS touch-action to overwrite the default value 'none'
  35. 3 points

    npm update

    Hi, before I finish the documentation, here is a quick overview: babylonjs 3.1.0-alpha3.4 and all of its modules (materials, serializers, loaders, GUI, post processes and procedural textures) are now npm (and webpack) compatible. To use it: npm install --save babylonjs babylonjs-gui If you are using TypeScript, the typing needs to be added to tsconfig.json: .... "types": [ "babylonjs", "babylonjs-gui", "iAmTheWalrus" ], .... Afterwards it can be imported to the project using: import * as BABYLON from 'babylonjs'; import * as GUI from 'babylonjs-gui'; The next step is you programming a mean game and showing us what came out!
  36. 3 points

    Game list of phaser games

    Hi everyone, here is my latest, humble weekend project: pendulum - A physics-inspired 2D browser game for both mobile and desktop that involves an alien swinging from a rope to avoid obstacles in randomly generated, fully destructible levels. Click here to play! The game is by no means finished, but I still hope you enjoy it! If you want to contribute, check out the repository...
  37. 2 points

    [WIP][Phaser] Dreams vs Nightmares

    This is my latest game - Dreams vs Nightmares http://build.games . Nightmares are attacking fluffy Catnap and dreams defend it. The game is in Plants vs Zombies style with 6 levels of gameplay. I'm planing to add more levels and introduce some new defenders or attackers each level. Any ideas are welcome Dreams vs Nightmares are build with Phaser. And I used online collaboration tool MyGameBuilder. Also there is a community contributing with pixelart and music which was quite handy for me. Btw, link to a project if you find it interesting https://v2.mygamebuilder.com/u/guntis/projects/Dreams vs Nightmares?_fp=chat.P_fSriL4uw2W4kY8Liu_ Printscreen from intro animation Some action in last levels
  38. 2 points
    It is miraculous to share a creative experience with anyone, anywhere - without language barrier, cost, or perceived complexity. Browser games are an example of such simplicity.
  39. 2 points


    so great (as usual) !!!
  40. 2 points

    Way to Fit one Mesh into Another

    Let A be the mesh to be split and let B be the mesh that goes in the middle when A is split. With CSG overlap B on the right hand side of A and cut away to form C. With CSG overlap B on left hand side and cut away to form D. Position and join C, B and D in that order, C to left of B and D to right of B. Because of how parts cut out CBD will fit snuggly and merged to form a new mesh. At least we can hope.
  41. 2 points
    Got it: https://www.babylonjs-playground.com/#1V3CAT#267 I copied the code concept from @SvenFrankson's awesome planet builder https://github.com/SvenFrankson/planet-builder-web; He has separate mapUV functions for side/top, but because of how one texture maps to multiple different cubes - top/bottom are the same in his project. I don't think it's a substantial enough portion of the code to maintain the MIT license. If you're not really wrapping a UV cube with unique sides then you can optimize a lot in your texture (ie: your PNG could be 1/4 the size) and even easily have multiple textures in the same image if you are creative. Can you work your way backwards from this code to build a version with MeshBuilder? Would like to see that - I went a bit bonkers trying, but that was before I knew how the vertex data worked internally. I put some comments in the PG to show.
  42. 2 points
    I think you should write your doc directly in our doc.babylonjs.com This could be useful for a lot of people
  43. 2 points
    now use it to fix this: Uncaught ReferenceError: canvas is not defined at main.php:216 You need to start helping yourself.
  44. 2 points
    You can read about createElement in MDN (for example): https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement the 1st variable should be a tag name (canvas) and not an id or a name. MDN is your friend, search there and you will see that you can find answers to all of your JS questions.
  45. 2 points

    The Wingnut Chronicles

    Hey @Wingnut, here is your demo working with latest - https://www.babylonjs-playground.com/#1ND6TH#15 . The problem is the newly introduced changes in the parenting system. I need to see what went wrong there. Line 82 (adding a rotationQuaternion to the child-mesh) was the fix, if you are interested
  46. 2 points
    Both actually work the same in this case, as the namespace is being declared by he typings and you are serving the js file yourself. If you want to use webpack OR want to change BABYLON's namespace to something else (dunno, maybe BJS or babylon, or BAB, or BetterThanThreeJS), you need to use the namespace import.
  47. 2 points

    How Would I Move My Player?

    You're recreating the player at coordinates (0, 0) on every frame. Try creating the player just once somewhere outside of "draw" and then move line "player.create()" to after the lines that update the player's position (and consider renaming "player.create" to something like "player.draw"). Move the canvas and context declarations outside of draw as well because you don't want to waste CPU cycles doing that for every frame.
  48. 2 points
    Arcade.Body#setSize, examples/v2/arcade-physics/offset-bounding-box Use dummy sprites as children. There are a few, check the Geometry classes. You could apply your own in the filterCallback or collideCallback arguments to collide/overlap. Phaser.Physics.Arcade#skipQuadTree
  49. 2 points

    Grid Material Offset

    Np, If you send me the shader code I ll wire the properties in the ts file and you ll see how it is for the next time :-)
  50. 2 points

    Physics Movement

    HOLY SHIT... I FOUND THE PROBLEM... WAS SO FUCKING TINY... Started try to port all my code to your playground and then I saw it.... If moving via Zdir or Xdir ... FRICTION = 0 ELSE FRICTION = BASEFRICTION... I tried setting my player (which had a constant friction 0.1) to just ZERO (constant ZERO) and the MUTHER FUCKER (pleas excuse my language) MOVED PERFECTLY.... Such a Small thing like friction = 0.1 while moving fucks you up... I am gonna implement switching from the BaseFriction giving at design time back and forth to ZERO based on whether I am actually moving or not... But I think that it.... That took TWO WHOLE forum post pages to find that shit.... But FUCK... Its FOUND