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

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


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

Оглавление

Вступление Часть 2

Это Часть 2 из серии уроков по созданию  Lamborghini Urus при помощи WebGL/PlayCanvas.

Итак, в предыдущей части мы ознакомились с тем, что такое WebGL, попробовали на практике игровой веб-движок PlayCanvas, создали проект и начали настройку окружения.

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

Для тех, кто не читал предыдущие части, вот демонстративное видео.






И первую часть урока.

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


В этой части урока мы продолжим создание окружения и разберемся, как заменить фон на другой.

В этой серии уроков мы не будем прибегать к стороннему софту, кроме Autodesk 3Ds Max для подготовки модели. Все инструменты - это бесплатные веб-сервисы: PlayCanvas, Photopea, Matheowis и другие...

Ну, что готовы? Тогда, начинаем...

Подготовка фона

Доступ к материалам, такие как: модели в формате "FBX", текстуры, запеченные карты "AO" и другое, вы можете получить оформив подписку на Patreon.

Patreon - 3DGROUND


Первое, что необходимо сделать, так это заменить фон. Он сразу придаст понимание, как необходимо поставить свет и в общем задаст общее настроение картинки.

Главная идея, которую хотел реализовать, - это машина едущая по высохшему озеру, где на десятки километров простилается бескрайний песок и где-то в дали видны горы. Это должно было создать иллюзию уединения и сконцентрировать взгляд на авто. А главное, это довольно просто реализовать 😂.

Написав в Google запрос "Sand Pit HDRI", по первой ссылке нашел подходящую бесплатную HDRI на DeviantArt.
Salt Pit - Free HDri by AS-Dimension-Z on DeviantArt
https://www.deviantart.com/as-dimension-z/art/Salt-Pit-Free-HDri-755583634
sand pit hdri
Loading...
Поскольку PlayCanvas "не дружит" со сферическими картами, нам необходимо превратить данную HDRI в кубическую.

Написав в Google запрос "HDRI to cubemap online" по первой ссылке переходим на сайт:

https://matheowis.github.io/HDRI-to-CubeMap/


Как вы можете видеть из скриншота ниже, интерфейс сервиса очень простой. Нажимаем "Upload HDRI", выбираем наш "SandPit_10000x5000.hdr" и ждем загрузки.
hdri to cubemap
Loading...
Не меняя никаких настроек, нажимаем "Save" и выбираем опцию размера "4096" и "png".
convert hdri to cubemap
Loading...
И третий вариант раскладки, где каждая сторона будет отдельным файлом. Нажимаем "Process", а после обработки - "Save", в этом же диалоговом окне.

Сразу же, на всякий случай сохраним еще промежуточные варианты, с размерами "512" и "256". Позже мы будем использовать эти cubemap для отражений.

Варианты на "512" и "256" сделаем размытыми, для имитации размытых бликов. Можно было конечно использовать функцию "Prefilter" для автоматической генерации атласов прямо в PlayCanvas, с разными степенями размытости, но мне такой вариант не подошел, потому я просто сделал вручную еще 2 варианта размытых фонов.
nx
Loading...
Например вариант на "512" я размыл до такого состояния. Процесс простой, нужно все картинки загрузить в Photopea зайти в меню "Filter", далее "Gaussian Blur" и поставить значение "5.0px".

https://www.photopea.com/
photopea gaussian blur
Loading...
Затем сохранить каждую картинку. Этот процесс надо проделать и для варианта с размером "256", только сделать еще более размытым в 2-3 раза.

Процесс несложный, поэтому не будем подробно на нем останавливаться.

На этом этапе подготовки фона закончена и переходим к загрузке его в PlayCanvas.

Добавление фона в PlayCanvas

Переходим в PlayCanvas и первым делом удаляем все ненужное. Выбираем папки cube и cubemap в панели "Assets" и удаляем при помощи контекстного меню. Аналогично поступаем и с объектом "playcanvas" в панели "Hierarchy".
playcanvas remove objects and cubemaps
Loading...
У нас должна остаться папка scripts в панели "Assets" и два объекта в панели "Hierarchy" - камера и свет.

Создадим папку "env" и в ней подпапку "cubemap", следующим образом:
playcanvas create folder
Loading...
Для переименования папки, необходимо выбрать ее и в панели "Inspector" справа, ввести новое имя.
playcanvas created folders
Loading...
Убедимся, что у нас выбрана папка "cubemap", затем просто обычным перетягиванием, загружаем следующие файлы в PlayCanvas. Обратите внимание, мы загружаем вариант с размером "4096".
load cube map
Loading...
После перетягивания, спустя некоторое время в списке появятся кусочки cubemap.
playcanvas loaded cubemap
Loading...
Вот так просто происходит любая загрузка ассетов в PlayCanvas. Необходимо только следить за порядком в проекте и правильно разделять на папки, для более удобного поиска и навигации в проекте.

Следующим шагом, мы создадим шейдер "CubeMap", для этого вызовите контекстное меню в панели "Assets", затем "New Asset" и из списка возможных ассетов выберите "CubeMap". Как вы могли догадаться, как раз этот шейдер и будет участвовать в качестве фона в настройках "Rendering".
playcanvas create cubemap
Loading...
Называем шейдер "Sky" и перетаскиваем кусочки картинок в нужные слоты "Faces".
playcanvas shader cubemap
Loading...
Я нарисовал схему, какие имена должны соответствовать каждой стороне куба. 
cubemap unwrap
Loading...
В результате, у вас должно получиться так.
playcanvas assigned cubemap textures
Loading...
Теперь, переходим в "Settings", свиток "Rendering" и простым перетаскиванием, назначаем шейдер "Sky" в качестве "Skybox".
playcanvas assign cubemap as env
Loading...
Запускаем проект кнопкой "Play". Отлично! Мы теперь видим панораму пустыни, все сработало!
playcanvas runtime view env
Loading...

Подготовка других CubeMap

У нас еще остались другие cubemap с размерами "512" и "256". По аналогии с предыдущим разделом, создадим папки "cubemap_blurred" и "cubemap_superblurred".

В каждую папку добавим соответствующие текстуры cubemap, создадим шейдеры в каждой папке с названием "cubemap_blurred" и "cubemap_superblurred".
playcanvas cubemap blurred
Loading...
Продублирую еще раз раскладку "Faces".
cubemap unwrap
Loading...
И для варианта с размером "256", будет вот так.
playcanvas cubemap superblurred
Loading...

Заключение

В следующей части урока, мы закончим работу над окружением, не пропустите!

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


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


{{commentsMsg}}
  

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


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

{{subscribeMsg}}