Edit: Latest demo: http://jblaha.art/sketchbook/latest
Just wanted to showcase my project because I’m not sure something like this has ever been done before (most probably yes). Also any feedback is welcome.
If you know of something similar I’d love to see it and learn how other people approach things.
Pretty neat! I like that you added a “render physics” option so we can see how it’s calculating the hitboxes.
I believe Heraclos is also using cannon.js. You can see the way they handled their physics if you hit “Shift + O”. It looks like they optimized their physics engine even further by only calculating collisions that are in close proximity to your character.
You can see a lot of other options if you open the console.
Thats great! i like the style of you shading, is it just a basic Lambert shader with ambient occlusion?
Really smooth! Great job 
Thanks.
The debug options in Heraclos are really cool. And their “free camera” mode is identical to mine, which is funny. I swear I made my own. 
I’d be interested if they made any worthwhile optimisations to cannon. I’ve learnt that it’s not nearly as competent of an engine as I initially thought. It’s still obviously amazing though, especially since on guy made it by himself.
Yes! AO was baked in Blender.
I’m working on “actual” nice graphics. These models really are just placeholders, but I think even placeholders should look somewhat nice.
Thanks!
I’ve never really seen fluid character motion with lots of animations like this, so decided to give it a try.
The whole system is really general, and I’m planning to add cars (which I haven’t seen an amazing implementation of so far in ammo / cannon either) and ways to interact with the environment to make a little GTA clone.
Who knows how long that might take though.
This is really cool, great work! The animations work well, and the “threejs” faces are a good touch.
I’m curious after comparing this experience, Heraclos, and Plume (also made with CannonJS) — what are the pros/cons of using physics-based character controllers, as opposed to (or in addition to) something like a navigation mesh? I understand Unity offers both, and I don’t much about the differences beyond what I’ve read here: https://www.patreon.com/posts/astro-kat-moving-21343562.
All three of the CannonJS-based controls feel a bit sluggish on my machine, as compared the responsiveness I’d expect in a third-person game. A little slow to start, stop, and turn. I’ve implemented a character controller in CannonJS myself before, and my own results were worse than all three of the examples above. 
I’ve also done some nav-mesh based controls (example, with three-pathfinding). It feels more responsive and more predictable, but I also haven’t attempted to implement jumping on a navmesh yet. I imagine there are pros/cons down the road with that.
I hope this doesn’t come across as criticism — I love your example and thanks for sharing it! But I am curious what you and others see as the limitations to different approaches here… is physics better for certain situations? Is CannonJS just not as capable a physics engine as, say, Bullet/AmmoJS? I know AmmoJS has more features, but I haven’t seen a good character controller implemented with AmmoJS, either.
@donmccurdy I believe RoboStorm was built with the PlayCanvas engine, which uses AmmoJS as its built-in physics library https://playcanv.as/p/BAuoCOx6/ Not sure how, specifically, they implemented it though, since it’s not open-source. Space Buggy is another example using AmmoJS.
It’s the mighty McCurdy himself! Thanks for giving feedback, really appreciate it.
I guess it’s a matter of taste. I too find Heraclos’ and Plume’s movement quite sluggish, but I’m quite happy with my controller. I intentionally added velocity easing to complement the animations. It’s no problem to make it more responsive, or even as responsive as your example.
In the end, with a system like mine, you have complete control over how responsive the system is. The vast majority of the movement is custom logic. I only leave things like gravity to the engine, but adjust all the calculated velocities to my liking. My movement is basically physics engine agnostic. I can do with any engine that offers raycasting and rigid body collisions. I actually switched from Ammo to Cannon because I found Ammo to be lacking quite a bit in bunch of areas.
It’s a matter of tweaking the parameters to get the behavior that you like. I’ve read that people find the movement in Read Dead Redemption 2 sluggish and frustrating, whereas I find it beautifully fluid and wouldn’t expect anything else from a Rockstar games title. So again, really seems like matter of taste. And in my case, overly sluggish movement would really be a fault on my part and nothing to do with the physics engine.
To be honest I’ve never even considered purely nav-mesh controls. I definitely think of nav-mesh logic as something that builds on top of physics based character controller. In fact it’s on my todo list to try and implement the amazing three-pathfinding in my demo. 
A physics based controller is necessary if you’re building a game like GTA, and want to make sure that your character will behave fine in any situation, moving on top of, or colliding with any kind of geometry imaginable, moving on top of dynamic entities like cars, and even do things like climbing, swimming, etc. It’s a general way to define character behavior. The next step would be to implement nav-mesh pathfinding to aid the AI in moving around.
I think your example would be useful for a walking-simulator type of game, like The Witness. But it does seem very restrictive in that I can’t go anywhere beyond the nav-mesh defined by the level designer. Still, enough for some games.
great demo, really impressive.
I evaluated a few different physics engines for JS a while back, including cannon. I came to the conclusion that “Ain’t Making My Own”.js is the serious option, the rest are just too weak. I also wrote a character controller a while back, it was fairly similar to yours - capsule, using forces, built on ammo.
Can definitely see where you’d want to use physics for a game with vehicles, yeah.
For dynamic obstacles, climbing, and swimming — I’m confident you can do most of that with a navigation mesh too. Libraries like Recast have neat features that I’ve been wanting to explore that alongside three-pathfinding. Whether that’s easier or better in any way than using physics for the same things, I have no idea. With the Blender 2.80 (temporarily?) not having navmesh-creation features, that workflow has become a bit less convenient for sure…
If you get around to it i’d be curious to see a demo with the players’ acceleration/deceleration cranked up, or I may try that out when time allows. Thanks again for the demo!
I’d be interested to see more complex behavior with your purely nav-mesh controls. I just went off GTA 3, which I’m essentially copying in my demo, because it seems like Rockstar have figured out a good general approach to character movement many years ago.
Here’s maxed out spring acceleration:
jblaha.art/examples/min-spring.html
You can still feel the springiness in this one which is kind of annoying. We could get rid of that by implementing something like lerp smoothing, instead of springs. Again, you can treat the velocities any way you like.
And here’s no smoothing at all:
jblaha.art/examples/no-spring.html
The point of smoothing is really just to give the character sense of weight, and have more natural movement. And of course, animations play a big role as well. A different animation set with a more agile character would probably make it feel completely different.
A colleague and I have developed for Yuka a navigation mesh implementation that I’d like to share at this place. It performs merging of convex regions and also uses a spatial index to improve performance. Besides, it’s also possible to use it with Yuka’s task mechanism based on window.requestIdleCallback() in order to distribute computational work over multiple frames.
This is still work in progress but we already use it in many demos.
https://mugen87.github.io/yuka/examples/navigation/navmeshPerformance/
Of course you can also use the navmesh to restrict the movement of game entities and the player like demonstrated in this First-Person demo:
@swifterik Thanks! The “maxed out spring acceleration” example feels good to me, I guess it’s just different expectation/perception after all. 
The “no smoothing” example feels very responsive, too, but the instant character turning throws the feeling off a bit.
@Mugen87 that’s very cool! And quite a broad API! I haven’t seen many game-related libraries for WebGL libraries and have wondered why that is. Will be exciting to see more complex AI behavior on the web in the future. I spent some time trying to get Recast/Detour compiled to WASM, and some Mozilla engineers actually got that working I think, too.
Great, I like it a lot.
If you do not mind, I’d like to get inspired.
It’s a good job.
Sure be my guest
I’ll be happy to help you if you have any questions on how anything works…
Pretty sweet controller and handling!
Do I get this right, this is kind of a sandbox framework free to use for building games?
Your backlog looks quite ambitious, any plans on also adding First Person Camera?
I’d love for it to be a framework for games, but that’s a little too ambitious, since I’m just one guy working on this in my spare time.
The original idea was to get a web based app in which I could showcase my 3D characters on the web. (Something like your showcasev3) I think that capability is present now.
As I went along, I realised I could easily go further, and the first milestone I’m trying to achieve now is a basic GTA clone, with vehicles and simple melee combat.
I don’t currently have any plans for first person controller. I guess it could easily be implemented, especially if we didn’t care about third person characters animations while you’re in first person, but even that could be set up with some work. It’s just not a priority.
I really enjoyed your threejs-fps. We seem to be interested in similar things when it comes to three.js.
I love this project!
I wanted to play around with it but, being kind of a noob, I still haven´t figured out how to set the rigid bodies from blender. What is your workflow?
I just wanted to start creating a couple of shapes and walk around them. Is blender (2.80) gLTF exporter enough?
