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

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


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

Оглавление

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

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

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

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






И предыдущие части урока.

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


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


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


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

Хочу выразить огромную благодарность пользователю Мельниченко Яна за подготовку 3D модели автомобиля Urus. Мельниченко Яна - топовый специалист в области GameDev и ArchViz под Unreal Engine. Урок по подготовке 3D модели - оптимизация, подготовка текстуры, запекание LightMap и др. будет позже и зависит от Вас. Напишите комментарий или необходим такой урок.


Также прикреплю ссылочку на Behance - Мельниченко Яна.

Behance - Яна Мельниченко

Добавление геометрии в сцену

Мы не будем подробно останавливаться на описании процесса подготовки 3D модели Urus. Если, вы считаете, что нужно дополнение к данному уроку, напишите об этом в комментариях и мы совместно с Мельниченко Яна подготовим такой урок.

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

Patreon - 3DGROUND


Ниже приведен список заранее подготовленных частей Urus. Вся подготовка происходила в 3Ds Max, а затем необходимые части были экспортированы в отдельные FBX файлы. 
model components fbx
Loading...
Такие элементы, как передние двери, задняя дверь багажника, три варианта дисков, колеса и интерьер должны быть разделены на отдельные FBX файлы для удобства.

Создайте папку "car" в корне панели "Assets". В будущем в эту папку, мы будем добавлять геометрию, текстуры и материалы, связанные с нашим автомобилем.

Добавим кузов нашего автомобиля в PlayCanvas. Для этого, просто перетащите "SM_CarExterior.fbx" в панель "Assets", в папку "car".
playcanvas upload fbx
Loading...
В процессе загрузки, у вас автоматически создадутся различные ассеты, материалы, "GLB" и "Template".

Перед тем, как добавить в сцену экстерьер машины, необходимо сначала создать пустой "Entity". Это будет служить контейнером, в который будем добавлять другие части модели.

Создаем "Entity" в панели "Hierarchy", называем его "Car". Затем перетягиваем "Template" с названием "SM_CarExterior" на "Entity" - "Car".
playcanvas add object to scene
Loading...
Кузов автомобиля должен появиться во Viewport.
playcanvas car exterior
Loading...
Повернем "Entity" - "Car", на 90 градусов по оси Y. 
playcanvas rotate entity car
Loading...
При добавлении других частей в сцену, а именно в "Entity" - "Car", дополнительное кручение объектам не понадобиться.

Настройка материалов

playcanvas object materials
Loading...

Материал CarPaint

playcanvas material carpaint preview
Loading...
Выберите объект во Viewport, в панели "Inspector", вы увидите материалы принадлежащие кузову нашего автомобиля. Начнем с первого материала - это "CarPaint".

Нажмите на "CarPaint" в панели "Inspector", у вас откроется редактор материалов. Сразу же переименуем материал в "M_CarPaint_Exterior".
playcanvas material carpaint diffuse and specular settings
Loading...
Изменим настройки "Specular" и "Diffuse", как на скриншоте выше.

Зайдем в свиток "Environment", возле параметра "CubeMap", нажмем на иконку карандаша и выберем "CubeMap" - "Sky" в панели "Assets", в папке "env → cubemap". Во время выбора, вы можете переходить в подпапки. Ставим значение "Reflectivity" равным "1.56".
playcanvas material carpaint environment settings
Loading...
И последний штрих, добавим карту "AO". Загрузим ее сначала в папку "car", затем добавим ее в свитке"Ambient". Ниже пример текстуры "Ambient Occlusion", который мы используем.
t exterior ao
Loading...
Кроме подключения карты, включим флажок "Tint", установим "Color" равным "180,180,180" и режим смешивания в режим "Multiply".
playcanvas material carpaint environment settings
Loading...
Результат, который у нас получился.
playcanvas material carpaint result
Loading...

Материал BlackPlastic

playcanvas material black plastic preview
Loading...
Переходим к настройке следующего материала. Выберите экстерьер автомобиля во Viewport, откройте материал "BlackPlastic" в панели "Inspector", переименуем в "M_BlackPlastic". 

Выключим флажок "Apply To All Maps" в свитке "Offset & Tiling".
playcanvas material black plastict disable tiling and offset
Loading...
Загрузим текстуру "Noise". Сразу назначим ее в свитке "Normals" со значением "Bumpiness" равным "0.1"и "Tiling" равным "200" и "200". 
perlin noise
Loading...
В свитке "Environment" назначим в качестве "CubeMap" наш "cubemap_blurred". Установим значение "Reflectivity" равным "0.4".
"Projection" установим в режим "Box". Режим "Box" - по-другому накладывает отражения, что дает интересный эффект.
playcanvas black plastic settings 1
Loading...
Для "Diffuse" и "Specular" установите значения, как на скриншоте ниже.
playcanvas material black plastic settings 3
Loading...
Результат, который у нас получился.
playcanvas material black plastic result 2
Loading...

Материал BlackMetal

playcanvas material black metal preview
Loading...
playcanvas material black metal specular and diffuse settings
Loading...
playcanvas material black metal environment settings
Loading...
Результат, который у нас получился.
playcanvas material black metal result
Loading...

Материал Chrome_Exterior

playcanvas material chrome exterior preview
Loading...
playcanvas material chrome exterior abmient and diffuse settings
Loading...
Назначим "Ambient" текстуру "AO", из панели "Assets" - "T_Exterior_AO.png", режим смешивания "Multiply", с включенным "Tint" и цветом "0,0,0".
playcanvas material chrome exterior specular and environment settings
Loading...
Вот такой результат получился.
playcanvas material chrome exterior result
Loading...

Материал GlassWinds

playcanvas material glass winds preview
Loading...
playcanvas material glass winds diffuse and specular settings
Loading...
playcanvas material glass winds environment settings
Loading...
Результат.
playcanvas material glass winds result
Loading...

Материал FrontGlass

Шестой по счету материал у нас отвечает за переднее стекло. Назовем его как "M_FrontGlass". В модели он назван немного по-другому, ничего страшного.
playcanvas material front glass preview
Loading...
playcanvas material front glass diffuse and specular settings
Loading...
Назначим карту прозрачности "T_BackGlassInverted" в слот "Opacity". Дальше настройки, как на скриншоте ниже.
playcanvas material front glass opacity and environment settings
Loading...
Результат.
playcanvas material front glass result
Loading...

Заключение

В следующей части урока, мы продолжим настраивать материалы для объекта "SM_CarExterior".

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


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


{{commentsMsg}}
  

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


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

{{subscribeMsg}}