Создание базовой сцены: материалы

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

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

На текущий момент все сетки имеют серый цвет. Перед тем как применить к ним материал, необходимо создать новый объект материала:

• Позиционирование

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

Создать и применить материал также можно одним действием:

«Я протестировал сцену и увидел, что ничего не изменилось. »

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

«Как изменить материал, чтобы придать объекту нужный вид?»

Для этого необходимо задать свойства материала. Рассмотрим их:

• Прозрачность (альфа-канал)

Альфа-комбинирование –– интересный и полезный процесс. Его всестороннее рассмотрение выходит за рамки данного документа, однако интересующиеся читатели могут обратиться к соответствующей странице Википедии. Вы узнаете о дополнительных вариантах применения этого процесса после того, как познакомитесь с системами примитивов и спрайтов BabylonJS.

Можно применить к материалу альфа-прозрачность, выраженную в процентах (%), следующим образом:

• Рассеиваемый цвет

Рассеиваемый цвет –– это собственный цвет, который имеет материал объекта при его освещении. Можно задать сплошной цвет с помощью свойства diffuseColor:

или воспользоваться текстурой:

Дополнительно о текстурах. Проверьте правильность относительного или абсолютного пути к изображению. Можно использовать следующие форматы изображений: JPG, PNG, JPEG, BMP, GIF (все форматы изображений, поддерживаемые браузером).

Если требуется преобразовать (сместить) текстуру на сетке, то следует воспользоваться свойствами uOffset и vOffset:

Если требуется повторить изображение или замостить сетку, используя его как шаблон (например, применить травяную текстуру), то следует воспользоваться свойствами uScale и vScale:

Если к текстуре применяется альфа-комбинирование, то необходимо указать значение прозрачности:

Все перечисленные параметры текстуры также применяются к другим свойствам объекта StandardMaterial (.emissiveTexture, .ambientTexture, .specularTexture — напоминаю). Продолжим рассмотрение других свойств объекта StandardMaterial.

• Излучаемый цвет

Излучаемый цвет –– это цвет, который генерируется самим объектом. Сплошной цвет можно задать с помощью свойства emissiveColor:

или воспользоваться текстурой:

См. раздел Дополнительно о текстурах выше (разумеется, «рассеиваемый цвет» следует заменить на «излучаемый цвет»).

• Эмбиент

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

или воспользоваться текстурой:

См. раздел Дополнительно о текстурах выше (разумеется, «рассеиваемый цвет» следует заменить на «эмбиент»).

• Отражаемый цвет

Отражаемый цвет –– это цвет, который генерируется в результате отражения света от поверхности. Можно задать сплошной цвет с помощью свойства specularColor:

или воспользоваться текстурой:

См. раздел Дополнительно о текстурах выше (разумеется, «рассеиваемый цвет» следует заменить на «отражаемый цвет»).

Отражаемый цвет обладает еще одним свойством –– specularPower, которое задает размер и интенсивность отражения света:

Мы рассмотрели основные свойства цветов и текстур объекта StandardMaterial, однако существует еще несколько полезных свойств, которые перечислены ниже.

• Отсечение задних граней

Говоря кратко, отсечение задних граней определяет, является объект StandardMaterial сзади видимым или невидимым; TRUE означает «НЕвидимый». Говоря точнее, это метод ускорения отрисовки, который определяет видимость или невидимость многогранника графического объекта. Если это свойство имеет значение TRUE (логическую единицу) , то ядро Babylon не отрисовывает скрытые грани сеток, которые используют данный материал. По умолчанию это свойство имеет значение TRUE, однако при необходимости ему можно присвоить значение false. Заинтересованные читатели могут ознакомиться со страницей Википедии, посвященной отсечению задних граней.

В этом примере текстура имеет некоторую прозрачность, а отсечение задних граней для передней сферы установлено равным false, что позволяет видеть ее черную внутреннюю поверхность:

• Каркас поверхности

Вы можете увидеть объект в режиме каркаса поверхности с помощью свойства:

За объектами, описанными в этом руководстве, можно понаблюдать в демонстрационной сцене Babylon.js Playground 4.

Отлично! Теперь благодаря материалам ваша сцена выглядит как никогда эффектно. Позже мы познакомимся с более сложными методами работы с материалами, а пока освоим использование камер.