Popular Content

Showing content with the highest reputation since 08/11/2018 in all areas

  1. 4 points

    Friendly competition

    Is the contest for... MOST words typed-on BJS forums? I win.
  2. 3 points
    Although an old post still good questions. Physics Physics calculations for train simulators can become quite advanced quickly, as many bodies will be connected to each other (the locomotive and each wagon) and the bogeys must be constrained to the rail path. Also the physics working on a train can become destructive very fast. That's why I found a very expensive study book (300 euro) on railroad engineering that almost takes a master's degree to understand how to place real world track that WOULDN'T derail the train in the first place. 🙂 And that's why most train simulators 'cheat' and create their own simplified physics and train operation / track following code. And most train games are simply tile-based or only allow 45 and 90 degree turns etc. But I guess you don't want that much simplification 🙂 If you train simulator doesn't need very strange things like "up side down loops", then you can reduce the complexity by projecting your train and track on 2D plane (X0Z). Straight track is easy. Straight lines 🙂 Use (partial) circles for curves. Connect straight tracks to curves using an Euler curve/spiral segment. Super-elevation can be computed in some kind of post-process (after you placed the track) to counter any physics that would make the high speed train derail in a curve (e.g. go straight instead of take the curve). The "problem" with the standard bezier curves in train simulators is that they may look nice curves but are difficult to evenly interpolate (e.g. when your train needs to move equidistance). Outdoor scenes Whether for a browser based application or for desktop applications, large outdoor scenes may not be your friend in 3D. Unless it's a desert scene perhaps 🙂 For large outdoor scenes you can indeed use sprites for trees. And you need instances (instead of clones). For non-sprites, like buildings, use LOD (Level of Detail) for your meshes. Be sure to 'freeze' the matrix for non-moving objects. That saves some computations. And then there's other optimizations like Octrees. These break down your world into segments. Based on the camera position and view, only parts of the world in front of your camera will be evaluated for rendering. Still, with those optimizations, I'm still struggling to get a good frame rate on low- and mid-end devices. But I believe it can be done on the powerful computers. 🙂 Demo I've been breaking my head on the train mathematics, but your can see my results so far in my BabylonJS Model Train Simulator game here: https://quintushegie.com/gardentrains/ My game is not the 'realistic' Microsoft Train Simulator type, but you'll get the point... most computations and challenges remain the same. Q [Added] B.T.W. Jerome has made an example of a rollercoaster demo, which is also a nice starting point for objects following path. Check out his Roller Coaster demo on http://jerome.bousquie.fr/BJS/demos/ )
  3. 2 points

    BabylonJS Editor V2

    Hello awsome community! The BabylonJS Editor V2 is now available and online! It comes with a web version and a native desktop application (Electron)! From the V1, this new editor comes with a better user interface and more tools to write less, less, less lines of code Demo This demo video shows a project 100% made inside the editor. It includes custom scripts written using TypeScript, path finding, custom post-process and custom animations Features Create and edit particle systems Create and edit animations Create and edit lens flares systems Create and edit physics states on meshes Create and edit materials (including materials library) Add and edit sounds Add and edit textures (including render target textures & procedural textures) Save projects on OneDrive / local with Electron Deploy project template on OneDrive / local with Electron Scene graph view Create and edit custom post-process Create and edit custom materials Attach custom scripts (JavaScript and TypeScript) to your objects Test your scenes with debug support Video tutorials The documentation is available in the BabylonJS Documentation but now comes with videos to illustrate the written documentation: https://www.youtube.com/channel/UCNogU8tcA5IegFvMwE2Rckw/playlists Some links Full documentation: http://doc.babylonjs.com/resources/ Editor: http://editor.babylonjs.com/ Desktop Application: http://doc.babylonjs.com/resources/getting_started Git Repository: https://github.com/BabylonJS/Editor Conclusion If you encounter a bug, don't hesitate to report in the forum and I'll make my best to resolve it. Thanks for being BabylonJS users. Hope you'll like using this editor
  4. 2 points

    Camera Inertia Angle

    If all you're wanting is the additional angle that the camera will rotate due to inertia after the pointerup event, you can calculate it in radians as: const additionalAngle = camera.inertialAlphaOffset / (1 - camera.inertia); which follows from the implementation posted by Sebavan above. http://playground.babylonjs.com/#PCMNE0#1
  5. 2 points

    cameraHelper type of thing?

    That's a great idea @babbleon! - I really cannot count know how many times I've had z-fighting issues where something is out of frustum near plane, so that near plane is really helpful (ie: move near/far plane or z-position/fov). This is linked from the page that I used to learn all the math, but would be a cool documentation PG with GUI sliders to demonstrate the utility of the camera helper: https://webglfundamentals.org/webgl/frustum-diagram.html main page(https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html)
  6. 2 points

    Camera Inertia Angle

    You could rely on speed to make the camera faster independently of inertia. Else about the formula it is exactly computed like this: if (this.inertialAlphaOffset !== 0 || this.inertialBetaOffset !== 0 || this.inertialRadiusOffset !== 0) { let inertialAlphaOffset = this.inertialAlphaOffset; if (this.beta <= 0) inertialAlphaOffset *= -1; if (this.getScene().useRightHandedSystem) inertialAlphaOffset *= -1; if (this.parent && this.parent._getWorldMatrixDeterminant() < 0) inertialAlphaOffset *= -1; this.alpha += inertialAlphaOffset; this.beta += this.inertialBetaOffset; this.radius -= this.inertialRadiusOffset; this.inertialAlphaOffset *= this.inertia; this.inertialBetaOffset *= this.inertia; this.inertialRadiusOffset *= this.inertia; if (Math.abs(this.inertialAlphaOffset) < Epsilon) this.inertialAlphaOffset = 0; if (Math.abs(this.inertialBetaOffset) < Epsilon) this.inertialBetaOffset = 0; if (Math.abs(this.inertialRadiusOffset) < this.speed * Epsilon) this.inertialRadiusOffset = 0; } where offset are computed from the pointers in this way: if (pointA && pointB === null && cacheSoloPointer) { if (this.panningSensibility !== 0 && ((evt.ctrlKey && this.camera._useCtrlForPanning) || this._isPanClick)) { this.camera.inertialPanningX += -(evt.clientX - cacheSoloPointer.x) / this.panningSensibility; this.camera.inertialPanningY += (evt.clientY - cacheSoloPointer.y) / this.panningSensibility; } else { var offsetX = evt.clientX - cacheSoloPointer.x; var offsetY = evt.clientY - cacheSoloPointer.y; this.camera.inertialAlphaOffset -= offsetX / this.angularSensibilityX; this.camera.inertialBetaOffset -= offsetY / this.angularSensibilityY; } cacheSoloPointer.x = evt.clientX; cacheSoloPointer.y = evt.clientY; } Hope this might help.
  7. 2 points
    Thanks Umz so much! Today I'm going to improved user experience on Fullscreen mode when they do accept to add my game to theirs phone home screen. I'm glad that 45 users play this game today without crash or animation bugs. The shop to buy new solider is still in development phase. With your suggestion I will try to balance the fire ball skill. I'm preparing the new graphic for enemy army and release the next level 4, 5 on tomorrow. Regards, Gafami
  8. 2 points

    Azure Media Player Plugin

    As 360 videos are more and more common, we developed a plugin for Azure Media Player or AMP to read 360 videos with BabylonJS. An online Demo is available on the BabylonJS WebSite: http://www.babylonjs.com/demos/amp360video/ And the documentation for the plugin is part of our documentation: http://doc.babylonjs.com/extensions/amp360video
  9. 1 point

    WeChat Mini Game WIP

    It's my first WeChat mini game project and I thought I would just like to share it here. So far I've completed basic gameplay and finally figured out how to use audio (since Phaser audio does not work on the platform). Pretty exciting to see things progressing and being able to test it on my phone 😀 Only thing that's left is the sharing/viral feature and leaderboard. You can watch the WIP video here.
  10. 1 point

    declarative React

    The next playground I was after was the 3D GUI: https://www.babylonjs-playground.com/#HB4C01#8 The only minor obstacle is that the React components load as child controls first. ie: The Holographic Button loads before the 3D panel, but the panel needs to be ready and the panel needs a GUI3DManager, so sort of a second pass was added for 3D GUI controls. I wanted to have the CylinderPanel with holographic buttons like the PG above and a Skybox where I could set the texture. I have clicking on the buttons changing the skybox texture - the texture files load slow over GH pages! The jsx/tsx Markup looks like this: <Scene id="sample-canvas"> <HemisphericLight name="light1" intensity={0.7} direction={Vector3.Up()} /> <Skybox texture={activeSkybox.texture} /> <ArcRotateCamera target={ Vector3.Zero() } radius={10} alpha={-Math.PI / 4} beta={(Math.PI / 2)}/> <GUI3DManager> <CylinderPanel margin={0.2}> { Array.from(new Array(60), (_, index) => index).map(number => { return ( <HolographicButton key={`btn-${number}`} name={`btn-name-${number}`} text={`btn-text-${number}`} onClick={this.next} /> ) }) } </CylinderPanel> </GUI3DManager> </Scene> https://brianzinn.github.io/create-react-app-babylonjs/withSkybox
  11. 1 point
    Brian Leighty

    Risk Like Game Tutorial

    Thanks Samid! Really appreciate that. I'll check this all out.
  12. 1 point

    [Panda2] Typing Test Whack A Mole

    3'542 points here. Simple yet interesting gameplay, nice graphics, super polished, plays fast. I love it!
  13. 1 point
    window.prompt() is convenient but may create some weird traps. My tip would be to separate the UI from the logic. Take a few steps back and define what the data validation function looks like, implement that first. Then call the prompt (whether window.prompt or an alternative UI) "while" the validation function returns a falsy. Then it'll neatly repeat until a valid name is supplied. No recursion should be needed - ideally each function should do a single thing, and return as soon as that thing is done.
  14. 1 point
    There is an interface called ICullable, which has 2 methods for checking if it's in a frustum: https://github.com/BabylonJS/Babylon.js/blob/147b793e34a64889b32ab2148834fea3ba92db69/src/Culling/babylon.boundingInfo.ts#L25 Here is a PG that I made using meshes, so not a vertex. I just want to make sure this is not what you are looking for: https://playground.babylonjs.com/#050P3M Camera also has planes that you can use and also camera.isInFrustum() methods that take ICullable. Although completely inFrustum doesn't make sense for a Vector3, so could be same implementation for both, so I think you can work from those planes and view projection matrix. There must be a built-in method somebody can give you, but otherwise hopefully that is enough to get you going. I'm really busy right now or would dig into some math for ya!
  15. 1 point

    Blend shapes

    Hi HoratioHuffnagel, Indeed currently the exporter only supports one blend shape deformer per mesh. A Maya blend shape deforrmer is actually an exact copy of a Babylon morph target manager. And a mesh in Babylon can't have multiple morph target managers. We didn't focus on the multiple blend shape deformers case because we weren't sure of the usecases of such feature. So here are some questions: Are you using multiple blend shapes deformers only for clarity during creation/edition process ? From the result POV, is it the same as having a single blend shape deformer listing all targets ? If so, it is possible for you to do modify multiple attributes by listing all targets (example: mouth_1, mouth_2, mouth_3, eyes_1, eyes_2, eyes_3...) and adjusting weights accordingly.
  16. 1 point

    Render sprites only in Camera

    I verified that box2d is not the issue in my game. It's more the amount of sprites being loaded (with textures and bodies). When I set generate=false for some groups of my canvas, the fps went from ~28 to ~58. The approach is now to have something like onOutOfCameraKill and onWithinCameraReset (as I need the body for collision checks). Thanks.
  17. 1 point
    Thank you @Umz for your valuable feedback! The chest rewards are randomized but each category has a pre-defined drop chance. Money has by far the highest drop chance! I've run some tests where I would open thousands of chests in a loop and the drop rates where always consistent with the intended drop chances: 50% Money Drop 15% Counter-Attack Item 15% +1 Weapon Item 20% Skin Drop So if you switched skins multiple times but didn't collect $50 for the save-point, you were really unlucky! However, that's why money is never lost (unless you spend it of course) to not punish for some unlucky chests. I am really glad you liked it, I was quite nervous about releasing it due to my hand-drawings. Traffic to the game is very low currently but the ones who play the game always complete several floors, which is a good indicator! How would you like to see this game developed more?
  18. 1 point
    Thank you @Sebavan - I was thinking of extracting each individual visible vertex of a mesh and using that somehow. I could render as lines, then get the server to run Potrace to vectorise it, but I will lose accuracy and so this is not really an option. It needs to be millimetre perfect. I will have a think.
  19. 1 point

    Risk Like Game Tutorial

    Definitely possible in Phaser. Conceptually though, this example would be a pretty good reference: https://github.com/nullobject/risk Hexagons should be easy to draw using graphics, followed by a texture conversion if you need to. Setting turns is just setting some game state variable after ending your turn: game.turn = (game.turn + 1 ) % num_of_players maps are definitely possible. I think cameras will help you out alot here. Navigating through a map can be done by scrolling. Have a look at the examples: https://labs.phaser.io/view.html?src=src/camera/minimap camera.js https://labs.phaser.io/view.html?src=src/camera/move camera with keys.js https://labs.phaser.io/view.html?src=src/camera/scroll view.js https://labs.phaser.io/view.html?src=src/camera/zoom to.js https://codepen.io/Samid737/pen/zaLydB For UI you can use seperate UI scenes, or you could again use cameras to layer and exclusively render UI stuff. Good luck!
  20. 1 point

    GUI feature request - Mask

    Thanks, I ll create the Github issue in the afternoon
  21. 1 point
    Also it would be good to know a bit more about the customization you did to see how we could make them fit best in.
  22. 1 point

    Using glTF extensions question

    The draco compression extension is used automatically, if you have a v2 model. The loader v1 or v2 is chosen based on the file version: https://doc.babylonjs.com/how_to/gltf#full-version You can read more about the decoder here: https://doc.babylonjs.com/api/classes/babylon.dracocompression Use BABYLON.DracoCompression.DecoderAvailable to determine if the decoder is available for the current session. I think that's only if you want to override, because an appropriate loader will be used based on the file extension. ie: you can force a gltf loader on a file missing an extension: https://github.com/BabylonJS/Babylon.js/blob/master/src/Loading/babylon.sceneLoader.ts#L251
  23. 1 point
    Select source point -> select destination point = Done! (just 2 clicks) https://www.babylonjs-playground.com/#35HAW1#28 It is not finished yet. I'm just playing around
  24. 1 point

    Panda 2 Instant Games Tutorials

    Panda 2 features direct uploading to Instant Games with just few clicks. We also offer plugin, tutorials and game template for Instant Games. Tutorials Adding ads to your Instant Game Exporting to Instant Games Plugin Download Documentation Game template Whack a Thing
  25. 1 point
    I believe there's game.physics.arcade.checkCollision.bottom = false; game.physics.arcade.checkCollision.top = false;