Immediately, I’d wish to share a cool WebGL experiment that attracts inspiration from a discovery on Pinterest. The demo highlights two attention-grabbing 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 screen.
Whereas React Three Fiber facilitates the setup, the true magic resides within the shader code, so this shouldn’t be an impediment.
Background Impact
For this impact we can have a airplane geometry that matches the display screen. Then we are going to largely give attention to 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 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 somewhat 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. Nonetheless, you may obtain the transition utilizing textures as an alternative. To start, we remodel our glb mannequin into declarative and reusable JSX elements, a activity conveniently dealt with by gltfjsx software.
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 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 affords us the aptitude 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>
//..
Closing phrases
I hope you loved this brief walk-through and the demo has been inspiring for you. There’s countless potential for personalisation and creativity, so be at liberty to mess around with it and modify values. Who is aware of, chances are you’ll find yourself with one thing even cooler ✨
References and Credit