Створення проекту Lamborghini Urus (WebGL/Playcanvas). Частина 1.

Vasyl Lukianenko
3D Artist and Technical Author

Дата: Червень 12, 2022 Оновлено: Липень 25, 2023 Час читання: 5 min Перегляди: 643

Ви читаєте частину: 1 2 3 4 5 6 7 8 9 10

Вступ

Це Частина 1 із серії уроків зі створення Lamborghini Urus за допомогою WebGL/PlayCanvas.

У цій частині ми розглянемо, що таке WebGL і зрозуміємо, як влаштований ігровий веб-движок PlayCanvas.
А також розпочнемо підготовку для створення оточення у сцені.

Обов'язково подивіться відео нижче, так виглядатиме проект. Сподобалось? Ну що, за справу...

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

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

Що таке WebGL

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

У цьому і є перевага WebGL, ви можете просто поділитися посиланням і будь-хто зможе побачити ваш проект. Є звичайно і зворотний бік медалі у всього цього, це якість графіки. Воно буде набагато нижче ніж, наприклад, у Unity або Unreal Engine.

Тим не менш, на WebGL створюються ігри (навіть мультиплеєрні), конфігуратори, панорама-в'ювери, переглядачі 3D моделей і т.д.
Найвідоміші приклади: SketchFab, Google Earth, сайт Reno та ін.

Хоча в WebGL використовується досить проста мову програмування - JavaScript, ми все ж таки будемо розглядати більш зручний варіант - PlayCanvas. Де навички програмування практично не будуть задіяні, а для якихось складних прикладів, вам лише потрібно буде скопіювати кілька рядків. А весь процес роботи над сценою не відрізнятиметься від звичної роботи в 3Ds Max.

PlayCanvas

PlayCanvas – це платформа візуальної розробки інтерактивного веб-контенту. І інструменти, і веб-програми, які ви створюєте, засновані на HTML5. Платформа розміщена в Інтернеті, тому нічого не потрібно встановлювати, і ви можете отримати доступ до своєї роботи з будь-якого пристрою, на якому працює один із веб-браузерів, що підтримуються.

Для тих, кому цікаво, які можливості має PlayCanvas, можете перейти за посиланням нижче:

PlayCanvas Вступ

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

Приклади

Чому PlayCanvas? Він зручний, простий у освоєнні, у нього велике комуніті, відмінний мануал, купа прикладів і є свій безкоштовний магазин з різними ассетами. Незважаючи на те, що це платна платформа, вам надається безкоштовно 1Гб простору для створення своїх проектів, чого цілком вистачить для кількох проектів.

Ну що, не втрачаємо часу і реєструємось на:

https://playcanvas.com/

Реєстрація досить проста, можна навіть увійти через Google OAuth. Тиснемо "Sign In" і дотримуємося інструкцій.

Потрапляємо у свій обліковий запис, переходимо на вкладку "Projects" - тут ми бачимо список проектів та різну інформацію. Наприклад, можете натиснути "Docs" у правому верхньому кутку, щоб відкрити мануал. Там є приклади та гарний опис, як користуватися PlayCanvas, а прогорнувши сторінку вниз, можна вибрати "Російська мова", що для багатьох користувачів буде зручним.

Створення проекту

Отже, створюємо перший проект, - переходимо на вкладку "Projects" і створюємо новий проект натиснувши "New". Перед вами з'явиться вікно, в якому необхідно вибрати "Model Viewer Starter Kit".

Є й інші варіанти: створити звичайний порожній проект та налаштований проект під VR.

Не забуваємо написати назву проекту та натиснути кнопку "Create".

PlayCanvas Editor

Після всіх виконаних операцій, ми потрапляємо до редактора. Він мені нагадує віддалено Unity.

Нас зустрічає такий нескладний інтерфейс.

Зліва знаходиться панель зі списком об'єктів. Внизу - бібліотека ассетів. Праворуч інспектор об'єктів.

Довга панель зліва, це кнопки з основними функціями, такими як:

Переміщення
Обертання
Масштабування
Зміна розміру компонента
Перемикач осі World/Local
Прив'язки
Фокусування на виділеному об'єкті
Скасування останньої дії
Повернення останньої дії
Light Mapper
Редактор коду
Публікація проекту

З гарячих клавіш я користуюся: 1, 2, 3, це переміщення, обертання та масштабування відповідно. Те ж що і в 3Ds Max - "W", "E", "R".
Ще часто використовую клавішу F для фокусування і наближення до виділеного об'єкта, аналог кнопки "Z" в 3Ds Max.

Погляньмо, як виглядає наш проект. Натисніть кнопку "Launch" (далі називатимемо її "Play") праворуч вгорі.

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

Як можна помітити, ви можете обертатися навколо об'єкта, віддалятися за допомогою ролика мишки.
У нас є світло, фон та об'єкт за замовчуванням. Можна сказати, ми вже створили такий собі переглядач 3D моделей і ні граму коду. Здорово, правда?

Налаштування оточення

Для налаштування оточення необхідно натиснути кнопку "Settings", як показано на скріншоті зліва внизу. Далі перейти в пакунок "Rendering" і виставити наступні налаштування як на скріншоті. Ці налаштування допоможуть надати загальному малюнку трохи художності. Коли сцена буде зібрана, ви можете покрутити ці налаштування і зрозумієте як вони впливають на сцену.
Але загалом домагався ефект яскравої картини, що вицвіла, з блідими тінями.

Опція з відключенням "Preferer WebGL 2.0", була вимкнена оскільки, здалося, що тіні з цією опцією виглядають гірше.

Висновок

Докладніше, як створювалося оточення, читайте у наступній частині уроку.

Ви читаєте частину: 1 2 3 4 5 6 7 8 9 10

FAQ

1. Про що ця стаття?

Стаття розповідає про створення інтерактивного проєкту Lamborghini Urus за допомогою WebGL і PlayCanvas та описує перші етапи його розробки.

2. Що таке PlayCanvas?

PlayCanvas — це хмарна платформа для створення інтерактивних 3D-застосунків, конфігураторів і WebGL-проєктів, які працюють безпосередньо в браузері.

3. Чому для проєкту було обрано PlayCanvas?

PlayCanvas дозволяє створювати швидкі, інтерактивні та кросплатформні 3D-застосунки без необхідності встановлення додаткового програмного забезпечення користувачем.

4. Що розглядається в першій частині проєкту?

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

5. Які переваги дає WebGL для автомобільних презентацій?

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

6. Чи можна використовувати подібний підхід для інших автомобілів?

Так. Представлені методи можна адаптувати для будь-яких автомобільних проєктів і конфігураторів.

7. Чому оптимізація важлива для автомобільних сцен?

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

8. Які матеріали потребують особливої уваги в автомобільній візуалізації?

Особливо важливими є налаштування лакофарбового покриття, скла, хромованих деталей, пластику та освітлення.

9. Чи підходить PlayCanvas для створення автомобільних конфігураторів?

Так. PlayCanvas широко використовується для створення інтерактивних конфігураторів транспортних засобів і продуктових презентацій.

10. Чи можна переглядати такі проєкти на мобільних пристроях?

Так. За умови правильної оптимізації проєкти можуть працювати як на комп'ютерах, так і на смартфонах і планшетах.

11. Які навички потрібні для розробки подібних проєктів?

Корисними будуть знання 3D-моделювання, оптимізації моделей, JavaScript і основ роботи з PlayCanvas.

12. Чи можна додавати інтерактивні елементи до автомобільної сцени?

Так. Користувачі можуть змінювати кольори, матеріали, комплектації, камери та інші параметри в режимі реального часу.

13. Чому структура проєкту важлива на ранньому етапі?

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

14. Чи підходить WebGL для комерційних автомобільних презентацій?

Так. Багато автомобільних брендів використовують WebGL для онлайн-конфігураторів і маркетингових презентацій.

15. Які переваги отримують користувачі від інтерактивної презентації?

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

16. Для кого буде корисна ця стаття?

Для розробників PlayCanvas, технічних художників, спеціалістів з автомобільної візуалізації та всіх, хто цікавиться створенням інтерактивних WebGL-проєктів.

Vasyl Lukianenko
3D Artist and Technical Author

Vasyl Lukianenko is a 3D artist and technical author focused on practical workflows, optimization, and production-ready techniques. He publishes tutorials, courses, and tools to help artists work faster and get cleaner results.