60 WebGL Examples
WebGL is the premier league of hardware-accelerated 3D rendering in the browser, utilizing the GPU for maximum performance. This collection demonstrates working with Shaders (GLSL): Vertex Shaders to manage geometry and Fragment Shaders to control color and lighting. Learn how to manually configure the graphics pipeline to create complex textures, realistic lighting, and post-processing effects.
Last updated:
GSAP ScrollSmoother and Three.js
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.
GSAP Pixi RGB Glitch
A highly specialized visual component leveraging Pixi.js for WebGL rendering and applying real-time filters.
Shaders Example #17
A psychedelic, fluid transition between images where the picture spirals, stretches, and “melts” before morphing into the next one.
WebGL Liquid Slider Transition
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.
WebGL Liquid Texture Loader
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.
3D Sign Up Button with Spline and GSAP
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.
Christmas Diorama with Three.js
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.
Three.js Diorama Scene
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.
Image Displacement with Three.js
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.
3D Motion Graphics with Three.js
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.
Flipping Clock with LightningJS
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.
Animated Camera Along a Path with Three.js
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.
Interactive Fireworks with Babylon.js and CSS nth-child
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.
Interactive Product Hotspots with GSAP and PIXI.js
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.
NightLight 3D Effect
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.
Infinite Scrollable and Draggable WebGL Grid
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.
Procedural Low Poly Planet with Three.js
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.
WebGL Morphing Ball with Three.js and GSAP
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.
LUME Shiny 3D Image Grid (Webgl, Three.js)
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.
rgbKineticSlider (WebGL Transitions)
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.
Animating WebGL Shaders with GSAP
Dynamic control over GPU effects, including 3D-deforming ripples (Vertex Shader) on click and animated reveal masks by smoothly driving shader uniforms with GSAP timelines.
Liquid Morphology Slideshow (Three.js/WebGL)
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.
Live Clouds with Three.js
An infinite cloud-flying effect built with Three.js, where thousands of individual planes are merged using BufferGeometryUtils.mergeGeometries for optimized, high-performance rendering.
3D Soldier Spirit Effect
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.
Physically Accurate Material Editor
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.
Cinematic Glitch Slideshow
An interactive demo showcasing slide transitions via destructive digital effects. It uses WebGL shaders to create realistic VHS distortion, static, and pixelation.
Particle Teapot with Glow Effects
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.
Glass Refraction Text Effect with three.js
This demo showcases advanced framebuffer and shader work. The light refraction and chromatic aberration effect is achieved by rendering geometry to multiple textures.
