Try   HackMD

Руководство по контенту с дополненной реальностью (3D / AR)

Общие концепции AR контента

1

Поддерживаемые платформы:

2

Так как в данный момент AR контент будет отображаться только в мобильных приложениях, то возможность просматривать AR контент не должна быть обязательной для прохождения курса. Дополненная реальность призвана улучшать пользовательский опыт и помогать усваивать новый материал.

3

3D модели для AR контента не должны быть очень большими и сложными.

Пример отображения AR контента в шагах

В мобильных приложениях AR контент помечается специальной иконкой.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Добавление AR контента

1

Сохраните вашу 3D модель в glTF формате.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

2

С помощью Reality Converter или иного инструмента сконвертируйте модель из формата glTF в формат usdz.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

3

Любым удобным способом сгенерируйте превью картинку для вашей модели.

Итоговый набор файлов будет следующим.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

4

Загрузите файлы моделей в любое удобное для вас место. (Например репозиторий в GitHub)

5

В редакторе шагов перейдите в режим редактирования исходного кода шага (кнопка source).

Добавьте следующий код:






<model-viewer
    src="{ссылка на модель в формате glTF}"
    ios-src="{ссылка на модель в формате usdz}"
    thumbnail="{ссылка на превью картинку для модели}">
</model-viewer>

Пример заполнения:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

6

В итоге так шаг будет выглядеть на iOS

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

И так на Android

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Last changed by 
 
Ruslan Davletshin
0
186

Read more

2

&#x41F;&#x43E;&#x441;&#x442;&#x430;&#x43D;&#x43E;&#x432;&#x43A;&#x430; &#x437;&#x430;&#x434;&#x430;&#x447;&#x438;: &#x440;&#x430;&#x437;&#x440;&#x430;&#x431;&#x43E;&#x442;&#x430;&#x442;&#x44C; &#x447;&#x430;&#x442; &#x441; &#x442;&#x435;&#x43A;&#x441;&#x442;&#x43E;&#x432;&#x44B;&#x43C;&#x438; &#x441;&#x43E;&#x43E;&#x431;&#x449;&#x435;&#x43D;&#x438;&#x44F;&#x43C;&#x438; &#x421;&#x445;&#x435;&#x43C;&#x430; &#x412; &#x437;&#x430;&#x433;&#x43E;&#x43B;&#x43E;&#x432;&#x43A;&#x435; &#x442;&#x440;&#x435;&#x431;&#x443;&#x435;&#x442;&#x441;&#x44F; &#x43F;&#x435;&#x440;&#x435;&#x434;&#x430;&#x432;&#x430;&#x442;&#x44C; Bearer &#x442;&#x43E;&#x43A;&#x435;&#x43D; &#x434;&#x43B;&#x44F; &#x442;&#x435;&#x43A;&#x443;&#x449;&#x435;&#x433;&#x43E; &#x43F;&#x43E;&#x43B;&#x44C;&#x437;&#x43E;&#x432;&#x430;&#x442;&#x435;&#x43B;&#x44F; GET api/messages/{channel} &#x41F;&#x430;&#x440;&#x430;&#x43C;&#x435;&#x442;&#x440;&#x44B;: from - &#x43C;&#x438;&#x43D;&#x438;&#x43C;&#x430;&#x43B;&#x44C;&#x43D;&#x44B;&#x439; id &#x441;&#x43E;&#x43E;&#x431;&#x449;&#x435;&#x43D;&#x438;&#x44F;

Jul 26, 2020
Presentation -- Base

&#x41C;&#x44B; &#x438;&#x441;&#x43F;&#x43E;&#x43B;&#x44C;&#x437;&#x443;&#x435;&#x43C; &#x43D;&#x430;&#x448;&#x443; &#x430;&#x440;&#x445;&#x438;&#x442;&#x435;&#x43A;&#x442;&#x443;&#x440;&#x443; &#x443;&#x436;&#x435; &#x43D;&#x430; &#x43F;&#x440;&#x43E;&#x442;&#x44F;&#x436;&#x435;&#x43D;&#x438;&#x438; &#x43D;&#x435;&#x441;&#x43A;&#x43E;&#x43B;&#x44C;&#x43A;&#x438;&#x445; &#x43B;&#x435;&#x442;. &#x41A;&#x430;&#x43A; &#x43F;&#x43E;&#x43A;&#x430;&#x437;&#x44B;&#x432;&#x430;&#x435;&#x442; &#x43F;&#x440;&#x430;&#x43A;&#x442;&#x438;&#x43A;&#x430; &#x43E;&#x434;&#x43D;&#x438;&#x43C; &#x438;&#x437; &#x441;&#x430;&#x43C;&#x44B;&#x43C; &#x441;&#x43B;&#x43E;&#x436;&#x43D;&#x44B;&#x445; &#x430;&#x441;&#x43F;&#x435;&#x43A;&#x442;&#x43E;&#x432; &#x44D;&#x442;&#x43E;&#x433;&#x43E; &#x43F;&#x43E;&#x434;&#x445;&#x43E;&#x434;&#x430; &#x44F;&#x432;&#x43B;&#x44F;&#x435;&#x442;&#x441;&#x44F; presentation &#x441;&#x43B;&#x43E;&#x439;. &#x417;&#x430; &#x432;&#x440;&#x435;&#x43C;&#x44F; &#x440;&#x430;&#x431;&#x43E;&#x442;&#x44B; &#x44F; &#x43F;&#x43E;&#x432;&#x438;&#x434;&#x430;&#x43B; &#x43C;&#x43D;&#x43E;&#x436;&#x435;&#x441;&#x442;&#x432;&#x43E; &#x440;&#x430;&#x437;&#x43B;&#x438;&#x447;&#x43D;&#x44B;&#x439; &#x432;&#x430;&#x440;&#x438;&#x430;&#x446;&#x438;&#x439; &#x438; &#x434;&#x430;&#x436;&#x435; &#x43C;&#x443;&#x442;&#x430;&#x446;&#x438;&#x439; &#x438;&#x441;&#x445;&#x43E;&#x434;&#x43D;&#x43E;&#x433;&#x43E; &#x43F;&#x43E;&#x434;&#x445;&#x43E;&#x434;&#x430; &#x441; &#x44F;&#x432;&#x43D;&#x44B;&#x43C; &#x441;&#x43E;&#x441;&#x442;&#x43E;&#x44F;&#x43D;&#x438;&#x435;&#x43C;, &#x432; &#x43A;&#x43E;&#x442;&#x43E;&#x440;&#x44B;&#x445; &#x442;&#x435;&#x440;&#x44F;&#x43B;&#x438;&#x441;&#x44C; &#x43E;&#x441;&#x43D;&#x43E;&#x432;&#x43D;&#x44B;&#x435; &#x435;&#x433;&#x43E; &#x441;&#x432;&#x43E;&#x439;&#x441;&#x442;&#x432;&#x430; &#x438; &#x43F;&#x440;&#x435;&#x438;&#x43C;&#x443;&#x449;&#x435;&#x441;&#x442;&#x432;&#x430;. &#x412; &#x434;&#x430;&#x43D;&#x43D;&#x43E;&#x43C; &#x446;&#x438;&#x43A;&#x43B;&#x435; &#x441;&#x442;&#x430;&#x442;&#x435;&#x439; &#x43C;&#x44B; &#x432;&#x43C;&#x435;&#x441;&#x442;&#x435; &#x43F;&#x43E;&#x44D;&#x442;&#x430;&#x43F;&#x43D;&#x43E; &#x43F;&#x43E;&#x441;&#x442;&#x440;&#x43E;&#x438;&#x43C; &#x43F;&#x440;&#x435;&#x437;&#x435;&#x43D;&#x442;&#x435;&#x440; &#x434;&#x43B;&#x44F; &#x434;&#x43E;&#x441;&#x442;&#x430;&#x442;&#x43E;&#x447;&#x43D;&#x43E; &#x43D;&#x435;&#x442;&#x440;&#x438;&#x432;&#x438;&#x430;&#x43B;&#x44C;&#x43D;&#x43E;&#x433;&#x43E; &#x44D;&#x43A;&#x440;&#x430;&#x43D;&#x430;, &#x442;&#x435;&#x43C; &#x441;&#x430;&#x43C;&#x44B;&#x43C; &#x43F;&#x440;&#x43E;&#x43B;&#x438;&#x432; &#x441;&#x432;&#x435;&#x442; &#x43D;&#x430; &#x43C;&#x43D;&#x43E;&#x433;&#x438;&#x435; &#x442;&#x435;&#x43C;&#x43D;&#x44B;&#x435; &#x443;&#x447;&#x430;&#x441;&#x442;&#x43A;&#x438; state &#x43F;&#x43E;&#x434;&#x445;&#x43E;&#x434;&#x430;. &#x41E;&#x431;&#x449;&#x430;&#x44F; &#x438;&#x43D;&#x444;&#x43E;&#x440;&#x43C;&#x430;&#x446;&#x438;&#x44F; &#x412; &#x44D;&#x442;&#x43E;&#x43C; &#x440;&#x430;&#x437;&#x434;&#x435;&#x43B;&#x435; &#x43F;&#x43E;&#x433;&#x43E;&#x432;&#x43E;&#x440;&#x438;&#x43C; &#x43E;&#x431; &#x43E;&#x431;&#x449;&#x438;&#x445; &#x43A;&#x43E;&#x43D;&#x446;&#x435;&#x43F;&#x446;&#x438;&#x44F;&#x445;, &#x441;&#x432;&#x44F;&#x437;&#x430;&#x43D;&#x43D;&#x44B;&#x445; &#x441; &#x43D;&#x430;&#x448;&#x435;&#x439; &#x440;&#x435;&#x430;&#x43B;&#x438;&#x437;&#x430;&#x446;&#x438;&#x435;&#x439; presentation &#x441;&#x43B;&#x43E;&#x44F;. &#x41E;&#x441;&#x43D;&#x43E;&#x432;&#x44B; &#x43F;&#x440;&#x435;&#x437;&#x435;&#x43D;&#x442;&#x435;&#x440;&#x43E;&#x432; &#x41D;&#x430;&#x447;&#x43D;&#x435;&#x43C; &#x441; &#x442;&#x43E;&#x433;&#x43E;, &#x447;&#x442;&#x43E; &#x432;&#x441;&#x43F;&#x43E;&#x43C;&#x43D;&#x438;&#x43C;, &#x43D;&#x430; &#x447;&#x435;&#x43C; &#x431;&#x430;&#x437;&#x438;&#x440;&#x443;&#x44E;&#x442;&#x441;&#x44F; &#x43D;&#x430;&#x448;&#x438; &#x43F;&#x440;&#x435;&#x437;&#x435;&#x43D;&#x442;&#x435;&#x440;&#x44B;. &#x412;&#x441;&#x435; &#x43F;&#x440;&#x435;&#x437;&#x435;&#x43D;&#x442;&#x435;&#x440;&#x44B; &#x432; &#x43D;&#x430;&#x448;&#x438;&#x445; &#x43F;&#x440;&#x43E;&#x435;&#x43A;&#x442;&#x430;&#x445; &#x43D;&#x430;&#x441;&#x43B;&#x435;&#x434;&#x443;&#x44E;&#x442;&#x441;&#x44F; &#x43E;&#x442; &#x43A;&#x43B;&#x430;&#x441;&#x441;&#x430; PresenterBase (&#x43F;&#x430;&#x43A;&#x435;&#x442; presentation-base), &#x441; &#x442;&#x438;&#x43F;&#x43E;&#x432;&#x44B;&#x43C; &#x43F;&#x430;&#x440;&#x430;&#x43C;&#x435;&#x442;&#x440;&#x43E;&#x43C; V &#x43E;&#x437;&#x43D;&#x430;&#x447;&#x430;&#x44E;&#x449;&#x438;&#x43C; &#x442;&#x438;&#x43F; view &#x43A;&#x43E;&#x43D;&#x442;&#x440;&#x430;&#x43A;&#x442;&#x430;. PresenterBase import android.os.Bundle

Feb 17, 2020
Untitled

Aug 22, 2019
Android Code Style Guide

May 16, 2019
Read more from Ruslan Davletshin
Published on HackMD