Музей вместо портфолио: 15 залов на WebGL

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

Это был эксперимент на вопрос: что будет, если отнестись к портфолио не как к списку, а как к зданию?

Почему музей#

Кейсы в портфолио люди листают за 40 секунд. В пространстве работает другая психика: посетитель идёт, останавливается, возвращается. Пространственная память сильнее ленточной — «тот тёмный зал с трейдингом» запоминается лучше, чем «третий кейс сверху». Заодно музей честно отвечает на вопрос «а что этот человек умеет в 3D и интерактиве» — самим фактом своего существования.

Как это сделано#

Никакого движка — чистый Three.js поверх WebGL. Из интересного:

• Статик-батчинг: стены, плинтусы и рамы всех залов слиты в несколько больших мешей — счёт draw calls упал на порядок, и музей живёт даже на встроенной графике.
• Иллюзион — зал-оммаж Superliminal: перспективные трюки, где экспонат меняет размер в зависимости от того, откуда на него смотришь.
• Планетарий — купол со звёздным небом из шейдера; сидишь на скамейке и смотришь, как над головой крутятся созвездия из пиктограмм моих проектов.
• 46 ачивок — от «прочитал все таблички» до совсем секретных. Геймификация тут не сахар, а навигация: ачивки мягко ведут в залы, до которых посетитель сам бы не дошёл.

Грабли#

Главная — SwiftShader: на машинах без GPU браузер честно рендерит WebGL программным растеризатором, и то, что летает на видеокарте, превращается в слайд-шоу. Пришлось делать детектор и режим пониженной детализации (?lite), который выключает тени и половину света. Вторая грабля — звук: браузеры не дают играть аудио до первого клика, поэтому музей встречает тишиной и включает эмбиент только после «входного билета».

Что вышло#

Средняя сессия в музее — в шесть раз длиннее, чем на странице портфолио. Люди пишут отзывы в книгу у выхода (да, она настоящая, отзывы сохраняются). Несколько человек нашли пасхалку с уткой и написали мне об этом лично — такой глубины вовлечения не даёт ни один лендинг.

Портфолио отвечает на вопрос «что человек сделал». Музей — на вопрос «как человек думает».

Вход — по ссылке, билет бесплатный, утка спрятана честно.