Every $2 will be transferred to the Ukrainian Volunteers Fund. Do not remain indifferent, support Ukraine!

Создание проекта Lamborghini Urus (WebGL/PlayCanvas). Часть 1.


Автор MastaMan
Обновлено Июнь 14, 2022
English и Русский

Оглавление

Вступление

Это Часть 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 editor
Loading...
PlayCanvas — это платформа визуальной разработки интерактивного веб-контента. И инструменты, и веб-приложения, которые вы создаете, основаны на HTML5. Платформа размещена в Интернете, поэтому ничего не нужно устанавливать, и вы можете получить доступ к своей работе с любого устройства, на котором работает один из поддерживаемых веб-браузеров.

Для тех, кому интересно, какими возможностями обладает PlayCanvas, можете перейти по ссылке ниже:

PlayCanvas Введение


А, на следующей странице, вы можете ознакомиться с примерам других разработчиков:

Примеры


Почему именно PlayCanvas? Он удобный, простой в освоении, у него большое коммунити, отличный мануал, куча примеров и есть свой бесплатный магазин с разными ассетами.
Несмотря, на то, что это платная платформа, вам предоставляется бесплатно 1Гб пространства для создания своих проектов, чего вполне хватит для нескольких проектов.

Ну что, не теряем времени и регистрируемся на:

https://playcanvas.com/


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

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

Создание проекта

Итак, создаем первый проект, - переходим на вкладку "Projects" и создаем новый проект нажав "New". Перед вами появится окно, в котором необходимо выбрать "Model Viewer Starter Kit".
playcanvas new project 2
Loading...
Есть и другие варианты: создать обычный пустой проект и преднастроенный проект под VR.

Не забываем написать название проекта и нажать кнопку "Create".
playcanvas project
Loading...

PlayCanvas Editor

После всех проделанных операций, мы попадаем в редактор. Он мне напоминает отдаленно Unity.
playcanvas opened editor
Loading...
Нас встречает вот такой несложный интерфейс.

Слева находится панель со списком объектов. Внизу библиотека ассетов. Справа инспектор объектов.

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

  • Перемещение
  • Вращение
  • Масштабирование
  • Изменение размера компонента
  • Переключатель оси World/Local
  • Привязки
  • Фокусировка на выделенном объекте
  • Отмена последнего действия
  • Возврат последнего действия
  • Light Mapper
  • Редактор кода
  • Публикация проекта
Из горячих клавиш я пользуюсь: 1, 2, 3, это перемещение, вращение и масштабирование соответственно. То же что и в 3Ds Max - "W", "E", "R".
Еще часто использую клавишу F для фокусировки и приближения к выделенному объекту, аналог кнопки "Z" в 3Ds Max.

Давайте посмотрим, как выглядит наш проект. Нажмите кнопку "Launch" (далее будем называть ее "Play") справа вверху.
playcanvas press launch button
Loading...
Отлично, так запускается проект. Таким его будет видеть конечный пользователь.
playcanvas runtime
Loading...
Как вы можете заметить, вы можете вращаться вокруг объекта, отдаляться при помощи ролика мышки. 
У нас есть свет, фон и объект по-умолчанию. Можно сказать мы уже создали такой себе просмотрщик 3D моделей и ни грамму кода. Здорово, правда?

Настройки окружения

playcanvas settings
Loading...
Для настройки окружения, необходимо нажать кнопку "Settings", как показано на скриншоте слева внизу. Далее перейти в сверток "Rendering" и выставить следующие настройки как на скриншоте. Эти настройки помогут придать общей картинке немного художественности.
Когда сцена будет собрана, вы можете покрутить эти настройки и поймете как они влияют на сцену. 
Но в целом добивался эффект яркой выцветшей картинки с бледными тенями.

Опция с отключением "Preferer WebGL 2.0", была выключена поскольку, показалось что тени с этой опцией выглядят хуже.

Заключение

Более подробно, как создавалось окружение, читайте в следующей части урока.

Перейти на "Создание проекта Lamborghini Urus " Часть 2


{{commentsMsg}}
  

Никто не оставил комментариев
{{comment.lastname}} {{comment.name}} {{comment.date}}
{{comment.text}}


ПОДПИШИСЬ НА СВЕЖИЕ НОВОСТИ

{{subscribeMsg}}