Инженерная задача
Запустить тяжёлую WebGL-сцену, управляемую прокруткой, внутри React-приложения, не превращая каждый кадр анимации в состояние React и не делая весь сайт зависимым от WebGL-холста.
Woby
- Фокус
- Фронтенд / WebGL
- Год
- 2026
- Стек
- Next.js · TypeScript · Three.js / R3F · GSAP · GLSL
Моя роль
Frontend Engineer / Designer. Я разработал приложение на Next.js, WebGL-сцену, оркестрацию анимации, подготовку 3D-модели из Blender для веба и упрощённые режимы для слабых устройств.
Модель рендеринга
Серверный слой маршрутов и контента + изолированные клиентские WebGL-компоненты + изменяемое состояние Three.js + временная шкала GSAP + текстуры экрана на шейдерах
Результат
Адаптивный двуязычный сайт, где 3D, анимация и продуктовый контент работают как единый интерфейс и корректно упрощаются на ограниченных устройствах.
Woby — сайт, в котором основной интерактивный слой построен не как обычная DOM-страница, а как непрерывно меняющаяся WebGL-сцена, синхронизированная с контентом и положением прокрутки. Я реализовал его на Next.js и React, разделив рендеринг, анимацию и маршрутизацию так, чтобы приложение оставалось поддерживаемым и за пределами 3D-слоя.
Разделение React и цикла рендеринга
Next.js App Router отвечает за маршруты и композицию контента, а насыщенная анимацией логика изолирована в клиентских компонентах. Непрерывное движение камеры, трансформации объектов и обновления материалов хранятся в изменяемом состоянии Three.js/GSAP, не вызывая перерисовку React на каждое изменение прокрутки.
GSAP связывает положение прокрутки, переходы текста, движение камеры, запечённую анимацию модели и содержимое экрана. За весь сценарий отвечает одна детерминированная временная шкала GSAP вместо распределённого состояния анимации в несвязанных React-компонентах.
3D-модель из Blender как часть интерфейса
Центральный 3D-объект экспортирован из Blender и используется как поверхность интерфейса, а не декоративный фон. Изображение на его экране меняется вместе с текущим разделом и состоянием проекта, поэтому геометрия, UV-развёртка и текстуры становятся частью потока данных приложения.
Шейдеры, текстуры и переходы состояний
Изображения проектов выводятся на экран устройства через сгенерированные UV-координаты и текстуры, управляемые шейдерами. Смена экранов синхронизирована с той же временной шкалой, которая управляет камерой и переходами DOM, поэтому WebGL- и HTML-слои остаются в одном визуальном состоянии.
Сцена намеренно изолирована от обычного состояния приложения. React определяет высокоуровневый контент и жизненный цикл, а Three.js и GSAP выполняют покадровую интерполяцию. Такая граница не позволяет самой дорогой части страницы вызывать лишние обновления компонентов.
Производительность и упрощённые режимы
Рабочая сборка использует адаптивные настройки камеры, режим уменьшенной анимации, динамическую загрузку, WebP и CDN, умеренные настройки WebGL-холста, явную очистку ресурсов GPU и облегчённую 3D-модель. Это не финальная полировка, а условия, при которых насыщенная WebGL-страница остаётся жизнеспособной на ноутбуках и мобильных устройствах.
Этот кейс показывает другой тип фронтенд-задачи, чем продуктовые панели: координацию React, цикла рендеринга в реальном времени, шейдерной графики, 3D-ресурсов и взаимодействия с прокруткой внутри одного развёртываемого веб-приложения.