Mannequin Texture Transition and Procedural Radial Noise utilizing WebGL

Right now, I’d prefer to share a cool WebGL experiment that attracts inspiration from a discovery on Pinterest. The demo highlights two fascinating visible results. Firstly, it encompasses a seamless texture transition on a 3D mannequin of a can, accompanied by a dynamic noise impact. Secondly, it incorporates a radial noise area that pulsates from the middle, extending past the boundaries of the display.

Whereas React Three Fiber facilitates the setup, the actual magic resides within the shader code, so this shouldn’t be an impediment.

Background Impact

For this impact we may have a aircraft geometry that matches the display. Then we’ll largely concentrate on what occurs on the fragmentShader. So we create a hoop form that pulsates on u_progress transition from 0 to 1:

float radius = 1.5;
float outerProgress = clamp(1.1*u_progress, 0., 1.);
float innerProgress = clamp(1.1*u_progress - 0.05, 0., 1.);
  
float innerCircle = 1. - smoothstep((innerProgress-0.4)*radius, innerProgress*radius, dist);
float outerCircle = 1. - smoothstep((outerProgress-0.1)*radius, innerProgress*radius, dist);
  
float displacement = outerCircle-innerCircle;

//...

gl_FragColor = vec4(vec3(displacement), 1.0);

We proceed by making use of a procedural noise utilizing traditional 3D Perlin Noise obtained from right here:

vec2 newUv = (vUv - vec2(0.5)) * vec2(u_aspect,1.);
        
float dist = size(newUv);

float density = 1.8 - dist;

float noise = cnoise(vec4(newUv*40.*density, u_time, 1.));

And to spice it up just a little bit we’ll add some grain impact 🧂:

float grain = (fract(sin(dot(vUv, vec2(12.9898,78.233)*2000.0)) * 43758.5453));

Mannequin Texture Transition

For mimicking the drink taste change in my demo, I opted for a easy shade transition within the can mannequin texture. Nonetheless, you’ll be able to obtain the transition utilizing textures as a substitute. To start, we remodel our glb mannequin into declarative and reusable JSX elements, a process conveniently dealt with by gltfjsx device.

Subsequently, we modify the fabric of the can physique utilizing the onBeforeCompile methodology.

useEffect(() => {
  supplies.Physique.onBeforeCompile = (shader) => {
    shader.uniforms = Object.assign(shader.uniforms, uniforms);

    //...
    
    shader.fragmentShader = shader.fragmentShader.change(
      `#embrace <color_fragment>`,
      `
        #embrace <color_fragment>

        //...

      `
    );
  };
}, [uniforms]);

Then, within the fragmentShader we’ll combine the the 2 colours with a noise masks within the seam:

//...

diffuseColor.rgb += combine(u_color1,u_color2,masks);

//...

One other good characteristic offered by drei‘s library is PresentationControls, which affords us the potential to rotate the mannequin effortlessly proper out of the field:

//...
<PresentationControls
  config={{ mass: 2, rigidity: 300 }}
  snap={{ mass: 3, rigidity: 200 }}
  polar={[-Math.PI / 4, Math.PI / 4]}
  azimuth={[-Math.PI / 4, Math.PI / 4]}
>
  <Mannequin />
</PresentationControls>
//..

Ultimate phrases

I hope you loved this quick walk-through and the demo has been inspiring for you. There’s limitless potential for personalisation and creativity, so be happy to mess around with it and alter values. Who is aware of, you might find yourself with one thing even cooler ✨

References and Credit