Створення стилізованого оточення в Unity

164

Sergey Tenditniy про використовувані ним методи створення своїх видатних модульних ігрових оточень в Unity.

Добрий день, мене звати Сергій, я родом з України, але останні 3 роки живу в гарній країні Словенії.

Останнім моїм місцем роботи в Україні була компанія Wargaming.net я працював як художник і 3d менеджер з продажу над проектами World of Tanks і World of Warplanes. У Словенії я почав працювати з створенням оточень в середовищі Unity, потім у мене з’явилася ідея створити цей мультяшний містечко.

Ідея

Створення стилізованого оточення в Unity

Бажання зробити такий містечко з’явилося у мене в минулому році, коли ми з моєю дружиною мандрували Эльзасу у Франції. Це дуже красива область цієї країни, з великою кількістю мальовничих містечок і містечок. Я був у захваті від краси та унікального стилю, які там мене оточували.

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

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

Створення стилізованого оточення в Unity

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

Створення стилізованого оточення в Unity

Спочатку я не планував продавати цей проект на майданчику Unity Asset Store. Трохи пізніше я прийшов до висновку, що правильніше буде створити цілісне ігрове оточення, а не просто сцену для красивого рендера. Мені хочеться, щоб люди могли використовувати створене мною в своїх власних проектах.

Основні фото–референси, зроблені мною у Франції:

Створення стилізованого оточення в Unity

Моделінг

Перші скріншоти по ходу етапів роботи:

Створення стилізованого оточення в Unity

Основні етапи робочого процесу:

1. На самому початку, після експериментального підбору різних варіантів, я створив тільки перші два будиночка. Коли вийшли потрібні форми і вигини, я розташував ці будиночки на карті з простим висвітленням – мені хотілося побачити, як вони виглядають разом, це потрібно було для планування композиції майбутнього містечка.

2. Далі я додав наявними будиночків більше деталей і створив кілька нових.

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

4. Додано остаточний набір рослинності. Проведена чистова опрацювання деталізації будиночків. Налагоджено освітлення і пост-процесинг. Вже практично готовий фінальний вигляд частини мого містечка. Це послужило мені стильовим і колірним референсом при опрацюванні інших вулиць і ассетов.

Для цього проекту я вирішив створити частина будиночків на основі одного меша, не використовуючи модульності їх структури. А другу частину будиночків я зробив повністю модульними, щоб їх можна було скласти з окремих складових частин. Такий підхід потрібен був з-за того, що я виставив цей містечко на продаж, і хотілося щоб покупці мали вибір – користуватися вже готовими моделями або зібрати їх з модульних складових частин (двері, вікна, стіни і т. п.)

Створення стилізованого оточення в Unity

Створити модульний будинок досить просто. Потрібно попередньо створити набір варіантів стін, кутів і т. п. Потім вибрати з цього набору відповідні варіанти і зібрати воєдино конструкцію будинку, після чого додати дерев’яні наличники, вікна та двері. При цьому, не забудьте додати прикраси, квіти — і будинок готовий.

На малюнку ви бачите, як він виглядає, і з яких елементів зібраний:

Створення стилізованого оточення в Unity

Створення стилізованого оточення в Unity

Створення стилізованого оточення в Unity

Всі елементи:

Створення стилізованого оточення в Unity

Створення стилізованого оточення в Unity

Поликаунт:

Створення стилізованого оточення в Unity

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

Створення стилізованого оточення в Unity

Створюємо ассеты

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

Створення стилізованого оточення в Unity

Спочатку створюється базова форма з простих мешей, тільки потім можна переходити до деталей. Слідкуйте за тим щоб модель виглядала цікаво і «читабельно» зі всіх сторін, якщо все нормально, то можна приступати до деталізації. При цьому важливо дотримуватися баланс, намагайтеся не перенаситити композицію малоразмерными елементами, це створює візуальний шум і робить ассет менш «читабельним» і виразним для гравця чи глядача.

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

Рослинність

Створення стилізованого оточення в Unity

Створення стилізованого оточення в Unity

Рослинність створювалася дуже просто. Нічого нового:

1. Першим ділом я створив высокополигональный лист.

2. Використовував запікання нормалей і прозорість.

3. Потім трохи змінив його і з допомогою клонування створив всю гілку.

4. Для створення дерева використовував сфери, потім додав раніше створені гілки.

5. Зверніть увагу на зображення розташоване нижче — я використав карту нормалей, отриману на основі сфери для правильного розташування листя. Часто на цьому етапі забувають, але це дуже важливо.

Створення стилізованого оточення в Unity

Для оптимізації всім листам можна поставити однакову текстуру. Потрібно забезпечити різноманітність кольорів використанням vertex color для листя, зробити їх трохи більше червоними або жовтими.

Подібним чином я створив всю рослинність, починаючи від найменшої 3d гілочки. Так, можна легко створювати чагарники і навіть плющі.

Створення стилізованого оточення в Unity

Текстурування

Я намагався обійтися мінімумом текстур. Я використовував тільки текстури з тайлингом для роботи з цим містечком (для текстур рослинності тайлінг не застосовувався), при цьому не застосовувалося жодних рідкісних або унікальних зображень.

Були використані п’ять основних текстур для створення оточення: бетон, деревина, метал, черепиця та листя.

Ці 5 текстур використані на 95% поверхні того, що ви перед собою бачите. Також я використовував текстури в градаціях сірого для можливості додавання кольору з використанням vertex color у Unity, все розмаїття кольорів, бруд і потертості деревини я додав, використовуючи функціонал vertex color texture blending з використанням vertex alpha. Я використовував спеціальний шейдер, створений в Shader forge, він дав мені можливість змішування з використанням vertex alpha і одночасно overlay vertex color поверх текстур з використанням градацій сірого.

Приклади текстур:

Створення стилізованого оточення в Unity

На цьому малюнку ви бачите, що я використовував тільки 4 матеріали для оформлення будиночків (деревина, бетон, черепиця, скло), але так, як я використав vertex color — композиція виглядає цікавою і досить різноманітною. Один колір на зображенні це один матеріал в грі.

Створення стилізованого оточення в Unity

Все розмаїття кольору створено з використанням vertex color, так кожен з цих будинків у сцені може мати унікальне поєднання кольорів, одночасно, це дуже не вимогливо до ресурсів.

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

Цей стильний вигляд – результат використання повнокольорових і насичених текстур, зігнутої геометрії об’єктів і пост-процесингу.

Інструменти

На перших етапах роботи я застосував vertex color в Maya, щоб отримати базові кольори для будиночків. А в середовищі Unity використовував інструмент vertex paint tool для додавання квітів. З усього розмаїття я вибрав free face paint, при цьому можна додавати колір відразу на весь полігон і це швидше ніж на кожен вертекс окремо. Якщо у Вас є шейдер підтримує vertex color або накладання текстур, то можна прямо на сцені Unity дуже швидко змінити загальний вигляд ваших ассетов.

Ви можете подивитися, як я це реалізував на цих зображеннях:

Створення стилізованого оточення в Unity

Створення стилізованого оточення в Unity

Освітлення

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

Я використовував тільки real-time спрямований світло в цій сцені. Для всього непрямого освітлення використовувалися стандартні засоби Unity.

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

Для освітлення не було проведено запікання, тому збереглася можливість обертання, зміни її яскравості та інтенсивності в будь-який час. Невелику неоднорідність створює легка текстура хмарності, застосована до направленого джерела світла. Це робить сцену більш живою.

Також потрібно намітити розділення заднього плану від переднього використовуючи стандартний туман Unity. Відчуття сонячного дня створює контраст між затіненими і освітленими зонами.

Створення стилізованого оточення в Unity

Все інше зроблено з допомогою пост-ефектів.

Пост-процесинг

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

І можу сказати що саме значний вплив робить звичайний Color Grading, всі інші ефекти порівняно з ним не так явно видно і тому, якщо потрібно оптимізація їх можна відключити.

Створення стилізованого оточення в Unity

Висновок

Загалом, я можу сказати, що такий підхід цілком прийнятний для ігрового продакшн процесу. Так, як використання текстур з тайлингом і vertex color дозволяє реалізовувати великі простори ігрового оточення з залученням відносно невеликих ресурсів.

З відповідним налаштуванням рівня деталізації (LOD) можна отримати велику кількість елементів деталізації переднього плану, а також спростити їх для використання на задньому плані. Основні малорозмірні елементи в нашому проекті це рослинність, але враховуючи те, що при її створенні ми використовували один матеріал і вона складається з плоских елементів, то правильне використання static batching у Unity заощадить нам мільйони використовуваних тут полігонів.