
Can any of you explain how to do this particle effect? - bugmango
https://www.ff.com/en/our-company/
======
bugmango
Hey, can any of you hackers explain to a lowly designer how to do this
particle-to-photo effect on Faraday Future's new website? Or direct me towards
a tutorial that could explain or be helpful in learning? Its an unbelievably
awesome effect that I expect we'll see more of in the near future.

~~~
whatever_dude
Which one are you specifically talking about?

The one where the images get transformed into dots is just taking the
brightness of a pixel (either its RGB average, or its luma grayscale value)
and then applying that as the depth of individual particles on a 2d grid. When
you move the mouse the particle field rotates slightly, so it gives that
impression of 3d.

The one with the Formula One car seems much more interesting. Depending on the
"position" of the user in the page, it's decomposing a 3d mesh vertically and
the decomposed vertices become dots that move away from where they should be.
Could be accomplished manually by recreating the mesh on every new position,
or (more likely) by a vertex shader.

Everything is helped by having an additive blending mode for the particles. It
creates this effect where things just turn white and it's always a nice effect
for particles.

TL;DR: WebGL and well combined tricks

~~~
bugmango
I assumed they were all using the same system. Thanks for this, really
insightful :)

