У цьому блозі ми ми покажемо вам коротку інструкцію щодо того, як налаштувати та оптимізувати готові 3D-об’экти та імпортувати їх у ваші AR/VR проекти. Ми покажемо вам практичні приклади та необхідні кроки для імпортування.

Приводимо вам список того, що ми використовуємо для створення 3D-моделей. Якщо ви віддаєте перевагу іншим програмам, неодмінно продовжуйте використовувати те, що вам зручно. Просто дотримуйтесь цієї інструкції, щоб переконатися, що ви експортуєте 3D-модель правильно.

1. Autodesk Maya (Пробна версія – безкоштовно) – це визнаний, можна сказати золотий стандарт програмного забезпечення для 3D-моделювання протягом багатьох років. Проте вже далеко не топовий. Є багато інших програм, які ми використовуємо залежно від типу моделі, яку робимо. Але це прекрасний інструмент для експорту, який спросщує експорт складних FBX моделей, які добре працюють з різними платформами рендеринга.
2. Pixelogic Zbrush ($ 795) – галузевий стандарт серед засобів 3D-скульптинга, який ми використовуємо для створення високополігової базової сітки для символів або складних об’єктів.
3. FBX Review (безкоштовний) – Легкий автономний застосунок, який дозволяє переглядати експортовані файли FBX. Якщо він відображається належним чином, він відображатиметься належним чином у вашій платформі рендеринга.
4. Unfold 3D VS (безкоштовна пробна версія) – відмінний інструмент для UV-розгортання, що економить багато часу на створенні UV-карт. Визначте шви, виріжте, потім розверніть. Все дуже просто.
5. Photoshop CC (безкоштовна пробна версія) – загальноприйнятий застосунок для редагування зображень, який я використовую для малювання / редагування текстур.
6. Mighty Bake (безкоштовна пробна версія) – Швидкий 64-бітний інструмент для випікання текстури, який випікає велику кількість різноманітних важливих типів карт, включаючи затемнення навколишнього середовища.
7. Viro Media (безкоштовно) – платформа розробників для побудови додатків AR / VR. Чудовий інструмент для візуалізації об’єктів в AR або VR і для ітеративного проектування AR / VR.

Кращі практики

Не має жодного значення, що ви використовуєте для створення 3D-моделей. Цю модель необхідно лише оптимізувати для використання в реальному часі та експортувати до формату OBJ або FBX. Це найбільш широко підтримуваниі формати. Я віддаю перевагу експорту до FBX, тому що ви можете вбудовувати декілька анімацій та отримувати найбільш послідовні та передбачувані результати.

Ресурси з 3D-моделями

Якщо ви не створюєте 3D-модель з нуля, існує кілька великих сайтів, які мають якісні моделі для завантаження:

www.sketchfab.com | www.turbosquid.com | www.poly.google.com | www.free3d.com | www.cgtrader.com

Характеристики в реальному часі

Полігонаж – Немає чіткої відповіді на це для всіх платформ. Обмеження полігонажу залежить від загальної складності (освітлення, анімації, кількості об’єктів тощо) вашої сцени. Але, як правило, переконайтеся, що модель оптимізована для використання в режимі реального часу. Це означає, що модель не є надмірно мозаїчною та згладженою. При купівлі 3D-моделі від Turbosquid, ми зазвичай перевіряємо “Real-Time” пункти More і “Up to 10K” у випадаючому списку Count. Це фільтрує результати, оптимізовані для використання в реальному часі. Інші сайти, такі як Google Poly, працюють у режимі реального часу, тому це не є проблемою.

Ефективне моделювання – намагайтеся з розумом підходити до завдань, коли справа доходить до ефективності. Продумайте, наскільки близько користувач може дістатися до вашого 3D-об’єкта. Якщо користувач ніколи не наблизиться до вашого 3D-об’єкта, вища полікліта буде непотрібною. Видаліть обличчя, які користувач ніколи не побачить. Ваш GPU буде використовувати непотрібні ресурси, які намагаються відобразити обличчя в областях, які не потрібно відображати. Намагайтеся переконатися, що модель має лише квадрати і трикутники замість облич. Це полегшує розгортання і створює більш передбачувані результати, коли модель буде завантажуватися до платформи.

Карти текстур – AR / VR платформи рендеринга використовують традиційні 3D-шейдери та матеріали, які включають дифузні, звичайні та дзеркальні карти, і можуть обробляти кілька великих текстур і великі розміри. Але спробуйте використати найменшу кількість текстур і зберігайте у якомога менших розмірах.

Сумісні формати текстур: .JPG, .PNG. Перед експортом переконайтеся, що текстури використовують один з цих форматів.

Створення 3D-моделі

Для цієї інструкції ми створили простий сучасний світильник у Maya. Ми переконалися, що polycount настільки низький, наскільки це можливо, використовуючи тільки квадрати і трикутники з достатньою кількістю полісів, щоб виглядати пристойно з близька. Щоб підвищити ефективність, ми видалили сторони, які не можуть бачити користувачі.

Щоб додати більше текстури поверхні і закрутити краї через звичайні карти, ми перенесли нашк лампу в Zbrush. Ми розділили його кілька разів і додали поверхневий шум, щоб отримати вигляд, який ми хотіли. Для ніжок лампи ми просто використовував Maya. Ми додали додаткові петлі країв по краях і використовували Mesh>Smooth modifier в Maya, щоб округлити краї.

UV-розгортання

Як згадувалося вище, спробуйте використовувати якомога менше текстур. Чим менше текстур для завантаження, тим більш ефективною буде робота вашої програми. Завдяки цьому принципу ми розставляємо всю UV нашої лампи UV на 1 текстуру.

1. Ми переносимо слабо деталізовану лампу в Unfold3D, де ми розставляємо шви, які ми хочемо вирізати.
2. Після того, як шви розміщені, ми натискаємо “C”, щоб вирізати
3. Потім натискаємо “Розгорнути”, щоб автоматично розгорнути сітку в острівці.
4. Декілька разів натискаємо «Оптимізувати», щоб трохи розслабити острівці
5. Потім ми вручну переміщуємо та викладаємо острівці в правому вікні, переконуючись, що між кожним з них є відступ.

Випікання текстури

Після того як ми зробили всі попередні кроки і задоволені результатом деталізації, ми переходимо до роботи в Mightybake, щоб випікати навколишню оклюзію та карти. Існує чимало налаштувань, з якими можна грати, залежно від типу сітки, яку ви бажаєте запекти, тому ми запропонуємо лише кілька рекомендованих налаштувань:

• Ми відсилаємо під високополігональні моделі, моделі які є низькополігональними і переконуємося, що” Нормальна карта” і “Карта AO” вибрані в розділі “Карти”.
• Для звичайної карти переконайтеся, що для Tangents вибрано пункт “Unity 5.3”.
• Вихідні дані це те, де б ви хотіли зберегти ваші карти і тут також переконайтеся, що ви встановили необхідну ширину та висоту.
• Натисніть “BAKE IT”, коли будете готові випікати.

Фарбування текстур

Розглянемо на прикладі дифузних, нормальних та яскравих карт.

Після того, як обидві текстури будуть запечені, ми завантажуємо їх у Photoshop для створення дифузної, нормальної та яскравої карти. Є й інші чудові способи створення текстур, але заради цієї інструкції ми скористаємося деякими перевіреними методами. Ось що ми зробили:

Дифузна карта – Ми використовуємо карту зовнішньої оклюзії як один з шарів у “Багатошаровому” режимі у Photoshop і фарбуємо під ним. Використовуємо фотографію з дерева для ніжок лампи і заповнюю нею карту.

Нормальна – нормальна карта, що створена у Mightybake може мати порожні простори, які є прозорими. Нам подобається вирівнювати карту та експортувати її як .PNG, переконавшись, що чекбокс “Прозорість” не є обраним.

Яскрава – ми освітлюємо дифузну текстуру скрізь, де це необхідно, і переконуємося, що ділянки, такі як абажур, темніші, щоб вона не виглядала блискучою, як ніжки лампи.

Додавання матеріалів до 3D-об’єкта

Тепер нам потрібно додати матеріали до нашого об’єкта. У вашому додатку 3D-моделювання відкрийте редактор матеріалів і вкажіть всі текстури моделі.

Оскільки ми використовуємо Maya, ми переходимо до меню “Вікно”; “Редактори рендеринга”; “Гіпершейд”.

Щоб створити новий матеріал необхідно натиснути кнопку “Blinn”.

У розділі “Редактор атрибутів” клацніть кнопку шахівниці поруч із пунктом “Колір” і призначте дифузну карти.

Натисніть кнопку шахівниці поруч із пунктом “Яскравий коліо” та призначте яскраву карту.

Натисніть кнопку з шахівницею поруч із пункто “Карта випуклостей” і призначте звичайну карту.

Експорт 3D-моделі

Тепер, коли модель налаштована, нам потрібно експортувати її до .FBX. Для цього ми використовуємо Maya’s Game Exporter. Це корисний плагін від Maya для експорту моделей реального часу до .FBX. Якщо є інші об’єкти на сцені, ми маємо переконатися, що лампу вибрано, а у верхньому випадаючому списку вибрано “Export Selection”. Перевіряємо “Smoothing Groups” і встановлюємо прапорець “Smooth Mesh”. Інші параметри зберігаємо за замовчуванням. Визначте куди ви хочете зберегти .FBX і вкажіть це у пункті “Шлях”.

Введіть назву вашого файла .FBX поруч із “Назва файлу”.

Натисніть “Експорт”. Якщо все виконано успішно, програма надасть вам вікно підтвердження, яке можна закрити.

Примітка: Якщо ваш об’єкт налаштований і має декілька анімацій, ви можете визначити анімаційні кліпи на вкладці “Кліпи анімації”. Оскільки лампа не має анімації, ми залишаемо це поле недоторканим.

Візуалізація 3D-моделей у AR / VR

Наступний розділ показує, як переглядати ваші моделі в AR за допомогою платформи Viro (для перегляду моделей у VR за допомогою Viro виконайте наведені нижче дії, розпочанаючи з HelloWorldScene.js). Взагалі, Viro є платформою для розробників, але її також можна використовувати дизайнерами та рекламодавцями для візуалізації 3D-моделей і перегляду ідей. Налаштування просте, а кроки, наведені нижче, – це те, що ми використовуємо для перегляду 3D-моделей у AR / VR як дизайнери.

Робота з моделями у Viro

Ми будемо використовувати нашу модель лампи для цього розділу, щоб спростити інструкцію.

Спочатку потрібно конвертувати файли FBX у формат VRX за допомогою скрипту ViroFBX. Цей скрипт ViroFBX можна знайти у каталозі bin вашої програми Viro.

Перейдіть до каталогу bin. Ми встановили Viro в теку під назвою “WorkSpace”, тому ми вводимо таку комануд (замініть WorkSpace вашою кореневою папкою в цій команді):

cd WorkSpace/ViroSample/bin

Після того як ви потрапили до вашої теки bin, введіть наступну команду:

./ViroFBX viro_object_lamp/object_lamp.fbx
viro_object_lamp/object_lamp.vrx

Після того, як скрипт буде виконаним, у папці viro_object_lamp у вашому каталозі bin ви побачите файл з назвою “object_lamp.vrx”.
Після створення файлу VRX він може бути завантажений у програму Viro3DObject. Скопіюйте файли з папки viro_object_lamp і вставте їх у папку res, розташовану за адресою /ViroSample/js.
Щоб переглянути свої 3D-об’єкти в AR, відкрийте файл HelloWorldSceneAR.js і замініть текст у HellowWorldSceneAR.js кодом нижче.

‘use strict’;
import React, { Component } from ‘react’;
import {StyleSheet} from ‘react-native’;
import {
ViroARScene,
ViroText,
ViroMaterials,
Viro3DObject,
ViroAmbientLight,
ViroSpotLight,
ViroNode,
ViroSurface,
} from ‘react-viro’;
var createReactClass = require(‘create-react-class’);
var HelloWorldSceneAR = createReactClass({
getInitialState() {
return {
text : “Initializing AR…”
};
},
render: function() {
return (

{}}>

 

 

 

);
},
});

var styles = StyleSheet.create({
helloWorldTextStyle: {
fontFamily: ‘Arial’,
fontSize: 40,
color: ‘#ffffff’,
textAlignVertical: ‘center’,
textAlign: ‘center’,
},
});

module.exports = HelloWorldSceneAR;

Збережіть файл HelloWorldSceneAR.js. В меню натисніть кнопку перезавантажити. Ви повинні побачити лампу перед собою нижче надпису “Hello World”. Ми додали тінь до лампи і включили перетягування, щоб ви могли перемістити лампу навколо пальцем.

Щоб додати і побачити свій власний об’єкт, замініть декілька рядків в коді:

<Viro3DObject source={require(‘./res/object_lamp.vrx’)}
resources={[require(‘./res/object_lamp_diffuse.png’),
require(‘./res/object_lamp_normal.png’),
require(‘./res/object_lamp_specular.png’),
]}
position={[0, 0, 0]}
scale={[0.3, 0.3, 0.3]}
type=”VRX”
/>

Отже, необхідні кроки:

1. Конвертувати файл FBX у формат VRX.
2. Розмістіть об’єкти VRX у правильній теці.
3. Оновіть код нового активу. У наведеному вище прикладі ви могли б змінити “object_lamp.vrx” на ваше ім’я файлу vrx і змінити імена текстур.
4. Збережіть файл і перезавантажте його, щоб побачити 3D-об’єкт у AR.