90+ WebGL Examples (Page 2)

This WebGL Voronoi Particle Transition is a cutting-edge visual effect that reimagines the standard image slider. Instead of manipulating DOM elements or simple textures, it converts images into a massive system of particles (one for every pixel). During transitions, these particles are subjected to a mathematical storm driven by Voronoi diagrams, creating a liquid, swirling distortion effect that feels organic and computational. (Requires: Three.js, GSAP)

This Interactive 3D Falling Leaves Shader is a sophisticated WebGL demonstration built with Three.js that showcases efficient rendering of thousands of unique objects. By utilizing InstancedMesh and custom GLSL shaders, it creates a stylized autumn tree where leaves respond to wind, sway realistically, and “die” (fall off) either randomly or through user interaction via raycasting. (Requires: Three.js, ES Modules)

A detailed procedural 3D eagle flying over a desert, rendered via raymarching. Features animated wings and legs, a math-generated environment (sky, sun, sand), and interactive camera rotation on mouse drag.

An interactive 3D room diorama powered by Three.js, utilizing a “baked lighting” technique where pre-rendered shadows and lights are applied via a single texture for high performance.

A calm static image that, upon hover, jitters, splits into RGB channels in bands, and slowly zooms in, evoking a digital glitch or cyberpunk atmosphere.

An interactive “liquid” image distortion effect powered by Three.js and custom GLSL shaders.

An infinite, psychedelic flight through a field of glass cubes that refract light and respond to camera interaction, creating a deep immersion into a tumbling crystalline structure.

A stylized, “digital” flame that evolves over time but obediently transforms (fades or flares up, changes geometry) in response to user interaction (scrolling).

A Low Poly 3D planet visualization built with Three.js, featuring three rotating layers: a solid core, a wireframe shell, and a floating particle cloud.

An immersive scrolling experience blending smooth typography with a floating 3D particle field powered by Three.js. GSAP orchestrates the camera movement and dynamic text highlighting, creating a synchronized parallax journey.

A highly specialized visual component leveraging Pixi.js for WebGL rendering and applying real-time filters.

A psychedelic, fluid transition between images where the picture spirals, stretches, and “melts” before morphing into the next one.

A high-performance WebGL slider that leverages displacement mapping to create liquid, kinetic transitions via the rgbKineticSlider library. The JavaScript configuration orchestrates intricate RGB split effects and cursor interactions rendering onto a canvas, while CSS implements a glassmorphic UI overlay using backdrop-filter to ensure the travel booking widget floats distinctively above the distortion effects.

A visually striking WebGL texture transition that employs displacement maps and custom fragment shaders to achieve a fluid, liquid-like morphing effect. The logic synchronizes JavaScript state management with GSAP animations to seamlessly blend a sequence of images through coordinate distortion, suitable for creative loaders, slideshows, or interactive galleries.

A 3D scene from Spline is loaded using the Spline Runtime, and its objects are brought to life with programmatic animation in GSAP. This approach allows you to avoid low-level WebGL by using a powerful timeline to create complex interactive scenarios, with the code already containing stubs for finding and controlling objects.

An advanced 3D scene that loads animated GLTF models and merges standard Three.js Materials with custom WebGL Shaders to achieve complex visual effects like fire and pulsating neon.

A 3D scene loading setup using Three.js and the GLTF format. The model utilizes a single baked texture, which is applied to all child meshes for rendering optimization.

A texture morphing effect with 3D rotation on hover, implemented using Three.js and shaders (GLSL). The fragment shader uses the snoise3 function (simplex noise) to create an organic mixing mask for blending two images.

A demo showing how to create a marquee effect on a 3D cylinder using Three.js and the Threeasy wrapper library - the key feature is manipulating the texture through its repeat and rotation properties to simulate scrolling.

An implementation of ‘flipping’ clocks in LightningJS where the animation is triggered via bindProp on a value change and an on('finish') callback atomically resets the component’s state for the next tick.

A modern Three.js setup using importmap to work with modules without a bundler - plus custom post-processing passes to create speed and glow effects.

An example of efficient resource management in Babylon.js - completed particle systems are tracked and completely removed from the scene with the dispose() method, preventing memory leaks.

Uses the PIXI.js WebGL renderer to draw dynamic, hardware-accelerated connection lines between content hotspots, enhanced by GSAP for the smooth ‘magnetic’ displacement effect upon mouse hover.

Realistic 3D lighting and atmospheric bloom effect achieved using Three.js and advanced post-processing with UnrealBloomPass, where shaders are customized to selectively exclude objects from the glow.

This demo showcases advanced THREE.js implementation using coordinate wrapping and custom shaders to create a highly performant, infinitely scrollable and draggable WebGL grid with motion-based visual feedback.

A WebGL 3D scene where IcosahedronGeometry is transformed into a unique planet using Simplex noise, featuring dynamic land/water distribution and interactive scaling of vegetation on hover.

A striking shader morphing implementation built on Three.js/WebGL, where smooth 3D sphere deformation is created by procedural noise in the vertex shader, with dynamics controlled via GSAP and uniform variables.

A high-performance 3D gallery leveraging WebGL for rendering an interactive image grid with a reflective (shader) effect and realistic cursor-driven lighting, implemented atop LUME.

This dynamic slider utilizes a displacement map to render cinematic transitions, while finely tuned cursor momentum guarantees a smooth and highly responsive kinetic interaction across all devices.