How WebGL Helps Chipsa Create Creative 3D Websites

I wanted to look back and remember how our journey with WebGL began.
Six years passed quickly, but looking behind, it’s clear how much this technology has changed the way we see the web.There was a time when websites were just pages — static and one-dimensional. But over time, it became obvious that a browser could be more than just a window — it could be a space for creativity.

WebGL made it possible to work with depth, light, and materials, adding something the web had never had before: a sense of presence.
For us, it became a natural extension of Chipsa’s philosophy — blending aesthetics and technology. That’s how our journey began — a journey that turned simple interfaces into creative 3D websites, where ideas are born from light, form, and motion.

Our first experience with WebGL began with a project for the Siberian Generating Company. The task was to create an interactive 3D illustration of power plants that would rotate and replace each other. I had a 3D model on hand — and absolutely no idea how to bring it to life in the browser. I installed Three.js, loaded the model… but nothing appeared on the screen. Everything seemed right, except for one thing: there was no light in the scene.

Once I added a light source — the model came to life. I still remember that moment: when for the first time, code created something that felt alive. A month later, the project went into production. It became our first step toward creating interactive 3D experiences on the web — the first brick in what would become the visual language of creative 3D websites.

That same year, we decided to refresh our studio’s website. We wanted to add something that felt alive — and that’s how metaballs appeared: smooth, liquid shapes flowing into one another. It became our first experience writing shaders from scratch.

Later, we added WebGL-based sliders and hover effects, exploring how motion and interaction could shape emotion.The site became the first Chipsa project to receive a Site of the Day at CSSDA. That moment marked a turning point: WebGL became part of our visual language — not just a technology for effects, but a creative tool for designing expressive 3D websites.

The next step was the Moremilk project — a product line of flavored dairy drinks. On the main page, the bottles rotated with the scroll; in the catalog, they moved inside a slider; and on the product page, users could interact with the 3D model themselves.

Integrating WebGL into the HTML flow turned out to be far from simple. The canvas had to be fixed, 3D and 2D coordinates synchronized, and resize and scroll events tracked. It took a lot of math, testing, and fine-tuning — but the result was worth it.

The user didn’t just see the packaging — they could feel its texture and form. For the first time, WebGL became more than an effect — it became part of the user experience, opening the door to a new generation of interactive 3D websites.

The Control project marked a new step in our WebGL journey. Its core technique was pixelation, symbolizing censorship and control. The text was first rendered on a canvas, then converted into a texture and processed through a shader — creating an effect that felt both expressive and intentional.

Control went on to win three Sites of the Day — at CSSDA, Awwwards, and FWA. That was the moment we realized: WebGL can be more than decoration — it can be a language of ideas.

The Artlife project became our laboratory of optics and light. It felt as if the user was peering into a microscopic world — looking at bacteria through a shimmering lens.

The lens effect was built entirely with WebGL shaders — combining blur, refraction, distortion, and RGB shift. We created two lenses: the second distorted the image produced by the first, achieved through the use of render targets — a technique where a scene is drawn not to the screen but into a texture for post-processing.

That’s when we first experienced WebGL not just as a tool for rendering graphics, but as a way to explore the physics of perception itself — a medium where light and interaction become part of storytelling.

The RSI project marked our first large-scale WebGL experience — a virtual version of Moscow. Users could move through the city, explore buildings, and interact with objects in real time.

We used raycasting for interaction, baked lighting for realism, and GPU instancing to optimize performance. These techniques reduced the scene’s weight by nearly 80%, allowing the city to feel both rich and smooth to explore. This project became a major step toward creating large interactive 3D websites, where visualization serves not just as decoration, but as a tool for immersive storytelling.

A truly cult project for our studio — not just a website, but an immersive 3D environment where users could walk through the history of courier delivery.

We used Fresnel effects, a gyroscope for mobile interaction, looped scrolling, KTX2 textures, and even a single synchronized video stream for dozens of screens to keep performance stable.

With this project, WebGL evolved for us into something more — a medium for creating environments that tell stories and evoke emotion, turning the web into a place for exploration and experience.

ProMeat was a project focused on the company’s core product — meat itself. We initially built the animation as an image sequence, but the result wasn’t satisfying: heavy loading times and choppy scrolling.

Switching to WebGL changed everything — instant loading, seamless performance, and a smooth, lifelike motion. The project went on to win a Site of the Day at CSSDA and a UI ribbon on Behance — clear proof that creative 3D websites can be both lightweight and expressive at the same time.

Timeless became the culmination of our six-year journey — an example of how truly creative 3D websites are born, where code transforms into the art of directing light and space.

It’s a full-fledged Three.js scene filled with portals, water, reflections, star particles, and real-time lighting. The main theme is time and space — an experience the user feels while moving through light itself. Every detail, from vertex shaders to GPU instancing, was meticulously optimized by hand. We used KTX2 textures, shader preloading, and GPU-based adaptation to ensure stability and performance. Even the preloader animation ran inside a web worker to keep everything smooth from the very start.

Timeless is visual storytelling in its purest form. It became more than just a project — it became an expression of Chipsa’s philosophy: light as a language, and movement as meaning.

Chillbase became the first Chipsa project built entirely on WebGPU — a technology that opens a new dimension of creative possibilities in the browser.

Here, tens of thousands of particles live by their own physics: morphing between forms, reacting to the cursor, scattering and reassembling into a logo. To make this possible, we used Three.js Shading Language (TSL) and compute shaders, allowing motion to be calculated directly on the GPU.

The result feels less like a web page and more like a living, responsive organism — an interactive 3D website where design, physics, and technology merge into one.

Six years is a long journey — from the first invisible model to fully realized creative 3D websites living right inside the browser. Over that time, we’ve learned to write shaders, control light and camera, and find balance between aesthetics and performance.

But above all, we’ve learned to feel the technology — to understand where it helps the idea, and where it gets in the way.

WebGPU is already taking the place of WebGL, and something new will surely follow. We’ll keep trying, failing, searching, and discovering again. Because this journey isn’t about code, libraries, or FPS — it’s about curiosity, experimentation, and the quiet joy of watching light appear on the screen.

We’ll keep making the web alive. And with every new project, we add another point of light to this story.