Marius Ballot Profile picture
Oct 17, 2022 β€’ 11 tweets β€’ 6 min read β€’ Read on X
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 Image
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. 🀌

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Marius Ballot

Marius Ballot Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(