3D и шейдеры
- Стоимость
- от 250 000 ₽
- Срок
- 3–6 недель
- Опыт
- 100+ проектов · 10+ лет · 9+ стран
WebGL-сцены на Three.js и собственные шейдеры: частицы, искажения, живые фоны
- Three.js
- WebGL
- Nuxt
Базовый набор. Под задачу и требования проекта подключаем и другие инструменты.
3D и шейдеры делают сайт непохожим на другие: живой фон, частицы, которые реагируют на курсор, объекты, которые меняются при прокрутке.
Пишем сцены на Three.js и собственные шейдеры, настраиваем уровни качества под мощность устройства и следим, чтобы эффект не мешал скорости и чтению.
Что делаем
- Сцены на Three.js с камерой, светом и постобработкой
- Собственные шейдеры: частицы, шум, искажения, переходы
- Реакцию сцены на курсор, прокрутку и разделы страницы
- Уровни качества и контроль частоты кадров
- Подключение 3D-моделей и их оптимизацию
Задачи для 3D и шейдеров
3D-модель продукта весит сотни мегабайт и не грузится в браузере
Ретопология, запекание текстур, сжатие Draco и KTX2. Модель уходит в glTF и грузится частями: сначала лёгкая версия, детали — следом.
Фон на шейдере выглядит как у всех — шум и градиент
Пишем шейдер от идеи бренда: формы знака, фирменной палитры, фактуры материала. Параметры выводим в панель, чтобы подобрать вид прямо в браузере.
Частицы и постобработка превращают сцену в слайд-шоу
Переносим расчёт частиц на GPU, урезаем проходы постобработки и меряем время кадра на каждом уровне качества. На слабых устройствах эффект упрощается, а не тормозит.
На ноутбуке с Retina сцена выглядит мыльной или лагает
Ограничиваем pixel ratio и динамически меняем разрешение рендера по времени кадра. Картинка остаётся резкой там, где это заметно, и не съедает GPU.
Сцену нужно встроить в Nuxt или Next, а пример на голом Three.js
Оформляем сцену как компонент с жизненным циклом: инициализация при появлении, освобождение памяти при уходе со страницы, без утечек между переходами.
Когда стоит писать свою сцену
Подойдёт, если
- Нужен живой фон или объект, которого нет в готовых библиотеках эффектов
- Есть 3D-модель продукта, и её хочется показать в браузере без плагинов
- Сайт на Vue, Nuxt, React или Next, и сцена должна жить внутри него
- Эффект должен быть фирменным, а не узнаваемым шаблоном с маркетплейса
Не подойдёт, если
- Хватит плавного появления блоков и переходов — посмотрите анимации и переходы
- Нужен конфигуратор товара с сотнями вариантов — это отдельное веб-приложение со своей оценкой
Сцена, которая не мешает
Плавность важнее полигонов
Сложность сцены подбираем под стабильную частоту кадров, а не наоборот: дёрганый эффект хуже никакого.Сцена ведёт по странице
Движение, цвет и форма меняются вместе с разделами и подсказывают, куда смотреть дальше.Запасной вариант всегда
Если WebGL недоступен или устройство слабое, страница остаётся полноценной и красивой.Настройка вместе с вами
Выносим параметры сцены в панель и подбираем цвет, скорость и плотность вместе на живой странице.
Как мы работаем
- 01
Референсы и раскадровка
2–3 дняСобираем референсы и описываем, как сцена отвечает на прокрутку, курсор и касание.
Итог этапа Раскадровка сцены и список взаимодействий - 02
Прототип шейдера
1–2 неделиПишем шейдеры и собираем черновую сцену на Three.js, чтобы оценить эффект вживую.
Итог этапа Прототип эффекта в браузере по ссылке - 03
Модели и сцена
1–2 неделиГотовим или чистим модели, ставим свет, сжимаем геометрию и текстуры, чтобы сцена быстро загружалась.
Итог этапа Финальная сцена с моделями в glTF и сжатыми текстурами - 04
Встраивание
3–4 дняВстраиваем сцену в сайт и связываем её с прокруткой и элементами интерфейса.
Итог этапа Сцена на тестовой версии сайта - 05
Производительность
2–3 дняПрофилируем на слабых телефонах, настраиваем уровни качества и статичную замену для устройств без WebGL.
Итог этапа Уровни качества, статичная замена и 3 месяца гарантии на ошибки после запуска
Что нужно для работы над сценой
- Референсы: сайты, видео, арт — с пометкой, что именно нравится
- 3D-модели в FBX, OBJ или glTF, если сцена строится вокруг продукта
- Фирменная палитра и материалы, которые должна передавать сцена
- Доступ к репозиторию, если встраиваем сцену в готовый сайт
- Устройства, на которых сцена обязательно должна идти плавно
Разбор идеи и референсов
На получасовом звонке смотрим референсы и решаем, что делать шейдером, а что моделью. После — план прототипа, сроки и оценка.
Нужна сцена,
которая отвечает
на курсор?
Напишем сцену на Three.js и собственные шейдеры, настроим уровни качества под устройство и проследим, чтобы эффект не мешал чтению.
Да, на упрощённом уровне качества: меньше частиц и эффектов, но тот же характер.
От 250 000 ₽. Стоимость зависит от числа состояний сцены и переходов между разделами, от того, нужны ли 3D-модели или хватит абстрактных шейдеров, и от интерактива: реакции на курсор, прокрутку, звук. Смету даём после обсуждения референсов.
Да: задаём состояния сцены для разных блоков, и она плавно перетекает между ними при прокрутке.
Для сложных моделей — да, для абстрактных сцен и шейдеров — нет, мы делаем их сами.
Сцена загружается после основного контента и не блокирует первый экран.