90+ WebGL Examples (Page 3)

This is a WebGL-powered image slider utilizing custom fragment shaders to create complex transition effects, structured with a comprehensive JavaScript configuration object and Tweakpane integration for real-time control over numerous uniform parameters.

An infinite cloud-flying effect built with Three.js, where thousands of individual planes are merged using BufferGeometryUtils.mergeGeometries for optimized, high-performance rendering.

The demo showcases how to create an interactive and atmospheric 3D world, employing complex lighting setups (directional, point lights), particle systems, and post-processing effects to achieve a cinematic visual style.

This demo is a powerful showcase of WebGL rendering based on physically correct material properties. The code demonstrates how to combine Three.js, custom GLSL shaders, and interactive controls, allowing a user to adjust parameters like dispersion and anisotropy in real-time and observe their effect on the 3D object’s light and color.

An interactive demo showcasing slide transitions via destructive digital effects. It uses WebGL shaders to create realistic VHS distortion, static, and pixelation.

A spectacular procedural 3D model generation from points using shaders and textures to create a “twinkling” effect. The use of EffectComposer allows for layering multiple post-processing effects like Bloom and RGB Shift, enhancing the visual quality.

This demo showcases advanced framebuffer and shader work. The light refraction and chromatic aberration effect is achieved by rendering geometry to multiple textures.

This HTML Canvas slider showcases advanced transition effects, from classic “Bands” and “Slice” to more complex “Halftone” and “Glitch,” all implemented with vanilla JavaScript. It’s a perfect example for understanding the capabilities of the Canvas API and creating unique interactive UI elements.

The core feature of this project is the generation of complex, procedural water and particle animations directly on the GPU. Using custom shaders gives full control over the visuals, while post-processing effects add depth and a cinematic feel, opening up endless possibilities for experimentation.

This Three.js demo showcases procedural 3D text deformation combined with a sophisticated post-processing pipeline. It layers an UnrealBloomPass with custom GLSL shaders for dynamic rust and glitch effects, all tweakable in real-time via dat.GUI.

Powered by Three.js and Anime.js, this demo showcases complex particle morphing between six different shapes with smooth, procedurally generated transitions and customizable color schemes.

See how vertex and fragment shaders in Three.js are used to create a “living image” effect that reacts to scrolling. The technical focus is on the deformation (uOffset) and RGB shift (uRGBShift) controlled via GSAP.

This demo is a powerful example of using WebGL for image processing directly on the GPU with shaders, which allows for impressive effects like a lens and light flares with high performance.

A lively demo showcasing the power of Three.js in creating interactive 3D scenes. Key features include raycasting for mouse tracking, GSAP camera animations, and a dynamic UI with CSS filters.

This 3D demo showcases advanced Three.js capabilities, using a custom displacement map shader to create a unique distortion effect. It’s technically notable for its seamless transition of camera control from user interaction back to an automated, scripted path.

This demo is a showcase of cool animation with WebGL and Three.js, where smooth scrolling via Lenis combines with interesting visual effects like RGB shift and image deformation.

A detailed Three.js shader glass effect with complex refraction, dispersion, and reflection, enhanced by post-processing and controllable via a real-time GUI.

A powerful Three.js demo focused on post-processing effects, utilizing EffectComposer to chain a standard RenderPass with a custom ShockWave/Ripple ShaderPass and an UnrealBloomPass for stunning visuals.

This demo uses the ANGLE_instanced_arrays extension to efficiently animate a volumetric grid of cubes. See how a single regl command can handle complex transformations and lighting for every instance.

Interactive metaballs brought to life by a custom THREE.js shader, they react to cursor movement and offer a range of presets, making the demo truly responsive and performant.