3D-улов — что взять из 340 референсов и что в них опровергается

Собрано 29 августа 2026. Четыре разведчика разобрали пул по участкам; каждый сайт открыт в настоящем headless-браузере, сильнейшие разобраны по исходникам. Затем документ прошёл внешнюю критику (gpt-5.6-sol, максимальный режим рассуждения), которая нашла в первой редакции две фактические ошибки и систематически заниженные оценки труда. Здесь — исправленная версия; что именно было исправлено, перечислено в конце отдельным разделом.

Полные разборы: Студии · Клубы DE/UK/NL · Юг/СНГ/мир · Галереи и культура.

---

Первое, что надо знать: сайт уже не пустой

Первая редакция этого документа читалась как план с нуля — «сначала прелоудер, потом знак, потом монолит». Это была неверная рамка, и внешняя критика справедливо на неё указала. Все семнадцать пиков Жана уже реализованы в коде, и разговор идёт не о том, с чего начать, а о том, что в уже стоящем поменять.

Отсюда простой вывод: улов ценен не как список «что построить», а как набор поправок и добавок к тому, что стоит. Ниже он в этом виде и разложен.

---

Калибровка: «светится вебглом» ≠ 3D

Главный методический вывод разведки, и он экономит недели.

Машина открыла все 340 сайтов и засчитала графический контекст у 69. Значительная часть этих 69 — не графика. Контекст создаёт антифрод Shopify, reCAPTCHA и маячок Cloudflare: они снимают отпечаток видеокарты, рисуя в скрытый канвас в несколько пикселей. Гуще всего в моде — Rick Owens, Acne Studios, Machine-A, Diesel, Rombaut оказались именно этим.

Точный признак обмана найден в коде MUTEK: канвас размером один на один пиксель, чтение параметров видеокарты и немедленное удаление узла. То есть подпись «контекст создан, а канваса на странице нет» отличает снятие отпечатка от настоящей графики. Признак применён ко всем 69: 49 остались с видимым канвасом, 20 отсеялись.

Но и он не абсолютен. Depot Mayfield и igloo.inc — сайты с доказанной авторской графикой — тоже попали в бакет «канвасов ноль»: их холст создаётся и снимается вне окна измерения. Машина врёт в обе стороны: Bootshaus с настоящей металлической моделью знака числился по таймауту как мёртвый.

Поэтому метка на полигоне — сигнал к проверке, а не вердикт. Строки, которые разведчики действительно разобрали, помечены отдельно и ведут прямо в свой блок разбора; фильтр «только разобранные» оставляет их одни.

---

Поправки к тому, что уже стоит

Переход между страницами: брать у IFZ, а не у Teletech

Это исправление фактической ошибки первой редакции. Я написал, что переход load_grid у Teletech переживает настоящую навигацию и потому годится статическому экспорту. Разбор участка это опроверг: load_grid у Teletech — просто CSS-класс сетки, никакого перехода там нет.

Настоящий переход найден у Institut für Zukunft — ifz.me. Гиперболический вихрь на курсоре: сорок строк GLSL и ноль ассетов. Функции suckIn и spitOut твинят коэффициент u_warp между единицей и нулём за полсекунды, и при u_warp → 0 весь фон всасывается в точку курсора. Вызываются они из клиентского роутера, и каждый переход утягивает фон в воронку и выплёвывает обратно уже с новой картинкой. Гашение краёв сделано в чёрный, а не в прозрачность — на нашем фоне это ровно то, что нужно.

Заодно снимается ложная посылка, на которой стоял мой абзац: статический экспорт не отменяет клиентскую навигацию. Next генерирует HTML и RSC-payload, <Link> продолжает давать переходы без перезагрузки, и сайт уже ими пользуется. Приём window.location = destination, который я предлагал, технически сработает, но выбросит prefetch, постоянный макет и состояние холста и перезапустит WebGL — это ухудшение архитектуры, а не обход ограничения.

Карта разделов IFZ почти дословно наша: события с датой и слагом, серии (у нас бренды JILT, JAR, ZVUK, Massive), артисты списком и по одному, архив, букинг (у нас /hire), safer-clubbing (у нас «билеты и правила»), about, контакты.

Жидкий металл: варианты материала, а не инфраструктура

Первая редакция утверждала, что жидкий металл «уже написали за нас» в React Bits и что это стоит ТРУД 1–2. Это была ошибка масштаба. В репозитории уже лежит liquidMetalScene.ts на 401 строку, и почти весь этот объём — не шейдер, а инфраструктура: жизненный цикл, размеры, плотность пикселей, компиляция, потеря контекста, перецепление к элементу под курсором и дележ GPU с героем. Короткий GLSL никогда не был дорогой частью.

Что из галерей остаётся полезным — не «готовое решение», а библиотека вариантов материала, которые можно подставить в уже существующий рендерер:

Брать оттуда надо тело шейдера, а не компонент: компоненты создают собственный рендерер либо тянут OGL, и оба варианта ломают наш закон одного активного контекста.

Отдельная поправка по цене: полноэкранный треугольник — не синоним дешевизны. Фрагментный шейдер выполняется для каждого пикселя, и несколько октав шума на трёх миллионах пикселей при шестидесяти кадрах могут стоить дороже небольшой модели.

Amnesia — amnesia.es даёт самый близкий к нам рецепт: логотип клуба — выдавленный SVG в модели весом 16,8 килобайта, металл сделан картой маткап в обычном PNG, а не HDR-окружением, объём даётся параллаксом группы камеры. Клуб решил ровно нашу задачу самым бюджетным способом. Оговорка: маткап не эквивалент карты окружения — он зафиксирован относительно камеры и не отражает сцену, поэтому на вращающемся или разламывающемся монолите поведёт себя иначе. Это допустимая стилизация, а не замена.

Tenax — tenax.org — сцена не нужна, а слой пост-обработки поверх неё нужен: композитор с цифровым глитчем, плёночным шумом и сдвигом каналов. Палитра у них уже наша, и это готовый пример того, как сдвиг канала делает цвет свойством материала — у нас приём остаётся монохромным.

Монолит: разлом вместо вращения

Teletech — teletech.events держит морф-таргет Break, и скролл гонит его от нуля к единице: модель не крутится, а разламывается по мере прокрутки. Параллельно пять глитч-морфов дёргаются случайно — микродвижение живого объекта в покое. Разлом ближе к «металлу и бетону», чем любое вращение. Палитра сайта совпадает с нашей до значения токена: --darkest-hour:#0a0a0a, --dusk:#141414.

Честная цена: ТРУД 5, а не 4. Согласованные морф-таргеты требуют шейпкеев в Blender, сжатия геометрии, художественной постановки и проверки на реальных телефонах. Материал отдельно — 2–3.

Список артистов: сначала доделать DOM, потом думать о холсте

Lusion — lusion.co/work показывает механику: униформы u_domXY, u_domWH, u_activeRatio передают шейдеру прямоугольник наведённой карточки, и общий холст красит ховер ровно в её границах.

Но ставить это сейчас преждевременно. Наш ArtistRows уже работает на DOM и CSS с преразмытыми картинками, а перевод на холст требует синхронизации прямоугольников при прокрутке, изменении размера, смене ориентации, догрузке шрифтов и клиентской навигации; неаккуратный вызов измерения геометрии в кадровом цикле даст пробуксовку раскладки. ТРУД 4, а не 3. Сперва надо закрыть у списка тач, фокус и клавиатуру — там дыра реальная, а холст пока не решает доказанной проблемы.

Фотографии как материал

Depot Mayfield — depotmayfield.com — ближайший к ДНК Колоссуса сайт всего пула. Бетонное депо, тёмное, один акцент #ff3814 — их, не наш: у Colossus цветного акцента нет. Полноэкранные фотографии выводятся не тегом img, а плоскостью в WebGL: волновой зум расходится рябью от точки наведения, вершинный шейдер выгибает саму плоскость, поверх работает чёрная шторка-вскрытие. Эффект не кричит — он делает бетон материальным.

Снимаю формулировку «бюджет доказан», она была неверной. 113 килобайт — вес одного чужого куска кода, и он ничего не доказывает про наш сайт: не посчитаны основной и вендорный код, runtime фреймворка, текстуры, видео, декодирование, компиляция шейдеров и работа видеокарты. Полноэкранный шейдер упирается в скорость заливки, а не в размер кода. Наш собственный счёт при этом уже красный: three весит 179 килобайт против цели в 160 (задача WEB3.6 открыта).

Relighting Images with Depth Maps — кадры бетона и металла оживают под движущимся светом на одном кваде с двумя текстурами. «Как выглядит наш свет» перестаёт быть мудбордом и становится механикой.

Знак в металле: приём отличный, но это бренд-решение, а не техническое

Bootshaus — bootshaus.tv светит на свой логотип контровым 0xF74300 снизу-сзади: знак остаётся своим, а цвет на нём появляется светом (у нас контровой был бы холодный белый — красного у бренда нет). Холст 200×200 в подвале, весь авторский код 5 килобайт, рендер по требованию — не скроллишь, видеокарта спит.

Оговорка, которой в первой редакции не было. Я написал, что приём не нарушает брендбук. Это слишком сильное утверждение: экструзия, фаска, перспектива и цветной свет меняют силуэт и цвет пикселей знака, а действующий бриф требует использовать реальный PNG и не искажать его. Это отдельная трёхмерная интерпретация знака, и она требует письменного согласия владельца бренда до начала работы. Реальная цена: ТРУД 3–4, а не 2 — нужен векторный оригинал или ручное восстановление геометрии с отверстиями и знаком ®, фаски, нормали, развёртка, мобильный фолбэк и встройка в общий рендерер.

---

Что берётся без оговорок

Прелоудер-диафрагма Teletech — четыре кромки уезжают в ноль, открывая холст, который едет с масштаба 1.2 в 1 по авторской кривой CustomEase("M0,0 C0.14,0.86 0.37,0.96 1,1"): резкий старт, длинный мягкий хвост. Это единственная оценка, которую внешняя критика оставила без поправки: ТРУД 1. Наш прелоудер уже на CSS-анимациях, кривая переносится в них напрямую.

Unseen — unseen.co — шумовой круговой ревил на униформах u_fromScene, u_toScene, u_progress: одна сцена растворяется в другую через шум, без резаных кромок.

Microsoft AI — microsoft.ai — один полноэкранный квад, ни моделей, ни загрузчиков: самый дешёвый способ получить большой объёмный экран.

Akaru — akaru.fr — displacement-переход между секциями, один из самых дешёвых больших эффектов в вебе.

Exo Ape — exoape.com/work — ощущение почти как у топовых WebGL-сайтов при ТРУД 1. Стоит посмотреть до того, как заказывать сцену.

Input Barcelona — inputbcn.com — эталон дешёвого «вау» среди клубов: Lenis, GSAP, ScrollTrigger и Lottie, ноль WebGL.

---

Дисциплина — читать до кода

Building The Monolith: композиция 13 WebGL-сцен на одном рендерере — готовая инструкция под наш закон одного активного контекста, который уже реализован в claimGpu.

Obys — obys.agency — один холст на всё приложение как архитектурное решение, а не как эффект.

Zentry — zentry.com — главный референс Жана оказался на три четверти видео-продакшном: three грузится ленивым куском в 46 килобайт, а пропорция на главной — шесть видео на один холст. Для сроков хорошая новость, для съёмочного плана плохая. Оговорка та же, что и выше: 46 килобайт доказывают существование маленького куска у Zentry и ничего не говорят про нас.

---

Телефоны и prefers-reduced-motion — самая большая дыра

Наш tier.ts отдаёт шейдеры и сцену героя только тиру 3, а тир 3 требует точного указателя, больше четырёх гигабайт памяти и живого WebGL. Значит на большинстве телефонов исчезают монолит, жидкий металл, ховер списка и интерактивные фотографии разом — то есть почти всё, что этот документ называет главным. Мобильного художественного эквивалента для них не спроектировано, и это не список выключателей, а отдельная задача арт-дирекции.

Конкретные места, где сейчас разваливается:

• Наклон устройства вместо ховера (приём IFZ) не является готовой заменой: доступ к ориентации требует защищённого контекста и явного разрешения пользователя, обычно после жеста. Пользователь может отказать, а телефон может лежать на столе.
• Строка списка HÖR на тач-устройстве не имеет состояния, в котором посетитель успевает увидеть фон и затем перейти. Двухтаповую навигацию вводить нельзя — нужна автоматически активная строка в центральной зоне экрана либо постоянная миниатюра.
• Рябь на фотографии нельзя вешать на движение пальца: оно конкурирует с прокруткой.
• Клавиатурный фокус не разобран вообще. Любой эффект наведения обязан иметь понятное состояние фокуса.
• prefers-reduced-motion должен убирать морф, вихрь, автозапуск видео, вскрытие прелоудера и длинные переходы. Подмена WebGL-анимации на вытеснение по clip-path — всё ещё движение.

---

Чего разведка не рассмотрела вообще

Пропущен целый класс: жизненный цикл графики в настоящем браузере. Нет контракта на возврат по истории, повторное монтирование маршрута, смену ориентации, потерю и восстановление контекста WebGL, несколько вкладок, нехватку памяти, отменённую навигацию, догрузку текстуры после размонтажа и автоматическую предзагрузку ссылок на страницах с десятками артистов.

Нет и медиа-конвейера: размеры исходников, адаптивные версии, битрейт, бюджет постеров, число одновременных декодеров, очистка текстур из памяти видеокарты и правила кеша. Бюджет, скорее всего, кончится именно здесь, а не в шейдерах.

---

Порядок работ

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

1. Зафиксировать базовый замер: бюджет по маршрутам, реальный средний Android, iPhone, режим пониженного движения, потеря контекста. Долги уже записаны — WEB3.6 (three 179 против 160) и WEB3.7 (живой прогон на Android, эмуляция не считается).
2. Мобильная и reduced-motion арт-дирекция — что именно видит человек с телефона вместо монолита и жидкого металла. Сейчас это дыра, а телефонов у клубной аудитории большинство.
3. Технический прогон монолита с разломом — жизнеспособность, вес и время кадра надо узнать рано, полировать модель можно поздно.
4. Доделать список артистов на DOM — тач, фокус, клавиатура, активная строка при прокрутке. Холст добавлять только при доказанной визуальной разнице.
5. Прототип одной фотографии плоскостью в WebGL на одной секции с замером сети, памяти видеокарты и кадров.
6. Переход между страницами по схеме IFZ — через существующую клиентскую навигацию.
7. Прелоудер и кривая Teletech — поздняя полировка, тайминг зависит от фактической загрузки.
8. Металлический знак — последним и только после письменного согласия владельца бренда.

---

Что исправила внешняя критика

Документ прошёл проверку gpt-5.6-sol в максимальном режиме рассуждения. Найденное:

1. Переход load_grid у Teletech не существует — это CSS-класс. Я перенёс утверждение из погибшего первого захода, не сверив с итоговым отчётом, где оно снято. Исправлено на IFZ.
2. Статический экспорт не отменяет клиентскую навигацию — <Link> работает, сайт им уже пользуется. Мой обход через window.location был ухудшением, а не решением.
3. «113 килобайт — бюджет доказан» — самое слабое место первой редакции: вес чужого куска кода выдан за доказательство нашей производительности. Снято.
4. Жидкий металл уже построен в репозитории на 401 строку, и цена — инфраструктура, а не GLSL. Оценка ТРУД 1–2 была занижена вдвое.
5. Знак в металле требует бренд-аппрува, а не только рук: экструзия и цветной свет меняют силуэт и цвет знака. ТРУД поднят с 2 до 3–4.
6. Маткап не эквивалент карты окружения, разлом монолита — ТРУД 5, список на холсте — ТРУД 4.
7. Мобильные и режим пониженного движения — самый крупный незакрытый пласт, вынесен в отдельный раздел выше.

Оценка ТРУД 1 у прелоудера — единственная, которую критика оставила без поправки.