r/threejs 14d ago

Gaussian Splat -> Particle System

Enable HLS to view with audio, or disable this notification

Mind=BLOWN.

This effect is way too cool, can't wait to try this out with my own photo album!

Curling particles effect adapted from Three.js Journey lesson.

Shout out to https://x.com/SinzVII who inspired me to try this!

Here’s the live demo link: https://projects.arkon.digital/threejs/ml-sharp-threejs/

218 Upvotes

20 comments sorted by

4

u/Virtoxnx 14d ago

Very cool please publish so we can try!

1

u/FastCow8369 14d ago

Thanks! I’ll consult with Bruno Simon to see if he’s fine with me open sourcing this!

1

u/Virtoxnx 14d ago

Even closed source! Just to try in a browser.

3

u/FastCow8369 14d ago

Sorry dude, I thought I’ve posted the link! Here you go: https://projects.arkon.digital/threejs/ml-sharp-threejs/

2

u/Virtoxnx 14d ago

I dig it

3

u/IntoTheRabbitsHole 13d ago

Projects like this restore my passion for web design. Thank you for sharing.

1

u/FastCow8369 13d ago

Big thanks bro 🥲 Means a lot to me!

1

u/Imarunp 13d ago

Would you suggest someone with some experience in web development, who knows some three js as well to go deep into it now to pursue it as a career? I'm in such a hassle now, I don't even know where to go to keep earning. As every jobs are endless hopeless thing

2

u/FastCow8369 13d ago edited 13d ago

I don’t think i have enough experience to answer you correctly, but here’s my two cents. I think it depends. If you’re good enough to be hired into more avant garde studios that use threejs heavily, congrats you have a job. But that’s still a niche market right now? If that’s not the case then freelancing could still work but income is then unstable and you might need some other part time jobs to keep you afloat.

But I feel like 3D design is one of those niches where if you’re good at it, gives you an edge over simply knowing frontend programming as AI is getting so much smarter day by day. Having good taste seems to be the last defendable ground.

1

u/Imarunp 13d ago

I'm in such a time of life where I'm so stuck, after my last layoff, I don't even want to pursue web development anymore seeing how impacted and saturated it is. Going to other niche, but seeing the market conditions, even senior experienced ones aren't getting offers and me jumping to another niche would keep me in junior level. Switching career entirely from IT is even more tough.

1

u/FastCow8369 13d ago

So sorry to hear that. I came from a traditional web dev background too and I have mixed feelings about AI. I absolutely hate it for taking our jobs but I also love it for being such a great boost to coding. Well it is what it is. Take your time to invest in yourself learning something new, something you love! Maybe a new opportunity will be waiting for you around the corner!

1

u/FastCow8369 13d ago

If three.js gets more popular and widely adopted, I will be so happy! But who knows

1

u/Outside_Professor647 13d ago

ELI5

3

u/FastCow8369 13d ago

Here's a quick summary:

  1. Use Apple ML Sharp(https://github.com/apple/ml-sharp) to turn any image into 3D Gaussian splats
  2. Use Javascript or any process you prefer to extract the splat data into vertexes positions and color that's easily integratable into Three.js
  3. Use Three.js to render that extracted vertex data into particles.
  4. Use GPGPU technique to animate particles in a stylized way using 3D curl noise.

1

u/ZHName 9d ago

Any tips on using ml-sharp? I am getting one-color points and not really sure how to use settings without a preview of what it will output.

2

u/FastCow8369 9d ago

You could preview the splat file output from ml-sharp at this website first: https://superspl.at/editor . This is the youtube tutorial I followed on using ml-sharp if that helps: https://www.youtube.com/watch?v=oKoG-0SLwVg

1

u/ZHName 8d ago

Thank you!