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

Это Часть 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", была выключена поскольку, показалось что тени с этой опцией выглядят хуже.

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

FAQ