90+ WebGL Examples

An advanced scroll-driven WebGL experience powered by Three.js and GSAP. A fixed background canvas uses InstancedMesh to render nearly 50,000 distinct 3D cube particles, colored dynamically by extracting color values from an image mapped onto a hidden canvas. As the user scrolls down the page, the camera’s Z-axis position transitions, causing the scattered cubes to seamlessly converge into a photographic portrait. (Requires: three.js, gsap.js)

An advanced WebGL jigsaw puzzle simulation featuring realistic glass-like pieces powered by Three.js and Cannon.js. Each puzzle shape combines extruded spline geometries with compound rigid-body collision shapes to precisely model the jigsaw tabs and gravity. It includes an interactive preview container styled with a complex SVG halftone dot filter that fades dynamically using CSS @property transitions. (Requires: three.js, cannon.js)

An advanced WebGL video player constructed using REGL and custom GLSL fragment shaders. Moving the pointer renders an elongated faux-refractive glass lens that distorts the underlying video stream dynamically. Includes customized resolution scaling, an integrated cos-gradient rainbow progress timeline, and canvas-level click interception to control video playback and seeking. (Requires: regl.js)

An advanced WebGL filter engine that transforms CORS-enabled images and videos into refractive stained glass structures. Operating on custom fragment shaders, the canvas allows users to toggle procedural cell geometries — including hexagon, triangle, and diamond tiles — while dynamically adjusting chromatic aberration offsets, drag-and-drop panning, spotlight coordinate tracking, and mathematical ripple distortions.

Interactive 3D Baked Room Concept leverages Three.js to render a detailed, stylized isometric room. Instead of heavy real-time shadows, the design uses a baked texture mapping approach (bakedTexture, normalTexture, occlusionTexture) for highly optimized, realistic ambient occlusion. Standard OrbitControls allow smooth user navigation within restricted bounding limits, preventing camera clipping. (Requires: three.js)

This is a PixiJS Displacement Ripple Zoom. It transforms a static background image into an interactive, liquid-like surface that expands outward from the user’s cursor upon clicking. Its function is to serve as a dramatic, cinematic entrance animation for hero sections or landing pages, shifting visual focus while seamlessly introducing secondary UI elements. (Requires: pixi-js, gsap-js, SplitText.js)

This is a Halloween 2.5D Parallax Shader. It utilizes Three.js and custom GLSL shaders to transform a flat 2D image into an interactive, volumetric scene with dynamic lighting, fog, and depth distortion. Its function is to provide a deeply immersive, narrative-driven hero section, elevating static artwork into an interactive spatial environment without requiring full 3D models. (Requires: three.js)

This is a 3D WebGL Shape Matcher Game. It utilizes the Three.js library to render a fully functional, physics-driven puzzle game directly in the browser. Its function is to demonstrate complex state management, 3D raycasting, and sequential animation chaining without the overhead of a dedicated game engine like Unity. (Requires: three.js, tween.js)

This is a WebGL Lens Distortion Hover. It manipulates a raster image through a custom GLSL fragment shader to create a dynamic, fish-eye bulging effect. Its function is to replace static CSS opacity or scale transitions with a high-fidelity optical illusion, drawing profound tactile focus to portfolio or hero imagery. (Requires: GSAP, Curtains.js)

This is a WebGL RGB Shift Image Card. It renders a high-resolution raster image onto a 3D geometric plane, applying dynamic visual distortions based on pointer intersection. Its function is to elevate standard portfolio grids or hero sections into highly tactile, immersive experiences, replacing standard CSS transitions with complex mathematical pixel manipulation. (Requires: Three.js, GSAP)

This is a WebGL Liquid Distortion Typography Mask. It uses fluid simulation to distort a background image, revealed only through a vector cutout. Its function is to transform standard text headers into deeply interactive, kinetic focal points. (Requires: OGL.js, TweenMax.js)

This is a Cinematic 3D Racing Pursuit Game. It renders an endless runner-style experience with high-speed lane switching, projectile combat, and dynamic obstacle generation. Its function is to demonstrate complex WebGL post-processing and real-time game loops inside the browser, transforming a static webpage into an interactive arcade environment. (Requires: three-js)

This is a PixiJS Procedural GLSL Flame. It generates a hyper-realistic, endlessly animating flame entirely through mathematical functions inside a fragment shader. Its function is to provide a high-performance visual effect without relying on video files or sprite sheets, using procedural noise to simulate the chaotic turbulence of a real fire. (Requires: PixiJS)

This is a Twisted Wave GLSL Image Gallery. It’s a high-performance, full-screen WebGL experience that uses custom shaders to create sophisticated visual effects. Its function is to transform a standard image carousel into a cinematic journey with two distinct interactions: a localized sine-wave distortion on mouse hover and a global radial blur that intensifies with the speed of the scroll. (Requires: Three.js, GSAP, Locomotive Scroll, Maku.js, imagesLoaded)

This is a Cinematic Zoom Blur Image Gallery. It utilizes custom GLSL fragment shaders and Three.js to create a high-fidelity transition between image textures. Its function is to provide an immersive navigational layer for visual portfolios, where spatial depth and radial blur replace standard linear crossfades. (Requires: Three.js, GSAP)

This is a 3D Interactive MacBook Model. It utilizes Three.js to load, texture, and animate a high-fidelity .glb model of a laptop. Its function is to create a premium, cinematic product showcase, replacing static hero images with a fully interactive WebGL scene that animates through a complex opening and booting-up sequence. (Requires: Three.js, GSAP, lil-gui)

This is a Matcap Instanced Disco Geometry demo. It renders multiple unique 3D geometries (Torus Knot, Icosahedron, Torus) using the WebGL Instanced Mesh technique. Instead of drawing individual planes for every mirror on the surface of the shape, it creates one InstancedMesh per object, mathematically orienting thousands of tiny reflective mirrors to mimic a faceted, crystal-like disco surface. (Requires: Three.js)

This is a WebGL Generative Flower Cursor. It transforms the cursor into a botanical paintbrush, procedurally generating complex, blooming flower patterns across the screen in real-time. Its function is to provide an immersive, artistic interaction layer that allows users to “paint” generative digital gardens. (Requires: Three.js)

This is a Shattering Image Gallery Transition. It utilizes the WebGL API via Three.js to deconstruct 2D images into a matrix of 3D particles. Its function is to replace standard fade or slide slideshows with a highly cinematic, physics-based explosion effect, transitioning between photographs by blowing the current image apart to reveal the next one underneath. (Requires: ThreeJS, GSAP)

This is an Infinite 3D Poster Scroll Wall. It constructs a dense, continuous grid of cinematic assets rendered entirely in WebGL. Its function is to provide a visually overwhelming, highly performant “hero” background that automatically fetches live data from an external API and perpetually scrolls along a tilted perspective plane. (Requires: ThreeJS)

This is an Interactive 3D Pricing Card Slider. It integrates WebGL geometric renders into a standard product tier UI. Its function is to convert static pricing options into an engaging, tactile spatial experience. (Requires: three.js, swiper.js)

This is a Procedural 3D Endless Runner Game. It utilizes Three.js to render a dynamically generated, infinite obstacle course. Its function is to deliver a complete, lane-based gameplay loop entirely within the browser. The environment and actors are constructed procedurally, eliminating external asset dependencies and ensuring instant execution. (Requires: three.js)

This is an Interactive Spectral 3D Ghost Effect. It utilizes Three.js and custom GLSL shaders to render a dynamic, mouse-tracking entity with analog signal decay. Its function is to serve as an immersive focal point or an interactive background element. The effect effectively bridges direct user input with procedural visual storytelling. (Requires: three.js, tweakpane.js)

We often treat web content as flat information, devoid of spatial context. This component creates a digital sanctuary. By combining soft, pre-calculated lighting with a constrained interactive camera, we invite the user to inhabit a space, not just view it. (Requires: three.js, gltf-loader, orbit-controls)

Real-time rendering often demands too much power for too little soul. This component brings the warmth of a hand-crafted miniature to the browser. By leveraging baked textures, we achieve photorealistic lighting with the performance footprint of a simple image. It is not just a 3D model; it is a digital diorama that invites the user to inspect every corner with tactile orbit controls. (Requires: three.js, gltf-loader, orbit-controls)

This 3D Glass Photo Lens creates a stunning, tactile digital object - a thick glass block that refracts user-uploaded photos. Built with Three.js, it simulates the physics of light (transmission, IOR, thickness) to produce high-fidelity glass renders directly in the browser. Users can change the lens shape (Heart, Square, Hexagon), adjust the glass tint, and even modify the environmental lighting to see how reflections dance across the beveled edges. (Requires: Three.js)

Oculus II redefines the weather dashboard by blending real-time data with a cinematic 3D environment. Unlike static weather apps, it uses Three.js to render a living scene - drifting clouds, falling rain, or twinkling stars - that reacts to the mouse cursor with a subtle parallax effect. The UI floats above this world using glassmorphism, creating a sense of depth and modernity while providing live weather metrics from the Open-Meteo API. (Requires: Three.js, GSAP, Lucide Icons)

This Neon 3D Tubes Cursor Trail brings high-end motion graphics to the web browser. Using the power of WebGL and Three.js, it generates a serpentine trail of glowing 3D geometry that fluidly follows the user’s input. The effect features dynamic lighting that casts soft glows on the tubes, and it includes a built-in interaction where clicking the screen instantly randomizes the color palette, keeping the visual experience fresh. (Requires: threejs-components (External Lib))

This WebGL Fluid Smoke Button elevates standard UI interactions by embedding a real-time generative shader directly into the interface. Instead of using a heavy video file, it calculates complex fluid dynamics on the fly using Fractional Brownian Motion (fBM). The result is a mesmerizing, never-repeating smoky background that reacts to hover states with a smooth scale and rotation effect, styled effortlessly via Tailwind CSS. (Requires: fragment-canvas, Tailwind CSS)

This Tearing Paper Photo Gallery is a technical marvel that simulates the physical act of ripping a photograph in half. Unlike simple 2D masking effects, this component uses WebGL (Three.js) to deform the geometry in 3D space. As the user drags downward, the “paper” mesh splits, rotates, and tears along a procedural edge, complete with lighting and shadow effects generated by custom shaders. (Requires: Three.js, GSAP)