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

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


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

Оглавление

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

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

В предыдущей части мы подготовили все необходимые CubeMap и изменили фон в нашем проекте.

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






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

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


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


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

Не будем терять ни минуты, за дело...

Создание поверхности земли

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

Patreon - 3DGROUND


Нам необходимо создать поверхность, на которой будет стоять автомобиль для отбрасывания тени. И применим небольшой трюк, - сделаем анимацию Tiling Offset для имитации движения. У нас нету необходимости двигать весь автомобиль, - мы сделаем иллюзию движения.

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

Сразу добавим в папку текстуры: градиентную круговую черно-белую текстуру для "Alpha" и "Normal" карту неровной поверхности.
ground alpha3
Loading...
Радиальный градиент

ground 4k normal
Loading...
Карта нормалей

У меня получилось вот так.
playcanvas ground textures
Loading...
Далее, создадим плоскость, для этого в "Hierarchy" нажмем на кнопку плюс и из списка выберем "Primitive → Plane".
playcanvas create plane
Loading...
Назовите плоскость "ground". Поскольку в PlayCanvas невозможно задать размер стандартным примитивам, мы увеличим "Scale" до 120, смотрите скриншот ниже.
playcanvas scale plane
Loading...
Создадим новый материал для нашей поверхности. В панели "Assets", при помощи контекстного меню создайте "Material".
playcanvas create new material
Loading...
Переходим в настройки материала двойным кликом мышки по шейдеру. Называем материал "M_Ground". В настройках материала, в свитке "Offset & Tiling" снимаем флажок для "Apply to All Maps".

Переходим в свиток "Diffuse" и меняем цвет на "226, 226, 226". Данный цвет подбирается опытным путем, главное чтобы цвет материала совпадал с цветом песка из окружения. Пока оставим такие значения, позже их можно будет подкорректировать, когда будет полностью настроен свет.

Назначаем в свитке "Opacity" черно-белую карту "ground_alpha3", ставим "Blend Type" в режим "Alpha". 

В свитке "Normals" подключаем карту "ground_4K_Normal" и ставим повторение текстуры "Tiling" равным 8.
playcanvas create ground material
Loading...
Назначаем материал для плоскости, обычным перетягиванием материала во "Viewport" на объект "ground".

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

Создание анимированной текстуры

Ниже приведен пример JavaScript, который отвечает за анимацию текстуры. Посмотрите на скриншоте ниже, как его можно легко скачать. Вам необходимо на ссылке с надписью "view raw", вызывать контекстное меню и нажать "Save link as...". Код скрипта смотрите под скриншотом.
playcanvas script scrolling texture
Loading...


Если, вы все правильно сделаете, вы увидите скачанный скрипт в папке загрузок.
download js scrolling texture
Loading...
Перейдите в PlayCanvas, откройте папку "scripts" в панели "Assets" и перетяните туда файл "scrollingTexture.js".
playcanvas upload script
Loading...
Применим данный скрипт, выберите объект "ground" в панели "Hierarchy" и в панели "Inspector" нажмите "Add Component". Из списка компонентов, выберите "Script".
playcanvas add script component to object
Loading...
Из выпадающего списка скриптов, выберите "scrollingTexture". Вот такими не хитрыми движениями, мы можем назначать любые скрипты на объекты.
playcanvas apply script to object
Loading...
После применения скрипта, вам будут доступны его настройки. По факту, вам не нужно лезть в код, чтобы внести какие-либо изменения, к примеру поменять скорость движения текстуры, все делается через удобный интерфейс. В этом и есть удобство PlayCanvas, перед другими веб-движками.
playcanvas scrollig textures script settings
Loading...
В панели "Assets", перейдите в папку "env → ground". Нажмите на иконку карандаша возле "materialAsset" для "scrollingTexture" и выберите материал "ground" из списка ассетов. Первое значение параметра "speed" установите в "0.05".
playcanvas assign assets to script
Loading...
Попробуйте запустить проект кнопкой "Play". Если вы сделали все правильно, вы должны увидеть как текстура будет смещаться.

Настройки освещения

Выберите "Light" из списка объектов, в панели "Inspector" установите следующие значения из скриншота ниже. Также вы можете указать аналогичные значения для "Position" и "Rotation".
playcanvas light setup
Loading...
playcanvas light setup 2
Loading...
После того, как позиция солнца выставлена, вы можете заметить, что практически не чувствуется переход между подложкой и окружением. При желании, вы всегда можете изменить цвет подложки в материале "ground" в свитке "Diffuse".

На данном этапе, можно закончить настройку освещения. В дальнейшем еще будут добавляться источники света для подсветки салона и некоторых частей автомобиля, но это уже после настройки всех материалов.

Эффект солнца

playcanvas sun effect
Loading...
Для создание эффекта солнца, я зашел в "Google Картинки", написал запрос "Sun lens", выставил настройки поиска больших и бесплатных картинок. 
Мне понравился вариант, на картинке ниже. Я немного его сделал контрастным в Photopea и зарисовал немного края черным цветом.
sun lens google
Loading...
https://commons.wikimedia.org/wiki/File:High-quality_lens_flare_rendering.png


При сохранении я указал размер "1024x1024px" несмотря на другие пропорции картинки. Это сделано, поскольку для Playcanvas необходимо подготавливать текстуры кратные 2 и желательно квадратного размера. В итоге у меня получилось как-то так.
edited test lens
Loading...
Затем я создал новый "Entity", нажав плюс на панели "Hierarchy" и выбрав из списка пункт "Entity".
playcanvas create entity
Loading...
В данный "Entity", мы добавим новый "Plane", на который назначим материал с текстурой солнца. Дополнительный "Entity" нам необходим для работы скрипта, который мы повесим на солнце.

Называем "Entity" например "Sun Glow", не снимая выделения с "Sun Glow", создаем "Plane" со следующими параметрами.
playcanvas sun params
Loading...
Обратите внимание, мы сняли все опции для отбрасывания теней. Теперь создадим материал в папке "env" с названием "M_SunGlow" и следующими параметрами. И назначим материал на наш "Plane".
playcanvas sun material 1
Loading...
playcanvas sun meterial 2
Loading...
Думаю параметры "Diffuse", "Opacity" и "Emissive" вам понятны. А вот в свитке "Other", мы отключили абсолютно все флажки. Благодаря этому, солнце будет прорисовываться поверх других объектов и на него не будут влиять настройки света и окружения.

Для "Entity" - "Sun Glow", дополнительно еще настроили параметры позиции и вращения.
playcanvas sun glow pos and rot
Loading...
Таким образом, мы отодвинули солнце на приблизительно нужную позицию относительно окружения. Важно, чтобы "Plane" находился в позиции "0,0,0", а все манипуляции по позиционированию проводить с родительским "Entity".
playcanvas sun runtime
Loading...
Повесим на "Entity" - "Sun Glow" скрипт "hotspot", который будет вращать солнце так, чтобы оно крутилось вместе с камерой и всегда перпендикулярно виду камеры.
Код скрипта смотрите ниже. Нажмите правой кнопкой мышки на ссылке "view raw" и сохраните файл "Save link as...".



Большинство нужных скриптов уже написаны кем-то и их можно использовать. Например скрипт "hotspot.js", я нашел в официальных туториалах:

https://developer.playcanvas.com/en/tutorials/information-hotspots/


Просто открыл проект по ссылке и скачал нужный скрипт.

Загрузим "hotspot.js" в Playcanvas в панель "Assets", в папку "scripts". По аналогии с предыдущим примером, для "Sun Glow" добавляем новый компонент через "Add Component", из списка выбираем "Script" и в выпадающем меню скриптов, выбираем "hotspot".
playcanvas hotspots script
Loading...
В настройках скрипта, необходимо выбрать "Camera Entity". Нажимаем на "Select Entity" напротив параметра "Camera Entity" и затем в "Hierarchy" выбираем объект "Camera".

Заключение

Готово! Теперь, если запустить проект по кнопке "Play", вы сможете увидеть как солнце крутится за камерой, а если поворот превышает 90 градусов, то солнце пропадает, чего мы и хотели добиться.

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

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


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


{{commentsMsg}}
  

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


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

{{subscribeMsg}}