Mannequin Texture Transition and Procedural Radial Noise utilizing WebGL

Right this moment, I’d wish to share a cool WebGL experiment that pulls inspiration from a discovery on Pinterest. The demo highlights two attention-grabbing visible results. Firstly, it incorporates a seamless texture transition on a 3D mannequin of a can, accompanied by a dynamic noise impact. Secondly, it incorporates a radial noise discipline that pulsates from the middle, extending past the boundaries of the display screen.

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 airplane geometry that matches the display screen. Then we are going to largely deal with 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 are going to 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 coloration transition within the can mannequin texture. Nevertheless, you possibly can 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.exchange(
      `#embody <color_fragment>`,
      `
        #embody <color_fragment>

        //...

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

Then, within the fragmentShader we are going to combine the the 2 colours with a noise masks within the seam:

//...

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

//...

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

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

Ultimate phrases

I hope you loved this brief walk-through and the demo has been inspiring for you. There’s limitless potential for personalization and creativity, so be at liberty to mess around with it and regulate values. Who is aware of, chances are you’ll find yourself with one thing even cooler ✨

References and Credit