Готовясь к Google I/O, мы хотели подчеркнуть захватывающие возможности дополненной реальности (AR) в Интернете. Chacmool — это образовательная демонстрация веб-опыта, которую мы создали, чтобы показать, как легко AR-технология через Интернет может помочь пользователям взаимодействовать с AR-опытом. Интернет делает AR удобным и доступным повсюду.
Теперь мы включили эту демонстрацию в Chrome Canary на ARCore-совместимых устройствах Android с Android O или более поздней версии. Вам также потребуется установить ARCore . Эта работа опирается на новое предложение WebXR ( API проверки нажатия WebXR ), поэтому оно находится под флагом и намерено оставаться на Канарских островах, пока мы тестируем и дорабатываем новое предложение API с другими членами группы сообщества Immersive Web. Фактически, чтобы получить доступ к демо-версии, вам нужно включить в chrome://flags: #webxr и #webxr-hit-test . После того, как вы оба включите их и перезапустите Canary, вы сможете проверить демо-версию Chacmool .
Опыт Chacmool AR сосредоточен на образовании, используя захватывающий и интерактивный характер AR, чтобы помочь пользователям узнать о древних скульптурах Чакмула. Пользователи могут разместить статую в натуральную величину в своей реальности и перемещаться, чтобы увидеть скульптуру под разными углами и расстояниями. Иммерсивная природа AR позволяет пользователям свободно исследовать, открывать для себя контент и играть с ним так же, как они это делают в реальном мире. Просматривая объект в AR, а не на плоском 2D-экране, мы можем получить глубокое понимание того, на что смотрим, поскольку мы можем видеть его под разными углами и расстояниями, используя очень интуитивно понятную модель взаимодействия: ходить вокруг объекта и физически приближаться или удаляться. Также в этом опыте аннотации размещены прямо на скульптуре. Это позволяет пользователям напрямую связывать то, что описано в тексте, и расположение этих элементов на скульптуре.
На создание этой демо-версии ушло около месяца с использованием некоторых компонентов из первой веб-демо AR-версии команды WebXR — WebAR-Article . Информация о скульптуре была получена со страницы Google Arts & Culture , а 3D-модель была предоставлена партнером Google Arts & Culture, компанией CyArk . Чтобы подготовить 3D-модель для публикации в Интернете, использовалась комбинация Meshlab и Mesh Mixer для восстановления модели и уничтожения ее сетки, чтобы уменьшить размер файла. Затем была использована библиотека Draco для сжатия и распаковки 3D-геометрических сеток и облаков точек, чтобы уменьшить размер файла модели с 44,3 мегабайт до всего лишь 225 килобайт. Наконец, веб-воркер используется для загрузки модели в фоновом потоке, поэтому страница остается интерактивной, пока модель загружается и распаковывается. Эта операция обычно приводит к зависанию и предотвращению прокрутки страницы.
Мы не можем не подчеркнуть, что, поскольку мы разрабатывали на настольном компьютере и развертывали на телефоне, использование инструментов удаленной отладки Chrome для проверки опыта создает отличный быстрый цикл итераций между изменениями кода, а в Chrome есть замечательные инструменты разработчика для отладки. и проверка работоспособности.
Лучшие практики для работы с AR/VR
Большинство рекомендаций по проектированию и проектированию для создания собственных возможностей AR применимы к созданию веб-интерфейсов AR. Если вы хотите узнать больше об общих передовых практиках, ознакомьтесь с рекомендациями по проектированию дополненной реальности, которые мы недавно выпустили.
В частности, при разработке веб-интерфейсов AR лучше всего использовать весь экран (т. е. переходить в полноэкранный режим, аналогично тому, как видеоплееры работают в полноэкранном режиме на мобильных устройствах) при использовании AR. Это не позволяет пользователям прокручивать представление или отвлекаться на другие элементы веб-страницы. Переход в дополненную реальность должен быть плавным и плавным, с отображением изображения с камеры перед входом в дополненную реальность (например, рисование сетки). Что важно отметить в веб-дополненной реальности, так это то, что, в отличие от нативной, разработчики не имеют доступа к кадру камеры, оценке освещения, якорям или плоскостям (пока), поэтому важно, чтобы дизайнеры и разработчики учитывали эти ограничения при проектировании. веб-опыт AR.
Кроме того, из-за разнообразия устройств, используемых для работы в Интернете, важно оптимизировать производительность для обеспечения наилучшего взаимодействия с пользователем. Итак: держите количество полигонов на низком уровне, старайтесь избегать как можно меньшего количества источников света, по возможности заранее рассчитывайте тени и минимизируйте вызовы отрисовки. При отображении текста в AR используйте современные методы рендеринга текста (т. е. на основе знакового поля расстояния), чтобы текст был четким и читаемым на всех расстояниях и под любыми углами. Размещая аннотации, думайте о взгляде пользователя как о еще одном входе и показывайте аннотации только тогда, когда они релевантны (т. е. аннотации на основе близости, которые появляются, когда пользователь фокусируется на интересующей области).
Наконец, поскольку этот контент основан на Интернете, важно также применять общие лучшие практики веб-дизайна. Убедитесь, что сайт удобен на всех устройствах (настольный компьютер, планшет, мобильный телефон, гарнитура и т. д.) — поддержка прогрессивного улучшения означает также разработку для устройств, не поддерживающих AR (т. е. показ средства просмотра 3D-моделей на устройствах, не поддерживающих AR).
Если вы заинтересованы в разработке собственных веб-приложений AR, у нас есть сопутствующий пост, в котором будет представлена более подробная информация о том, как начать создавать AR в Интернете самостоятельно. (Вы также можете ознакомиться с исходным кодом демо-версии Chacmool.) API устройства WebXR активно разрабатывается, и мы будем рады получить обратную связь, чтобы гарантировать, что он поддерживает все типы приложений и варианты использования, поэтому перейдите на GitHub и присоединяйтесь. разговор !