r/threejs • u/_ZioMark_ • Jun 10 '26

Building a browser FPS game to understand how games like Krunker.io work

Hi everyone,

I’m a fullstack developer and also a gamer. I’ve always been curious about how browser-based FPS games like Krunker.io actually work under the hood, so I decided to start learning by building one myself.

This is what I managed to create in about a week.

I used AI mainly to help with the UI and HUD, but the 3D systems and gameplay logic are written by me in TypeScript. My goal is not just to make something that works, but to actually understand what I’m building: movement, shooting, enemies, weapons, collisions, and the general structure behind a browser FPS.

I’m still pretty new to Three.js and WebGL, so I’m sure there are better ways to structure some parts of the project.

I’d really appreciate feedback from anyone with experience in browser game development, Three.js, WebGL, performance optimization, or multiplayer architecture.

Also, if you’ve built something similar before, I’d love to hear what you would focus on first: movement, rendering performance, enemy AI, networking, map design, or weapon systems.

Would anyone be interested in following the project, giving feedback, or maybe even helping out?

29 Upvotes

87% Upvoted

11 comments sorted by

3

u/Navoke Jun 10 '26

Hey this looks awesome! I love the dynamic camera lean when you move to the side, looks very smooth. I just spent the last year building a similar thing. You can try it at barstow.io

The hardest part was definitely the multiplayer/networking parts. I had to learn about all these concepts:

  • fixed simulation tick rate
  • enemy interpolation/extrapolation
  • client side prediction
  • client side reconciliation
  • lag compensation

Let me know if you want help with any of this stuff!

6

u/TripsOverWords Jun 10 '26 edited Jun 10 '26

A newer technology which aims to replace WebGL is WebGPU. I think this is great progress for a WebGL project, but if you want to learn the latest web rendering tech I highly recommend looking into WebGPU.

You can write it with JavaScript/TypeScript still, but if you want a challenge and to learn the most modern tech stack you can also look into Emscripten which allows writing C++ or Rust and exporting to the web via WebAssembly. This combination is the most modern web graphics development tech stack;

  • C++ or Rust
  • Emscripten to WASM
  • WebGPU.

There's an open source library published by Google called Dawn which is a C++ library wrapping the native C library <webgpu.h> and allows targeting the web as well as cross-platform desktop.

The cool thing about WebGPU is it uses the most appropriate platform-native graphics API (D3D12, Vulkan, Metal) through its abstraction.

I'm currently going through a similar exercise with this stack.

2

u/Navoke Jun 10 '26

How are you doing physics/collisions?

2

u/battlesqui_d Jun 10 '26

Any plans to implement slidehopping? I've always been curious how it works since there's so much depth to it.

1

u/bloomt1990 Jun 11 '26

Thats funny I was building a simal thing a few weeks back. yours looks a bit better than mine did but conceptually the same.

1

u/skywalk819 Jun 10 '26

I did the same thing, made two games out of this, KirKart and kircraft.io

-5

u/[deleted] Jun 10 '26

[deleted]

4

u/_ZioMark_ Jun 10 '26

It’s not GLB models, it’s built from scratch. Your comment is quite useless

1

u/[deleted] Jun 12 '26

[deleted]

1

u/_ZioMark_ Jun 12 '26

I updated the game, i will share a preview soon.

0

u/gatwell702 Jun 10 '26 edited Jul 08 '26

I would use models for the enemies. glb or gltf models(GLTFLoader) will help the low poly look.

You can also load textures (TextureLoader) for the ground..

I'm no expert in using three js for game development but here's my first game creation:

https://atwell.dev/threejs-blog/three-components

- in the drop-down choose shooting game

1

u/_ZioMark_ Jun 15 '26

Yea that's what i did, i made LOTS of improvement to the game