TSL-webgpu-game

Aaaand the game is UP! Put a comment with your lowest time :)

Lots of learning (and pain) on how to publish on github pages (took quite a while, but what I needed to do was change from npm ci to npm install at the workflow, and update the paths for the files on public folder)…
On a lighter note, I did add a new shader for a lava ground effect (adapted from an old tutorial in GLSL, now in TSL), and did some final touches to the obstacles (mostly changed the restitution and the spinner to make it more difficult, but added a bit of a tint color for seeing the obstacles at any angle), I also updated the movement from linear velocity (boooring) to impulse (yay)

Before I forget: please check the two first images and tell me: Should the obstacles be almost invisible at middle angle?

Poor player (was) always running :(… Fortunately I now added new animations, and linked them to the Keyboard Controls (for the first time :p), so the model jumps, runs and stays idle.

Also added the Interface so the game shows your time and you can now restart it (in a new phase).

I guess we are pretty much coming to an end, so next steps I have in mind is updating the collision params (maybe making the obstacles more knock-backy), maybe adding bounds, some other obstacles, and creating a playable demo link… Then some time for feedback before updating it and shipping…

Now giving some more life to the player! It moves!

Had to setup things differently from Bruno’s game, as we are using a different collider than a spherical, so instead of impulse and torque we apply velocity (constant for now, but what are your thoughts? Should I make it incremental to sort of build velocity as you walk?).

The shaders also did a lot for the game experience, as some obstacles are barely visible until you get close to them (having the glitch as a hint of the obstacles)

(Rough) obstacles and level creation done!

The holographic shader works like wonder, and I put a black background for now to better see it. Added the classical obstacles from Bruno’s tutorial, and plan on making more after getting game dynamic working! Maybe I’ll make some more shaders (like separating the stripes and moving them over time) on off (as the debugging time is way too high for me to want to compute)

Also took a nice Crown model from Sketchfab (credits to PatelDev for the model) and put it at the end block

How to improve the visuals? Add (tsl) shaders!

Took quite a long time to get them working (turns out “the devil is in the details”, as I kept forgotting to imediately call tsl Fn functions, and wanted to test on how to default the parameters of a shader (for example in Fresnel effect, I could either pass a custom normal and viewDirection, or take from the default normal and camera to position, in GLSL I would have to create the different variations of params, instead of just using ?? for handling nullish params.
By the way, I tipically converted the shaders from GLSL into TSL using the transpiler :p, so it took quite a bit more of debugging time, and maybe it is a bit junky, but the tool definitely makes porting effects easier…
Hopefully now the shaders can go smoothly, and I can focus more on the game dynamic itself…

We are soo on!

From the vite starter, to a threejs (fiber) starter, into the first block of our platform game!

We set up a special webgpu canvas (try adding /?debug=true&webgl=true) for viewing stats, moving trough the scene, and debugging with Spector(for the webgl) extension, whislt being able to render on webgpu by default.
Then we leveraged rapier to start our platform world, from where we shall make the level blocks!

Keep up!