Popular Content

Showing most liked content since 06/21/2017 in Posts

  1. 16 likes
    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
  2. 12 likes
    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)
  3. 11 likes
    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
  4. 11 likes
    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
  5. 8 likes
    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
  6. 7 likes
    Hello, this is a project for my college. It's a simple multiplayer game building with Babylon.js 3.0 and Matterjs. http://overbount.me I hope you enjoy it. Use W A S D to move and left click to shoot. (There might be some lag issue) Thank you.
  7. 7 likes
    Hi, I’ve just finished a big tutorial explaining why and how to build a cross-platforms VR experience using WebVR and Babylon.js: https://www.davrous.com/2017/07/07/from-zero-to-hero-creating-webvr-experiences-with-babylon-js-on-all-platforms/ It contains a lot of samples to: - Create a scene running on smartphone using the Device Orientation fallback, on Mixed Reality headset in Edge and Oculus Rift / HTC Vive in Firefox / Chromium using WebVR. - Show how to teleport either using the gamepad and a gaze approach or using a VR controllers if available (will be our case by the end of the year with RS3) - Show how to interact with items using gaze or VR controllers I’ve been able to demonstrate some of its content to various French meetups and people were amazed by the quality of the rendering and possibilities. We still have some work to do to simplify WebVR usage compared to A-Frame for instance, but it's planned for 3.1 of Babylon.js. In the meantime, test our Mansion VR experience: http://playground.babylonjs.com/frame.html#QWIJYE#6 either on your smartphone using Cardboard, in Edge with a MR headset or in your Oculus / Vive in Firefox 55 beta! Feel free to spread the world also RT my tweet: https://twitter.com/davrous/status/883416521057456129 Thanks, David
  8. 7 likes
    After my last excursion into building a house with BJS the corners bugged me a little as they were basically different wall butted together with one edge showing. Also you had to make individual walls and place them correctly. Plans for a house are often shown as just a floor plan so I began to wonder if I could build a house from a floor plan. At this stage just taking a plan and entering measurement as data into the floor plan builder. This is the result http://www.babylonjs-playground.com/#4GBWI5#2 You can read how to use the buildFromPlan function here http://babylonjsguide.github.io/gamelets/House#the-function-and-how-to-use-it and there are more details about its construction. One thing I have yet to fully write about is setting the interior and exterior textures and colors but this uses the same method as Jerome's faceUV and faceColors method but instead of an array being needed there a just two parameters to set. The other main point about the uvs is that I have set them so that they are scaled according the width of the wall. If the width of the longest wall is 1 and there is a wall of half this length then only half the texture image is used for this wall. In other words if the texture is stripes and the longest wall is covered by 20 vertical stripes then the half sized wall will be covered by 10 vertical stripes. Who knows perhaps I will tackle roofs next.
  9. 5 likes
    Hi! After work with Phaser.IO to create simple isometric RPG game i decided to close my phaser project due to bad performance and quality problems - too much for 2D framework. Last version is available there http://game.furcatomasz.pl. When I got new power to work with my new game, then I decided to work with my cousin in BJS. Me and him do not have any experience with 3d games. We start with learn BJS and Blender four months ago. With many problems with optimization objects (instances, materials), collisions, shadows etc. there you can check actual version of our game: http://babylon.furcatomasz.pl. Also I create FB page: https://www.facebook.com/slavsGame/ where you can find steps of our work with BJS. At this moment we use: BJS 3.0 and Socket.IO for multiplayer. (nodeJS for websocket server) Now we work on: - GUI - Monsters - Players - Items - skills - quests After finish that i will write a backend server in PHP in Symfony for store players data. Thanks for yours help with our problems!
  10. 5 likes
    You can now create skyboxes with 2 lines of code. Everything is here: http://doc.babylonjs.com/tutorials/environment#automatic-creation
  11. 4 likes
    I know that some of you desperately asked for it http://doc.babylonjs.com/tutorials/how_materials_work
  12. 4 likes
    Hey guys, My name is Mike and I'm from Korea. Me and 14 other guys are making a HTML5 MMORPG called "Mad World". Here's its trailer. [youtube]B9_5arnNDAw[/youtube] And here's rain animation The game has all the familiar features of MMORPGs but the combat is more face-paced. It has hand-drawn artstyle like you see here. I will be posting some updates here from now on, and maybe some development tips we learn along the way. We want to be a pioneer in the area HTML5 in Korea which is still very new in the country. We want to make it available worldwide by the end of 2018, so we still have a long way to go. Any feedback is welcome by the way. Thanks and let me know what you think of the game! For more information on the game, you can visit our website: www.jandisoft.com or follow us on Facebook Twitter Youtube
  13. 4 likes
    Hi. Here is an example of something you could use using arcade physics: The idea is to first draw any primitive shape you like using bitmapData and interpolation. The shapeData array can be modified to create any shape you like. Then in your plot function you evenly distribute dots (with physics) along your shape. Then you create three to four "mouseBodies" that follow your mouse and collide with the dots. this way you can determine how far off you are from the actual shape. The collision checks are then done and based upon which "mouseBody" is colliding, so you add or even subtract score (see example). Notice that the trail is drawn using rendertextures (example), but this is certainly not a must. You can also draw your mouse trail using graphics. You could also stick to rendertextures, but make your own sprite (simple gradient circle made in photoshop, 64x64) and replace it with the gameboy. You will probably have a nice looking cloud trail. A final note, the actual primitive shape can also be drawn as a polygon using graphics. These are all implementation details, but maybe it will give you more ideas for your own game...
  14. 4 likes
    Job done, pull requested! http://www.babylonjs-playground.com/#L5LTN3#1 I've animate what I call the solid version, but it seems that animation is not exported, here Blender viewport render: [edit] I'm a about to create a dedicated thread in demos & project [/edit] [edit2] hop! [/edit2]
  15. 4 likes
    Next update. Sponsors: - GitHub Judges: - Christer Kaitila - Lee Reilly Prizes: - 30 × GitHub account - 10 × PlayCanvas account - 2 × Construct 3 license More coming soon.
  16. 3 likes
    See if this helps. https://ssatguru.github.io/Vishva.ts/public_html/ A third person camera keys "a" and "d" rotates the character left and right , in other words rotates the character around y axis and the camera seems to follow. I say seem because that is not quite true. It is not the camera which follows the character but the character which follows the camera Rotate the camera and then rotate the character based on the camera rotation Here's the code https://github.com/ssatguru/Vishva.ts/blob/master/src/ts/component/CharacterControl.ts Here are the lines for rotation https://github.com/ssatguru/Vishva.ts/blob/master/src/ts/component/CharacterControl.ts#L262
  17. 3 likes
    After many tests i do not know why isPointerBlocker not work. So your tip about register function onEnter and onOut is perfect. Now my code, makes my game GUI more user friendly let self = this; control.onPointerEnterObservable.add(function() { self.game.sceneManager.environment.ground.isPickable = false; }); control.onPointerOutObservable.add(function() { self.game.sceneManager.environment.ground.isPickable = true; }); Additionally I used your code from PG and it don't work too. Thanks @Wingnut
  18. 3 likes
    Answering myself: Blender has a "artistic color model" which is turned on by default. You can turn it off under Scene->ColorSettings->Display Device: None
  19. 3 likes
    I've been working on a fun project the last few weeks. I've created a "Build your own Kendall Jenner t-shirt" web page. This is in relation to the incident where she used shirts with famous bands on them, added pictures of her face then tried to sell them for twice as much. She's taken them down, but I've put up a webpage where you can make your own in 3D. http://kendallshirts.com The decals gave me some trouble. I'm using CreateScreenshotUsingRenderTarget to store the canvas content so it automatically generates a FB og:image file. The problem is that function does not handle transparency well. The result comes out looking messed up. As a workaround I make the textures alpha 1, screenshot, then put it back to transparent. Its so quick the user won't notice. I can't get this working in Firefox. The inspector says there are meshes in there, but for some reason they just don't show up. I can't get babylon v3.0 working either. The decals don't show up. This is just a quick demo so I didn't put any time into solving those problems. If anything seems broken, pls report here. Enjoy!
  20. 3 likes
    I've just updated BabylonHx repo on github https://github.com/vujadin/BabylonHx I've done quite a lot of work but there is a lot more to be done. Here's a little demo from BabylonHx-Next: http://babylonhx.com/next/ Things to be done: 1. Rendering pipelines (DefaultRenderingPipeline doesn't work, haven't tried others but I guess they don't work too) 2. Animations 3. Shadows 4. Tons of other things... I've dropped support for two Haxe libs that BHx was compatible before: Snow and NME (these aren't used by Haxe people that much anyway). So now BHx works only with Lime/OpenFL. This will make further work much easier. Right now only WebGL build is working. For anyone interested in getting involved - grab latest Haxe here and latest OpenFL(Lime) here and help me with BabylonHx-Next
  21. 3 likes
  22. 3 likes
    As the new logo is easy to translate in 3D version, I've made it: http://www.babylonjs-playground.com/#L5LTN3#1 It will be probably available soon on the official depository, but you can already check the readme and the sources files on my fork. They're two version of the logo: - the first that I called light version, which have the most correct similarity with the 2D one (as you can see on the playground). It's very light because have colors are assign only via vertex colors, so it composed by one mesh, one material: - the second nammed solid version, made to have a little fun with animation. You have one assign by default on it in .blend file, but it seems that it's not exported, I have to investigate that point. This is what I want to obtain:
  23. 3 likes
    Latest demo: http://playground.babylonjs.com/#PM5MFS#5 I added syncImpostorWithBone and changed the order of params, since I think distToJoint will be used more than adjustRotation
  24. 3 likes
    It takes special skills, I tell ya. Type an unbearably-long reply, assuming that the user is a 4 year old (ridiculous over-explaining of the subject, nowhere near on-topic, packed with failed attempts at comedy). Eventually, the user commits suicide out of tedium, and that is usually a workable solution. heh.
  25. 3 likes
    Really shouldn't try to answer questions on my mobile when I'm in the middle of something else. I was already using color4 but forgot that the color explanation was part of a full description of of creating a custom mesh and lighting and normals and so there are two triangles present one you cannot see face on and remains black when you rotate camera because of light direction. Also the instruction was " In the playground below see what happens when you make the vertices on the red facet different colors. " So I had made the triangle red and left it to the reader to alter. Have added PGs now where both triangles are lit but still can only be seen when looked at in direction of lights and one with graduated color. Also re-reading your question it is about textures not color. see http://babylonjsguide.github.io/advanced/Custom#texture and http://www.babylonjs-playground.com/#VKBJN#14 I expect you read on and already found it.
  26. 3 likes
    yes i have shaderBuilder tools too
  27. 3 likes
    Hey team, I've just finished the doc for the image processing configuration: http://doc.babylonjs.com/tutorials/how_to_use_postprocesses#imageprocessing Please submit PR to improve it
  28. 3 likes
    I multiplied halfExtents and radius by 2 because they are half the size of the body. Here is a better example: http://www.babylonjs-playground.com/#BEFOO#183 My goal is to add this to the debugger at some point so that you don't have to add the extra code.
  29. 3 likes
    This is really cool! For the sake of search I created a new PG with metadata: http://www.babylonjs-playground.com/#CNT1E0
  30. 2 likes
    Hi, @royibernthal I need for a project to enter only number . , backspace and enter. Maybe it can help you to implement your own. https://www.babylonjs-playground.com/#XCPP9Y#158
  31. 2 likes
    Howdy All Check out my latest game. Its in a kind of permanent beta at the moment. Works on Desktop or Mobiles, touch controls etc, all thanks to the awesomeness that is the Phaser framework. Wizard in a Bubble
  32. 2 likes
    @Wingnut You are right. Setting position of a mesh after adding phyiscsimposter creates an issue. So in the following example (cleaned up a little bit) https://www.babylonjs-playground.com/#1RKZXB#78 if we comment out line 3 and uncomment in line 12, we see the issue. But if instead of constructor, were we to use setParam() to set the parms then setting the position before or after does not matter. So using setParam() seems to be a better approach for now
  33. 2 likes
    Yes this is the case. And if you check the exporter window in 3dsMax you will see that there is a statement about adding a default light. you can get rid of it by calling scene.lights[0].dispose()
  34. 2 likes
    Hello I have the plan to work on a headless version of babylon.js that could be used in this scenario: https://github.com/BabylonJS/Babylon.js/issues/2529
  35. 2 likes
    great article ! Thx David. it's time for a deep dive into babylon vr experiences !
  36. 2 likes
    @Wildstyle : Hi and welcome to the forum. I took a look at your basic blend file - and there are issues with un-applied transforms as @V!nc3r points out, and you are using a very old version of the exporter as @JCPalmer points out. Add to that you have the subsurf modifier which gives the mesh >150K vertices. That is a lot!! I get worried when I have more than 20K vertices. And about 120K of those vertices are just the eyeballs!! Now some additional stuff: 1. The rig is parented to a "Bezier Curve" which as far as I can tell is not exported. 2. Your IK is odd. You are using two "Empties" to control the IK. These get exported as meshes along with their own animations. Y should use IK bones. Have a look at this YouTube video from Sebastian Lague from about 5 minutes to 6 minutes which adds a couple of simple Ik bones to a leg. You don't need to add the additional sophistication that he adds. As for the "Pole Target" he talks about I usually call that Knee.IK.(R or L). See below.You can add those IK bones to both legs and arms just in the way he describes. 3. As he points out the IK bones do not "deform" the mesh rather they give you easy control of a group of bones quickly.And note he sets a "chain length" of 2 - you left it at zero. So here is a quick rerigging of your character with just a simple leg IK set up and animation : Character Animation And finally, The legs of your character are very small and a tiny part of the mesh, so I am not sure of you reall yreally need 3 bones per leg. One might easily work - in which case there maybe no need to to use IK for the legs. You can download the blend file that I created - no bezier curve , no empties, no subsurf modifier, and my simple IK rig here Hope some of that helps. cheers, gryff
  37. 2 likes
    Make sure to flag your texture with texture.hasAlpha = true (Seems to be an alpha test issue) To do that in blender, make sure that the texture has its "use alpha" checked. Regarding your question, let me try to give you an analogy: ====> Hey team, I've just broken my car, can you advise? Here is what it looks like so far: ==== It is nearly impossible to help if we cannot see the car and open the motor, right? For babylon.js it is the same, we need to see the bug live. The playground is the perfect tool for that as we can experiment with the code. We REALLY want to help but we need a bit more than pictures
  38. 2 likes
    Hiya Queue. I think MANY people would use an HTML form... inside a DIV that is CSS absolutely-positioned atop the webGL canvas. It is actually quite simple. On that DIV... use CSS stylerules display: absolute; and then top: some%; and left: some%. With the correct % values, the DIV should open atop the 3D render canvas. Need it to disappear but still exist? CSS stylerule display: none; You could even make it partially transparent with opacity: .5; and/or move it behind the renderCanvas with CSS zIndex. Within BabylonJS scene code, you can get references to HTML objects... with normal JS things like var mydiv = document.getElementByID("myDiv") and then get its style object with var mystyle = mydiv.style. Then... mystyle.display = "absolute" and mystyle.top = whatever and mystyle.left = whatever, and mystyle.zIndex... and mystyle.opacity, etc, etc. Need a CSS3 quick-ref doc? Here ya go. (Perhaps slightly out-of-date, but not too much. Might need some control-mousewheeling to get it scaled nice). You can even CREATE html within scene code. Ex: var mydiv = document.createElement("div") and then document.body.appendChild(mydiv). Easy, eh? You may wish to study mydiv.focus(), too. Having a JS function inside the scene code... that COMPLETELY creates your html form (or many different forms)... is quite achievable. It takes quite a few lines of code, but it is all easy coding. You could even create your form differently each time, depending upon what the user is trying to do (a 'dynamically-generated' form). Or you can make 1-10 different forms inside the html part of your document, and just toggle them ON/OFF with scene code. Lots of flexibility. In this way, you are working-with HTML forms, which is easy and won't require any fancy stuff. I don't know much about submitting the form to your server, but it will likely be exactly the same as submitting standard HTML forms. Anyway, I just wanted to remind you that HTML forms/controls ARE available, even when working-with 3D context canvas. After all, the renderCanvas is just the same as any other HTML element. It just has a 3D context instead of a 2D context. Good luck. Keep us posted. Others may comment soon.
  39. 2 likes
    See? A lot of people are interested
  40. 2 likes
    It is done by the editor: https://github.com/BabylonJS/Editor Ping @Luaacro for more info
  41. 2 likes
    Hello, You should use directly our VR camera instead such as the WebVRFreeCamera or VRDeviceOrientationFreeCamera based on feature detection. Here's a basic sample: http://www.babylonjs-playground.com/#IHY77X#2 Regarding browsers support, on desktop, only MS Edge has WebVR enabled by default today on Windows 10 Creators Update, Firefox 55 will also soon (august) and Chrome should by the end of the year. On mobile, only Android & Chrome has it. That's why you should fallback to the Device Orientation camera most of the time. David
  42. 2 likes
    You need to use a nonzero velocity to create movement instead of setting left or position, etc., otherwise the collisions won't work. Often when you use sprite "tiles" packed together like this the player can be stuck on a vertical edge. phaser-plugin-debug-arcade-physics can show you where it's touching. You can try any of: Increase player.body.bounce.x from 0. Set body.checkCollision.*=false (top, bottom, etc.) on all the interior edges. Use a single physics body for each platform.
  43. 2 likes
    You have to make the adjustments to handle the window's size. From other posts it sounds like you're drawing your assets programmatically for a Slither/Agar -style game? ( Me too:) So for a window that is twice as big you'd draw assets that are twice as big and position them twice as far apart and move them twice as fast. So a food that is positioned 10 pixels from center on 800x400 window would instead be positioned 20 pixels from center on a 1600x800 window (and it would be drawn twice as big and move twice as many pixels per frame). To maintain the aspect ratio you'll apply the same factor to both axis (x and y) when calculating the sizes and distances and speeds. It's common to use the smaller factor for both axis: e.g., it's better to fit more content on the screen than not enough for a Slither/Agar-style game. The other approach is to scale by this factor (but if you're programmatically creating all of your assets then you can avoid the scaling artifacts by doing like above). You can use or reference kittykatattack's scaleToWindow function for this - I learned a lot by studying it myself. Also there's posts here and tutorials on the web about scaling to the window - I don't think it's changed much (at all?) over the last few years. I can't think of any in particular to refer you too but "pixi scale to window" should turn up some good Google or forum results I think
  44. 2 likes
    It is more a matter of precision. Your spot light is far from the ground so you need more pixel: https://www.babylonjs-playground.com/#557A15#5
  45. 2 likes
    License is the best way to go. I started selling templates on sites like Scirra and CodeCanyon, then I moved into getting contracts and now I am licensing my games. License is better because a template you would sell for $15 - $30 while I get $300 for a non-exclusive contract for a game. Also, when I license a game I don't make the source code available while when you sell templates you kind of have to. I am finalizing my new website to go full time in licensing my games. I hope to quit my job as Marketing director to only dedicated my time in making games
  46. 2 likes
    Hi @Wingnut and @gryff, Thank you very much for all your help! After getting frustrated with this issue, your detailed answers just encouraged me a lot. Sorry it took me a while to mange to upload my project to GitHub. @Wingnut Thanks for doing the same experiment for me, the textured effect is exactly what i am trying to achieve. So I tried to put my code in BabylonJS playground, but it looks like i need to populate the createScene() function by creating scene from scratch, instead of importing a scene from blender.....sorry i still have not figured out how to use BABYLON.SceneLoader.Load() in BabylonJS playground to load an existing scene, if it is possible to do that, can you please let me know how? ~ So I created a new GitHub account and uploaded my simple project there. The webpage with that flattened cube which refuses to be lightened properly is served here: https://babylonbee.github.io/ In the runRenderLoop function, I increase the scaling.y value by 0.001 to make the cube fatter and fatter each time, so we can easily see how the cube gets rendered as it resizes. So when the cube reaches its full size (scaling.y == 1), we can see that the texture gets rendered perfectly with the point light effect. Also, as we can see, the textured face is getting closer to the light as it resizes, which makes me wondering if it is just of matter of position...but even I tried to put the flattened cube closer, it still cannot be rendered properly....so that's something that frustrated me these days....So all the source files is here: https://github.com/babylonbee/babylonbee.github.io.git Thanks @gryff and @Wingnut if you can take a look!!!!!!! I might have more questions to bug you @gryff i just like blender lol @Wingnut sorry i forgot to check...so im using Babylonjs 2.5, i imported this script in my project http://cdn.babylonjs.com/2-5/babylon.max.js, so it is version 2.5, i guess? I download the latest exporter from the GH here: https://github.com/BabylonJS/Babylon.js/tree/master/Exporters/Blender My blender version is 2.78. It is also the latest version. I will do some more experiment to see if i can figure out the cause of this issue by any change :-) Have a great day~
  47. 2 likes
    Hi @flyingbee ; welcome to the forum As @Wingnut : says, post your blend file and I will take a look. But ignore all his flattery . Though he does seem to have learned that posting blend files is important - so that settings can be checked cheers, gryff
  48. 2 likes
    Do not do any optimizations until you know where the bottleneck is. Invest some time in learning how to use the profiler.
  49. 2 likes
    how about VRDeviceOrientationArcRotateCamera ? http://doc.babylonjs.com/classes/2.5/vrdeviceorientationarcrotatecamera
  50. 2 likes
    http://www.babylonjs-playground.com/#N9MYJN#3 The projection was fine, just needed to not center the text (i.e. not set margin alignment to center), and translate the y coord from screen coords to canvas2d coords (canvas2d has the origin at the bottom left as opposed to the top left). Also needed to get the closest corners I needed to slightly change your sorting function so that it used the distance property that you'd calculated. Edit: If you're not too invested in canvas2d, and depending on what you need to do, it may make sense to move to Babylon.GUI, which is currently better maintained. http://www.babylonjs-playground.com/#N9MYJN#4 - the equivalent of the previous pg in Babylon.GUI http://doc.babylonjs.com/overviews/gui