I've built a new open-source (MIT licensed) Elemental Sandbox containing 9 new abilities, a VFX playground built with Three.js & this time you cast with your hands. Open palm aims. Fist casts. Point right with your left hand to switch. Real-time hand tracking with MediaPipe by Google, running in... the browser. No webcam? Run it locally and your phone becomes the camera over WebRTC. Hand-written GLSL, GPU-simulated instanced particles, world position resolved in the vertex shaders... Source code: Live link:show more

@threejs @slopa_io

@threejs

@threejs

@threejs Needed mode resources around power/magic effects! These are 👍

@threejs ✨🙌

@threejs Thank for sharing Brodie!

@threejs Glad you love the project 🙌

@threejs Integrated these effect in the 3 games I'm developing. I do question, what happens when everyone has everything who will use anything else?

@threejs i’ll just have to invent new ideas each time 😭 trying to convince everyone to use thr new ones

@threejs

@threejs wow cool how do you make it🤓

@threejs Thanks 🙌✨

@threejs add option the export the procedural mesh so we can use it in the other game engine same mesh

building it in the game engine is the way to do it in this case, u can give the project source code to ur AI tool that u use and ask him to recreate it in the native particle system of ur game engine. cause exporting the spell for example to alembic format is not budget friendly for performance

@threejs Casting spells with your hands is so cool

@threejs My guy, you’re a legend.

@threejs Thanks 🙌✨

@threejs how well does the fist cast actually feel in practice?

@threejs pure sorcery, works well !

@threejs I literally checked earlier today to see if you did an update. Btw, I've been reformatting your abilities to work with webgpu if you ever what me to send over to you

@threejs well, u can still send a PR so i can check it but honestly i can’t merge cause im still experimenting each time with something

@threejs No need to merge, just wanted to make sure I tossed you credit and you knew about it + give you access to anything here in the event you want to use it

@threejs Can this be integrated into a mobile and PC game?

@threejs Yes definitely 🙌

@threejs Damn bro, godlike skills. How do you make them?

@threejs i usually generate the visual effect shot image reference and then do a breakdown for each particle emitter and work on each one separately to get the final effect

does the phone-as-camera path work on iOS Safari too?

should be

@threejs this is sweeet, glad you open sourced it. My demo only used webcam, love the WebRTC integration

@threejs Thank you ✨🙌

@threejs shaders are mind blowing

@threejs Thank you ✨🙌

@threejs Wow, amazing visuals🤩 thanks for sharing!

@threejs Thanks you for checking it out 🙌

@threejs Hey OpenAI more training data for Astra!

@threejs

@threejs I'm joking with you but it kinda saddens me to know that somehow our AI overlords are going to manage to replicate your awesome work.

@threejs i'd reach for my coffee and accidentally cast a spell

@threejs 🤣🤣🤣

@threejs Incredible

@threejs Thank you 🙌

@threejs This is a nice interaction mapping. Open palm, fist, then a single pointing hand keeps the spell vocabulary learnable instead of turning gestures into a whole control scheme. The hand-tracked camera view is a great touch too.

@threejs Thank you Daniel! 🙌✨

@threejs this is wicked, hand tracking makes the whole thing feel like magic

@threejs yep

@threejs That’s amazing! Incredibly impressive!

@threejs Thank you 🙌

@threejs real-time hand tracking opens up a ton of creative possibilities for interaction

@threejs Yep, i feel like i wanna do a lot more of these in the future 🙌

@threejs Awesomeness! I will add some of these to my pirate ship game 🍻

@threejs Sounds great ✨

@threejs This feels wonderfully tactile. How stable is the hand tracking across different lighting?

@threejs i think it’s extremely reliable, I think there is no better library on web that can compete with Mediapipe, i was impressed when i tried it in both dark and overexposed light, it always keeps track 🙌

@threejs Phoenix spell was pure art! Great work :)

@threejs Thank you 🙌✨

@threejs You’re one of the most badass devs out there That Phoenix 🐦‍🔥 is 🔥🔥

@threejs Thank u 🙌🔥

@threejs The phoenix is fiiire 🔥

@threejs Thank you 🙌✨

@threejs Absolutely mindblowing

@threejs Thank you ! I really appreciate it ✨

@threejs Dropping straight heat every week like it is just routine work.

@threejs it’s fun to work on these projects, what can i say

@threejs Hand gestures as spell controls are a great match. Is there a safe resting pose, or am I going to cast something every time I explain the demo with my hands?

@threejs oh shit i see a drone.. any piloting control over the drone? i was going to make a drone camera

@threejs well i think u can make the changes to make it work as a first person controller 🙌✨ feel free to cause the project is open source

@threejs The open-palm-to-fist mapping is nicely legible. Do you debounce gesture transitions or require a confidence hold before casting? A dropped tracking frame shouldn't become an accidental spell—especially when the camera arrives over WebRTC.