Фотосферы-это мощные 3D-ресурсы, которые помогают дизайнерам создавать захватывающие пространства и ощущение присутствия в приложениях дополненной реальности. Узнайте, как использовать open source 3D authoring tool Blender, чтобы сделать AR-готовые фотосферы из любой панорамной фотографии 360º. Чтобы увидеть пример использования фотосфер, проверьте этот прототип приложения для медитации AR.
Как дизайнер, который пришел из мира 2D в мир AR и 3D, я нашел много проблем на этом пути. Иногда эти проблемы были ожидаемой частью естественной кривой обучения. В других случаях проблемы, с которыми я сталкивался, казались искусственными и ненужными–например, силосованная совместимость 3D-форматов файлов.
На прошлой неделе дизайнер из сообщества Torch спросил о том, почему фотосфера, которую она создала, не выглядит правильно в ее приложении. Пройдя через хитрость создания этих объектов раньше, я был готов помочь. Проблема была в том, что я не мог точно вспомнить процесс, который я использовал. Таким образом, работая через процесс снова, я записал шаги и сделал это видео, документируя мой рабочий процесс.
Расшифровка
Одним из обещаний AR является возможность принимать людей там, где в противном случае они не могли бы физически. Пример этого, из недавнего сообщения в блоге, который мы разместили, - это взять кого-то в гостиничный номер в Дубае, прежде чем они даже заплатят тысячи долларов, которые это будет стоить, чтобы получить их там.
Отличный способ сделать это-использовать фотосферы. Это в основном большая сфера в пространстве, на которую нанесена фотография, в которую можно войти и посмотреть вокруг. В Torch для этого можно использовать Sketchfab. В этом случае мы идем к ящику активов и нажимаем вкладку Sketchfab и вводим что-то. Я случайно знаю, что у Mozilla есть несколько приятных панорам, которые они называют Sky Panos. Есть один. The Monument Valley Sky Pano. Это тот, который я использовал раньше.
Проблема с панорамами
Но есть проблема. Когда я вытаскиваю его на сцену, я замечаю, что он выглядит действительно вымытым и покрасневшим. Это может быть проблематично, когда вы пытаетесь найти панораму, которой в противном случае не было бы. Так что мы можем сделать с этим?
Ну а в этом видео мы покажем вам, как сделать панораму с нуля. Так что я собираюсь перейти к моему рабочему столу.
Итак, я здесь на странице Sketchfab, где я нашел эту фотосферу для начала. И если обвести вокруг, это выглядит довольно хорошо. Там нет размыва или что-то вроде этого. Так что для меня это означает, что текстура на самом деле хорошая. Что хорошо для нас, верно?
Скачать источник фотосферы из Sketchfab
Поэтому я собираюсь скачать эту модель и получить текстуру из нее. Я собираюсь выбрать оригинал .формат fbx, так как модель, которую мы получили от Sketchfab в Torch, выглядела фанк. Я немного скептически отношусь к этому автоматическому преобразованию, поэтому я собираюсь пойти с оригиналом. Загрузить в .fbx. Хорошо, позвольте мне перейти к Finder, и здесь в моей папке загрузок я собираюсь распаковать это.
И когда я вхожу в папку, я вижу, что есть источник и текстуры. Источник где фактическое .модель fbx. Текстура-это место, где живет изображение, которое я хочу использовать для своей собственной фотосферы. Взглянув на это, он выглядит довольно большим. Он говорит 8K. Я думаю, что это изображение шириной 8000 пикселей, которое довольно большое. Как правило, вы знаете, когда мы смотрим на 3D геометрию и прочее, мы хотим использовать только то количество полигонов, которое нам нужно, и только то количество изображений с высоким разрешением, которое нам нужно.
Изменение размера исходной текстуры
Так что я собираюсь открыть это в Photoshop сразу, и я собираюсь сделать его намного меньше. Так что давайте сделаем это.
Вот я, и я собираюсь нажать Option + Command + I, чтобы вытащить размер изображения, и да, там это. Вы можете увидеть его прямо здесь. 8000 в ширину, 4000 в высоту. Он немного большой. Нам не нужен такой большой. Я собираюсь сократить это примерно наполовину, но я собираюсь сделать это до 4096 в ширину.
Хорошо использовать полномочия 2, Когда вы создаете изображения для UVs. Это просто в том, как он обертывает и распаковывает в 3D-пространстве. Силы двух велики. Поэтому я собираюсь придерживаться 4096, так как это примерно половина размера, но также в силе двух, и я собираюсь выбрать OK. И я собираюсь просто сохранить его и вернуться к Finder.
Создание сферы в Blender
И теперь у меня есть что-то, что примерно вдвое меньше, что здорово. Прохладный. Таким образом, следующая часть процесса-это открытие этого в блендере и получение его фактически прикрепленного к сфере. Давайте перейдем к Blender. Хорошо, вот мы и пришли. Это проект Blender по умолчанию.
Когда вы начинаете, вы открываете его, в середине есть куб. Я собираюсь удалить это, нажав x, а затем нажав delete. А затем я хочу добавить сферу в окружающую среду. Поэтому я собираюсь пойти и выбрать Add (который вы также можете нажать Shift + A), а затем я собираюсь выбрать mesh и UV sphere. Вот оно.
Настройка Поли-счетчика
Если я посмотрю на это, хотя, это выглядит немного–это довольно граненый по умолчанию. Опять же, мы стараемся держать polycount низким. Но если вы хотите, чтобы это выглядело гладко, вам нужно использовать то, что называется поверхностью подразделения. Итак, с выбранным объектом я могу перейти сюда в мою маленькую рабочую область и выбрать вкладку модификаторы. И на вкладке модификаторы во втором столбце под generate я собираюсь выбрать поверхность подразделения.
И вы уже можете видеть, что это начинает становиться немного лучше. Если я включу это, даже больше, скажем, около трех, вы едва заметите, что там есть линии. Так что я оставлю его в три. Я не собираюсь подниматься выше, потому что мне это не нужно. И я просто собираюсь нажать apply, чтобы применить это к нашей сфере.
Создание текстуры внешнего материала
Теперь нам нужно добавить материал. Вот куда мы собираемся поместить это изображение, верно? Поэтому я собираюсь нажать на вкладку материалы, и я собираюсь создать новый материал. Теперь, этот поверхностный принцип BSDF является значением по умолчанию, которое Blender собирается дать вам. Есть и другие варианты, но я собираюсь придерживаться этого только потому, что я хочу базовую поверхность. Я действительно не хочу попасть в прозрачность или что-то подобное.
Но то, что я собираюсь сделать, это под базовым цветом здесь вместо того, чтобы иметь цвет, я хочу изображение. Поэтому я собираюсь щелкнуть этот узел и выбрать текстуру изображения. И это дает мне возможность либо открыть файл, либо создать новый. Ну, у меня уже есть мой файл, так что я собираюсь открыть его. Я собираюсь перейти к тому, где мы сохраняем этот материал, который был в моей папке загрузок. Вот оно, хорошо.
Создание внутренней текстуры материала
Так что теперь, даже если вы не можете действительно видеть его, это изображение отображается на внешнюю сторону этой сферы, которая является тем, что мы хотим. Единственная проблема заключается в том, что сейчас, если мы шагнем внутрь этой сферы в реальном 3D-пространстве, она будет невидимой, потому что внутри нет текстуры или изображения. Поэтому, чтобы сделать это, я собираюсь сделать хороший маленький трюк, где я беру эту сферу и дублирую ее. Так что я собираюсь дублировать его, нажав Shift + D, а затем я просто собираюсь нажать. Shift + D и нажмите. И вот оно.
Хорошо, я собираюсь переименовать эту сферу во внутреннюю, чтобы у меня была дорожка на ней, и пока я на ней, я переименую другую внешнюю. Моя внутренняя сфера будет такой же, как моя внешняя, за исключением того, что я собираюсь перевернуть изображение наизнанку, верно? И что я собираюсь сделать, чтобы сделать это с моей внутренней сферой выбран, я собираюсь перейти в режим редактирования, который вы можете выбрать из этого выпадающего меню, или вы можете нажать Tab.
Затем я собираюсь убедиться, что все мои лица и вершины и все выбраны нажатием A. Когда они светятся оранжевым, это означает, что они выбраны. Затем я собираюсь перейти к Mesh, а затем я хочу найти подменю Normals. И я просто собираюсь нажать Flip Normals. И опять же, вы на самом деле не видите, что здесь что-то происходит, но то, что только что произошло, все лица на этой сфере просто вывернулись наизнанку. Так что теперь они все стоят лицом к лицу с Радом.
Экспорт как GLTF
Теперь у меня есть поверхность, обращенная к изображению, и поверхность, обращенная к изображению. И это почти все, что нам нужно сделать. Теперь нам просто нужно экспортировать его и вернуть его в Torch. Поэтому я собираюсь нажать меню Файл, и я включил экспортер GLTF в Blender, который хорошо работает для меня и для использования Torch, потому что наш родной формат выбора в Torch-GLTF. Поэтому я собираюсь идти вперед, выбирать .gltf. Если вы хотите экспортировать как .fbx вы можете сделать это. Просто сохраняет некоторые преобразования.
Здесь, в формате, я собираюсь убедиться, что я выбираю формат glTF embedded. То, что это собирается сделать, это обернуть эту текстуру в модель и подготовить ее, поэтому мне не нужно никакой дополнительной упаковки или молнии или чего-то подобного.
Загрузка в Torch с Dropbox
И теперь я собираюсь просто сохранить его на моем рабочем столе. Я назову это Долиной монументов. А затем экспорт. И пока мы будем думать об этом, мы вернемся сюда к Finder и просто будем следить за папкой здесь. Вот оно. Схватить его. Теперь, чтобы загрузить его в Torch, мне нужно zip этот файл. Поэтому я просто щелкну правой кнопкой мыши и застегну молнию. И как только это будет застегнуто, я собираюсь воспользоваться тем, что я связал свой аккаунт Dropbox с Torch, и я собираюсь поместить этот файл непосредственно в папку Torch в моем аккаунте Dropbox.
Теперь, это здорово, потому что он помещает этот файл непосредственно в Torch, так что я могу использовать его сразу. Кроме того, если я сделаю какие-либо обновления этого файла и просто перезапишу тот, который находится в моей папке Dropbox, эта модель автоматически обновится в Torch, который довольно рад.
Хорошо, давайте вернемся к Torch и посмотрим, что произойдет, когда мы заменим нашу старую вымытую фотосферу на эту новую, которую мы только что сделали.
Используйте Replace Asset для замены в новом файле
Вот эта размытая модель. Давайте избавимся от него, заменив его на новую модель. Я собираюсь выбрать это, а затем я собираюсь открыть ящик активов и копаться в моей папке Dropbox, где я положил этот другой актив, который я только что создал, нажав на папку Dropbox. ООО, похоже у меня тут куча вещей. Так что я собираюсь прокрутить. Я назвал его Долина Монументов в честь изображения и место, где изображение. Вот оно.
Так что теперь я просто собираюсь перетащить это вниз, чтобы заменить выбор. И как только он переходит, мы идем. Посмотреть на это. Изображение есть. Я могу войти в него. Я могу оглядеться. Все замечательно.
