Popular Content

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

  1. 8 points

    A zombie FPS game demo

    Hi~ I'm from Hangzhou, China. I wrote a FPS game with babylonjs, but there are still many things to do. I uploaded some complete code to GitHub, and if you're interested, you can always download it, and I'll synchronize the latest code with GitHub in time github url:https://github.com/renjianfeng/BabylonFpsDemo (click Star) github.io url:https://renjianfeng.github.io/BabylonFpsDemo/example/index.html (Thinks satguru) Also, please remember to bring your headphones and enjoy the perfect sound effects. (at least I think so.) Some screenshots
  2. 7 points

    Phaser 3.0.0 Alpha Released

    Hi all, If you're interested you can now download and play with the Alpha release of Phaser 3. There are lots of places to get it, from GitHub to npm, which are detailed on this page. Once you've got it running I'd urge you to check out the Phaser 3 Examples. Click 'Edit' on any demo to see the code and learn from it! There are no docs at all in v3 alpha, we started work on those today, so expect to see the start of them in the Beta release at the end of August. Cheers, Rich
  3. 6 points

    Blow Me, Baby

    I recently made a demo scene for the SIGGRAPH 2017 WebGL conference put on by Khronos in L.A. last week. There were sections other than WebGL, like OpenCL, glTF, Vulkan as well. I understand from Ken Russell that it was shown at the start. A little of a departure from the many test / QA, & development Tool scenes for QI that I have been doing. I have 3 more of those close to done to close out 1.1 release. Always go to do a "real" scene here and there.
  4. 6 points

    Wexha Planet

    new Planet Version ( walk on Jump in full sphere scene ) http://www.500blog.com/ start with "quike look " or "mobile look " shift = speed , a s d w = move , space = jump , m : look scene
  5. 6 points

    Babylon.js Editor

    Hey, the editor v1.2.0 has been released and you can now attach custom scripts written in JavaScript to your objects directly into the editor! More informations: https://medium.com/babylon-js/babylon-js-editor-v1-2-0-6c760470098 A demo:
  6. 5 points
    I have just build 3D Text meshes in Babylonjs with the help of Vectorize-text. Please visit website http://grid.vn/3dtext to play and see the source code. ... but the 3D Text meshes still not correct at the holes, some one can help please???
  7. 5 points
    Update: we got the resize running. So we got a running prototype (object pose, projection matrix, window resize) are all handled. Now we need to clean the code. here is a video of the working resize -
  8. 5 points
    More and more progress. now the babylon sphere is on top of the marker
  9. 5 points
    Just launched this week! Play free here: http://striketactics.net/play
  10. 5 points
    Holle!~~ Translation of some keywords 【进入游戏】->【PLAY】 【瞄准方式】->【Target mode】 【重新开始】->【restart】 【重力感应】->【gravity sensor】 Sorry, My English is not so good Babylon is an excellent js game engine Play with it! thinks!!!! url:https://forreall.cn/3ds/app/zhanji/
  11. 5 points
    Property keys in JS are dynamic and can be calculated at runtime i.e. let obj = { foo: 'bar' } let i = 10 while (--i) { foo['prop' + i] = i * 2 } console.log(foo) // { // foo: 'bar', // prop10: 20, // prop9: 18 // ... // } So, in your case, you could eliminate awkward branching logic (which is always a good thing) and do something like: // Warning, anti-pattern ahead const handlers = { onClickArrow1: () => {...}, onClickArrow2: () => {...} } function init () { let i = 3 while (--i) { arrow[i].on('click', handlers['onClickArrow' + i]) } } But, this is kinda rubbish as (at least in your example) all your handlers are the same. In the name of creating code that can be reused, is reliable, single source of truth etc etc I'd suggest doing something like passing in the context your handler is working with: function checkScale (arrow) { return arrow.scale.x < 1 && arrow.scale.y < 1 } function prepClick (arrow) { return function onClick (event) { if (checkScale(arrow)) { return } ... } } let i = 10 while (--i) { arrows[i].on('click', prepClick(arrows[i])) } There are lots of good esnext syntax to do this sort of stuff, but thats a separate issue Notice the `prepClick` function, this returns a function, this is sometimes called a thunk, but it uses closure to make arguments available later, in this case we trap an `arrow` object in the closure so that the actual event handler (onClick) can reference the specific instance it wants to work with when it is invoked later. If you're on an OOP track then this stuff becomes easier to specify but JS handles context really weirdly so you'll have to deal with `this` issues. This way is more functional, but either way will get you where you want to be without writing the same stuff over and over. http://wiki.c2.com/?DontRepeatYourself
  12. 4 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 originally idea for realizing the PBR Composer was coming 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
  13. 4 points
    Thanks JohnK! I added your magic line of code hole.reverse(); // ADD THIS HERE and it work like a charm. I also add the thickness option. Thanks again! Hi jerome! It seem hard work to use directly the data from the font design file because javascript not render the text it self but the host OS do this (not for sure). But I know the good source to dig is Cairo. The download button has added so please play the result with Babylonjs Sandbox. Thanks for your download feature suggestion!
  14. 4 points
    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. 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 Here's the latest update Aug.16, 2017 - Cross-platform test Here's a wip customization system,. Oh, and we recently opened a forum. Come by and say hello if you're interested. =)
  15. 4 points

    Slavs - slavian rpg game

    Check new version of preview: - character select - New lights - character select - new sounds Live: babylon.furcatomasz.pl
  16. 4 points

    Stranded Hair Update

    Well, have published a test scene to experiment with hair color. I have a question about what is the color shade , used by LineMesh, supposed to be doing with alpha? Its use can actually give a good effect (try it with platinum blonde), but not knowing what it does makes me nervous. This process seems to be close to working, but have come to the realization that the width of the lines is always the same # of pixels. This means very far away, it can tend to look like shag carpet, due to the head being small. When really close the scalp is very visible. For the very close case, I suppose I could try using an emitted material in areas where you should not see the the skin. Any thoughts?
  17. 4 points
    I wrote an interactive neural network visualization web program where people can explore the inner workings of neural networks. Here is the description page (where I mention and link to BabylonJS in the FAQ): http://miabella-llc.com/ This is the browser-based application: http://www.miabella-llc.com/ANN/
  18. 4 points
    Here is a video of the current status. position/rotation/scale seems to work (using scene.useRightHandedSystem = true) I still need to push the custom projection matrix, and then to handle resize.
  19. 4 points

    BabylonJS Mansion in WebVR

    I do confirm Babylon.js works great in WebVR in GearVR. To make it work, you absolutely need a button to click to enter VR. As my demos on my tutorial are using the click on the canvas, they don't work for now. I'll update them. I've also fix a small bug on the web audio side which now enables Sponza VR to work in Gear VR. Still, even on a S8, it's very choppy. The scene is too complex for the Gear to render in VR. Maybe if I'm lowering down the resolution it could work much better.
  20. 4 points
    I love your energy! so i just started working on it at 4am. sleeping in another life. Code will happen here until it goes math and object3d ... enougth to be pushed into ar.js itself https://github.com/jeromeetienne/AR.js/tree/dev/three.js/examples/object3d-glmatrix
  21. 4 points

    Compressed texture generator

    Hi all, We with my colegue decided to share texture generator node-js tool that we created. Its port of compresed texture generator script to node, so it can be used cross platform not just on win machines, also included in build scripts. NPM: https://www.npmjs.com/package/babylonjs-texture-generator GIT: https://github.com/evolution-gaming/babylonjs-texture-generator Feel free to post issues and suggestions on github. More information is located inside README.md file.
  22. 3 points
    doing progress. Now the api starts to be usable by others
  23. 3 points

    [OWN - Closed Alpha] Testers needed!

    Hi everyone! I've been working on my own in the past months on a game, OWN. It is a competitive, multiplayer, real-time, free-to-play and browser-based game developped with Phaser of course. To quickly sum it up, it is kind of a mix between Super smash bros and League of Legends. In 1v1, 2v2 or 3v3 you face opponents in a quick deathmatch on a small map. Games are super fast (3-4 min max) so that you can easily choose how much time you want to spend playing. Here is a short video footage of the game (sorry for the poor quality, it's just raw sequences to get an idea) : Even though the game is not quite finished yet, I'd like to increase the number of testers to have more feedback and to test the architecture. So I really do hope some of you will be curious enough to give it a try. If you're interested, please PM me so I will provide you with some registration keys for you and a couple of friends. Hope you guys have a nice day!
  24. 3 points

    A zombie FPS game demo

    Add VolumetricLight Optimized for shadows and Blizzard effects!
  25. 3 points

    js13kGames 2017

    The competition has started! This year's theme is: lost. Good luck and have fun!
  26. 3 points
    UPDATE: stellar fire particles...
  27. 3 points

    How to get circumference of mesh?

    (The term should be perimeter not circumference but no nit picking among friends). At first I thought I had a solution but it does not seem to generalize. Using raycasting I obtained an acceptable result. Taking a box of side 4 I got 15.9 as the circumference which is pretty close to 16. The lower the increment the more accurate the result. Here is the PG, check console for circumference. https://www.babylonjs-playground.com/#KNE0O#48 However when I tried to do the same thing with the skull the individual picked point results and the circumference do not make sense. According to the boundingInfo the skull is about 46 across which gives a ball park figure of 90 for the circumference at the chosen Y point but I get 9.7. Perhaps I am on the right track and just do not know enough about raycasting to do it properly or maybe it is not the way to do it. Anyway here is PG with skull for what it is worth. (by the way with the skull an increment of 0.01 for the skull locks the browser for a long time). https://www.babylonjs-playground.com/#KNE0O#51 EDIT When I showed the rays I found the mistake, the rays were not in the direction I expected. I had modified another playground but found to get rays in right direction I should just use the forward vector not the calculated direction vector. So this might work https://www.babylonjs-playground.com/#KNE0O#52
  28. 3 points

    Two sided materials

    Yep. And perhaps mesh.material.backFaceCulling = false; And then, if you are using a hemisphericLight... it might be wise to have: light.groundColor = new BABYLON.Color3(.5, .5, .5); (for lighting-up your bottoms)
  29. 3 points

    Terrain Slope Problem?

    @Mythros See if this helps. This just uses moveWithCollisions and some simple physics. https://ssatguru.github.io/Vishva.ts/public_html/index.html?world=demo2 You will see three planks at different angles. The first plank is less than 30 degree, the other two more than 30 degree. Use WASD or arrow keys to walk the AV over each of those planks. The AV slides down the more than 30 degree planks if its stops while walking up those planks. The slide slope limit is set to 30 degree. The code https://github.com/ssatguru/Vishva.ts/blob/master/src/ts/component/CharacterControl.ts The slide slope limit is set here https://github.com/ssatguru/Vishva.ts/blob/master/src/ts/component/CharacterControl.ts#L18
  30. 3 points

    BABYLON.Augmented Reality ... in AR.JS

    AR Deep Dive Day 3 -> success. "Hello World" - BabylonJS knotBox rendering in AR.js (with three.js knotbox): TransformMatrix placed into camera._computedViewMatrix. Code posted: http://www.3dwebscapes.com/demos/arbjs5/ Insert this second line: look at with Hiro marker. markerObject3D.matrix.getInverse( modelViewMatrix ) cameraB._computedViewMatrix = new BABYLON.Matrix.FromArray(markerObject3D.matrix.toArray()); //SPLICE-FINAL! There is still some offset bug. Perhaps default world rotation thing in artoolkit (I'll look). @Deltakosh & @davrous & @jeromeetienne I hope this helps. Key-Takeaways: The type float23Array(16) looks compatible at the Transformation Matrix. Building from Array, can re-render in a single line of code. : ) There was some difference in Matrix Math -> around multiply (so yeah, consideration) BABYLON.Math seem sufficient coverage with (https://doc.babylonjs.com/classes/2.5/matrix) so no need for gl-matrix.js? I'd think, at first. But then... Ah wait, dependancy-consideration... AR API, so ok, understand fully. That might get tricky. : ) Babylon.Matrix lives here (https://github.com/BabylonJS/Babylon.js/blob/master/src/Math/babylon.math.ts) Thx,
  31. 3 points

    Infinite Terrain Idea Bounce...

    http://www.babylonjs-playground.com/#f00M0U#28 Just fixed that thanks ^_^.
  32. 3 points

    TrackBall confusion

  33. 3 points

    PIXI.js & Typescript Getting Started

    Typescript isn't for splitting your code into separate files, its a type checker to try to add types to JS. ESNext (es6 became es2016, which is now es2017 and es2018, its awkward! es2015 was probably the first one used) is a specification for new syntax and language features. Module spec was defined as part of es2016 but has only very recently been implemented in some browsers, although still might not work as you expect. Other new syntax that is now in browsers and commonly used are stuff like arrow functions, classes, template strings, let, const etc etc Babel is a transpiler, which converts your code into something else, most commonly it gives you access to new language features and converts that code into something that browsers of today (and yesterday) can understand. Typescript is also a transpiler as the source code you write can not be understood by any browser so it converts it into something that browsers can understand, along the way it also type checks as best it can from your static code. Browserify, webpack, rollup etc are module bundlers, which sounds like they are the things you want. All of these projects have great documentation and lots of getting started help, plus they're all mature projects so there's loads of info out there. I'd suggest starting with a module bundler. This gets you in to the realm of creating a build pipeline (dont worry, its easier than maybe it sounds, and lots of help out there). Once you get a bundle going, i.e. turn multiple files in to one (yes, you could just concatenate buts sounds like you want to deep dive this so go straight to module bundling), you might want to look at adding a transpilation step, use Babel to start with. Once you've got babel transpiling your code and a module bundler (I'd recommend browserify to start as its easiest), you might want to think about tacking on Typescript if types are your thing (also check out Flow, which is an alternative type checker). Type checking is a bit hard in JS, but don't fall in to the trap that suddenly your code will be safer, it won't be, although it will be better documented. Good luck! Ivan beat me to the bullet but has reminded me to clarify: if your goal is to split your project up into different files then you don't need any of these tools, they certainly add a fairly hefty level of complexity, if you're not onboard with the advantages then don't use them.
  34. 3 points

    Do Effect behind the Glass | Eash

    hi @javalang sorry i see this now i dont remember who change it by this http://www.melyon.ir/preview/index/30307 but you can see glass in here http://www.babylonjs-playground.com/#FT2RY#110 that optimized for all background color http://www.babylonjs-playground.com/#FT2RY#111 thanks for @Temechon for help make this and that material copyright belong to him
  35. 3 points

    GirdMaterial - Shadow Support (bug?)

    maybe custom material can help https://www.babylonjs-playground.com/#Y5IZCF#3 @rdzar @Sebavan you can put grid material shader in custommaterial diffuse method for have gird material with shadow
  36. 3 points

    Third Person Dogfight Camera

    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
  37. 3 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
  38. 3 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
  39. 2 points
    Does these help at all? http://babylonjsguide.github.io/advanced/Custom.html#texture https://www.babylonjs-playground.com/#VKBJN#14
  40. 2 points
    There're simple ways like class DContainer extends Container { addChildZ(container, zOrder) { container.zOrder = zOrder || 0; container.arrivalOrder = this.children.length; this.addChild(container); this.sortChildren(); } sortChildren() { const _children = this.children; let len = _children.length, i, j, tmp; for (i = 1; i < len; i++) { tmp = _children[i]; j = i - 1; while (j >= 0) { if (tmp.zOrder < _children[j].zOrder) { _children[j + 1] = _children[j]; } else if (tmp.zOrder === _children[j].zOrder && tmp.arrivalOrder < _children[j].arrivalOrder) { _children[j + 1] = _children[j]; } else { break; } j--; } _children[j + 1] = tmp; } }; } If you need sort inside the container, use it. If you need to move one element, just swap it with last element in container, there's swapChildren or something like that in docs. Or remove/add it again. If you need sort through the tree, use pixi-display, I recommend latest version: https://github.com/pixijs/pixi-display/tree/layers , its called "pixi-layers" instead. That's why I like gradual approach - choose the solution that corresponds to the scale of your problem. No one will call you stupid if you use just simple things for simple problems There are people who think "why dont you use complex solution like webpack, too stupid for it?" but seriously, just ignore them.
  41. 2 points
    Update: see video below - i ported to the most recent ar.js api (which handle all tracking under a single API) - i used babylonCamera.freezeProjectionMatrix(), seems to work It is getting there. but still some issues. im not sure what is happening. If people wish to step in and make it happen faster, the whole code is available here https://github.com/jeromeetienne/AR.js/tree/dev/babylon.js
  42. 2 points

    BabylonJS Mansion in WebVR

    Here's a first sample using our new VR helper: http://www.babylonjs-playground.com/#IHY77X#16 Using this single line of code: scene.createDefaultVRExperience(); It will create a VR button at the bottom right on the rendering canvas, will create a default deviceorientation camera. So moving your phone around before switching to VR will let you explore in 360 already. Clicking on the button will check for WebVR compatibility + a headset connected. If WebVR ready -> switching to WebVR otherwise, fallback to VRDeviceOrientation camera. I've just tested on my iPhone and Samsung GearVR and it works very well
  43. 2 points
    Samuel Girardin

    Getting controls in GUI

    lamentably short tutorial ... anyway, maybe something like this : var screen = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI"); screen._rootContainer.getChildByName("whaturlookingfor")
  44. 2 points
    Here is the current status - derived from @aFalcon example https://github.com/jeromeetienne/AR.js/tree/dev/babylon.js in case somebody wanna look (and hopefully fix ) the conversion between three.js camera position and babylon one can be found here https://github.com/jeromeetienne/AR.js/blob/dev/babylon.js/examples/manual.html#L126-L161
  45. 2 points

    Do Effect behind the Glass | Eash

    ah, switch to https for url
  46. 2 points
    Yes, it is something wrong with Edge as I told you! Edge had a bug with keyboard inputs as you've described that was fixed in Windows 10 Creators Update. Pointer Events is aggregating touch, mouse & stylus NOT keyboard inputs.
  47. 2 points

    Drawing Firing Arcs

    Thanks for everyones help. I got them working fine with detection as well. Marked as solved
  48. 2 points

    Fixed FreeCamera position

    David is probably the best first name ever.
  49. 2 points
    Like I mentioned, PixiJS has no mechanism to help you with it. But you can draw DOM to a canvas, if you search for methods/libraries. For example, MDN article about it: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas Because if you have DOM on top of the canvas (or a transparent canvas with DOM behind it) the browser has to composite the DOM it renders with your canvas. If there is no DOM above the canvas (and the canvas isn't transparent) it can just blit your output texture, which is much faster. The performance difference exists and is measurable, however many applications won't bump into this.
  50. 2 points

    How to make time scale

    You need to match time.desiredFps to time.slowMotion. See