At the moment, 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 can 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 basic 3D Perlin Noise obtained from 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 slightly 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. Nevertheless, you’ll be able to obtain the transition utilizing textures as an alternative. To start, we remodel our glb mannequin into declarative and reusable JSX parts, 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.substitute(
`#embody <color_fragment>`,
`
#embody <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 provides 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 infinite potential for personalization and creativity, so be at liberty to mess around with it and modify values. Who is aware of, it’s possible you’ll find yourself with one thing even cooler ✨
References and Credit