Как технология WebGL помогла Chipsa превратить свои сайты в живые 3D-пространства
Шесть лет назад мы начали экспериментировать с WebGL — и веб для нас навсегда изменился. Мы увидели, что браузер способен быть не просто окном для текста и изображений, а пространством для экспериментов с глубиной, интерактивом и визуальными эффектами.
Первый шаг и начало пути
Наш первый WebGL-опыт был в 2019 году — для Сибирской генерирующей компании (СГК). Требовалась 3D-иллюстрация заводов, которые сменяли друг друга вращением. Мы загрузили модель через Three.js — но ничего не отобразилось. Выяснилось: забыли свет. Добавили источник света — и модель появилась. Это был первый кирпич в строительстве нашей работы с 3D в вебе.
Более подробнее о работе с СГК можно почитать здесь.
Затем — редизайн сайта самой студии Chipsa: появились «метаболлы» — плавно перетекающие шары, экспериментальные шейдеры, WebGL-слайдеры и hover-эффекты. Новый сайт получил признание: стал первым у Chipsa, кто получил «Site of the Day» на CSSDA. Это подтвердило: WebGL — не просто трюк, а инструмент художественного выражения.
2019–2020: Moremilk — 3D-бутылки, которые можно «трогать»
Следующий крупный проект — Moremilk. Здесь каждая бутылка стала 3D-объектом: она вращалась при скролле, «жила» в каталоге, а в карточке товара её можно было поворачивать вручную. Интеграция WebGL в поток HTML оказалась непростой: нужно было синхронизировать WebGL-канвас, события scroll/resize, 2D-интерфейс и 3D-сцену. Результат оправдал усилия: пользователь не просто увидел упаковку — он «ощутил» форму и материал. WebGL перестал быть просто декоративным; он стал частью пользовательского опыта.
2021: Control — WebGL как язык идеи
В проекте Control WebGL использовали не ради «вау-эффекта», а как художественный инструмент. Текст и контент сначала рендерился на canvas, затем превращался в текстуру и проходил через шейдер, создавая пикселизацию — метафору цензуры. Этот проект получил сразу три «Site of the Day» — на CSSDA, Awwwards и FWA. Это был момент, когда WebGL помог оригинально передать идею проекта.
Мы ни в коем разе не пропагандируем, мы просто студия дизайна, которая создает креативные сайты и интерфейсы не как у всех. Эта статья посвящена одному из наших зарубежных проектов, продукт которого запрещен здесь, но идёт семимильными шагами к разрешению там.
2022: Artlife и РСИ — эксперименты восприятия и масштабный 3D
Artlife стал экспериментом с восприятием: мы использовали шейдеры для блюра, преломлений, RGB-сдвигов, двойных «линз» — всё это в WebGL. Сайт не просто выглядел красиво — он заставлял пользователя по-новому воспринимать визуал, давая возможность посмотреть на него как будто под микроскопом.
Проект РСИ стал первой крупной 3D-сценой: виртуальная Москва, по которой можно «гулять» — осматривать здания, кликать на элементы, иначе говоря: это живое пространство в браузере. Мы применяли ray-casting, запечённое освещение, GPU-инстансинг — и смогли снизить вес сцены почти на 80%. Это шаг к масштабному сторителлингу через веб.
2024–2025: Музей курьера, ProMeat, Timeless — иммерсивный веб, производительность, атмосфера
Музей курьера — проект, где сайт стал полноценным 3D-пространством для переживания истории: пользователи проходят по виртуальным залам, взаимодействуют со сценами, погружаются в атмосферу. Для этого использованы шейдеры, гироскоп, KTX2-текстуры и многое другое. WebGL позволил создать веб-среду, которая ощущается как опыт, а не страница.
ProMeat — пример того, как 3D-сайт может быть не только эффектным, но и лёгким. Мы заменили тяжёлую секвенцию изображений на WebGL-сцены, что дало мгновенную загрузку, плавный скролл и визуальную выразительность. Проект получил «Site of the Day» на CSSDA и отметку на Behance — доказательство, что креативные 3D-сайты могут быть быстрыми и UX-дружественными.
В этой статье мы делимся кейсом, как мы разработали сайт для мясного бренда Promeat, и почему он оказался настолько успешным, что получил награду на CSSDA и попал в галерею лучших UI-проектов на Behance.
Timeless — наша на сегодня визитная карточка: сайт, где свет вода, отражения, порталы — всё работает как режиссура пространства и эмоций. Всё вручную, но не без процедурной помощи: шейдеры, оптимизация под GPU пользователя, предзагрузка, web-workers, кастомные материалы. Это визуальный сторителлинг, где веб превращается в атмосферу.
Мы решили выйти за рамки привычного представления о сайте и попытаться перенести атмосферу премиального лаунжа в digital. В результате появилось онлайн-пространство, где пользователь буквально «проваливается» в атмосферу TIMELESS: порталы, динамика, 3D-графика и кинематографичный скролл превращают навигацию в путешествие вне времени.
Что даёт такой подход
Мы прошли путь от простой 3D-модели без света до комплексных, оптимизированных, эмоционально насыщенных 3D-сайтов. Мы научились управлять шейдерами, светом, камерой, балансировать между эстетикой и производительностью. Главное — понимать, когда технология используется со смыслом, а не просто ради эффектов.
Сейчас WebGPU (виток развития WebGL) открывает новые горизонты — и мы продолжаем экспериментировать, прокладывать путь за границы привычного веба. Потому что для нас веб — это больше, чем код. Это атмосфера, ощущение и опыт.
Подписывайтесь на наш телеграм-канал, где мы делимся своей креативной деятельностью, эстетическим дизайном и разработкой.