Готовясь к Google I/O, мы хотели подчеркнуть захватывающие возможности дополненной реальности (AR) в Интернете. Chacmool — это образовательная демонстрация веб-опыта, которую мы создали, чтобы показать, как легко AR-технология через Интернет может помочь пользователям взаимодействовать с AR-опытом. Интернет делает AR удобным и доступным повсюду.
Теперь мы включили эту демонстрацию в Chrome Canary на ARCore-совместимых устройствах Android с Android O или более поздней версии. Вам также потребуется установить ARCore . Эта работа опирается на новое предложение WebXR ( API проверки нажатия WebXR ), поэтому оно находится под флагом и намерено оставаться на Canary, пока мы тестируем и дорабатываем новое предложение 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.
Кроме того, из-за разнообразия устройств, используемых для работы в Интернете, важно оптимизировать производительность для обеспечения наилучшего взаимодействия с пользователем. Итак: держите количество полигонов на низком уровне, старайтесь избегать как можно меньшего количества источников света, по возможности заранее рассчитывайте тени и минимизируйте вызовы отрисовки. При отображении текста в AR используйте современные методы рендеринга текста (т. е. на основе знакового поля расстояния), чтобы текст был четким и читаемым на всех расстояниях и под любыми углами. Размещая аннотации, думайте о взгляде пользователя как о еще одном входе и показывайте аннотации только тогда, когда они релевантны (т. е. аннотации на основе близости, которые появляются, когда пользователь фокусируется на интересующей области).
Наконец, поскольку этот контент основан на веб-технологиях, важно также применять общие лучшие практики веб-дизайна. Убедитесь, что сайт удобен для всех устройств (настольный компьютер, планшет, мобильный телефон, гарнитура и т. д.). Поддержка прогрессивного улучшения означает также разработку для устройств, не поддерживающих AR (т. е. показ средства просмотра 3D-моделей на устройствах, не поддерживающих AR).
Если вы заинтересованы в разработке собственных веб-приложений AR, у нас есть сопутствующий пост, в котором будет представлена более подробная информация о том, как начать самостоятельно создавать AR в Интернете. (Вы также можете ознакомиться с исходным кодом демо-версии Chacmool.) API устройства WebXR активно находится в разработке, и мы будем рады получить обратную связь, чтобы гарантировать, что он поддерживает все типы приложений и варианты использования, поэтому перейдите на GitHub и присоединяйтесь. разговор !