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

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

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

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

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

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

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

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

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

Loading...

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

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

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

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

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

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

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

Loading...

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

Loading...

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

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

Loading...

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

Loading...

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

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

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

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

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

Loading...

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

Loading...

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

Loading...

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

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

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