Thread by @MariusBallot

I helped out the wonderful @by_index team to create this project
👉 bizupagency.com/en/

This twitter thread is a break-down of the homepage WebGL #threejs interactive animation:

🧵👇

1 - Problem decomposition 🔁

The idea was to have an interactive glossy 3d ball that would interpolate between different states on scroll 🖱

At this point I know that a custom #shader is going to be involved as well as a sort of key frame manager for the state interpolation

2 - Interactive Bump (1/4) 🤜🤛

With this idea,
I also needed to come up with a mouse interactivity visual on the ball that would be present throughout the animation

These next few parts will be about the development of that “mouse bump”

3 - Interactive Bump (2/4) 🤜🤛

The ball is a simple #threejs icosphere with a custom #glsl #shader

Using the RayCaster object, I am tracking the projected position of the mouse on the UV coordinates of the sphere and transfer this data to the fragment shader

4 - Interactive Bump (3/4) 🤜🤛

To have a more “flowy-ish 🌊” look n' feel,
I ease the bumpPosition, as well as the displacement intensity with the oldest easing math function is the book👴

5 - Interactive Bump (4/4) 🤜🤛

Take that function created in the fragment shader and bring it back up to the vertex shader to plug it into the vertex coordinates,

And boom, we got a bump 💣

6 - Noisy Ball 🧶

Using @hughskennedy ‘s fantastic glsl-noise repo, the second and 3rd state of the ball are a simple noise function remapped and multiplied to the xyz coordinates of the vertices

7 - Wavy Ball 🏄‍♂️

This time playing around with M🅰TH, the 3rd state of the ball is a wavy morph effect using simple trigonometry functions and a bit of spicy noise for more ✨ organicness ✨ (if organicness is a word)

8 - Mix it Mix it Mix it 🎤👨‍🍳

Now that we have all of our displacement functions,

it's time to put 'em all together using glsl’s mix() function and #GSAP to create a timeline, controllable on scroll, interpolating between these states

9 - F*cked Shading 🗯

I knew that I wanted to use a matcap for this project.
It seemed to be the most adapted and optimized solution for the shading of this component.

Problem was that I now need to recompute the F*cked normals of the sphere with all these displacements

11 - Normal re-compute💻

Thanks to a goated article from @marco_fugaro ,
Re-computing the sphere's normals on the fly was done using some good old M🅰TH to have the actual new normal data.

Pass that back to the frag shader to update the matcap sampling,

And voilà, we done. 🤌