#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Картинка, как всегда, отражает суть статьи
Картинка, как всегда, отражает суть статьи

Наши задачи на сегодня:

  • добавление материалов для объектов на сцене (пол, падающие блоки, персонаж игрока);
  • добавление текстур окружения (небо, земля, горизонт);
  • настройка света, отражений и теней.

Начнём с пола.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

В панели Сцена выберем дочерний узел MeshInstance3D узла Floor.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

В панели Инспектор кликнем на модельку объекта пола в строке Mesh, чтобы раскрыть группу свойств MeshInstance3D.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

В строке Material выбираем пункт Создать StandardMaterial3D, видим миниатюру текущего используемого материала объекта Floor - это действительно просто белый цвет, без отражений или блеска.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Кликаем на миниатюру и раскрываем свойства материала, список которых не умещается на экране - это внушает оптимизм.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Для изменения базового цвета объекта выбираем свойство Albedo и в строке Color настраиваем нужный цвет.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом
Стильно
Стильно

Что у нас ещё есть в свойствах материала, что мы могли бы изменить? Свойство Metallic отвечает, естественно, за придание поверхности металлических качеств, свойство Roughness отвечает за блеск поверхности и наличие на ней отражений (причём значение 1 - нет блеска и отражений, а 0 - много блеска и отражений). Не будем делать наш пол металлическим, а вот Roughness поставим на полный ноль.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом
Теперь пол загадочно блестит
Теперь пол загадочно блестит

Над полом мы поработали достаточно, настало время заняться объектом персонажа игрока, которым у нас является Steve. Поскольку мы инстанцировали (в переводе на человеческий - добавили экземпляр) Steve из его собственной вкладки steve, переходим на вкладку steve и в панели Сцена выбираем дочерний узел MeshInstance3D корневого узла Steve.

Переход на вкладку объекта осуществляется по одной из этих трёх кнопок, но я не скажу, по какой именно
Переход на вкладку объекта осуществляется по одной из этих трёх кнопок, но я не скажу, по какой именно

В панели Инспектор мы, как и чуть раньше, создаём StandardMaterial3D и приступаем к настройке материала.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Настраиваем цвет с помощью свойства Albedo...

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

И всё, для начала этого будет достаточно. Возвращаемся на сцену level_1.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Как мы видим, Steve автоматически поменял цвет, что не может не радовать.

Теперь на очереди падающие блоки. Всё по аналогии: выбираем один из узлов Block1-Block4 в группе Block, переходим во вкладку block, выбираем дочерний узел MeshInstance3D корневого узла Block, в панели Инспектор создаём StandardMaterial3D, настраиваем цвет через свойство Albedo.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Посмотрим, что получилось на сцене level_1.

Неплохо получилось
Неплохо получилось

Кстати, пора удалить наконец узел Icon, который был нужен только для демонстрации работы с кодом в движке.

Жаль, конечно, этого добряка
Жаль, конечно, этого добряка

В панели Сцена кликаем правой кнопкой мыши по узлу Icon, в контекстном меню выбираем пункт Удалить (Delete), подтверждаем действие.

Пора наконец запустить текущую сцену.

И теперь мы вспоминаем, из-за чего вообще всё началось: без текстур окружения самый красивый объект на уровне (это монетка) выглядит крайне уныло.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Итак, добавляем окружение. В панели Сцена выбираем корневой узел Level1 и добавляем к нему дочерний узел WorldEnvironment.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

В панели Инспектор в строке Environment выбираем Создать Environment.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом
Найдите одно отличие
Найдите одно отличие

Нажмём на Environment в строке Environment и увидим список доступных для изменения свойств.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

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

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Тем не менее, здесь же на выбор доступно несколько более интересных режимов отображения окружения.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Выбираем режим Sky и...

Нет, ну что-то в этом есть
Нет, ну что-то в этом есть

Дело в том, что цвет неба ещё не установлен. Выбираем свойство Sky, которое появилось в списке свойств окружения, и в строке Sky выбираем Создать Sky.

До выбора здесь, конечно же, будет пусто
До выбора здесь, конечно же, будет пусто

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

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

В строке Sky Material выбираем пункт Создать ProceduralSkyMaterial.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

И вот мы вышли на окружение по умолчанию. Изменим его: нажмём на ProceduralSkyMaterial в строке Sky Material.

Уровни вложения впечатляют
Уровни вложения впечатляют

Раскроем свойство Sky и изменим цвет в строке Top Color.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом
Примерно вот так
Примерно вот так
#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Теперь изменим Horizon Color, который отвечает за цвет неба возле линии горизонта.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом
#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Нас уже не остановить, поэтому раскрываем свойство Groung и в строке Horizon Color устанавливаем такой же цвет земли у горизонта, как и для неба (можно скопировать Hex код в панели настройки цвета, чтобы не запоминать циферки).

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Чтобы регулировать переход Horizon Color, нужно настроить параметр Curve, причём это работает и для Sky, и для Ground (я использовал 0.0750 для Sky и 0.0672 для Ground).

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Ну и последнее, что осталось - это Bottom Color в свойстве Groung.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом
#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Посмотрим, что получилось.

Неплохо, и монетка теперь выглядит как монетка

Кстати, мы можем сохранить текстуру окружения в отдельный файл. Нажмём на галочку возле Environment в строке Environment и в раскрывающемся списке выберем Сохранить как.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

В открывшемся окне, в каталоге нашего проекта создадим папку Resources (путём клика правой кнопкой мыши и выбора соответствующего пункта)...

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

...и сохраним текстуру окружения в папке Resources под именем level_1_environment.tres.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом
#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Точно так же мы можем сохранить отдельно текстуры Sky и Sky Material, которые входят в текстуру Environment, чтобы затем при необходимости использовать их при создании новых текстур окружения (но делать этого сейчас мы, к счастью, не будем).

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Займёмся освещением нашей сцены. За рассеянный свет отвечает свойство Ambient Light.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

В строке Source нам доступно несколько источников освещения на выбор.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Оставим в качестве источника Background, а в строке Color настроим нужный цвет.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом
#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

В строке Sky Contribution изменим значение параметра с 1 до 0.75, чтобы выбранный нами цвет освещения был чуть заметнее освещения окружения.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Мы, кстати, можем менять свойства материала и для импортированных моделей. Перейдём во вкладку coin нашей монетки (которую мы смоделировали в Blender), выберем дочерний узел MeshInstance3D корневого узла Coin, в панели Инспектор кликнем по модельке объекта в строке Mesh и раскроем свойство Surface 0.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Кликнем по миниатюре материала, выберем свойство Roughness и в строке Roughness изменим значение с 0.15 до 0.4.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом
Монетка стала ярче и заметнее
Монетка стала ярче и заметнее

Теперь поговорим о настройке рендера сцены.

У окружения есть свойство SSR (Screen Space Reflections), которое отвечает за создание реалистичных отражений.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Если мы его включим, то увидим, как это не странно, отражения. Отражает всё и вся пол Floor, поскольку для него в настройках материала мы выставили значение Roughness, равное 0.

Этот метод не самый точный - например, мы не видим отражения нижней стороны Steve, оно не отрисовывается, хотя должно быть отражение зелёного цвета. Такое ограничение есть во многих игровых движках, но в целом для получения отражений сгодится.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Следующее свойство - SSAO (Screen Space Ambient Occlusion), отвечает за отрисовку теней.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

После включения этого параметра тени становятся темнее - может, это не так видно на картинке, но при переключении довольно заметно.

Посмотрим, что получилось в итоге.

Выглядит хорошо, если бы не одно "но": у объектов заметны несглаженные пиксельные переходы, так называемые "лесенки". За их устранение отвечает параметр Anti Aliasing (сглаживание), который находится в настройках самого проекта. В левом верхнем углу выбираем пункт Проект -> Настройки проекта...

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

В открывшемся окне выбираем раздел *Рендеринг*, а в нём - пункт Сглаживание.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Нам нужен параметр 3D MSAA, который находится в состоянии Disabled, но имеет несколько режимов работы.

#7 Godot: 3D Platformer от BornCG. Материалы объектов, работа с текстурами окружения и светом

Чем больше число у режима сглаживания, тем мощнее железо необходимо для работы. Для совместимости с наибольшим количеством устройств выберем режим 2x (Average). Закроем окно настроек проекта, сохраним изменения и посмотрим на результат.

"Лесенка" не исчезла совсем, но стала более размазанной, что уже неплохо.

Теперь вы можете настроить САСАО.

На мой взгляд, неплохой урок получился. С каждым новым шагом растёт интерес к предмету и повышается уверенность в своих силах. Да что там, уже можно строить планы на будущее: я потихоньку собираю референсы, которые мне кажутся занятными, и местами уже даже знаю, как реализовать ту или иную идею. Это приятно.

Это Голден Бой, и весь день ещё впереди
Это Голден Бой, и весь день ещё впереди
5
Начать дискуссию