Devlog 5: The intro cutscene

After getting the player movement done, I decided it would be cool to add a Linux-style boot console as the content loads in the background. I also added in a title screen with some smooth animation. The main scene now places the player in front of the passcode input screen (I might decide to remove it until the user makes a password).

Patched some bugs

I finally fixed the shadow system. The player was clipping a tiny bit into the ground which left a circle of no shadow. I tried combating this by changing the shadow normalBias. This caused the shadows on detailed objects like the keypad to be broken. I tried fixing it again by moving the player mesh up. Then I found it still had the same issue on the door handle. I fixed it by setting the player mesh’s shadowSide to double sided.
I also made the player slower when crouching.

What’s next?

I need to add functionality to the keypad and create the base room. For my first app, I will make a notepad that you can type into.
I will also try adding a “virtual machine” that can run my friend @pinetree182’s Web OS tundra. Luckily, I found an official three.js example that can render iframes in a scene: link to example. I also need to add more buttons to mobile so the player can jump and crouch.

As always, FPS OS is hosted at cookistudios.com/fps-os. Every time I make a commit, it updates. This means you can access content before I’ve made a devlog about it.

Devlog 4: Movement complete

I wanted to add in bhopping/air stafing movement to the project as I find it more fun to control than the generic character controller. I found this script which seemed good and I wanted to try and translate it to my Three.js setup. I tried multiple times to put in the code then rename parts and scrap it. Eventually I decided to just take the most bare bones parts I needed and make a better system.
After a few tweaks, the movement, physics, and lighting systems are finally done. Next, I am adding a cool loading screen to the OS and then I’ll start modelling the new environment and objects.

The latest version is available at cookistudios.com/fps-os.
Here are the current keybinds:
WASD/Touch Joystick - Move
Mouse move/On-screen Swipe - Look around
Space - Jump (hold to keep jumping)
C - Crouch
R - Toggle speedometer
` - Show colliders
~ - Show player collider
(You can only move and look on mobile at the moment)

Devlog 3: Getting the ball rolling

So, it’s been a couple of weeks since my last devlog. Last week, I spent time having a break from the project. However, that doesn’t mean there hasn’t been any updates this week!

Player in motion

As seen in the video above, you may have noticed that you can actually run around and do parkour now! The player physics uses a VirtualCharacter, equivalent to a CharacterBody3D in Godot. I had to set up gravity which was difficult as the built-in gravity from Jolt doesn’t work very well on non-simulated objects like the VirtualCharacter.

Lighting improvements

I removed baked lighting as it was increasing load time and didn’t look good combined with real-time. So I have switched to full real-time lighting. I added in cascading shadow maps (CSM) that is like LODs. This means that further away shadows have lower quality textures. (I tried to make it not noticeable though.)

Bug catching

Using Jolt in JavaScript means uses WebAssembly (WASM). WASM needs manual garbage collection for most objects you instantiate. I have patched all the possible memory leaks I could find in my physics code.

Mobile support

I have implemented the ability to actually control yourself and not run at 5 FPS on mobile. You can try it out, right now, at cookistudios.com/fps-os/.

P.S. I will be trying to write devlogs more often as development will be speeding up over time.

Devlog 2: It’s all a simulation

That’s right, I got physics working! Using the link I saved in the last devlog, I worked out how to use Jolt properly with Three.js. I also built a scene in Blender and set up lighting.

Baking with Blender

To create this simple test scene, I hopped into Blender and spawned in a few different objects. I didn’t want to make anything too fancy as I just wanted to test physics collisions. As I worked on it, I would export to a USD scene and import that into Three. I thought about how game engines normally do lighting and I remembered about baked lighting. It took a while but I made it so dynamic objects with mesh names starting with “D_” will have real-time shadows but static objects (like the floor and floating boxes) will have baked shadows. This means that shadows are much less expensive to render.

Decentralisation

A problem I had with my original code is that it was all in one spaghetti file. I split up the code into different files like input, lighting and physics. These are then called from the main file. This creates more organisation so when I add more features later it doesn’t become impossible to read.

Taking action

I set up input actions to be much easier to work with. A list of actions is set up as a key value pair. I save the keys that are pressed and remove them when released from a separate key value list. I then set it up to create CustomEvents for each keybind. These are then used with EventListeners to send signals to the other parts of code to run.

Deployment issues

I also had a couple issues with my code that caused problems with the deployed site. The first was setting the base in the Vite config to “/FPS-OS/” and not “/fps-os/”. It meant you had to use capital letters in the URL to load the site. The other issue was that the objects were trying to get physics before Jolt had been initialised. It seemed to be a race condition that happened sometimes. Luckily it is fixed now.

What’s next?

Next, of course I need to get player movement working so you can actually walk and jump around.
Then I need to follow the requirements of the WebOS 1 mission. It looks like all I need to do is add draggable windows. This OS isn’t exactly going to have windows though. At least not as they are normally. Also I need to add a welcome screen, “desktop” environment, app shop and toolbelt. And all of those require the main room components to be modelled and textured.

New update released

Go to cookistudios.com/fps-os/ to try out the latest features before I’ve even written devlogs on them. See you later!

Devlog 1: Setting the scene

I started the project by initialising it from Vite using Bun (I would use Deno but Bun is just so fast). I imported Three.js to use for everything 3D and used the default cube scene from the documentation. I also added in the PointerLockControls to let you look around as the camera.

Issues arised

You can’t move yet because I tried adding different kinds of movement with all the different physics libraries but it kept causing the player to fall over or not move and then suddenly zip around. I think I’ve decided to use Jolt Physics (but not the built-in Three.js one!) as this site showcases some simple code to get physics working.

Next steps

I have come up with plans for the OS like how the text editor will be an actual notepad you have to pick up and how you’ll be able to build out the space with different floor tiles and furniture.
I also want to add CS:GO/Momentum Mod style movement as an option just because I find it fun to bhop around everywhere.
It also looks like Jolt has a built in class called CharacterVirtual that I hope is similar to CharacterBody3Ds in Godot. Once I have the movement set up I will start modelling some assets to add. I would also like to try using the new HTML-to-Canvas API but it is experimental so it’s not best to use it in a production build that anyone could be running on any device.

See you soon!

This project might take a while to start looking user-friendly but if you want to test it out any time, head on over to: cookistudios.com/FPS-OS