I found some time to wrap up my interactive water experiment. It changed a fair bit since last time, with quite a few new additions.
Try it for yourself on our @uns__nstudio labs page.
⤷ https://t.co/bTqMxJ9qpP 🌊
#webgl#threejs
New year update on the water project:
Since I got the objects driving the fluid, I also wanted them to be affected by it and keep the draggable functionality. Which meant that I needed to know the position of the objects in JS whilst updating them in the shader…how?
Thread👇
In today’s behind-the-scenes, @uns__nstudio shares how a simple idea grew from concept and visuals into a playful experiment built with Rapier and Three.js: https://t.co/5E4KKGAAqV
We decided to open up the GUI on our recent cellular particles demo so you can have a play around with different colourways 🎨
Have a go → https://t.co/MfwcyILZNT
#webgl#realtime#threejs#particles
We’re incredibly excited to announce the launch of our latest production!🍷
⤷ https://t.co/xeinx4k1iA
The Symphony Of Vines is an interactive cinematic journey that pushes the boundaries of digital brand storytelling. Traverse the millennia and discover the elemental forces that crafted Bordeaux's unique terroir.
#webgl #threejs #wine #WebDev
Our classic move - fluid and particles. A bit different this time, though equally satisfying and fun.
The colour choices for this one were mad, there could be 10 different versions 🌈
[LIVE DEMO] Check out our latest WebGL demo, exploring a fluid cellular particle effect. Full write up and details of what's going on under the hood coming soon 🔍
Live → https://t.co/jLOqq2Qxt6
#webgl#realtime#threejs
New work for @KlookTravel 🧳✈️
We partnered with Klook to create an interactive quiz that reveals your travel archetype.
Take the quiz and discover 'The Best You' 👇
Water sims, particles and unicorns – what's not to love? 🦄🌊
Check out @zalashub's latest WebGL experiment!
⤷ https://t.co/NYnG4Vy3wC
#webgl#theejs#realtime@threejs
@uns__nstudio This started as an attempt to (re)create something in WebGL that was inspired by a specific game dev scene.
It started with this reference from @TheMirzaBeig and then making it in my own style. Really cool stuff
https://t.co/QPciLDg4cn
Another year! 🎉 My experience so far...
11 years of #Unity3D.
13 years of #RealtimeVFX.
14 years of #GameDev.
16+ years of programming, #Photoshop (Graphics Design), #AfterEffects (Motion Graphics), and audio production. Through the years: HTML 4, ActionScript 2/3, PS, Vegas, ACID, AE, Visual Basic, C/C++, FL Studio, GLSL/HLSL, Unity + C#, Python, etc...
My *other* (non-dev/media) interests that I study: religion, philosophy/logic, and biology. I've also worked in medical, healthcare and adjacent for ~6 years (less or more, depending on definitions + reference frame).
Things I'm not so great at:
> 3D modelling and cooking. 🥲
I found some time to wrap up my interactive water experiment. It changed a fair bit since last time, with quite a few new additions.
Try it for yourself on our @uns__nstudio labs page.
⤷ https://t.co/bTqMxJ9qpP 🌊
#webgl#threejs
New year update on the water project:
Since I got the objects driving the fluid, I also wanted them to be affected by it and keep the draggable functionality. Which meant that I needed to know the position of the objects in JS whilst updating them in the shader…how?
Thread👇
New year update on the water project:
Since I got the objects driving the fluid, I also wanted them to be affected by it and keep the draggable functionality. Which meant that I needed to know the position of the objects in JS whilst updating them in the shader…how?
Thread👇
This way I can select the objects in javascript, move an arbitrary object with transform controls and copy that to the position shader.
I also made sure the particles stay where they are when moved by the fluid and added the inside of the pool, projecting it on the water plane.
GPU picking! I create a tiny 1px render target and render only the pixel under the mouse. With each object having its own colour/id, when we ‘read’ the texture in JS, we know what object is hovered. & Voila!
This #threejs example demonstrates it nicely.
https://t.co/oyZNEcwH1m
Water project cont.
Movement of the objects → optical flow → add to the forces driving the fluid simulation. Now you got yourself a pretty cool interactive surface.
Oh, and some sparkle on the particles.
More details in the thread 👇 (beware: lots and lots of render targets)
Then, I do steps involved with optical flow for each of those frames. This effectively creates a velocity texture which we can read in the fluid simulation and add it to its velocity. And that's it!