# Руководство по контенту с дополненной реальностью (3D / AR) ### Общие концепции AR контента ###### 1 Поддерживаемые платформы: - Все iOS устройства с iOS 12+ - Все Android устройства с Android 7+ и Google Services в 3D режиме - Android устройства из списка https://developers.google.com/ar/discover/supported-devices в AR режиме ###### 2 Так как в данный момент AR контент будет отображаться только в мобильных приложениях, то возможность просматривать AR контент не должна быть обязательной для прохождения курса. Дополненная реальность призвана улучшать пользовательский опыт и помогать усваивать новый материал. ###### 3 3D модели для AR контента не должны быть очень большими и сложными. ### Пример отображения AR контента в шагах В мобильных приложениях AR контент помечается специальной иконкой. ![](https://i.imgur.com/cVBQ7rs.gif) ### Добавление AR контента ###### 1 Сохраните вашу 3D модель в `glTF` формате. ![](https://i.imgur.com/noObV2K.png) ###### 2 С помощью [Reality Converter](https://developer.apple.com/news/?id=01132020a) или иного инструмента сконвертируйте модель из формата `glTF` в формат `usdz`. ![](https://i.imgur.com/htAfG26.png) ![](https://i.imgur.com/Ys56vbK.png) ###### 3 Любым удобным способом сгенерируйте превью картинку для вашей модели. Итоговый набор файлов будет следующим. ![](https://i.imgur.com/sMIlHE7.png) ###### 4 Загрузите файлы моделей в любое удобное для вас место. (Например репозиторий в GitHub) ###### 5 В редакторе шагов перейдите в режим редактирования исходного кода шага (кнопка `source`). Добавьте следующий код: ```htmlmixed= <model-viewer src="{ссылка на модель в формате glTF}" ios-src="{ссылка на модель в формате usdz}" thumbnail="{ссылка на превью картинку для модели}"> </model-viewer> ``` Пример заполнения: ![](https://i.imgur.com/UgDSIjX.png) ###### 6 В итоге так шаг будет выглядеть на iOS ![iOS](https://i.imgur.com/Xptvs3I.jpg) И так на Android ![Android](https://i.imgur.com/DwarFCP.jpg)