TONWeb
Браузерное 3D-пространство, в котором владелец коллекции NFT на блокчейне TON попадает в собственную виртуальную комнату с видом от первого лица, развешивает токены по стенам галереи и вживую настраивает экспозицию. Приложение собрано на Unity WebGL и запускается на обычной веб-странице без установки клиента, одинаково корректно работая на десктопе с мышью и клавиатурой и на смартфоне с сенсорным управлением. Внутри сцены пользователь свободно перемещается, перетаскивает изображения между стенами, масштабирует их колесом мыши или жестом двумя пальцами, а каждое изменение мгновенно фиксируется на бэкенде, формируя персональную постоянную выставку коллекции.
Задача
Требовалось создать иммерсивную витрину для держателей NFT экосистемы TON, которая превращает плоский список токенов в живое выставочное пространство и при этом остается доступной максимально широкой аудитории. Ключевые требования к продукту:
- Полностью браузерный запуск без установки приложений и без потери качества трехмерной графики.
- Единый продукт для десктопа и мобильных устройств вместо двух раздельных разработок.
- Подгрузка NFT напрямую из источников экосистемы TON, включая маркетплейсы и децентрализованное хранилище IPFS, с непредсказуемыми форматами и пропорциями изображений.
- Интерактивное редактирование экспозиции владельцем с сохранением раскладки между сессиями.
- Двусторонняя связка 3D-сцены с веб-страницей, на которой происходит авторизация через кошелек TON и располагается остальной интерфейс продукта.
Решение
Реализовано Unity WebGL приложение, встраиваемое в страницу через единый канвас и слой JavaScript-интеграции. Внутри собрана полноценная навигация от первого лица: контроллер персонажа на базе CharacterController с гравитацией, прыжком и проверкой опоры под ногами, управление камерой по горизонтали и вертикали с ограничением угла наклона, блокировка и захват курсора при переходе между режимами осмотра и редактирования.
NFT приходят в сцену пакетом в формате JSON с адресами токенов в сети TON, координатами, масштабом и номером стены. Каждое изображение загружается в рантайме асинхронно, автоматически нормализуется по соотношению сторон и размещается ровно в той точке экспозиции, где его оставил владелец в прошлый раз. Для владельца включается режим редактирования: перетаскивание полотен по стенам, бесшовный переход картины с одной стены на соседнюю, плавное масштабирование и подсветка активного объекта. Любое перемещение или изменение размера автоматически отправляется на сервер и становится новым постоянным состоянием комнаты.
Управление построено как единый слой ввода, который сам определяет платформу. На десктопе работают мышь и клавиатура, на смартфоне включается сенсорная схема с разделением экрана: левая половина отвечает за перемещение по принципу виртуального джойстика, правая за обзор камерой, а жест сведения и разведения двух пальцев масштабирует выбранное полотно.
Архитектура и сложности
Мост между Unity и веб-страницей. Связь 3D-сцены с окружающим интерфейсом построена на собственном плагине уровня JavaScript. Из движка наружу уходят события о действиях пользователя и о входе в зоны телепортации, а страница в ответ передает в сцену данные профиля, флаг мобильного устройства и сам набор NFT для отрисовки. Это позволило вынести авторизацию через кошелек TON и тяжелую часть продуктовой логики на веб-слой, оставив движку только то, в чем он силен, то есть интерактивную графику.
Один код на две принципиально разные модели ввода. Самой объемной инженерной задачей стало объединение десктопного и мобильного управления в одной кодовой базе без ветвления на две сборки. Сенсорная схема с независимой обработкой пальцев в левой и правой зонах экрана, распознаванием фаз касания и жестом масштабирования двумя пальцами сосуществует с классическим вводом через мышь и клавиатуру, переключаясь автоматически по сигналу со страницы.
Непредсказуемый контент из децентрализованных источников. Изображения NFT приходят с разных площадок экосистемы и из IPFS, имеют произвольные размеры и пропорции и не могут быть подготовлены заранее. Поэтому загрузка вынесена в асинхронные корутины поверх UnityWebRequest, а каждое полотно при получении приводится к корректным пропорциям расчетом по фактическим ширине и высоте текстуры, чтобы экспозиция выглядела аккуратно независимо от исходника.
Перемещение полотен по замкнутой галерее. Логика перетаскивания учитывает геометрию комнаты с несколькими стенами разной ширины. При выходе картины за край стены она бесшовно переносится на соседнюю с пересчетом локальных координат и границ, благодаря чему обход галереи по кругу остается непрерывным, а раскладка не разрушается.
Надежность интерактивного редактирования. Сохранение состояния происходит только при реальном изменении объекта, что исключает лишние обращения к серверу, а защита от ошибок ввода и корректное форматирование числовых координат гарантируют, что разложенная владельцем экспозиция точно восстановится при следующем заходе.
Результат
- Запущен публичный продукт, доступный по обычной ссылке без установки и без дополнительных плагинов.
- Одна сборка Unity WebGL покрывает сразу десктоп и мобильные браузеры, что вдвое сократило объем разработки и поддержки клиентской части по сравнению с раздельными версиями.
- Полный цикл взаимодействия с NFT работает в рантайме: загрузка коллекции из источников TON и IPFS, размещение в трехмерной комнате, интерактивная перекомпоновка и постоянное хранение раскладки.
- 3D-навигация от первого лица с физикой и плавной камерой реализована напрямую в браузере, сохраняя отзывчивость на обеих платформах.
- Достигнута устойчивая работа с произвольным пользовательским контентом: изображения любого формата и размера автоматически приводятся к корректному виду без ручной подготовки.
- Архитектура с четким разделением веб-слоя и 3D-движка дала продукту запас на развитие, включая социальные механики вроде перехода между комнатами и зон телепортации.
Стек
Unity 2022.3 LTS, C#, сборка под WebGL. Интеграция с веб-страницей через собственный JavaScript-плагин (.jslib) и двусторонний обмен сообщениями между движком и DOM. Работа с сетью на UnityWebRequest и асинхронных корутинах, сериализация на Newtonsoft.Json. Интерфейс на uGUI, TextMeshPro и ProceduralUIImage. Трехмерная навигация на CharacterController с собственной системой управления камерой и кросс-платформенным вводом для мыши, клавиатуры и мультитач-жестов. Интеграция с экосистемой блокчейна TON и децентрализованным хранилищем IPFS, взаимодействие с HTTP-бэкендом для хранения состояния экспозиции.