Create a Sparkle effect (with threeshod)

Questions
,
1

Hi all,

I’m trying to find a way to create sparkle effect on a render. The idea is, like for bloom pass, to be able to add an effect that create random sized sparkles on the more brighting pixel like on jewel or glitter video effect when you move your model.
This is an example of the idea :
https://www.dmia.net/wp-content/uploads/diamond-sparkle.jpg
I’m sorry but didn’t found any example of this kind of effect with three js on the web.
The questions i’m wondering are :

  • how to detect more brithning pixel ?
  • how to design a star effect on this pixel

I’m looking for an example to help me to start this effect.

Thanks a lot.
Have a good day !

2

Would a lensflare effect be helpful for your use case? There is an official example that demonstrates the usage of the Lensflare class:

https://threejs.org/examples/webgl_lensflares

3

Hi Mugen,

Thanks for your response. That’s not exactly what i’m trying to produce. The idea is to automatically create Spakles on pixel that is the more brighting.
I created a picture to illustrate the concept :

Sparkle
Sparkle1595×600 99.5 KB

Thanks again for your help !

1 Like
4

According to photoshop all pixels within the marked regions have the same color / brightness though - you’d get a lot of sparkles:

2412c597c7c685b7cdddc6768e95d14fb25a25e0
2412c597c7c685b7cdddc6768e95d14fb25a25e01595×600 118 KB

Nevertheless, you could still write a custom postprocessing that adds sparkles in the brightest spots on the screen (based on some pixel average around a region.) All it would require is applying a horizontal / vertical / diagonal blur in the right places.

5

Thanks, i’ll try it and come back ! Do you have an start example on how to detect the more brightness pixel ?

6

Hello, Mugen.
How are you?
My name is Sasaki and I need your help to complete my project.
It’s three.js project and it’s related with Spark Effect.

You can find the spark effect on this website.
If you are available, please contact me this telegram name: Telegram: Contact @RichMan_Atoz
Please help me.
Thank you.

1 Like