Hyper-Realistic Sand with WebGL2

(av.github.io)

262 points | by everlier 9 hours ago ago

58 comments

  • evnp 2 hours ago ago

    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"

  • smusamashah 5 hours ago ago

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

  • hirako2000 14 minutes ago ago

    Handles double simultaneous taps n drags. Nice touch!

  • alex_duf 7 hours ago ago

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

    • leobuskin 7 hours ago ago

      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

      • winkelmann an hour ago ago

        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.

      • intrasight 2 hours ago ago

        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.

      • ChrisMarshallNY 6 hours ago ago

        It helps, if you lock orientation on the phone.

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

      • mywittyname 4 hours ago ago

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

      • AndrewSwift 6 hours ago ago

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

      • dylanowen 7 hours ago ago

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

        • nomel 3 hours ago ago

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

    • flykespice 3 hours ago ago

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

      • salad-tycoon 3 hours ago ago

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

        • flykespice 2 hours ago ago

          Probably vibecoded from looking at the menu UI.

    • theowaway213456 6 hours ago ago

      I think it responds to tilting, not shaking?

    • mattlondon 5 hours ago ago

      Nothing happens on my android phone

      • jarek83 5 hours ago ago

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

    • kinduff 3 hours ago ago

      I tried shaking the browser window lol

    • dyauspitr 5 hours ago ago

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

  • nkmnz 4 hours ago ago

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

  • bob1029 3 hours ago ago

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

  • momojo 4 hours ago ago

    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"

  • smusamashah 5 hours ago ago

    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.

    • catapart 5 hours ago ago

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

    • jarjoura 5 hours ago ago

      yup, I would just remove the sound effect completely.

  • weitzj 4 hours ago ago

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

  • lavendermon 4 hours ago ago

    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?

  • mashally 4 hours ago ago

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

  • asaddhamani 4 hours ago ago

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

  • kccqzy 5 hours ago ago

    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.

  • yipinwong 3 hours ago ago

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

  • matt3210 2 hours ago ago

    Finally, the kind of sandbox we deserve

  • cat-whisperer 2 hours ago ago

    a full circle moment

  • hamidmohaqeq 6 hours ago ago

    This is really cool and give a realistic sense

  • techpression 6 hours ago ago

    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

    • vfosnar 6 hours ago ago

      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

    • zamalek 6 hours ago ago

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

      • techpression 6 hours ago ago

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

  • tgtweak 5 hours ago ago

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

  • itomato 4 hours ago ago

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

  • Teladin 4 hours ago ago

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

  • amunozo 6 hours ago ago

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

  • cheapcheerful 5 hours ago ago

    Wow man, very cool.

  • int32max 2 hours ago ago

    woah this is really well done

  • arm32 6 hours ago ago

    This is very fun to play with.

  • customguy 6 hours ago ago

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

    • SamBam 4 hours ago ago

      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.

  • wigster 6 hours ago ago

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

  • hvvivek 4 hours ago ago

    this is super fun! well done

  • samiv 5 hours ago ago

    Cue the whines about not using WebGPU.

  • emilfihlman 5 hours ago ago

    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!

  • nout 6 hours ago ago

    This is annoying to clean up exactly like real sand.

    • bovermyer 4 hours ago ago

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

  • christkv 7 hours ago ago
  • turadg 3 hours ago ago

    anyone who likes that should touch grass

    https://grass.turadg.com/

  • lloydatkinson 4 hours ago ago

    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?

  • Razengan 5 hours ago ago

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