Maks

creative developer @ @uns__nstudio | part of @okaydevs

making artsy stuff with techy things | 🇸🇮🇬🇧

[Maks @oksemak]

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

[Maks @oksemak]

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👇

[Unseen Studio® @uns__nstudio]

Our latest work for Hubtown is now live! Explore the immersive experience for one of India's leading real estate developers.

⤷ https://t.co/9tHUqiIfws

[Maks @oksemak]

RT @uns__nstudio: We’ve been nominated for @awwwards Agency of the Year! Honoured to be among such a talented lineup. Good luck to everyone…

[Codrops @codrops]

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

[Unseen Studio® @uns__nstudio]

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

[Unseen Studio® @uns__nstudio]

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

[Maks @oksemak]

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 🌈

[Unseen Studio® @uns__nstudio]

[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

[Unseen Studio® @uns__nstudio]

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' 👇

[Unseen Studio® @uns__nstudio]

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

[Maks @oksemak]

@arzafran @uns__nstudio This shot was about 75k, but what's another 25k 😇

[Maks @oksemak]

😉 my brain = particles

[Unseen Studio® @uns__nstudio]

We heard you like particles, so here's a little WIP from a real-time WebGL particle sim we've been working on.

Full project launching soon 👀

[Maks @oksemak]

@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

[Mirza Beig @TheMirzaBeig]

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. 🥲

[Maks @oksemak]

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

[Maks @oksemak]

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👇

[Maks @oksemak]

@CryptoFidgets thank you!

[Maks @oksemak]

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👇

[Maks @oksemak]

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.

[Maks @oksemak]

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

[Maks @oksemak]

This means I can use virtually any shape to drive the fluid sim. Why not something with a distinct shape...like a plane

[Maks @oksemak]

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)

[Maks @oksemak]

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!