FPS Game Shooting Weapon Interface

Does anybody know if there is some nice shooting setup for the first person, more or less ready for use?
The best example which I’ve found in PG so far - https://www.babylonjs-playground.com/#E8C51D#33
There is also a nice Babylon demo in Counterstrike style - https://cs16.herokuapp.com/ , made with Babylon 3.3.
But both examples are far from completeness.


Are you looking for more the character controller aspect of the FPS or something more comprehensive?

Don’t wanna speak for anyone else or put words in mouths, but from what I’ve gleaned from PR’s and GH logs and such I’d hazard a guess that the BJS team may be looking at providing pre-built, templates, or maybe something else along similar lines!

That said, @PirateJC or @RaananW might know of a more specific code sample to point you at or to confirm/deny/no comment on the above :face_with_monocle::face_with_raised_eyebrow::grin::sunglasses:

1 Like

that was amazing!
I am still new here, I have a lot to learn it seems.



GitHub - renjianfeng/BabylonFpsDemo: A first person shooter with babylonjs (通过babylonjs实现的第一人称射击游戏)

GitHub - sahilnare/the-knight-of-apocalypse: A 3D First Person Shooter Game made using BabylonJS (a WebGL Library)

GitHub - il-m-yamagishi/babylon-fps-shooter: FPS Shooter sample on Babylon.js

GitHub - timetocode/nengi-babylon-3d-shooter: nengi+babylon template of a 3d shooter with client-side prediction and lag compensation

GitHub - abhivaidya/BJS_Shooter: A simple shooter made in Babylon JS

GitHub - Raigyo/fps-babylon-js: WebGL: Babylon.JS & SocketIO- Videogame: Online Multiplayer First Personnal Shooter (Demo on Heroku) - WIP

GitHub - pedrus16/retro-shooter: a basic retro shooter

GitHub - vivienfan/Lethal-Heavy-Lancer: A real-time multiplayer 3D first person shooter game

GitHub - xtreemze/Ballistic: 1st Person 3D Physics Shooter built for Desktop and Mobile


Thank you for the links!
Most of examples I inspected already before and they are far away from any completeness…
This one has nice clean TS code and may be used somehow after some tuning - GitHub - il-m-yamagishi/babylon-fps-shooter: FPS Shooter sample on Babylon.js
Still none of the examples reminds at least what we had 20-25 years ago in Quake, Half-Life etc.
I believe I’ll need to make my own version from scratch, starting from this point :slight_smile: - https://playground.babylonjs.com/#17P08R#0


I see what you did there, Mr. Freeman :grin::+1::atom_symbol:

1 Like

What list of features would be complete? And maybe some nice-to-haves? Personally id like to have a trenchbroom map integration. When you think fps, do u think campaign or multiplayer? I only really think of online features, but making a campaign style game would be quite an undertaking, npc combat ai , interactions, dialogs , portals, sooo much stuff.

Ooh theres some halo maps and master chief models on sketchfab. Making a halo clone would be fun


Pinging @syntheticmagus as he’s planning on working on something along these very lines.

Another Playground for the pile, this one using Ammo.js for player and environment physics: https://playground.babylonjs.com/#4U5T2X#18

@jelster is right that we’ve got plans to tackle some common scenarios and try to “pave the golden path.” I’ll have more details very soon, but essentially we’re hoping to offer “canonical” solutions to common problems that are making certain tasks difficult for community members. I can’t say for sure that this’ll be next, but first-person character controllers are very high on the list of scenarios we want to tackle; and if I end up looking into this personally, the Playground linked above may or may not be my starting point for trying to do this more formally. :wink:

Again, expect more specifics on this very soon; and in the meantime, if you have questions about that Playground or why I chose the approach I did, let me know!


Are you looking for something using a real physics engine, or a simplified example using collision detection and a simply player controller?

For most basic purposes a simplified version is quite suitable (Quake style). The ability to have physics (as in Half-Life) would be also great. I believe that with the right approach it could be possible to choose between these types of interaction/colliders since the user interface itself shouldn’t depend on them.
The same relates to the shooting mechanics as well - we may choose between frame animation or render loop animation, or use physics for this. I think I’ll make more definitions in the one of the next posts here.

So, ideally, a developer should be able just to import ‘‘our future interface’’ (or we may call it ''FPS interface template"), define some settings, and then import a game level models and happily start to write the game logic instead of ''reinventing the same old bycycle" again and again.
I believe there is a need also in other types of interfaces/templates which could be useful and would save a lot of time for developers (like RPG templates, Strategy game templates etc).


I have a request / idea . See 1-5

  1. This animation
    FPS Tomahawk Animation - Download Free 3D model by ImageParSeconde (@ImageParSeconde) [50ca630] - Sketchfab

  2. With these weapons
    Babylon.js Playground

  3. Can cycle through each weapon with a hotkey
    Kinda like this. GitHub - tomduggan85/fps-engine: Browser-based retro FPS in infinite procedural level, three.js+react+mobx

  4. a player skill to activate the weapon , which activates the nme vfx. The weapon activation should do one of the following: trigger a cooldown, consume player energy/resource, or add to some burstable theshhold mechanic (like a weapon overheating)

  5. After activated, the next 1 attack or 3 attacks or for 10 seconds will consume the active effect and have an extra effect on a succesful hit test. For example, swing and hit a box with the frozen axe and it turns the box into ice, or hit a box with the fire weapon and particle explosion goes off.

  6. [thinking here] the hit test should be directional and cone shaped, with parameters for degree width and distance . The hit box params should be tunable to accommodate online play. Mechanically, the melee swing and a yet to be implemented shotgun hit test will use the same code, just with different width/range parameters. Purpose of this feature is to showcase the best approach to do hit tests appropriate for online/pvp melee attacks, which seem to be the most sensitive to latency. Tradeoff seems to be resiliency to high latency vs realism

Next steps aka the dlc pack:

  1. Guns with immediate hit test.

  2. grenades. There is a playground with a timer delay on exploding barrels.

  3. bigger map

  4. rocket launcher with projectile speed dependent hit test. There is a three example that has some good stuff in it.

  5. vehicles

Branding ideas

  1. Hey bro. A beach / surf themed supersoaker shooter. Named after the greats, halo and babylon.
  2. Popinov. A faction based pvprpg set in Popinov, a lawless cyberpunk style city in eastern europe where gang wars are constantly popin off. Also features many compute shaders authored by @Evgeni_Popov
  3. Delta Mosh. delta force in a moshpit. A free for all pvp battle royale , dedicated to @Deltakosh . DeltaPit also works
  4. Paargghty Time. Pirate themed multiparty team deathmatch shooter, with art contributions from the famous @PirateJC
  5. Seven Bandits . Seven man capture the flag, except the flag is the orange car in sebavans avatar. Winning team steals it and drives it back to their base. Also the cloest thing i could think of that sounds like @sebavan
  6. Runnin’ Wild . King of the hill deathmatch with a resource gathering / building mechanic in lieu of a timer. Inspired by the great builder @RaananW
  7. Cedar Forest. Open world looter shooter, featuring forest terrain designed by @Cedric .
  8. O.K. Corral . Cowboy themed GTA style cops and robbers set in the 1800s of western america. Based on true events. Brought to you by showrunner @carolhmj

A basic example could be done rather quickly. As I’m mostly into multiplayer and kinematic character controllers, having “real” physics bodies usually result in a lot of error correcting between client and server.
My own current project uses the basic approach to “physics”, but I set it up in way that allows me to easily swap it out with a physics engine(not one integrated with BabylonJS, though).


Hey Labris,

I started on creating a retro FPS with just placeholder stuff in typescript. I ended up stopping and using Unity :frowning: I wish javascript was faster! because I love Babylon

Did create a custom movement to stop the sliding you get with the default camera control.

I can upload my project to github? (was using electron though)

Cheers and good luck!


Would be nice to have a look!
I don’t remember anybody used decals in previous examples.

Be careful, it is quite sharp :slight_smile: - https://playground.babylonjs.com/#4U5T2X#24

(interactions up to you and your tomahawk style)


Btw, these two playgrounds have nice animation blend controls


So all animations in the tomahawk glb are:
0: ‘Tomahawk_IDLE’,
1: ‘Tomahawk_WALK’,
2: ‘Tomahawk_RUN’,
3: ‘Tomahawk_ATK1(no hit)’,
4: ‘Tomahawk_ATK2(no hit)’,
5: ‘Tomahawk_ATK1+ATK2(no hit)’,
6: ‘Tomahawk_ATK1(hit)’,
7: ‘Tomahawk_ATK2(hit)’,
8: ‘Tomahawk_ATK1+ATK2(hit)’,
9: ‘Tomahawk_JUMP’,
10: ‘Tomahawk_JUMP_START’,
11: ‘Tomahawk_JUMP_FALL’,
12: ‘Tomahawk_JUMP_END’,

Relevant attack animations (3 skills, 2 animations each for hit/miss)
3: ‘Tomahawk_ATK1(no hit)’,
4: ‘Tomahawk_ATK2(no hit)’,
5: ‘Tomahawk_ATK1+ATK2(no hit)’,
6: ‘Tomahawk_ATK1(hit)’,
7: ‘Tomahawk_ATK2(hit)’,
8: ‘Tomahawk_ATK1+ATK2(hit)’,

The 3 skills:

Need keybinds for the 3 skills and play hit/miss depending on results of hit test on the swing.
Will always miss at this point because no hit test implementation yet

Keybind1 - ATK1: 3: ‘Tomahawk_ATK1(no hit)’ or 6: ‘Tomahawk_ATK1(hit)’,
Keybind2 - ATK2: 4: ‘Tomahawk_ATK2(no hit)’ or 7: ‘Tomahawk_ATK2(hit)’,
Keybind3 - ATK3: 5: ‘Tomahawk_ATK1+ATK2(no hit)’ or 8: ‘Tomahawk_ATK1+ATK2(hit)’,

Seems it is too much for Playground :slight_smile: :Let’s start with more simple weapon - https://playground.babylonjs.com/#4U5T2X#25

The crowbar is generally more useful as a tool than a weapon. It is ideal for clearing obstructions, smashing objects, knocking padlocks off gates, etc. In combat, it is very effective against light or slow opponents.


I think its possible apply the animations from the tomahawk glb on the crowbar without changing the gltf because doesn’t babylon internally convert assets to its own format first. Is that correct?

When can we expect you boys to release the next Half Life?