Popular Content

Showing most liked content since 01/23/2018 in all areas

  1. 16 points

    Glow Layer

    Hello, It has been a while I did not introduced a new feature in BJS so as the higlight layer was famous, let s introduce the glow layer: http://www.babylonjs.com/demos/glowlayer/ Documentation is available here: https://doc.babylonjs.com/how_to/glow_layer
  2. 14 points

    GPU particles

    Heya team!! I'm proud to announce that the GPU particles feature is now available! Documentation: http://doc.babylonjs.com/babylon101/particles#gpu-particles Interactive demo: https://www.babylonjs-playground.com/#PU4WYI#2 Please note that this feature requires webGL2 or it will fallback to CPU particles
  3. 11 points

    Stupax - Sidescroller game

    Hi all, I would like to introduce Stupax: A different sidescroller game, where you are not the guy, you are the level! In fact you control a movable platform using the arrow keys or your gamepad (Gamepad API) to help the guy (namely Stupax) to get through the levels. You can play the game here: http://mbarde.bplaced.de/stupax/ Controls: Arrow keys / Gamepad 'R' for level restart 'ESC' pause game and open menu Create and test your own levels here: http://mbarde.bplaced.de/stupax/editor.html You can find further information on my website and view the source code including contributions for the music, sounds and textures on GitHub.
  4. 8 points

    360 videos

    Hello team, I'm happy to announce the availability of the Video dome! It is a new utterly simple tool to display 360 videos in your scene (with support for FOV change and VR of course) Demo: https://www.babylonjs-playground.com/#1E9JQ8#7 Doc: http://doc.babylonjs.com/how_to/360videodome
  5. 8 points

    Solid Particle Parenting

    Hi Folks, Here's a SPS new feature : the particle parenting. Simple to understand : once a particle has a parent, all its rotation, position and pivot are then expressed in the parent particle local space. Simple to use : sps.initParticles = function() { for (var i = 1; i < sps.nbParticles; i++) { // declare each previous particle as the parent of the current one sps.particles[i].parentId = i - 1; } }; sps.updateParticle = function(p) { // each particle will rotate for +0.001 in the already rotated parent space particle.rotation.z += 0.001; } examples : the green box is parented to the translating red one, it also rotates around a local pivot http://jerome.bousquie.fr/BJS/test/spsParenting.html 600 boxes, parented per groups (stems) of 10, each rotating around its pivot : http://jerome.bousquie.fr/BJS/test/spsParenting2.html
  6. 8 points

    Local cubemaps

    You cried for it so we did it Don't know why you may need local cubemaps? https://community.arm.com/graphics/b/blog/posts/reflections-based-on-local-cubemaps-in-unity Doc:http://doc.babylonjs.com/how_to/reflect#using-local-cubemap-mode Demo: https://www.babylonjs-playground.com/#RNASML#4
  7. 8 points

    Street Hoops 3D game

    Here's a little game I've made: https://games.famobi.com/new-games/street-hoops-3d?technology=web 2D physics handled by box2d and net physics by cannon.js
  8. 7 points
    Hello babylonJs colleagues. This is my latest project. Have a nice Day, Thierry, Paris http://free-visit.net/index.php/fr/23-modules-positions-50/building-entrance-webgl-2
  9. 6 points

    Vue integration like A-Frame

    If you haven't yet seen A-Frame yet, you should check it out. The gist is that you use HTML tags to define your scene. I was working on porting A-Frame to Vue because the devtools are amazing and the components are expressive and makes your app really reactive. I prefer Vue over React since it's simpler and I don't have to work in JSX. While working on integration with A-Frame I started to notice that the overlap between A-Frame's entities and Vue's components became rather cumbersome and Three.js's API and documentation made the situation worse. I noticed the Babylon.js project shortly after and discovered how awesome it is. I then decided it would be better to make my own ECS using Babylon.js with Vue components. As of right now I have Scene, Entity, Mesh, Light, and Animation components created. Here's a sneak peek: And the code for the scene written in Pug: I'll keep this thread updated as I continue progressing on the project. Let me know if you have any ideas or feedback. You can watch me code it on my Twitch stream this Monday from 2-10pm CST. I just started this project a couple days ago, so it doesn't have documentation yet, but you can see the code on Github or grab it off of NPM as vue-babylonjs
  10. 5 points

    BranchGeometry ( GeometryBuilder )

    editor and SVG Path under progress https://www.babylonjs-playground.com/#1ZEABJ#76 https://www.babylonjs-playground.com/#1ZEABJ#77 https://www.babylonjs-playground.com/#1ZEABJ#78 https://www.babylonjs-playground.com/#1ZEABJ#79
  11. 5 points
    I've just finished the morphing demo that I've been working on. Thanks everyone for your input! (especially @NasimiAsl who is the grandmaster of shaders) What I'm trying to demonstrate here is morphing not just vertices, but textures as well. I got this idea from Wrap3 which has this feature. This is important with faces because redness and wrinkles will sometimes appear when you tense your face. Unfortunately there is no built-in feature to do this but we were able to pull it off with some extra shader code. I would've loved to add some specularity to the skin but I couldn't figure out how to do that with the custom material. I know this is extreme detail but its a good test. If the player is in the distance then it wouldn't be necessary. I added a "Powered by Babylon.js" sticker so everyone knows that Babylon.js can do cooler stuff than Three.js hehe Feel free to use the source code. http://punkoffice.com/facial
  12. 5 points

    Why don't the ball drop from gravity

    Hiya K! .applyGravity is really only for cameras. It is part of a built-into BJS system for first-person-shooter games. That system also includes .checkCollisions, .moveWithCollisions(), and mesh/cam .ellipsoid. In general, it is used for cameras... falling, hitting ground, and hitting mesh (by cursoring) whose .checkCollisions = true; This built-in system has no friction, mass, or restitution (bounce). Now, about 3rd-party physics engines. BabylonJS has two physics engines that it interfaces-with... OimoJS and CannonJS. They are available as external files, which are already included into our fantastic BabylonJS Playground application. So, let's play with one. https://www.babylonjs-playground.com/#110CDL#5 Here's a great little heavily-commented playground... which uses BOTH camera.applyGravity system, AND Oimo physics engine. When you first run the scene, you will see the camera drop to the ground and stop... without a bounce. No 3rd-party-authored physics engine used for the camera drop. But, SIMILAR-TO physics engines, there are some "impostors" involved. They are ground.ellipsoid and camera.ellipsoid. You are allowed to change their size/shape, somewhat (see sidenote). Sphere.ellipsoid exists, too, but we have turned-on the Oimo physics engine for sphere, so we will be using a DIFFERENT kind of impostor for him... called a physics impostor. I wrote a recent post with examples of HOW to "move" a mesh with a physicsImpostor installed. Ok, back to OUR playground example... both the ground and the sphere... have physicsImpostors activated, and the scene has physics enabled... so the ball is bouncing, thanks to Oimo. Ground, camera, and sphere... have .ellipsoid property, but again... not used by physics engines (for sphere bouncing on ground). Just for fun, let's make the camera.ellipsoid much taller. https://www.babylonjs-playground.com/#110CDL#4 See lines 74-76. The camera.ellipsoid started with a 0.5, 1.0, 0.5 ellipsoid dimension. We made that 1.0 into 25.0. Wow! Notice how the camera hit the ground much sooner, and stays 50-units above the ground? The camera STARTS at 80 units above ground (line 9). Notice I said 50 units above ground and not 25 units? That's because... the values of .ellipsoid are "radii". The values are the radius of the ellipsoid. So with an ellipsoid.y = 25, the total height of the ellipsoid is 50. Understand? Cool. sidenote: I tried adjusting ground.ellipsoid to a height of 25/50, but that didn't work. Apparently, with camera.applyGravity... it ignores the size of ground.ellipsoid. I think I know why... but we'll talk about that on another day. The main thing... is to understand WHEN and WHERE to use the BJS built-in collision system (.ellipsoid, .checkCollisions, .moveWithCollisions(), cam.applyGravity, and cam._needMoveForGravity), and... WHEN and WHERE to use physics engines. It takes some time/experience to know when it is best to use one or the other (or both). BJS-built-in collision system is much much faster than physics engines, but no mass, friction, and restitution (bounce) calculations. Physics engines are much more "realistic", but more performance costly. Also, you COULD "fake" the gravity for the sphere (without using EITHER collision/physics system). https://www.babylonjs-playground.com/#110CDL#3 See the little "render loop" code in lines 33-37? Yep, we slowly drop the position.y of sphere... until it is 5 units above ground. No ellipsoids, no physics engines. We still have .checkCollisions on camera and ground... so the camera drop still works. Okay, that's a whole lot of learning in a single comment, eh? It is easy for users to get the two systems confused with each other. But both systems... are pretty cool... and handy. Even the fake gravity for sphere... is useful. I hope this helps. Study and experiment with that playground scene. Grab a zip and take it home... see if you can scare the dog. Make edits and more saves... you can't hurt ANYTHING in the playground. When you discover something cool, save the playground, copy the URL, and show it to us. We LOVE looking at scenes, especially playground-based scenes. Have faith-in and patience-with yourself. And have FUN! In no time, you will be a forces and collisions expert.
  13. 5 points

    [Phaser] Pop Soap -simplified match 3 game

    Hey guys, we've made our second HTML5 game. The game itself is written in Phaser. It's a simplified match-3 game (tile popper) with 10 levels and the endless mode. Each level has 3-star rating and it's own unique challenge. Unlocking a challenge gives you an achievement. The endless mode is a beat-the-highscore type of level. We're looking for a sponsor that might be interested in licensing it. You can check it out here: http://overhype.com/games/pop_soap/
  14. 5 points

    OfficeGames announcement

    well I did not realize the link I posted was broken... I will fix it when I get into work this morning and that above post will make a lot more sense. @jerome, *UPDATE* I fixed it and it is "playable" now. Just gotta finish up some rule logic with winning/losing and drawing new cards. Then its activate the async features to stop the DOM from hanging on initial compile. Then make it look nice and start adding what ever flair. If you don't know the game rules are: don't go off the edge of the board, don't run into another player (same path other paths that cross are ok). you can rotate a tile if you have it highlighted and use the arrow keys.
  15. 4 points

    #ifdef video on Babylon.js & WebVR

    Hi guys! We've done a cool & fun video on how to create a full WebVR experience using 2 lines of Babylon.js: Feel free to relay it on social networks David
  16. 4 points

    Generic platformer boilerplate

    I created a Phaser 3 - ES6 - Webpack-repository a couple of months ago (or more accurately made a quite ugly update of an existing repository). A few days ago I replaced the simple bundled examples with a, let's call it "generic platformer". This is the result of exploring the Phaser 3 API and I plan to continue to improve it (but not create a complete game because of obvious copyright reasons). Feel free to check it out: https://github.com/nkholski/phaser3-es6-webpack I aim to tidy up the code and add comments in time for the release of Phaser 3. I haven't managed to get deploy to work properly though which means I can't offer a playable demo. I ran out of ideas on how to update the webpack-configuration file so I decided to share the project now so that I might find someone to assist me. Questions, suggestions and contributions are all more than welcome.
  17. 4 points

    Simple furMaterial

    Might not be what you are looking for... but then again it may be? This would be the least intensive computation method.
  18. 4 points

    Improve external lightmaps interpretation

    Yeah, you rocks! It seems to work much better: http://www.babylonjs-playground.com/#59ZXVF#15 I've added a neutral environment, by not using the default one of createDefaultEnvironment, it adds a more... neutral... light (line 6). It looks like we now have a better interpretation than playcanvas (playcanvas ref vs BJS patched). Thanks for that great patch!
  19. 4 points

    Math Question - Normal to Rotation?

    If you have the normal to the terrain, you can get the slope with 2 cross products : cross(normal, Y) will be give you a vector orthogonal to the normal, let"s call it binorm cross(normal, binorm) will give you a vector orthogonal to both the normal and binorm, it's the terrain slope If these 3 vectors are normalized and orthogonal to each other, then you have a rotated normalized system. You can get the rotation to apply to any mesh to align it to this rotated system with the method RotationFromAxis(normal, binormal, slope)
  20. 4 points

    Absolute Position and Pivot Point

    I went with getAbsolutePosition: https://github.com/BabylonJS/Babylon.js/pull/3631
  21. 3 points

    Phaser 3.1.2 Released

    Today we released Phaser 3.1.2. This is a point-release, meaning none of the public-facing API changed and focused on our continued effort to stamp on bugs as quickly as we can. It also includes hundreds of fixes to the jsdocs. The largest fixes are around the renderer, bringing in Tile alpha and Scale support to the Static Tilemap Layer, and fixing an issue with the Particle Emitter batch that would manifest if you had blend modes enabled. Grab the latest build from GitHub, npm or CDN and as usual see the full Change Log for details. http://phaser.io/news/2018/02/phaser-312-released
  22. 3 points
    Phaser 3 BOILERPLATES | STARTERS Unify, upgrade, use. Last updated: February 22 Table of contents: 1. Intro 2. List of existing boilerplates 3. What kind of features we need/want 4. What's the point Intro: Hello there everyone! As Phaser 3 came out I immediately started to look after some Boilerplate which would take care of basic stuff and speed up the development. If you don't know what I am talking about, think of create-react-app, but for Phaser. There are a few already, however I think that is one of the things that shouldn't be re-created every time, but I'd rather see one, powerful, generator that is community driven, updated, and has many options. Richard has mentioned that he prefers this to be created by community, and just highlighted on the Phaser website. I am aware that sometimes you need something really different and boilerplate X won't suit your needs, but that's where configuration comes in (for example question at the beginning which physics you want to use). Unless even that can help you - get a different boilerplate/create new one. I want to help and in my opinion boilerplates are great way to unify the community, show out the best practices and speed up the development. Let me know what do you think about it. Existing boilerplates list: https://github.com/oliverbenns/phaser-starter - https://github.com/rblopes/generator-phaser-plus - by @rblopes https://github.com/lean/phaser-es6-webpack/tree/phaser3 - (phaser 3 on different branch, i think it's still in development for p3) by @leandro Boilerplates/examples (things that fall in into example category, but still can be a good foundation) https://github.com/nkholski/phaser3-es6-webpack - generic platformer template (mario in this case) and it's based on phaser-es6-webpack by @nkholski I'll keep the list updated, you can give links in the comments too! Features: What should the perfect boilerplate have Recognizable name ES6 transpilation with babel ES6, CoffeeScript or TypeScript Webpack, along with live and hot reload Environment variables Continuous delivery and continuous deployment Images compress JS minify Standard folder structure with basic scenes like preload screen, game Config file for game configuration with all possible options Maybe something that will make sprite bundles ES lint configuration? (not quite sure as many people have different ways of writing code, however maybe just a small base for further configuration?) CLI commands (like create new object) Popular building integrations (Cordova, Cocoon etc) at least on some level Easy way to update Phaser Configurable at the start: Provide bigger example? or just standard template (for example do you want only one example asset, or whole game generated) Physics selection List of some basic useful plugins? That's all coming to my mind for now, leave the comments what would you like to see in a boilerplate! The point?: I know this may be not immediately clear "what the hell this guy want to do with this topic". I think it would be nice if community choose one boilerplate that already is in a good shape and drop all the focus on it. I don't think that this will be better if every person creates a new boilerplate for no good reason and reinvents the wheel. So to summarize: Create a list of boilerplates to have it in one place Let's choose together a boilerplate which community would accept to take care of, becoming a kind of "official" boilerplate (again think of create-react-app that is used by most of the people). (and yes, I am aware that not everybody will want that, but in most cases unified standard is a good thing, I guess?) List of features that this boilerplate would ideally have. I want to hear your feedback about the whole concept, maybe I am dreaming too much. From my side: https://github.com/lean/phaser-es6-webpack/tree/phaser3 seems to be the most popular, however don't think it's phaser 3 ready yet? Haven't looked at it yet. https://github.com/rblopes/generator-phaser-plus is also looking great, I've used it at it seems it has most of the features. What would I like to hear from you guys: Do you like the idea? If yes, would you like to prefer to choose an existing boilerplate or create a new one How would you name it if new one? If new one, clean start or forked from other project? What features would you add to the list Do you know any other generators that should be on the list? So let me know what do you think about it, let the discussion begin. Yey. Best regards.
  23. 3 points


    PONGIS is a simple and addictive ball game that runs in mobile and desktop browsers. While graphics are held simple, the underlying behavioral "psychology" of the AI opponents creates a unique game personality. www.pongis.com
  24. 3 points

    CellShading post-process

    Dae is always a wae... http://www.babylonjs-playground.com/#G0XUPL#5 (It's an ugly hack of light calculation shader)
  25. 3 points
    Compiled down the current version of the TS defs for Phaser 3. It's work in progress and hackishly processed to be valid (i.e. doesn't generate TS errors), but it seems to work. Get it here: phaser.d.ts Let me know if there are issues (although there's already plenty that I know of).
  26. 3 points
    Yes, mesh.metadata is a good solution. I use it and it works very well.
  27. 3 points
    You may have notice in the Q&A part of the forum, but I've made a kind of cornell box scene, you just have to do whatever you want with it. [EDIT] last version: https://www.babylonjs-playground.com/#J5E230#11 Here an already-made scene in the playground: I think this can be useful sometimes, to easily have a bit more complex scene in the playground so as to do tests and little demos (for example, to play with probes). As I'm not a pro-coder, you will probably see some craps in my actual playground scene code, do not hesitate to enhance and correct it PS: I will later make a doc in github about the workflow for using this scene, especially in the Blender part.
  28. 3 points

    –°oordinates to the object

    Better? https://www.babylonjs-playground.com/#IFFDYH#4
  29. 3 points

    Current state of the market

    But on the other hand, there will always be demand for good games
  30. 3 points

    Solid Particle Parenting

    Some PG demo coming soon Meanwhile, a little crowd of 300 guys walking around in one draw call : http://jerome.bousquie.fr/BJS/test/spsParenting3.html
  31. 3 points

    Line how in ninja friut

    I have done one fruit ninja styled mouse follower with rope. Basically how it works is like this: - Generate a rope with enough points to make it look good (I use 56 points). - Whenever mouse moves, save the coordinate. Keep previous X amount of points saved. (I found 7 to be good amount). - On render loop update the rope points to match the mouse points and apply some kind of interpolation (I'm using cubic interpolation). Interpolation makes the rope seem a lot more smoother when mouse is moved fast. - Check if points are too close to each other and hide the rope if they are. If this check is omitted, some of the lower tier devices will have odd flickering due to floating point errors. Made an example: http://pixijs.io/examples/#/demos/mouse-trail.js
  32. 3 points
    with some hack https://www.babylonjs-playground.com/#LCA0Q4#1 @Norbz
  33. 3 points

    3d drag and drop menu

    Hi. As the title say, I'm trying to do a menu with 3d objects and you can drag objects from menu to the scene. It is basic yet. I'll add more features soon. I've been trying to fix it for a while, so I decided to ask for help So it's simple. We have a scene with a grid, and on top a menu with 3d objects. The mesh that holds the 3d objects is parented to the camera., and about 300 on z axis. I create a transparent plane at the same distance from camera and parent it to camera too, for drag and drop. It works well, but on drop I want to project the position of the 3d object on the grid somehow, but I do not figure it out. So I decide to put it on midle default. Here is the sample: http://playground.babylonjs.com/#ANU67L#3 #line 131 is the default, and on #line 130 i tried something but without succes. Any help are welcome. Pace and love
  34. 3 points

    OfficeGames announcement

    Yup my last name is Butt ^_^... and I wish I was cool enough to claim the game design but :https://en.wikipedia.org/wiki/Tsuro I just enabled the UI, and will finish it up and then activate all the win/loss calculations be the end of this week I hope. Then it will technically be "done". http://pryme8.github.io/TSO/
  35. 3 points

    layermask for gui[solved]

    I add this to line 29 : advancedTexture.layer.layerMask = 2; http://www.babylonjs-playground.com/#UCFKM#98
  36. 3 points
    and sum fun https://www.babylonjs-playground.com/#T34ZWR#7
  37. 3 points

    OfficeGames announcement

    @Pryme8... awesome, that is vNice... Mr Andrew, V...???. Cool game!
  38. 3 points
    Hi pR! Perhaps the best way... is to use the blur sizes. http://doc.babylonjs.com/how_to/highlight_layer#blur-size https://www.babylonjs-playground.com/#25OYWL#1 Sinusoidal and not-so-direct, eh? heh. Sorry. You can always create a highlightLayer.setBlurSize(size) { set horz/vert blur size } function... make life easier for yourself. Heck, you could probably get that function approved by admin... for adding to core highlightLayer. Maybe get your "I contributed to BJS core" shoulder patch and certificate! YAY! It's not an "intensity", but blur-sizing works okay. There could be other methods... but they would be more complex and involve alphaBlendingModes. HighlightLayers are a post-process and don't handle depthRenders/alpha very well. It is not a weakness/bug... just an expected characteristic for these types of effects. Hope this helps.
  39. 3 points
    An alternative might be to use Babylon.GUI using the `CreateForMesh` and `LinkWithMesh` methods, all depends on what you want to achieve.
  40. 2 points

    CellShading post-process

    Can you use LUT? This PG is not what you're looking for, but can you make a LUT to simulate cell shading? https://www.babylonjs-playground.com/#J9H084#19
  41. 2 points

    Absolute positioning

    alright - glad you got it!! it's an optimization to evaluate world matrix once per frame. You can read more about it here on freezing your matrices: https://doc.babylonjs.com/how_to/optimizing_your_scene -> Reducing World Matrices Computation absolute position is always in relation to world co-ordinates, yes. If a mesh is not parented then it's position is already in world co-ordinates, otherwise in relation to parent mesh. It's a bit of a learning process, so glad you got that one also, there's a sticky thread for marking solved. cheers.
  42. 2 points

    Power impulse

    For the ball to hit exactly the place on the ground that was clicked on you need to know the acceleration due to gravity, G, that is being used in the physics engine. Given the horizontal linear velocity, V, of the ball towards the click point you can calculate the speed of the ball ||V|| and you can also calculate the horizontal distance, D, between the ball and click point. Then the time, T, to reach the click point will be found from T = D/||V||. So you now need a vertical velocity W such that after a time T the vertical displacement will be 0, this can be found using Newton's equations of motion in this case 0 = WT - 0.5GT*T. http://www.bbc.co.uk/bitesize/higher/physics/mech_matt/analyse_motion/revision/2/
  43. 2 points
    Hello ! I think you may use the 'onSuccess' callback of your sceneLoader to do your material changes. This way, the scene is not ready. Then, you just have to stop the renderLoop if the scene is not ready, and wait until it is ready to start it again. I was not able to test it, because well.. my internet connection is too fast (I can't believe I am actually complaining about that). https://playground.babylonjs.com/#X6KVNY#4 I guess you can also force the LoadingUI to be displayed instead of stoping the renderLoop https://playground.babylonjs.com/#X6KVNY#5 I think that in your own code (working out of the playground) might be easier as you have complete control on the moment you launch the renderLoop.
  44. 2 points

    Brunch with Phaser 3 (starter project)

    Now comes with Phaser 3.
  45. 2 points
    Something like this? https://www.babylonjs-playground.com/#TZSWRR
  46. 2 points
    It's fixed with Chrome v64
  47. 2 points
    Hello! Are you using latest v3.2 version? this should fix this issue
  48. 2 points

    OfficeGames announcement

    When you want (no rush) Just send me a zipped folder so that I unzip it on the web server (or tar.gz, or whatever you want). It's better that you use the UTF-8 encoding what is the web server default encoding and it's better that you refer cdn or legacy versions of BJS and PEP js example : <script src="https://preview.babylonjs.com/babylon.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pep/0.4.0/jquery.pep.min.js"></script> <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
  49. 2 points

    OfficeGames announcement

    @jerome There is a bit I need to do still, but I am almost to the point of setting up the full gameplay. Then I need to do a bunch of optimizing and set it up to build the assets in async (which I have the script in place I just need to shift to the async functions). Im hoping by the end of this week, or beginning of next it should be playable. http://pryme8.github.io/TSO/ *UPDATE* I am like one or two days from turning on all the basic features to be able to play a game. Are there any "rules" I need to follow when doing this development for you?
  50. 2 points

    How to get a "warp speed" effect