Попробовал вайбкодить WebXR
После того как увидел Scaniverse в вебе, как это может и работает в нативном браузере MR-гарнитуры, захотелось попробовать самому. И вот подвернулся случай — в личку постучали и спросили умею ли я а, б, ц. Не умею, но ресёрчил технологии/фреймворки и примерно представляю что делать. Взял паузу на попробовать. Результат на прикреплённом видео.
Что это за магия такая и кто такой этот WebXR? Если коротко, это стандарт иммерсивного веба, позволяющий создавать одно общее пространство с одной кодовой базой, доступное прямо из браузера и сразу на всех устройствах.
Пишешь код один раз, а потом просто кидаешь ссылку. Одни откроют на телефоне и покрутят пальцем у виска объект пальцем или гироскопом. Другие в AR примерят 3D-модель прямо у себя в комнате. Третьи наденут шлем (Quest 3, Pico 4, да хоть Apple Vision Pro) и буквально окажутся внутри вашего скана, игры или проекта. И да, на обычном ПК в браузере тоже все будет отлично работать. Будут и полноценные игровые сцены, и взаимодействие — всё в родном браузере устройства.
Возвращаясь к эксперименту на видео. Модельку взял на Sketchfab, анимировал в Mixamo, видео скачал с YouTube. Это уже понятно и отработано. А что дальше, чтоб в итоге вышло в браузере?В моём шорт-листе для реализации было два фаворита — A-Frame (он работает поверх Three.js, но сильно проще) и Babylon.js. Потратил на эксперименты с ними вечер, чуть-чуть ночи и штук 200 запросов в Cursor. И даже что-то получилось.
Для чего ещё мне всё это? Я люблю делать воздушные 360-фото (полюблю наземные и 180-градусные видео, как только обзаведусь камерой), а сервисы типа Kuula ограничивают создание туров в бесплатной версии. Да и хочется контроль над своими файлами, отсутствие зависимости от единственного зарубежного сервиса и вот эта вся моя шарманка. Просто чтоб на ПК люди крутили панорамы мышкой, на телефоне — самим телефоном, а в гарнитурах — полностью погружались внутрь.
Чтоб вставляешь кусок отсканированного городища, кричащую о восстановлении церквушку или памятник природы прямо на страницу сайта — крути, верти, изучай детали. Или запускаешь с телефона и тут же видишь, как виртуальный объект будет смотреться на скамейке возле дома. Помните, как ловили Пикачу, делая Niantic богаче и сильнее? Вот классно было бы придумать что-то такое для образовательных или музейных целей, например.
И почему бы на этой же технологии не реализовать ИИ-вайфу? С графикой попроще (пока), но сразу на всех устройствах. Так можно будет брать её хоть в Нолинск, хоть на работу. Такой потенциал для разной гачи, конечно, где миллиардные примеры на слуху!?
Короче, хочется, чтобы этот иммерсивный веб не просто был, а скорее рос и становился доступнее как для пользователей, так и для креаторов. И, кажется, это возможно. Подглядывая в документацию и отправляя Агента в IDE…туда же. По Babylon.js, кстати, есть огромный бесплатный курс на Stepik. И по Three.js у того же автора. Но я, признаться, тут надеюсь, верю и жду в улучшение LLMок для вайбкодинга. Генераторы 3D-моделей тоже подтягиваются.
t.me/staniverse/613* · 16 май 2025*