Как WebGL помогает Chipsa создавать креативные 3D сайты

Решил вспомнить, с чего для нас началась работа с WebGL.
Шесть лет пролетели быстро, но если обернуться назад, видно, как сильно эта технология изменила то, как мы видим веб. Когда-то сайты были просто страницами — статичными, однослойными. Но со временем стало понятно, что браузер может быть не окном, а пространством для творчества.

WebGL дал возможность работать с пространством, светом и материалами — а значит, добавил то, чего раньше в вебе не было: ощущение присутствия. Для нас это стало естественным продолжением философии Chipsa — соединять эстетику и технологии. Так мы начали путь, который превратил простые интерфейсы в креативные 3D сайты, где идея рождается из света, формы и движения.

Первый опыт был связан с задачей для Сибирской генерирующей компании (СГК). Нужно было создать интерактивную 3D-иллюстрацию заводов, которые сменяли друг друга вращением. На руках была модель и полное непонимание, как её оживить в браузере. Я установил Three.js, загрузил модель — но на экране ничего не появилось. Всё было правильно, кроме одного: в сцене не было света.

Добавил источник — и модель появилась! До сих пор помню те эмоции, когда всё наконец получилось. Через месяц проект ушёл в продакшен.
Это был наш первый шаг к созданию 3D в вебе — первый кирпич в будущем языке креативных 3D-сайтов.

В том же году мы обновляли сайт студии. Хотелось добавить что-то живое — и появились метаболлы: шары, плавно перетекающие друг в друга, словно жидкость. Это был наш первый опыт в работе с шейдером. Позже добавили WebGL-слайдеры и эффекты.

Сайт стал первым у Chipsa, получившим Site of the Day на CSSDA. Так WebGL впервые вошел в арсенал визуального языка студии — инструментом, который помогает создавать уникальные и креативные сайты, а не просто 2D-анимации.

Следующим шагом стал проект Moremilk — серия молочных продуктов. На главной странице бутылки вращались по скроллу, в каталоге — крутились в слайдере, а в карточке продукта пользователь мог сам повертеть модель.

Разместить WebGL в HTML-потоке оказалось нетривиально. Канвас нужно фиксировать, синхронизировать координаты 3D и 2D, слушать resize и scroll. Много математики, много тестов, но результат стоил того. Пользователь не просто видел упаковку — он чувствовал материал и форму. Так WebGL впервые стал не просто эффектом, а частью пользовательского опыта, открыв дорогу к интерактивным 3D сайтам нового поколения.

Проект Control стал новой ступенью. Главный приём — пикселизация, символизирующая цензуру. Текст сначала рисовался в канвасе, потом превращался в текстуру и проходил через шейдер. Эффект получился выразительным и точным.

Control получил три Site of the Day — CSSDA, Awwwards и FWA. Это был момент, когда мы осознали: WebGL может быть не просто украшением, а языком идеи.

Проект Artlife стал лабораторией оптики и света. Пользователь словно смотрел на мир бактерий через линзу микроскопа. Эффект линзы реализован на шейдерах — блюр, преломление, искажения, RGB-shift.

Мы сделали две линзы: вторая искажала результат первой. Такого эффекта позволил добиться render target — техника отрисовки сцены не на экран, а в текстуру для последующей обработки.Так мы впервые ощутили WebGL как инструмент физики восприятия, а не просто графики.

Проект РСИ — первая крупная сцена: виртуальная Москва. Пользователь перемещался по городу, рассматривал здания, кликал на объекты. Мы использовали рейкастинг, запекали свет, применяли GPU-инстансинг. Так вес сцены снизился на 80%.

Этот проект стал шагом к созданию крупных интерактивных 3D сайтов, где визуализация служит масштабному сторителлингу.

Культовый проект. Это не сайт, а иммерсивное 3D-пространство, где пользователь проходит сквозь историю курьерства. Мы использовали fresnel-эффекты, гироскоп, зацикленный скролл, KTX2-текстуры, единое видео для десятков экранов.

Проект стал темой нашего доклада на HolyJS. Так WebGL стал для нас инструментом создания среды для исторических переживаний.

ProMeat — проект, где главный акцент сделан на главном продукте компании — мясе. Мы начали с секвенции изображений, но результат не устроил: долгая загрузка, ступенчатый скролл. Мы заменили секвенцию на WebGL — и всё стало иначе: мгновенная загрузка, идеальная плавность. 

Проект получил Site of the Day на CSSDA и ленточку в категории UI на Behance — подтверждение того, что креативные 3D сайты могут быть и лёгкими, и выразительными одновременно.

Timeless стал вершиной шестилетнего пути — примером того, как рождаются по-настоящему креативные 3D сайты, где код превращается в режиссуру света и пространства. Это полноценная 3D-сцена: порталы, вода, отражения, частицы-звёзды, освещение в реальном времени.
Главная тема — время и пространство, которые пользователь проживает, двигаясь сквозь свет.

Каждая деталь — от вершинных шейдеров до GPU-инстансинга — оптимизирована вручную. Использованы KTX2-текстуры, предзагрузка шейдеров, адаптация под GPU пользователя. Анимация в прелоадере работала через веб-воркер для плавности с самого старта.

Timeless — это визуальный сторителлинг в чистом виде. Он стал не просто проектом, а выражением философии Chipsa: свет как язык, движение как смысл.

Chillbase стал первым проектом Chipsa, созданным на WebGPU — технологии, открывающей новое измерение возможностей в веб-браузере. Здесь десятки тысяч частиц живут по законам собственной физики: морфируются между формами, реагируют на курсор, разбегаются и снова собираются в логотип. Для этого мы использовали Three.js Shading Language (TSL) и compute shaders, которые рассчитывают движение прямо на видеокарте.

В результате сайт ощущается не как страница, а как живое существо, реагирующее на действия пользователя.

Шесть лет — длинный путь. От первой невидимой модели до полноценных креативных 3D сайтов, живущих прямо в браузере. Мы научились писать шейдеры, управлять светом и камерой, искать баланс между эстетикой и производительностью. Но главное — чувствовать технологию: понимать, где она помогает идее, а где мешает.

WebGPU уже приходит на смену WebGL, за ним придёт что-то ещё. Мы будем пробовать, ошибаться, искать и снова находить. Потому что этот путь — не про код, не про библиотеки, не про FPS. Он про любопытство, эксперимент и радость, когда на экране появляется свет. Мы продолжаем делать веб живым. И каждый новый проект — это ещё одна ступень в нашей истории.