Всем привет! Меня зовут Григорий Дядиченко, и я занимаюсь разработкой разных проектов на заказ. Настало время тыкв и ужаса! Я люблю эстетику Halloween, но так как самому тыкву вырезать лень, я сделал AR тыкву. И хочу поделиться рецептом с вами. Мы поговорим про такие форматы как USDZ и GLB, про html вставки в тильду, про её проблемы и прочее. Сразу скажу, что решение не претендует на элегантность, а скорее объясняет концепцию. Если вам интересно, как добавить в тильду немного дополненной реальности — добро пожаловать под кат!

Иногда заказчикам хочется на своём сайте показывать какой-то AR. Причём многие кейсы AR сейчас сводятся к показать модель или модель с анимацией, даже без интерактива. Для этого не нужно разрабатывать какое-то сложное приложение. Достаточно сделать 3д модели в двух форматах USDZ и GLB, и разместить на сайте. Скажем если пользователю через сайт предоставляется возможность посмотреть "как впишется шкаф" или "техника" продаваемая на сайте то их функционал для этого идеально подходит. Он позволяет не тратиться на дорогое приложение, а просто оцифровать "стиральную машину", чтобы клиенты могли посмотреть "как она встанет в их квартиру". Результат и то, как это делается можно посмотреть в репозитории и на сайте (доступно только с телефона). А пока давайте начнём с USDZ.

USDZ и AR Quick Look

Сам по себе формат USDZ разработан компанией Pixar для 3д контента. По своей сути USDZ является zip архивом с несколькими видами файлов. Поддерживает анимации и звук.

1. USD, USDA, USDC — различные форматы Universal Scene Description. Файл описывающий сцену и 3д модели. Бывают двух видов: Random-access “Crate” binary (.usdc) и Human-readable UTF-8 text (.usda ). В usd бинарный или текстовый вариант сериализации зависит от хедера. Какой формат используется зависит от хедера в файле..
2. PNG, JPEG — изображения используемые в сцене
3. M4A, MP3, WAV — звуки используемые в сцене.

В целом формат хотя и сложный, вокруг него образовалось довольно много конвертеров, плагинов и т.п., которые позволяют с ним работать.

AR Quick Look в свою очередь это просмотрщик USDZ, который встроен в операционную систему начиная с IOS 12. А с версии IOS 13 поддерживает лёгкие интерактивы, которые можно собрать в Reality Composer. Благодаря AR Quick Look вы можете разместить свою 3д модель в окне браузера в сафари, а айос уже сама откроет для вас её в дополненной со всеми возможностями ARKit.

С форматами разобрались, попробуем засунуть USDZ в тильду.

Tilda и USDZ

Я иногда не понимаю предвзятости заказчиков к Tilda. Вполне неплохой себе конструктор. Да, конечно же имея бесконечные бюджеты на фронтенд разработчиков можно сделать круче, сложнее и интереснее с помощью того же React.js. Но я периодически слышу, когда нужно собрать лендинг с адаптивом без бюджета за 3 дня: "Только не тильда". Хотя камень в его огород кинуть в нашей задаче хочется сразу. Но если задача собрать простой лендинг за пару часов — тильда отличный инструмент. У меня ряд сайтов моих продуктов до сих пор работают на тильде. Да даже сайт студии на ней (пока).

И главная претензия к тильде у меня по сути одна. Я не могу залить на хостинг тильды файлы. И это прямо-таки геморой. Допустим передо мной поставили задачу, открывать AR на домене заказчика без всякого лишнего. И в Тильде это превращается в целую пляску с бубном. С бюджетами и серверами нет проблемы захостить файл где-то ещё, но если уж тильда по условия оплаты предоставляет 1 гб места хотелось бы иметь возможность занять его чем угодно. И что важно — привязать файлы к своему домену. Так как если домен переводится на Tilda то очевидно, что для самостоятельного хостинга файлов нужно покупать свой домен. Что очень сильно ограничивает возможности figma. Хотя в сегодняшнем примере мне удалось обойти это всё, и никакой лишний домен при открытии AR модели не светится.

Итак начнём. И сначала нам нужна usdz. В честь Хэллоуина я подготовил такую симпатичную тыкву с turbosquid. Дальше, так как тильда не умеет хранить файлы, то нам нужно какое-то хранилище. Для начала попробуем взять Google Drive.

Прямое скачивание с Google Drive

У ссылок гугл диска на самом деле довольно много прикольных функций, одна из которых возможность сделать файл просто "скачиваемым по прямой ссылке".

Формат обычной гугл ссылки, когда вы хотите поделиться чем-то с диска, можно представить как https://drive.google.com/file/d/{file_id}/view?usp=share_link из которого нам потребуется file_id.

Ссылка для прямого скачивания формируется как https://drive.google.com/uc?export=download&id={file_id}.

Например ссылка на нашу usdz https://drive.google.com/file/d/1XZjmyYpZF1425p3LK2nPz4HBgN83gdo1/view?usp=share_link превратится в https://drive.google.com/uc?export=download&id=1XZjmyYpZF1425p3LK2nPz4HBgN83gdo1.

HTML вставка для USDZ в Tilda

А теперь пока вспоминать классику. Фреймворки всех расслабили, вспомним какого это писать в блокноте и напишем простенький скрипт, стиль и html.

USDZ HTML вставка

<div>
  <a href="https://drive.google.com/uc?export=download&id=1XZjmyYpZF1425p3LK2nPz4HBgN83gdo1" rel="ar" class="App-mobile">
    <img src="https://drive.google.com/uc?export=download&id=1rzI0Idh-ytlk3l5_7nKX1AnrPlms5bZp" class="App-mobile-preview">
    <button>
      Посмотреть
    </button>
  </a>
</div>
<style>
.App-mobile{
  text-align: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.App-ar-icon{
  height: 25px;
  padding-right: 10px;
}
.App-mobile-preview{
  height: 50vh;
  margin-bottom: 0px;
}
</style>

И получаем какой-то такой результат:

AR работает, всё прекрасно. Стили можно написать такие, которые лучше подходят вам поправив CSS с IOS мы разобрались.

Из важных нюансов: в теге <a> есть атрибут rel="ar" и он важен для того, чтобы мобильное сафари распознало вашу USDZ. Без него файл с диска в целом работать не будет, а с любого другого хостинга будет открываться в дополнительном окне, где будет светиться домен хостинга. Если же этот атрибут добавлен, то сафари понимает что это превью AR объекта и сразу открывает Quick Look.

glTF и Scene Viewer

Чтож, с айос разобрались. Начнём разбираться с Android. Для начала разберёмся, что такое glTF.

glTF — формат файла для хранения трёхмерных сцен. Бывает с двумя расширениями .glb — бинарный формат и .glTF — текстовый формат (JSON-like). Поддерживает анимации.

В отличии от usdz не поддерживает официально звуки. Да и в целом в разы проще и ограниченнее чем usdz.

Scene Viewer в свою очередь — это технология гугла позволяющая открывать модели в дополненной реальности так же на уровне операционной системы. Поддерживает модели формата glTF и работает на всех устройствах с поддержкой ARCore. Позволяет разместить 3д модель с анимацией в вашем приложении или же на сайте и открыть её в AR без разработки своего приложения или интеграции сложных технологий.

По сути главным недостатком и Scene Viewer и AR Quick Look является невозможность заложить в них интерактивную механику.

HTML вставка c glTF в Tilda

Тут стоит сразу сказать, что через гугл диск уже не получится. Почему-то Scene Viewer не умеет грузить модели по ссылкам с гугл диска и выдаёт ошибку. Так что модель потребуется где-то хостить. У меня много серверов по различным проектам, что мы делаем, так что я просто разместил на сервере свой страницы.

В результате финальная вставка будет выглядеть как-то так:

HTML вставка с glTF и USDZ

<script>
    var preview_source = "https://drive.google.com/uc?export=download&id=1rzI0Idh-ytlk3l5_7nKX1AnrPlms5bZp";
    var usdz_url = "https://drive.google.com/uc?export=download&id=1XZjmyYpZF1425p3LK2nPz4HBgN83gdo1";
    var glb_url = "https://noxatra.ru/experiments/usdz-glb-test/ppkin.glb";

	var isMobile = {
        Android: function () {
            return navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/Miui/i);
        },
        BlackBerry: function () {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function () {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function () {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function () {
            return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
        },
        any: function () {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    }
	function OpenUrl() {
        window.open(model_url);
    };
</script>

<div id="usdz-glb-container">
    
</div>

<script>
    let content = "";
	let icon = "<img src='https://drive.google.com/uc?export=download&id=1QIDYd6xRp-k10WBAXZ-UZx3zdw2hdaP1' class='App-ar-icon'  />";
    if(isMobile.iOS()){
        content = "<div>" + 
            "<a href="+ usdz_url + " rel='ar' class='App-mobile'>" + 
                "<img src='" + preview_source + "' class='App-mobile-preview' />" +
                "<button>" + 
                     icon + 
                    "Посмотреть" +
                "</button>" +
            "</a>" +
            "</div>";
    }
    else{
        if(isMobile.Android()){
            console.log(glb_url)
            var model_url = "intent://arvr.google.com/scene-viewer/1.0?file=" +
            glb_url + 
            "#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;";
            content = "<div class='App-mobile'>" + 
                "<img src=" + preview_source + " class='App-mobile-preview'/>" +
                "<button onClick='OpenUrl()'>" + 
				icon + 
                    "Посмотреть" +
                "</button>" +
            "</div>"
        }
    }

    document.getElementById('usdz-glb-container').innerHTML = content;
</script>

<style>

button{
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  padding: 20px;
  font-weight: bold;
  border: 1px solid #c4c4c4;
  border-radius: 30px;
  box-shadow: 0px 2px 5px #c4c4c4;
}
button:hover{
  background-color: #c4c4c4;
  color: white;
}
button:focus{
  background-color: #c4c4c4;
  color: white;
}
.App-mobile{
  text-align: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.App-ar-icon{
  height: 25px;
  padding-right: 10px;
}
.App-mobile-preview{
  height: 50vh;
  margin-bottom: 0px;
}

</style>

В первом теге <script> мы для удобства обслуживания и замены определяем ссылки на наши ресурсы и пару функций, которые нам потребуются. preview_source — ссылка на превью картинку на гугл диске, usdz_url — ссылка на usdz модель на гугл диске и glb_url — ссылка на glb модель на нашем хостинге.

isMobile - это в свою очередь набор функций, который позволяет нам определять "на какой платформе мы находимся", чтобы выводить нужный нам интерфейс для usdz и для glb. А функция OpenUrl потребуется чтобы открыть Scene Viewer.

div id="usdz-glb-container" — это то, куда мы поставим наш сформированный в зависимости от платформы html код.

А во втором теге <script> мы просто формируем нужный нам html-код в зависимости от платформы. В IOS ничего особо не поменялось, просто отрефакторилась часть кода. А вот в Android стоит расписать как это работает.

Android по сути по открывает диплинк и по интенту передав параметром ссылку на нашу glb модель запускает Scene Viewer, который скачивает необходимую модель по ссылке.

Пример ссылки: intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf&mode=ar_only#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;

Подробнее про параметры можно почитать в документации.

В заключении

В общем-то и всё. Взяв данную вставку и редактируя в ней ссылки и стили вы можете разместить AR объект и на вашем сайте на тильде. Я лишь надеюсь, что у тильды когда-нибудь появится хостинг для файлов, чтобы не плясать с бубном вокруг Google Drive или чтобы не приходилось для работы сайта на тильде с таким фукнционалом иметь свой дополнительный сервер.

Спасибо за внимание! С результатом работы данной вставки на тильде можно ознакомиться тут (работает только на мобильном телефоне), поставить себе домой тыкву и повеселиться. А полностью код и скачать себе модели для тестов можно здесь.

Дополненная реальность в Tilda