HYPERSOLID — вымышленная студия креативных технологий: иммерсивный веб, 3D в реальном времени, XR и инсталляции. Я сделал её сайт 23–24 сентября 2026 года в жанре иммерсивных WebGL-сайтов студий, где вся страница — одна 3D-сцена в реальном времени, а интерфейс лежит поверх неё обычным текстом.

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

Эмблема — тессеракт, четырёхмерный куб: он вращается в 4D и каждый кадр проецируется в 3D. Его рёбра — стеклянные трубки с тонкоплёночной радужностью и дисперсией, вокруг — частицы на GPU и объёмный свет. Прелоадер рисует логотип линия за линией, пока считает загруженные ресурсы, а затем раскрывается в сцену.

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

Саундтрек полностью процедурный: четыре трека генерируются через Web Audio API и молчат, пока посетитель сам не включит звук. Всё сделано на three.js и собрано в статический сайт с относительными ссылками, поэтому он работает из любой папки — здесь из /demos/hypersolid/. При ограничении анимации пролёты камеры заменяются плавной сменой кадров, а браузеры без WebGL получают статическую версию с тем же содержанием.

Концепт — одностраничный сайт с пятью главами, галереей из восьми шейдерных миров, восемью страницами проектов и четырьмя процедурными треками. 24 сентября 2026 года я снял показания собственного счётчика кадров движка (window.__HS.fps, среднее за 90 кадров) в 14 состояниях — пять глав, галерея и все восемь миров — в Chrome в headless-режиме на MacBook с Apple M5, в окне 1600 × 1000 при Retina-масштабе: медиана — 60 fps, самое низкое значение — 55,7 fps.

Основной скрипт dist/assets/app.js вместе с three.js весит 0,76 МБ, в gzip — 0,21 МБ. Вся сборка со шрифтами и картинками занимает 1,1 МБ, и в ней нет ни одного файла текстур, 3D-моделей, видео или звука: каждый мир и каждый звук создаются в браузере.