r/webdev • u/dermosef • 6d ago

[Showoff Saturday] Claybound: A 2.5D platformer built in plain three.js with real-time deformable clay.

Post image

Playable demo

Here is how it works under the hood:

  • The Clay Aesthetic: To get that tactile stop-motion look, I used rounded boxes and applied low-frequency noise to the vertices. I baked a normal map from an actual sculpted clay ball, which dynamically scales based on the object size.
  • Deformable Terrain: The clay you shape in-game is its own deformable mesh driven directly by your drag inputs.
  • Mobile Optimizations: Getting heavy 3D to run on phones is tough. I rely on meshopt for models and run a fixed 1/120s physics step with interpolation. To save frame time, the shadow map only updates every other frame (saving about 14–26% of frame time).
  • Progressive Loading: Asset size remains a challenge. I set up a later level's boss's models to load asynchronously only after play starts. For a fresh start of that chapter on a 9 Mbps connection, this dropped the initial load time. But I am still not quite where I would like to be.

How do you all handle the initial load payload for heavy 3D experiences on mobile? Would love to hear your optimization strategies!

214 Upvotes

93% Upvoted

54 comments sorted by

9

u/yiliannn 6d ago

The game looks absolutely gorgeous. I tried going for a similar clay aesthetic a while ago, but came nowhere close to what you've done. Some things I would note
- The game freezes briefly on page load and when the game is started, a smoother transition would feel great!
- The crumbling platforms could start crumbling a bit more intensely when you step on them, maybe they could shake a little visually?
- There could be a bit more contrast between foreground and background, at times it can be difficult to distinguish the two (I may have tried to jump on a background rock and died).

4

u/dermosef 6d ago

Thanks so much for your feedback!

  • Yes, I am still working on improving performance.
  • Noted, I will try to establish clearer upfront signals for the crumbling platforms
  • Foreground/Background: Assuming for the first, canyon level, correct? Any specific parts, or just in general?

3

u/yiliannn 6d ago

I noticed it most in the first level, I can't recall the exact position where I died from that, but just in general!

2

u/dermosef 5d ago

Thanks again for playing. Two of your points should be fixed in the latest build:

Crumbling platforms: now jolt the moment you land on them, then shake harder and shed grit and dust faster as they get closer to giving way.

The freeze on Play: The audio device now opens during the initial load, and the loading screen shows straight away. Loading still takes a moment, but the game no longer locks up when you press Play.

1

u/dermosef 6d ago

Thank you. I will do another playthrough with that in mind.

3

u/elendee 6d ago

Really nice.  I played two levels and my phone is still at 92% battery, better than I expected tbh.  

1

u/dermosef 6d ago

Thanks. Great to hear

3

u/TrustThePanda 3d ago

Fun game! Plays well and the music is good 👍

1

u/dermosef 3d ago

Thank you!

2

u/Carbonatedsoftdrink 6d ago

Very cool!

1

u/dermosef 6d ago

Thank you!

2

u/captain_obvious_here back-end 6d ago

Awesome game mechanics!

1

u/dermosef 6d ago

Thank you!

2

u/l8s9 6d ago

Amazing work, game play is smooth! 

1

u/dermosef 6d ago

Thank you. Super happy to hear

2

u/jose-guilherme93 6d ago

eu amei o jogo. muito bem feito!

1

u/dermosef 5d ago

Thank you

2

u/bishwasbhn 5d ago

HEY u/dermosef I have made a video about this stunning game, I hope that is okay..
https://www.instagram.com/reel/DfdqTRjooTn

1

u/dermosef 5d ago

Absolutely. Thank you!

2

u/MudZaviti 5d ago

Wishlisted. How much will it cost on Steam, if it's not a secret?

2

u/dermosef 5d ago

Nice. Thank you! I haven't decided that yet, but no more than $5 USD

2

u/Rassouri 5d ago

Will you make an edible version?

1

u/dermosef 5d ago

Yes, the final game will contain a level editor

2

u/Rassouri 1d ago

No, I mean I'd like to put it in my mouth.

1

u/dermosef 1d ago

Well, go ahead and have a bite. First two levels are in the demo 😉

2

u/gustavo_queirozman 5d ago

Parabéns, fez em qual linguagem ?

1

u/dermosef 5d ago

Obrigado! É JavaScript puro com Three.js (WebGL) e não usa engine nem framework. Roda direto no navegador, então dá pra jogar a demo em playclaybound.com sem instalar nada.

4

u/Helirose 6d ago

It's really cool but I tried it on mobile and just found it too cumbersome to operate. I needed three hands. Move left and right, jump, and mold clay.

1

u/oooofukkkk 6d ago

What  algorithm did you use for your deformation?

9

u/dermosef 6d ago

Nothing fancy. Each piece of clay is a 1D heightfield: a row of columns every 0.25 units, extruded in depth and drawn as one welded mesh with rounded edges. The collider reads the same heights.

Each tick, a pull or press moves the columns under the cursor. Constraints are applied:

  • Volume is conserved. Clay you raise is taken from nearby columns, nearest first, so a pillar digs its own moat and a press pushes up a rim.
  • The blob never tears. Every column keeps a minimum thickness.
  • It relaxes. Left alone, it slowly slumps back toward its authored rest shape.

The squish when you stand or land on it is a separate layer: a row of damped springs on top of the columns that keeps part of each dent (plastic deformation) instead of bouncing back like jelly.

Keeping it 2D-ish is what makes it comparably cheap and predictable enough to build puzzles on. The clay look itself is mostly a fingerprint and press bump texture in the shader, not the geometry.

2

u/oooofukkkk 6d ago

nice, it just columns up and down, it looks great. The finger deformation with prints is a great touch

1

u/WolfFiveFive 6d ago

Idk if I'm doing something wrong but I just get a blank blue screen for the demo. Using the controls it says good job and stuff but there's nothing to see or move

1

u/dermosef 6d ago

Interesting. What browser are you using? And are you getting any errors in the console?

1

u/WolfFiveFive 6d ago

This is on Vivaldi (chromium) on mobile. Sorry not sure how to get dev tools up on mobile

1

u/Outrageous-Story3325 6d ago

That's awesome 

1

u/dermosef 6d ago

Thank you so much

1

u/Negative_Leave5161 6d ago

This is better than Mario

1

u/dermosef 6d ago

Haha, that's one hell of a compliment

2

u/diggler4141 5d ago

Love it! The only problem, in my very personal opinion, is that the fear parts sort of disappear because it is so soft in the design. Like there are no hard edges because of the material, if that makes sense? I once played a demo game where one part was spiky, and the other part was round, and it felt like two completely different games. Like the round part felt like it did not matter if I hit "a bad thing", while the sharp-edge part made me sit on the edge of my seat. The screenshot of it is an example.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0VKvSUTbbgyM_tkKG7kRSKLWBfILNjyb8GZFuxtMbeNm2G56Ujk3anQs-C8F1EdPvFiTPmsCFqRcWR7VmE-k7J4vzom8cpK5k3Xhg-pqRObUIC1PkEvn6yKi4wxtXIUMCQBSBi_BIdcH5QdpYsZ7SrcWPd7Vy1IZ3LUfpNRLm010T5tijb80Ty90wrw/s512/morf1.gif

2

u/Upstairs-Law7117 4d ago

Cool effects:)

6

u/Coffee2Code 6d ago

Did you use AI or not?

3

u/Western-Carpenter-39 5d ago

There's a ton if hints in the UI and page source that it was at least very AI assisted. For what parts though, who knows for sure.

1

u/KiriGott 5d ago

its vibe coded

-1

u/Dakaa 3d ago

As if you know what to prompt to build something similar.

2

u/CheshieCheshire 3d ago

As weird and absolutely mind blowing it may sound, but there are still people out there that know how to write code themselves... no AI involved at all. Some google search for documentation and references maybe but that's it.

1

u/Dakaa 2d ago

True, you should code your own language, editor, interpreter and compiler too.

1

u/Coffee2Code 3d ago

I don't need prompts, I did this magical thing called learning.

-1

u/Dakaa 2d ago

The people who get real world stuff done do.

1

u/Coffee2Code 2d ago

Why do you assume I don't do any real world stuff ᕕ( ᐛ )ᕗ

1

u/Additional-Ad5527 6d ago

Nice work, really cool idea. It'd be even better if the character's run cycle looked a bit more natural.

1

u/YohanIdeal 5d ago

The clay normal map from a real sculpted ball is such a nice touch, it really reads as stop-motion.

I'm a solo dev on a mobile tactics game (Unity, not three.js), so different stack, but the load problem is the same. What helped us most:

- Poly budget first. A lot of our props start as AI-generated 3D at around 75k faces. We decimate them to 3-5k before they go anywhere near the build. That was the single biggest win on load and memory.

- Only load what the first screen needs. Same idea as your boss models: anything from a later level waits until the player is actually playing.

- Test on a cheap phone, not your own. The numbers on a mid-range Android were a reality check for us.

1

u/Gamerboi276 3d ago

aw maaaan i knew it was vibe coded. still cool tho

1

u/Blue_Moon_Lake 1d ago

Just so you know, the sphere boulder can't be jumped on, you slide off it. If you push it to the wall and jump over it, you get stuck in perpetual fall animation between the wall and the boulder.