Hyper-Realistic Sand with WebGL2 | Hacker News Reader

Hyper-Realistic Sand with WebGL2

av.github.io

311 pointseverlier64 comments

Super loud sound warning, us parents and folks wearing headphones would really appreciate default sound off. Or at least a some indication to turn volume down before tapping "pour"

Found source repo here https://github.com/av/safe-sand

I notice that different types of sand sound different - the timbre of the sand falling onto the table and shuffling around is noticeably different between the various types. I was curious if the differences in the sand were being physically modeled to synthesize sound.

It’s a physics-based generation but the simulation model is somewhat limited; essentially a few parameters that vary between the sand types, some randomization, and responsiveness to flow rate. Still, it’s highly effective; something like the fine, silty desert sand is noticeably brighter and sounds more like a hiss as it pours and flows than the rocky volcanic sand.

Very cool effect, this is joyful to play with.

On a mobile phone it makes a lot more sense. Try shaking it!

It doesn’t in my case, I see some weird animation, everything disappears, “pour” button again. Shaking or any other movement doesn’t help. Latest chrome on iOS

The sand is pouring onto the phone screen so if your phone is tilted or upside down it looks illogical

Thank you! I was looking at it while lying sideways and thought it was completely broken. But, it's just hyper-realistic. ;)

Works for me in Safari — iPhone 17 Pro, all up to date

It helps, if you lock orientation on the phone.

Whenever the phone detects an orientation change, it resets the layout.

Do you have shake as undo still enabled? It's one of the most annoying features in iOS.

Because if you turn it upside down, the sand pours out. Think of it as if you have sand in a rectangular tray with no lid.

It also responds to touch, which I didn't know until the third time I played with it.

It took me a while to realize this isn't a falling sand (Powder Toy) type game. The phone has to lay flat, i.e. with the screen facing up.

I think it responds to tilting, not shaking?

Nothing happens on my android phone

I had that too on brave then realized that brave locks all permissions. It worked as expected in chrome

Ok in Firefox on Android I got the tilting to work. Super cool! No sound though.

Maybe it’s too much for my iPhone 13 or something, I can see it but it’s all choppy and slow

The demo runs like a slideshow on my humble budget android phone from 2021

Don’t worry, it runs like a flip picture motion book on an iPad a16 (current gen. Base model iPad).

Probably vibecoded from looking at the menu UI.

I tried shaking the browser window lol

Something seems wrong with the stones. They seem to move way to fast. They need more friction.

Probably a bug, but the audio was just distorted noise without end.

oh wow, the stones even have some water around them. This looks and feels real.

And if you manage to collect a lot in one place, the sand from the pile does fall like real sand. This is amazing.

The sound is not good though.

They have different characteristics, too. The red, desert sand is clumpier than the beach sand, for instance.

yup, I would just remove the sound effect completely.

This brings me a lot of joy. I love little toys that exist for no other reason than "I really want this to be a thing"

Does it make Patterns if you put a sine wave on your phone's speaker? What are they called? Moirée patterns?

I like how when my phone's forward vector is aligned with world up all the sand falls out.

Tried this on desktop and mobile, totally different experiences. I love the residue effect on the screen after I tilt the sand around on mobile. Next step: hourglass or maybe a snow globe?

It was a lot of fun. I wrote I love you phrase to my gf and she liked it.

I just spent 15 mins playing with this on my phone, it was a lot of fun!

Handles double simultaneous taps n drags. Nice touch!

It didn’t look realistic to me until I added `?sand=beach` to the URL. Maybe I only associate sand from the beach as sand. Others I call silt perhaps incorrectly.

a full circle moment

I wouldn’t call it realistic, sand gets stuck in the air, stones don’t rotate, and there’s quite an uncanny valley effect based on angles. Still a cool demo of what is possible, even though I get 10fps or something on a iPhone 15 Pro

What do you mean "stuck in the air?" It's top down.

They don’t move, not even when pressing with your finger, “stuck on the ground” then, it’s the same outcome.

didnt encounter the stucking issue but agree with the overerall point, the sand gets a sort of 'build-up pressure and bounce back' effect which breaks the immersiveness for me, otherwise cool

This is really cool and give a realistic sense

I felt like a kid playing with real sand in decades playing with this.

10 fps on merely 3 years old Android phone.

It's quite amazing. I've found if you simply give the LLM a slight hint that things should be optimized for all devices, you can get tenfold performance of the original one-shot. But I think this is still a secret tactic because none of these have been optimized in the slightest.

Originally I felt eh maybe you have to have an old coder's mind to tell the LLM how to keep things optimized... But yeah nah not anymore, you just tell it to optimize.

This does not seem very realistic at all. Cool slop I guess,

You are managing to use my GPU so inefficiently that the transient spikes are bumping my speakers out of standby

This one does much better at retaining volume than the smudge demo last week :)

You can play a nice little round of Bocce with the stones

Finally, the kind of sandbox we deserve

I am feeling the sand physically at watching at this, good job!

Wow man, very cool.

Seeing all the Macbook Pro PROLED XDR Touch Screen geeks finding a use for their new device :D

This is very fun to play with.

Zooming on the desktop makes it more dense looking, which is probably not intended but can look very cool IMO.

Such a curious effect, although it makes sense given that each particle is probably being positioned in absolute coordinates with respect to the screen boundaries. So each grain gets bigger but stays in place.

i feel like i'm watching a stop-motion movie as it moves. very nice

woah this is really well done

this is super fun! well done

Cue the whines about not using WebGPU.

I think it's lacking momentum, the sand stops way too abruptly, and the audio also has too harsh cutoff. It also falls too fast.

Otherwise really amazing!

Reminds me of this demo game https://store.steampowered.com/app/3216520/Sandcastle/

This is annoying to clean up exactly like real sand.

Yeah, it's coarse, and it really gets everywhere.

anyone who likes that should touch grass

https://grass.turadg.com/

Runs like crap on iPhone 14. I know it’s not the current generation of phone but is there really that meaningful of a difference between that and a current one?

Naturally the first instinct of man is to draw a penis.

Reply on news.ycombinator.com