You are browsing as a guest. Sign up (or log in) to start making projects!

Physics Based Character Controller

  • 6 Devlogs
  • 39 Total hours

A physics based character controller built with Three.js and Rapier, focused on realistic movement, procedural animations, and maybe even ragdolls.

Open comments for this post

10h 3m logged

Since the last dev log, I’ve spent most of my time building out the animation system for the character controller. The character could already move, but everything felt super basic visually so I wanted the animations to properly react to what the character is actually doing instead of just switching between a few animations.
I started by adding a basic locomotion animation system with idle, walk, and run animations. I added blending between the different locomotion states based on the character’s movement speed, so the character doesn’t immediately snap from one animation to another. I also added other details like adjusting the animation playback speed based on the physical movement speed making everything feel more realistic.
While working on locomotion, the animations didn’t look too good because I was simply playing one animation at a given time so I added support for separating the upper and lower body using bone masks, which allows different parts of the character to be animated independently. After that things started to look better but the animations that I had added on the model weren’t good so I spent a lot of time finding and adding more and better animations to the model. One of the changes I made with the new animations was combining multiple idle animations together instead of having the character constantly repeat the same idle pose making the character feel alive when idle.
After that I moved on to the character’s vertical movement. I connected the fall, jump, and land animations to the character state system. The animator now plays the animations based on whether the character is jumping, falling, or landing based on the physics state rather than input alone. I also added separate jump animations for jumping while standing still and jumping while moving, so the animations look good.
The landing animation required more work since it didn’t look polished so I added landing detection based on things like fall height and fall speed so that small steps don’t trigger a landing animation. And finally I added a rolling animation for falls from high places. This took quite a while to get working and it still isn’t perfect but I am working on it.
At this point the character’s animations are pretty much almost complete. Next I want to continue improving the animation system by adding animations for crouching and adding transition animations like idle to walk, etc and also finalizing the roll animation. And after that I want to start making stuff react to the environment.

0
0
12
Open comments for this post

7h 32m 13s logged

I continued working on the character controller by moving into the visual side of the project and integrating a proper player model. I added a new character model and tuned its scale and positioning so that it correctly matches the physics body. I also added an asset loading system and a basic loading screen so that the character and assets in the future can be loaded before the game starts.
When I was working on the project I felt that everything looked weird and that was because I forgot to add shadows. So I added them and then spent quite a bit of time improving the lighting and shadow quality. I also added tone mapping to make the scene look better. While testing the character model, I ran into shadow acne and something called peter panning, so I spent some time tuning the shadow bias and normal bias to get a balance between the two.
I also noticed that the character and small vertical movement/jitter while walking on flat ground probably because of the physics adjusting it’s position. I added direction Y smoothing to the character model so that small physics corrections don’t make the character appear to jitter while moving. Also the camera movement wasn’t good so to make it better I added vertical smoothing to it.
Previously, the shadow camera covered a fixed area of the world which made stuff not in the coverage area have no shadows so I improved the directional shadow by making the shadow coverage follow the player. And the final change was working on the model’s materials since the character looked overly metallic and glossy in Three.js even though it looked normal in Blender. Turns out the materials had an incorrect metallic value, so I corrected that and adjusted the roughness to make everything look good.
Next, I’ll finally start building the character state system and start moving toward animations.

0
0
13
Open comments for this post

6h 7m 48s logged

I continued working on the character controller, by adding crouching now allowing the player to move underneath surfaces and other obstacles. Getting this working correctly took a lot more time than I expected because changing the character’s collider size introduced several physics related bugs like the character getting stuck or incorrectly standing up when there wasn’t enough room above, as well as making sure crouching and standing transitions behaved correctly which took a lot of time to fix and get right. I also added an unstuck mechanism to help recover the character if they end up in a weird position.
I then cleaned up the code making it easier for me to add other features I have planned. Next, I’ll build on the character state system and start moving toward the animations of the controller.

0
0
27
Open comments for this post

6h 4m 23s logged

I continued improving the basic character controller and worked on turning into a reusable system. I separated character movement, physics, and the visual model into their own components and refactored input into a dedicated character input object so movement data can be passed through the system pretty simply and made it way easier to add other inputs in the future.
I added acceleration and deceleration, sprinting, and jumping, while also improving the existing movement to make the controller feel better and everything less floaty. I also fixed some movement related bugs like temporarily sticking to ceilings when jumping.
I also added the entire character state system. I created a state tracker that derives useful information from the character’s movement and physics, such as velocity, movement direction, speed, grounded/airborne state, landing, jumping, slopes, sliding, wall collisions, ceiling collisions, fall height among many more.
This is pretty much the foundation for the state machine and animation system by instead of making animations directly tied to physics or movement code they can be made to react to the character’s current state. This pretty much make it possible to build stuff like strafing blend trees, jump/fall transitions, landing reactions, and eventually more environment aware animations easily.
Next, I’ll start building crouch functionality before adding animation stuff.

0
0
7
Open comments for this post

7h 4m 32s logged

I built the very basic version of the character controller. I implemented a basic kinematic character controller with gravity, collision handling, slope detection, sliding, stair stepping, and snap to ground behavior. I then added keyboard input and a very basic third person camera so the character can at least be properly controlled for testing.
I also fixed some bugs one of which was movement jitter and added stuff to test the controller and also added a physics debug visualizer. I also created config files so that values can easily be tuned and changed and to avoid hard coding stuff in the code.
The foundation of the character controller is mostly in place. Next, I’ll work on improving the movement by adding acceleration and jumping. After the movement feels good, I’ll add a real character model, its animations and a state machine.

0
0
4
Open comments for this post

2h 8m 49s logged

Set up the project’s basic architecture by creating Vite app using TypeScript, initializing the Git repository, integrating Three.js before modularizing my code and making it clean by separating the scene, camera, renderer, and game loop into dedicated classes. I also added a custom time system with delta/elapsed time tracking for like animation stuff and a fixed timestep for physics stuff, then integrated Rapier and built a basic physics world with gravity, collisions, and a few test bodies. Next, I’ll start building the basic character controller which lays the foundation for all the work to come.

0
0
7

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…