15 грудня 2023, 15:55 720

«Як ми Аі-шкою процеси прискорювали...» Створення оточення для інді-гри Humanity’s Echo: CyberpunkRPG

💡 Усі статті, обговорення, новини про AI — в одному місці. Приєднуйтесь до AI спільноти!

Humanity’s Echo: CyberpunkRPG — інді-гра, яка брала участь у першому турі Indie Cup Ukraine 2023. Ми побачили, що Concept Environment Artist Нікіта Бірюкович опублікував в ArtStation арти з гри і попросили його розповісти про те, як вони створювалися за допомогою генерації штучним інтелектом.

Далі пряма мова художника

З приводу — чому АІ а не ШІ ))) Бо зачасту результати генерації викликають емоції типу «Аііііі» а не «Шііі...» і загалом техніка не любить коли на неї шикають)))

Трошки про проєкт:

Україна в Кіберпанк сетингу.

Гра містить елементи RPG, стратегічний менеджмент клану, дослідження інтерактивних локацій, та покрокові тактичні бої.

Мене звати Нік, і я займаюсь дизайном оточенням. В цьому проєкті мені доводиться робити все від концепту до готового асету в грі, так би мовити, від матеріалу для крафту до заводу. Тому в бій вступили не тільки штучний інтелект, а й фотобаш, Unreal Engine 5, Blender і багато іншого.

Сам сетинг проєкту наштовхнув нас на ідею максимально використати «залізяку», як ми між собою лагідно звемо всі АI, які використовуємо.

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

Що ми використовуємо: Chat GPT 3,5 та 4, Google Bard, Stable Diffusion, Midjourney, Lexica Art

Основне завдання — максимальне заощадження часу. Тому ось з чого ми почали:

1️⃣ В Chat GPT 4 по детальному промту отримали приблизне зображення того, що потрібно.

(Немає принципового значення, де брати референс, але в цьому випадку ми ще й вирішили протестувати, як GPT-4 генерує зображення)

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

Отримали референс
В будь-якому графічному редакторі прибираємо зайве
Можемо ще покрутити в Stable Diffusion (Далі SD). Без черг.

2️⃣ Є декілька варіантів: швидкий оверпейнт в PS, прибрати конструктивні непорозуміння, або в img2img в inpaint режимі виправити непотрібні нам ділянки, і подивитися, що з цього вийде. З першим ви точно знайомі, тому будемо дивитися на другий.

Для максимальної ефективності використовуємо inpaint модель, та ControlNet (IpAdapter + Depth). Варіантів безліч обмеження лише ваша фантазія.

Починаємо з виправлення стіни:

в img2img в inpaint режимі обводимо маскою ту ділянку, яку необхідно виправити

В промті пишемо що це стіна, і нехай далі думає сам.

promt: The wall

Будемо вважати, що банер на стіні нас влаштовує і далі наше завдання — зробити квитковий термінал більш деталізованим.

Можна зробити все так само як і на попередньому кроці, але дізнаймося, як сам АІ бачить цей термінал.

Варіант 1: Йдемо в Google Bard- віддаємо йому зображення, і просимо дати опис:

Наступним кроком просимо детально перекласти англійською (нам це знадобиться для промтів)

Варіант 2: отримати опис зображення в SD, перетягнувши в img2img та натиснувши interrogate CLIP

(Але тут досить часто трапляється не зовсім те що, потрібно. Проте, додатково з’являється уточнення для промту )

Опис, який видав сам SD

«a futuristic looking room with a lot of machines in it’s center and a lot of lights on the ceiling, Beeple, unreal engine 5 highly rendered, a detailed matte painting, space art»

Наступним кроком йдемо в SD — inapint, та виділяємо маскою те, що нам треба змінити. На даних Google Bard формуємо промт, але з нотками кіберпанку.

Якось так:

Cyberpunk,a ticket machine located at a public transportation stop. The machine is rectangular in shape and is made of metal. It has a black body with a blue screen and white buttons. The screen displays information about fares and how to use the machine,The subway ticket terminal, intricate details, 8k

Отримали непоганий варіант:

Наче добре, але щільність турнікетів на м\2 занадто сильна, тож спробуємо так само видалити той, що посередині (Так ми можемо за 2хв це видалити в фш, це ви і так в курсі, але спробуємо, так би мовити «не відходячи від каси»).

1. Обводимо зайвий турнікет.

2. Обираємо only mask та latent nothing і тиснемо Generate.

3. Заміняємо зображення на нове згенероване.

4. Даємо трошки більше волі «Залізяці», збільшуючи denoising strength до 0,85.

5. Обводимо маскою турнікет з підлогою і пишемо в промті «Кіберпанк метро підлога»

Отримали досить непоганий варіант локації (так, треба виправити стінку ліворуч, бо перспектива не туди. Тож так само обводимо маскою і generate).

Отримали такий концепт загальної локації:

Далі персонаж взаємодіє з терміналом, а значить наступний крок — це детально зобразити термінал і бажано у фронтальній проєкції.

Робимо скриншот області, з якою нам необхідно буде працювати без зайвих деталей:

І так, все вірно, переносимо в inpaint.

Забираємо варіант опису, що нам видав «бард» в якості промта:

The image shows a ticket machine located at a public transportation stop. The machine is rectangular in shape and is made of metal. It has a black body with a blue screen and white buttons. The screen displays information about fares and how to use the machine.

Включаємо карту глибини (Depth) в controlNet і генеруємо.

Після декількох ітерацій натрапляємо на щось цікаве

Тепер спробуємо додати зону для оплати на правій частині термінала.

В inpaint маскуємо місце, де нам потрібен pos terminal, та обираємо latent nothing.

promt: Cyberpunk Pos terminal, intricate details

..Вже ближче...

... Змінюємо варіант заповнення на Original

Наступним кроком забираємо в PhotoShop, вирізаємо та кладемо в перспективі так, ніби ми стоїмо перед ним.

Далі повертаємость в SD.

Переносимо в inpaint фронтальну проєкцію та обводимо ділянки, які не хотілося б втрачати, в controlNet обираємо ipAdapter, і кладемо в нього повний вид термінала (щоб АІ максимально наближалось до цього стилю.)

Для проробки всіх деталей забираємо найбільш вдале зображення і вже за відомим сценарієм збільшуємо рівень деталізації + фотобаш.

Наприклад:

До:

Після:

Виглядає не зовсім, тож наведемо лад.

1. Зробити нормальний модуль оплати

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

В графічному редакторі грубо правимо зображення, і збільшуємось 800×600 по розмірах.

Переносимо в SD.

Комбінуємо ipAdapter + Normal Map в controlNet.

2. Клавіатура та екрани

Поділюсь з вами ще однією корисністю: Йдемо на сайт lexica. art (пошуковик створений на згенерованих зображеннях SD) знаходимо схожий ракурс та те, що хотілося б передати

Адаптуємо розміри в редакторі аналогічно нашому об’єкту та переносимо в ipAdapter.

Normal. Залишаємо.

Отримаємо цікаві варіанти по деталях та освітленню:

Те саме провертаємо з іншим монітором і Забираємо на фотобаш.

До:

Після:

Як висновок, Для проєкту було необхідно зробити 7 сторінок коміксу та 9 фонів локацій + інтерактивні елементи, персонажі та елементи UI. На все це було 2 тижні. У ролику все це зібрано в загальну картину. Проєкт на дуже ранній стадії.