Loading video...

Video Failed to Load

Go Home

Casting Abilities is my new open-source Avatar bending sandbox in the browser. Using Google AI Studio + Three.js, hand-written GLSL, GPU-instanced particles. Draw a path, release, and Fire / Water / Earth / Air rides the spline and detonates. Or switch to walk mode and ride it yourself on...

56,012 views • 1 month ago •via X (Twitter)

75 Comments

Danny Limanseta's profile picture
Danny Limanseta1 month ago

@GoogleAIStudio @threejs wow these vfx looks spectacular!

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thank you 🙌

Three.js Resources's profile picture
Three.js Resources1 month ago

@GoogleAIStudio @threejs That is so cool, I just finished the second season on netflix :D

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs same that was my inspiration 🤣✨

Three.js Resources's profile picture
Three.js Resources1 month ago

@GoogleAIStudio @threejs Then turn of the fire bending we are not there yet 😁 that is in a next season 🤣

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs i Tried to guess how it would look 😭😭

Kevin Rajan's profile picture
Kevin Rajan1 month ago

@GoogleAIStudio @threejs oh ya btw is this open source or do u have any plans to?

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs i think for now i have no plans I’m just creating showcase creative projects. feel free if you want to make a game out of it cause it’s under mit license

AI Mastery Guide's profile picture
AI Mastery Guide1 month ago

@GoogleAIStudio @threejs How long did Water take you to build

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs few days (probably 2-3) i wasn't fully on it & i went through way too many iterations

AI Mastery Guide's profile picture
AI Mastery Guide1 month ago

@GoogleAIStudio @threejs That many iterations for one element shows how much care went into getting it right.

iTokens.io ⚡️ AI API's profile picture
iTokens.io ⚡️ AI API1 month ago

@GoogleAIStudio @threejs The walk mode where you ride the path yourself is a great touch. Are you computing the spline on CPU and streaming to GPU, or doing it all in-shader?

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Both. Spline’s on CPU since the rider’s transform reads back off it. Only the ribbon verts stream to the GPU. Everything that glows is in-shader.

raillen.me's profile picture
raillen.me1 month ago

@GoogleAIStudio @threejs @nftinsiderbr pira aí! kkkkk

Jehad Uddin's profile picture
Jehad Uddin1 month ago

@GoogleAIStudio @threejs bro i loved it really its soo peak

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thank u so much 🙌

Spectro's profile picture
Spectro1 month ago

@GoogleAIStudio @threejs Shockingly good, thank you

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thank you ! much appreciated 🙌

Talocode's profile picture
Talocode1 month ago

@GoogleAIStudio @threejs Great

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thank you 🙌

Adam's profile picture
Adam1 month ago

@GoogleAIStudio @threejs I really like your work, very inspiring 🔥

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs I really appreciate it 🙌 Thank you

OmedTheVibeCoder's profile picture
OmedTheVibeCoder1 month ago

@GoogleAIStudio @threejs Wow, thanks for real, all that with gemini guys, lmao

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thank you ✨

CharlesUChi's profile picture
CharlesUChi1 month ago

@GoogleAIStudio @threejs Holy hell that is beautiful. What part of ai studio did you use to author this?

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Gemini flash and claude combined ✨

Ahren D. Axel's profile picture
Ahren D. Axel1 month ago

@GoogleAIStudio @threejs cool

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thank you 🙌

G2G's profile picture
G2G1 month ago

@GoogleAIStudio @threejs

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs

munyiika's profile picture
munyiika1 month ago

@GoogleAIStudio @threejs Wow that looks fantastic! Are u accepting any for of donations? We could support u via crypto donations maybe.

安叫兽|Bird🕊️ 🔶 BNB's profile picture
安叫兽|Bird🕊️ 🔶 BNB1 month ago

@GoogleAIStudio @threejs 画路径放技能这一下很有手感

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Glad you like it ✨

Kevin Rajan's profile picture
Kevin Rajan1 month ago

@GoogleAIStudio @threejs yo, I'd love to help out with development in any way, do you have any guidelines on how to contribute to the repo?

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs well honestly i’m not planning to expand it more. but feel free to fork and make ur own version out of it 🙌

Pavel's profile picture
Pavel1 month ago

@GoogleAIStudio @threejs Really nice work. Are the abilities sharing the same spline system with different shaders, or does each element have its own simulation?

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Hey ! i’m sharing the same spline system between all the elements

Dotya's profile picture
Dotya28 days ago

@GoogleAIStudio @threejs Hollllly fuckkkking wowoeowow

Chiro Visuals's profile picture
Chiro Visuals28 days ago

@GoogleAIStudio @threejs

Dani Corralejo ⭐️⭐️'s profile picture
Dani Corralejo ⭐️⭐️1 month ago

@GoogleAIStudio @threejs Really really great work, looks incredible! Any tips of how to start vibe coding games in threejs? I have used this library for building charts and graph mainly for data analysis. Thanks

Chiro Visuals's profile picture
Chiro Visuals1 month ago

There are a lot of references that u can find on the official threejs website and also in my previous posts, i have a lot of opensourced projects. u can start by checking some showcases of other people and try to get an understanding of how things are working and then u can guide the ai through what u want to implement .

Dani Corralejo ⭐️⭐️'s profile picture
Dani Corralejo ⭐️⭐️1 month ago

@GoogleAIStudio @threejs Thanks so much for your advice. I'll start checking your posts and open sourced projects.

Volodymyr's profile picture
Volodymyr1 month ago

@GoogleAIStudio @threejs woah! this is amazing and inspiring

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thank you ! i really appreciate it 🙌

Volodymyr's profile picture
Volodymyr1 month ago

@GoogleAIStudio @threejs no brainer follow :D

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thank you

Can Matrix's profile picture
Can Matrix1 month ago

@GoogleAIStudio @threejs Congrats very good this

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thank you 🙌

Brian's profile picture
Brian1 month ago

@GoogleAIStudio @threejs whats being used for the human movements/animations?

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs mixamo for idle + the sitting is procedural and done inside of threejs

SKYNET's profile picture
SKYNET1 month ago

@GoogleAIStudio @threejs I love it. Could you create a prototype to create MOBA/MMORPG game skills? It would be very useful.

American Nerd 🇺🇸's profile picture
American Nerd 🇺🇸1 month ago

@GoogleAIStudio @threejs GitHub heroes! Can’t save these links fast enough.

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Glad you like it 🙌

Lorenzo Nuvoletta's profile picture
Lorenzo Nuvoletta1 month ago

@GoogleAIStudio @threejs Holy cow! This looks amazing!

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Much appreciate 🙌 Thanks

John Brophy's profile picture
John Brophy1 month ago

@GoogleAIStudio @threejs Every time I refresh x I see something like this. Amazing stuff 😎

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thank you 🙌

Aggroed Lighthacker- Peace, Prosperity, & Freedom's profile picture
Aggroed Lighthacker- Peace, Prosperity, & Freedom1 month ago

@GoogleAIStudio @threejs ok, checked it out. You need to update your pinned to this. really incredible work bro

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs done ✨Thanks !

PsyChip's profile picture
PsyChip1 month ago

@GoogleAIStudio @threejs obviously based on snow guy's work at reddit /r/claude even preloader is same. i was commented exactly this element bending feature and someone did it.

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs I don't even use reddit, i guess it's due to netflix promoting the series lately on their landing page xD it brought inspiration to many

PsyChip's profile picture
PsyChip1 month ago

@GoogleAIStudio @threejs this one btw:

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs oh that's actually cool

Builds By Ben's profile picture
Builds By Ben1 month ago

@GoogleAIStudio @threejs Love it, looks dope. Avatar is fire

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thank you 🙌

Asharp's profile picture
Asharp1 month ago

@GoogleAIStudio @threejs this looks insane 🙌

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Glad you like it 🙌

Ricardo | Hammy's profile picture
Ricardo | Hammy1 month ago

@GoogleAIStudio @threejs This is pure gold.

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thank you ✨

Mr Pixel | Driftania 🏝's profile picture
Mr Pixel | Driftania 🏝1 month ago

@GoogleAIStudio @threejs Really impressive Three.js work. Riding the air ball is a nice touch.

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thank you ✨

Jerome Etienne #AI's profile picture
Jerome Etienne #AI1 month ago

@GoogleAIStudio @threejs how about publishing it as homepage on github ? Thus we can see without cloning/installing the repo. my 2 cents

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs i’ll probably do it next time 🤣 thanks for reminding me

thaakeno's profile picture
thaakeno1 month ago

@GoogleAIStudio @threejs cool

Chiro Visuals's profile picture
Chiro Visuals1 month ago

@GoogleAIStudio @threejs Thanks

Related Videos