Curated top WebGL reference website inspirations for UX/UI designers & creative developers

WebGL (Short for Web Graphics Library) is a technology getting increasingly popular in web development. It allows for rendering interactive 2D and 3D graphics within most modern browsers and integrates with HTML, page components or other web standards. Advanced immersive & interactive application projects and ambitious gaming projects often use WebGL, the most common and widely known application being Google Maps.

That being said, some of the most inspiring and spectacular brand experiences emerge from using WebGL capabilities in more standard websites. Here is a list of some of the most recent WebGL reference websites to inspire designers, creative developers and brand managers. Applications include gamification, 2D or 3D modelization of structures, elements or products, storytelling, animated illustrations, motion graphics or randomized particule patterns, all in real-time 3D rendering within your browser.

Enjoy and keep up the good work :)

Taking Shape | Presented by Adobe Substance 3D

Stunning compositions and textures creating a phenomenal immersive experience.

Summer Afternoon - A WebGL experiment

A charming and soothing multiplayer technical experiment.

Infinite Passerella

Agency technical demo showcasing WebGL capabilities (cloth simulation, procedural generation of patterns, rigging, post-processing).

KPR

An immersive experience driven by fluid animations on 2D and 3D assets compositions.

Configurateur E-Commerce Lacoste - Draw It Yourself

The Lacoste polo configurator has been talked about for its multiple technical prowess: cloth simulation, transition, interactive texture customization, performance management…

BlueYard Capital

A love letter for particles!

Independent Designer & Art Director Portfolio

A simple yet well-executed vanilla 2D WebGL slider. Fluid, elegant, minimalist and flawless.

WONDERLAND | Brand Experience Design Studio

In this immersive 3D gallery, WebGL is used as a navigation tool.

Magical Reflections: a virtual art experience

Virtual art galleries are numerous online, this one is one of the most successful.

Moonfall AR Experience | Explore the Megastructure

Grab your phone, this experience uses augmented reality.

Montblanc Legend Red - The Race

What's more engaging than a game?

Atmos

This project makes you fly through a cloudy sky as you scroll the page. Probably the most effective navigation mechanism for storytelling.

Crosswire

An orthographic camera is used to offer original animations in isometric view.

Moooi

This site was made with Pixi.js, a 2D WebGL framework. This makes it an excellent example of how WebGL can be used to make 2D animations.

XRS

To show off a product, a 3D model can be a lot more effective than a lot of talking!

Aging but nonetheless unavoidable WebGL references for your inspiration.

Prometheus Fuels

This site uses WebGL to convey its message by telling a story.

Nomadic Tribe

In a tribute to the artist Moebius, this experiment shows how well illustrations and 3D can go together.

Orano

Here WebGL is used to highlight technological precision and complexity.

The Sea we breathe

WebGL is used here to convey a meaningful message to as many people as possible, in an impactful and engaging way.

It would be impossible for us to list all the WebGL sites that have impacted us as they are so numerous! -j-But one thing is for sure, whether it's to tell a story, present a product, engage users through a game or simply to enhance a site, the use of WebGL knows almost no limits and always guarantees a strong and memorable visual impact.

UX design killing creativity or challenging it?