Blend4Web vs Unity. Битва за Інтернет

Коли друзі мене запитали, чому я зацікавився Blend4Web і став вивчати його, однозначної відповіді не вийшло. Так, я використовую Unity і це мій основний інструмент. Його можливостей з головою вистачає для реалізації будь-яких задумів. Але я люблю і Blender, так як працюю з ним вже багато років. Всі моделі, анімації, кінематографічні сцени я роблю виключно в ньому. A Blend4Web виглядає дуже гідним движок реального часу для WebGL.

І в один прекрасний момент я задумався, а може Blend4Web конкурувати з настільки популярним Unity, і якщо так, то в яких сферах…




Історія знайомства з Blend4Web була незвичайною і почалася з простого ролика на YouTube. Виникла свого роду емоційна ланцюжок: акцент уваги від переглянутого відео, інтерес після відвідування сайту розробників і захват від вивчення. Так з'явилася моя стаття на Хабре: “Blend4Web: огляд новинки вітчизняного софтопрома". Раджу ознайомитися з нею, якщо ви не в курсі, що таке Blend4Web.

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

  • Повна інтегрованість c Blender. Після інсталяції плагіна або SDK Blend4Web, з'являються нові опції доповнюють, але не перекривають основні функції програми. Таким чином, вся творча частина здійснюється в Blender.
  • Простий експорт в реал-тайм. За бажанням можна отримати один єдиний файл HTML, який містить код, графіку та всі необхідні залежності для запуску. Однак, є і більш складні способи виведення та інтеграції виконуваного коду з web-сторінкою.
  • Готовий плеєр для програвання сцени з вже наявними кнопками управління, настройки і розшарювання в популярних соціальних мережах.
  • Великі можливості по створенню інтерактивності без програмування. Для більш складних завдань є можливість написання скриптів на JavaScript з використанням API Blend4Web.
  • Вітчизняна розробка. Документація, уроки і форум російською (є і англійський еквівалент).
  • Open Sources під ліцензією GPL. Розробники движка активно співпрацюють з командою Blender і беруть участь у розвитку редактора. Для комерційних цілей движок потрібно ліцензувати.
  • Активна розробка. Новий реліз — кожен місяць. Схоже, це своєрідна планка для розробників.
Зрозуміло, не все так гладко. У ході роботи з движком я виявив і певні проблеми: примітивний конструктор логіки, складна система налаштувань, заплутаність API. Загалом, кому цікаво — прочитайте першу статтю, а я переходжу до основної теми.

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

Вагові категорії обох «борців» явно не однакові. Unity — надпопулярна середовище для кросплатформених ігор, яка має солідний життєвий століття, велика спільнота, величезна кількість випущених проектів. Blend4Web — активно розвивається технологія з цікавими задатками, але дуже молода. Тому чесна битва в плані игростроя поки мені бачиться неможливим. Я вирішив зупинитися саме на тій діяльності, в якій сильний Unity і, як мені здається, Blend4Web. Розмова піде про інтерактивної презентації на WebGL. У цій статті я постараюся показати сильні та слабкі сторони обох движків саме в розробці віртуальних презентацій та експорті останніх в WebGL.

Завдання полягало в наступному — створити демонстраційну модель авіаційного двигуна, з показом роботи основних вузлів і короткою анотацією до них. Робота велася одночасно для Unity і Blend4Web. Одні і ті ж моделі, однакові цілі, але зовсім різне виконання. Забігаючи вперед, скажу, що деякі цікаві фішки мені довелося викинути, як для Світу, так і для Blend4Web, в основному з-за поставленого мною ж обмеження по часу. І ще, я не авіаційний конструктор і не інженер. Використана схема роботи двигуна була взята з Вікіпедії. Цілком ймовірно, десь можуть зачаїтися неточності.

Візуальна частина

Роздумуючи над цим етапом роботи, я перегортав документацію до Blend4Web (можливості Unity мені давно відомі). У наборі візуальних ефектів траплялися дуже цікаві функції, спробувати які просто свербіли руки. Я повинен був виробити таку візуальну схему, яка була б простою у виконанні, універсальної для обох движків і оптимальною для презентації. В результаті вийшов наступний набір:
  • Прості моделі без текстур. Привабливість тільки за рахунок стандартних шейдерів.
  • Градієнтний фон. Я ж відмовився від текстур! А однотонне заливання надто примітивна.
  • Один спрямований джерело світла, тіні і навколишній світ.
  • Ніяких частинок. Зрозуміло, що з їх допомогою можна значно поліпшити картинку, так і наочність процесу. Але витрачати час не захотілося.
Спочатку були створені тривимірні моделі основних вузлів турбовентиляторного двигуна (рис. 2).


Рис. 2

Початкове моделювання для обох движків може бути виконано в будь тривимірному редакторі. Природно, для Blend4Web оптимально створювати моделі в самому Blender, але ніщо не заважає імпортувати їх з боку. Що ж стосується Unity, то стандартом де-факто для нього є формат FBX (можна використовувати оригінальний blend-файл, який також безпосередньо імпортується движком).

Blend4Web дозволяє використовувати стандартні шейдери Blender за принципом «як вони є». Тому я вибрав найпростіший спосіб візуалізації металевих деталей — всього лише установив жорстке випромінювання у відбиває шейдере WardIso. Картинка вийшла цілком пристойною. Однак при порівнянні результатів фонового Blender і готового експорту сцени в браузері виявилося, що чогось не вистачає — відсутні тіні. Це перший мінус, який я ставлю Blend4Web. Незважаючи на відмінне «розуміння» налаштувань сцени Blender, движок Blend4Web вимагає обов'язкового включення деяких функцій. І це здається знущанням, адже я вже включив тіні в матеріалах Blender, так навіщо мені ще десь ставити галочки?

Отже, для включення тіней в Blend4Web потрібно активувати глобальну функцію Render Shadows в панелі Scene, а також для кожного об'єкта персонально включити опції Shadows (Cast і Receive). На малюнку 3 я позначив відповідні пункти. На цьому налаштування моделей для Blend4Web закінчена і тепер переходимо до Unity.


Рис. 3

Зазвичай Unity без проблем імпортує моделі зроблені в Blender. Цього разу нормалі виявилися переплутані. Ну ви напевно зустрічали цей неприємний ефект, коли світлотіні на об'єкті міняються місцями. Це лікується, або перепросчетом нормалей в Blender (група опцій Mesh -> Normals в режимі редагування), або в налаштуваннях імпорту Unity (Normals & Tangents). Найцікавіше, що проблем з цим же об'єктом в Blender не спостерігалося, як при звичайному рендері, так і після експорту Blend4Web.

В іншому ж все пройшло благополучно. Unity автоматично створив потрібні матеріали і їх досить було трохи відрегулювати. Фізичний шейдер Unity виявився на висоті і дозволив надати такий необхідний металевий блиск. Що ж стосується тіней, то вони автоматично включаються при імпорті об'єктів.

Наступним етапом була налаштування оточення. Тепер першими я розгляну можливості Unity.

Так як в цьому експерименті я принципово відмовився від текстур, то варіант використання Skybox не підходив. Спочатку я мав намір встановити градієнт в якості фону, проте Unity «з коробки» пропонує або однотонний колір, або процедурний Skybox (я погано шукав?). На жаль, останній виглядає не дуже добре в робочій сцені з-за різкої межі між нижньою та верхньою півсфер. Тому довелося зупинитися на примітивній заливці.


Рис. 4

Джерело світла вже перебував у сцені за замовчуванням, так само як був включений навколишній світ (ambient light). Власне кажучи, на цьому налаштування в Unity були закінчені.

Що ж стосується Blend4Web, то тут я виявив набагато більш багаті налаштування навколишнього світу. Більшість мені в цій сцені не потрібні, але це все одно приємно. По-перше, немає жодних проблем з використанням стандартного фону Blender. Хочеш суцільний колір, а хочеш градієнт в різних варіантах — у будь-якому випадку движок правильно підхоплював налаштування панелі World. Це стосувалося й інших параметрів сцени, наприклад світла оточення (Environment light).

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

Підведу підсумки етапу роботи з візуальною частиною.

Unity, як мені здається, більш лояльний до недосвідченому користувачеві. Базові функції сцени за замовчуванням вже включені. Є у тіні об'єктів, коректно налаштований навколишній світ, процедурний Skybox — це відразу вигідно показує об'єкт без додаткових налаштувань. Не було особливих проблем з імпортом моделей, якщо не вважати «перевернуті» нормалі, але тут, мабуть, я сам десь напартачив.

Blend4Web вимагає ручного налаштування цих параметрів, натомість пропонує «з коробки» набагато більші можливості. Так, наприклад, у своїй сцені я не використовував пост-ефекти (bloom, blur, сонячні промені і т. д.), але включити їх можна було кількома клацаннями миші. Зрозуміло Unity також має свій набір пост-ефектів, однак для цього потрібно їх встановити та розібратися з використанням.

І, звичайно ж, система «два в одному» дуже полегшує роботу над проектом. Знаючи Blender, ви створите сцену без проблем експортується в WebGL.

Логічна частина

Вивчаючи демо і документацію Blend4Web я прийшов до висновку, що даний движок може бути дуже зручний саме для створення віртуального контенту для сайтів з двох причин. По-перше, інтеграція з Blender і по-друге, можливість роботи з ним не програмісту. Тому було вирішено не використовувати API, а працювати тільки з тим, що доступно в панелях Blender.

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

У своїй оглядовій статті про Blend4Web я вже писав про зручному плеєрі, який автоматично вбудовується при експорті сцени в html. В результаті користувач може вільно розглянути об'єкт з усіх боків і навіть розшарити інформацію в популярних соціальних мережах. Причому з боку дизайнера знадобитися зробити мінімальні рухи для отримання цього ефекту і без єдиної рядки коду, так як всі налаштування знаходяться в панелях Blender.

І це реально полегшує роботу над презентацією! Власне, тут я нічого не робив, адже все для рішення першої задачі вже було готове.

Тепер звернемося до Unity. На відміну від Blend4Web тут не пропонується готового плеєра і його потрібно створити самостійно. Візуального редактора логіки «з коробки» також немає — все робиться на скриптах. Звичайно, в магазині Asset Storе можна підібрати відповідний редактор логіки чи готові заготовки коду, але для чистоти експерименту обмежимося тільки базовою конфігурацією. Я вважаю, що в цій частині Blend4Web завідомо обставив Unity!

Реалізація наступного завдання поставила мене в безвихідь. Я припускав зробити кілька кнопок, при натисканні яких якась частина моделі ставала прозорою, а потрібна підсвічувалася. Перша проблема — повна відсутність системи GUI у Blend4Web.

Звичайно, голота на вигадки хитра і я тут же «приклеїв» площині з написами до камери, але от при зміні розміру вікна браузера всі кнопки "їхали" за межі робочого простору. Мені не вдалося знайти які-небудь прив'язки об'єкта до межі екрану в налаштуваннях плагіна, тому довелося обійтися напівзаходами. Я розмістив керуючі кнопки внизу камери і таким чином, вони залишилися в полі зору незалежно від розміру вікна.

Благополучно вирішивши це питання, я перейшов до обробника подій. Розробники Blend4Web пропонують для створення логіки використовувати послідовності NLA і додані так звані слоти (NLA — це візуальний редактор нелінійної анімації Blender). Включити і налаштувати їх можна в панелі Scene (рис. 5).


Рис. 5

Кожен слот — це якась унікальна операція, що вибирається з випадаючого меню. З їх допомогою можна відстежити виділення об'єкта у сцені, управляти анімацією, виконувати умовні або безумовні переходи, прості математичні обчислення, показати або приховати об'єкт, а також використовувати кілька функцій пов'язаних з веб-посиланнями. І це все.

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

Пам'ятаючи про те, що Blend4Web підтримує більшість анімацій Blender, я зготував невелику логічний ланцюжок: відслідковувати клацання по кнопці -> запустити анімацію. В якості анімації я зробив плавне зміна прозорості матеріалу деталі. Як і очікувалося, Blender це з легкістю дозволив, але не Blend4Web.

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

Засмучений настільки халтурно вирішеним завданням, я вже з побоюванням приступив до реалізації показу контекстної інформації по частинах моделі. Однак тут чекав приємний сюрприз від розробників. Виявилося, що досить додати в потрібне місце сцени об'єкти Empty (допоміжна пустушка) і заповнити необхідні поля в панелі. Після експорту на екрані з'являються симпатичні ярлики з назвою коротким. Якщо клацнути по них мишкою, вони розкривають контекстну довідку (рис. 6).


Рис. 6

Що ж стосується Unity, то тут не все так однозначно. Тут є повноцінний GUI, можливість написання будь-якої логіки немислимою складності, але немає спеціальних заготовок для спрощення створення типової презентації. Тому я не буду вдаватися в нетрі скриптів, а перейду до фіналу — експорт в HTML.

Отже, Blend4Web дозволяє зібрати всю сцену, керуючий код і себе коханого в один файл HTML. Тестова сцена збирається швидко (не більш 1 секунди) і буквально одним клацанням. Її розмір становить 1.8 Мб.

Тепер перейдемо до Unity. Я залишив всі налаштування експорту WebGL за замовчуванням і запустив обробку. Те, що відбувається зараз (на момент написання цих слів) — просто невимовно! Погуляв по кімнаті, попив чай, попльовував в стелю, а експорт все йде. Не менше п'яти хвилин відбувалося це неподобство (порівняйте з секундою в Blend4Web). Але найбільше мене вбив розмір папки з готовими експортними файлами — 140 Мегабайт!!! У мене немає слів…

Фінал порівняння

Якщо чесно, то і писати не хочеться, після такого приголомшливого результату в Unity. Експорт в WebGL з'явився в ньому порівняно недавно і досі позиціонується як preview-версия (на момент написання статті у мене був встановлений Unity 5.0.1). Можливо в майбутньому все зміниться, але в даний момент результат експорту Blend4Web незмірно краще, ніж аналогічний у Unity.

Підведу остаточний підсумок.

У мене склалася думка, що плагін Blend4Web є більш зручним і продуманим засобом для створення віртуальних презентацій і ось чому:
  • Солідні візуальні можливості візуалізації. Я розглянув лише ті, що знадобилися мені для створення тестової сцени. Загляньте в документацію Blend4Web і побачите багато цікавого.
  • Заготовки для установки сцени, поведінки об'єктів і логіки. Без програмування мені вдалося зробити головну логіку програми, створити контекстні довідки, виконати підсвічування об'єктів при виділенні, оформити сцену.
  • Шустрий експорт і невеликий за розміром готовий файл.
Виявлені мінуси при використанні Blend4Web:
  • Немає GUI
  • Примітивний і незручний редактор логіки.
Окремо хотілося б пройтися по документації движка. Є уроки, офіційне керівництво, тестові проекти і це добре. Але я не знайшов конкретних, невеликих прикладів по використанню багатьох можливостей, а офіційна довідка найчастіше обмежується сухим перерахуванням. Це змушує втрачати час на експерименти.

Що ж стосується Unity, то в цьому порівнянні він зазнав очевидне фіаско. Незважаючи на свою дружелюбність і можливість розробки будь-якої складності проектів, у цій сфері він не може запропонувати швидкі та ефективні інструменти для створення презентацій. Так і експорт в WebGL поки що бажає бути кращим.

Для охочих подивитися:
Презентація на Blend4Web (1,8 Mb)
Презентація на Unity (142 Mb)

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.