HYPERSOLID: концепт сайта студии, собранный как одна 3D-сцена в реальном времени

VITON¹³ делает концепт-сайты, чтобы показать диапазон в жанрах, где у нас пока нет клиентского проекта. HYPERSOLID — самый технический из них: сайт вымышленной студии креативных технологий, которая делает иммерсивный веб, 3D в реальном времени, XR и инсталляции. Жанр такой: вся страница — одна 3D-сцена, а интерфейс лежит поверх неё обычным текстом. Студия, её проекты и адрес придуманы; сайт написан на английском.

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

Один адрес и 12 видов: история на прокрутке из пяти глав, галерея работ, восемь страниц проектов, «О студии» и «Контакты». У каждого вида свой хеш-маршрут (#/work, #/work/aurora-dome и так далее), поэтому на него можно дать ссылку и открыть сразу. Эмблема — тессеракт, четырёхмерный куб: он вращается в 4D и каждый кадр проецируется в 3D. Его рёбра — стеклянные трубки с радужным отливом тонкой плёнки, вокруг — частицы на видеокарте (7000 на компьютере, 2400 на телефоне) и лучи объёмного света.

Пять глав — это заявление студии, тессеракт, который раскрывается в шесть панелей с направлениями, тоннель из его рёбер, работы и приглашение написать. Галерея — 3D-кольцо из восьми придуманных проектов: полярное сияние для планетария, аркадная игра для дропа кроссовок, музей исчезнувших звуков в WebXR, генеративная айдентика фестиваля, погодная скульптура, конфигуратор аромата, океан данных и голографическое меню. Каждая карточка — живой шейдерный мир с рэймаршингом. Шейдерный переход переносит карточку в проект на весь экран: идея, роль, стек, три абзаца, три кадра, снятые с самого мира, и ссылка на следующий проект.

Саундтрек — четыре процедурных трека, которые генерирует Web Audio API. Звук выключен, пока посетитель сам его не включит, и только тогда подгружается код аудио. В разделе «О студии» — манифест из пяти строк и четыре шага работы; в «Контактах» — адрес-пример с пометкой, что его никто не читает, и ссылка на портфолио автора для настоящих заявок.

Сайт написан на three.js 0.186 и собран esbuild в статическую папку с относительными ссылками, поэтому работает из любого пути: в портфолио он лежит в /demos/hypersolid/. Постобработка добавляет свечение (bloom), хроматическую аберрацию, глубину резкости, лучи света, тональную компрессию, виньетку и зерно. Устройство определяет один из трёх уровней качества: полная сцена на компьютере, облегчённая — на телефонах и слабых машинах, и статическая страница с тем же содержанием, если WebGL нет. Когда кадры начинают запаздывать, движок снижает разрешение тяжёлых миров, а не пропускает кадры; в фоновой вкладке отрисовка ставится на паузу.

В каждом виде поверх холста лежит настоящий HTML-текст: заголовки, ссылки и тексты проектов, которые прочитает скринридер и до которых дотянется клавиатура — Tab, Enter, Esc и стрелки в галерее. При ограничении анимации пролёты камеры заменяются плавной сменой кадров. Первая отрисовка — прелоадер, встроенный прямо в HTML ещё до любого скрипта и стиля: он рисует логотип ребро за ребром и считает загруженные файлы. В сборке нет ни одного файла текстур, 3D-моделей, видео или звука — только код, два вариативных шрифта, иконки и картинка для соцсетей.

Сейчас это работающий концепт по адресу tarasovvitalii.com/demos/hypersolid/: один адрес с 12 видами, восемь шейдерных миров и четыре процедурных трека; сделан 23–24 сентября 2026 года. 24 сентября собственный счётчик кадров движка сняли в 14 состояниях — пять глав, галерея и все восемь миров — в Chrome в headless-режиме на MacBook с Apple M5, в окне 1600 × 1000 при Retina-масштабе: медиана — 60 fps, самое низкое значение — 55,7. Основной скрипт вместе с three.js весит 0,77 МБ, в gzip — 0,21 МБ; вся выложенная папка — 1,1 МБ.

Lighthouse, запущенный по три раза на каждое устройство на живом адресе в тот же день, дал доступность 100 и рекомендации 100 на телефоне и компьютере, а производительность — 91 на телефоне и 94 на компьютере (медианы). При загрузке страница передаёт 0,4 МБ, CLS равен 0, LCP — 2,8 с на телефоне и 0,9 с на компьютере. SEO 63 — намеренно: демо закрыто от индексации (noindex), а в поиске должна находиться страница кейса о нём в портфолио.

HYPERSOLID — концепт, который VITON¹³ сделал, чтобы показать диапазон, а не заказной проект. Студия, её восемь проектов и адрес-пример вымышлены: у сайта нет заказчика, собственного домена, пользователей, трафика и заявок, и он не приписывает себе ни клиентов, ни наград, ни публикаций. На нём нет формы заявки и аналитики, поэтому о конверсии он ничего не доказывает; не значит он и того, что мы уже запускали WebXR, инсталляции или другие придуманные проекты: они существуют только как шейдерные миры на этом сайте.

Частота кадров измерена на одном компьютере со свежим чипом Apple, в Chrome в headless-режиме и в один день. О старых ноутбуках и телефонах она ничего не говорит и держится отчасти потому, что движок снижает разрешение тяжёлых миров. Lighthouse измеряет загрузку, а не плавность 3D-сцены, и его мобильный тест замедляет процессор и сеть, но не видеокарту. Демо намеренно закрыто от поиска, поэтому поисковых результатов у него нет.

Как проверить портфолио веб-студии →