Material свойства

Система материалов (Material Properties) в Deck.gl используется для управления взаимодействием объектов сцены с источниками освещения. Материал определяет, насколько поверхность отражает свет, насколько выражены блики, как распределяется освещение по поверхности и насколько реалистично выглядит трёхмерный объект.

Параметры материала применяются преимущественно в слоях, поддерживающих освещение и трёхмерную геометрию:

ColumnLayer
PolygonLayer с экструдированными полигонами
GeoJsonLayer с параметром extruded
SolidPolygonLayer
ScenegraphLayer
другие 3D-слои, использующие систему освещения Deck.gl

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

Свойство material

Материал задаётся через свойство material.

Пример:

import {ColumnLayer} from '@deck.gl/layers';

const layer = new ColumnLayer({
  id: 'columns',
  data,
  extruded: true,

  material: {
    ambient: 0.35,
    diffuse: 0.6,
    shininess: 32,
    specularColor: [255, 255, 255]
  }
});

Объект material содержит набор физических параметров, влияющих на расчёт освещения в шейдерах.

Архитектура освещения

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

В модели освещения Deck.gl используются несколько составляющих:

Ambient Light

Фоновое освещение сцены.

Такой свет присутствует повсеместно и не зависит от направления.

Пример:

new AmbientLight({
  color: [255, 255, 255],
  intensity: 1.0
});

Directional Light

Направленный источник света.

Имитирует солнечный свет.

new DirectionalLight({
  color: [255, 255, 255],
  intensity: 1.0,
  direction: [-1, -3, -1]
});

Point Light

Точечный источник.

Свет распространяется из конкретной точки пространства.

new PointLight({
  color: [255, 255, 255],
  intensity: 2,
  position: [-122.4, 37.8, 1000]
});

Материал определяет, как поверхность реагирует на каждый из этих источников.

Параметр ambient

Назначение

Параметр ambient управляет интенсивностью фонового освещения, воспринимаемого поверхностью.

material: {
  ambient: 0.5
}

Низкие значения

ambient: 0.1

Особенности:

сильный контраст;
глубокие тени;
выраженная зависимость от направленного света.

Средние значения

ambient: 0.3

Особенности:

естественный внешний вид;
хороший баланс света и теней;
наиболее распространённый вариант.

Высокие значения

ambient: 1.0

Особенности:

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

Влияние на экструдированные полигоны

Для городской застройки:

material: {
  ambient: 0.25
}

Здания приобретают выраженный объём.

Для тематических карт:

material: {
  ambient: 0.7
}

Все объекты становятся хорошо различимыми независимо от положения источника света.

Параметр diffuse

Назначение

Параметр diffuse отвечает за диффузное отражение света.

Диффузное отражение моделирует рассеивание света шероховатой поверхностью.

material: {
  diffuse: 0.6
}

Физический смысл

Когда луч света попадает на поверхность:

часть энергии поглощается;
часть отражается хаотично;
наблюдается равномерное освещение объекта.

Именно за этот эффект отвечает коэффициент diffuse.

Низкие значения

diffuse: 0.1

Результат:

поверхность выглядит тёмной;
направленный свет почти не влияет на объект.

Средние значения

diffuse: 0.6

Результат:

естественное освещение;
хорошо заметна форма объекта;
высокая читаемость геометрии.

Высокие значения

diffuse: 1.0

Результат:

максимальное рассеивание света;
ярко освещённые поверхности;
сильная реакция на источники света.

Пример сравнения

Слабое диффузное освещение:

material: {
  ambient: 0.4,
  diffuse: 0.2
}

Ярко освещённый объект:

material: {
  ambient: 0.4,
  diffuse: 1.0
}

Параметр shininess

Назначение

Параметр shininess управляет размером и концентрацией зеркального блика.

material: {
  shininess: 32
}

Чем больше значение, тем меньше и ярче блик.

Принцип работы

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

направления света;
направления взгляда камеры;
нормали поверхности.

Алгоритм вычисляет интенсивность блика и использует значение shininess как показатель концентрации отражённого света.

Низкие значения

shininess: 4

Особенности:

широкие блики;
матовая поверхность;
мягкие переходы света.

Подходит для:

бетона;
грунта;
камня.

Средние значения

shininess: 32

Особенности:

умеренно выраженные блики;
реалистичное отображение большинства материалов.

Подходит для:

окрашенных поверхностей;
пластика;
строительных конструкций.

Высокие значения

shininess: 128

Особенности:

маленькие яркие блики;
эффект полированной поверхности.

Подходит для:

металла;
стекла;
лакированных покрытий.

Сравнение

Матовый материал:

material: {
  shininess: 8
}

Глянцевый материал:

material: {
  shininess: 128
}

Параметр specularColor

Назначение

Параметр specularColor определяет цвет зеркального отражения.

Формат:

specularColor: [r, g, b]

Пример:

material: {
  specularColor: [255, 255, 255]
}

Белый блик

Наиболее распространённый вариант.

specularColor: [255, 255, 255]

Используется для:

пластика;
стекла;
городской инфраструктуры;
большинства картографических визуализаций.

Цветной блик

Красный:

specularColor: [255, 0, 0]

Синий:

specularColor: [0, 0, 255]

Золотистый:

specularColor: [255, 220, 100]

Цветные блики позволяют имитировать отражающие свойства различных материалов.

Имитация металлов

Золото:

material: {
  shininess: 128,
  specularColor: [255, 215, 0]
}

Медь:

material: {
  shininess: 96,
  specularColor: [184, 115, 51]
}

Сталь:

material: {
  shininess: 128,
  specularColor: [220, 220, 220]
}

Стандартный материал Deck.gl

Если объект создаётся без свойства material, используется встроенный набор параметров:

material: {
  ambient: 0.35,
  diffuse: 0.6,
  shininess: 32,
  specularColor: [30, 30, 30]
}

Эти значения обеспечивают сбалансированное освещение для большинства сценариев.

Настройка материалов для различных задач

Визуализация зданий

material: {
  ambient: 0.25,
  diffuse: 0.8,
  shininess: 16,
  specularColor: [80, 80, 80]
}

Особенности:

хорошо читаются фасады;
заметны тени;
отсутствуют чрезмерные блики.

Карта населения

material: {
  ambient: 0.5,
  diffuse: 0.5,
  shininess: 8,
  specularColor: [20, 20, 20]
}

Особенности:

акцент на данных;
минимальное влияние освещения;
высокая читаемость цветовой шкалы.

Металлические колонны

material: {
  ambient: 0.2,
  diffuse: 0.7,
  shininess: 128,
  specularColor: [255, 255, 255]
}

Особенности:

яркие отражения;
эффект полированного металла;
высокая визуальная выразительность.

Матовый бетон

material: {
  ambient: 0.35,
  diffuse: 0.9,
  shininess: 4,
  specularColor: [40, 40, 40]
}

Особенности:

практически отсутствуют блики;
подчёркивается форма объекта;
реалистичный внешний вид.

Использование материалов совместно с LightingEffect

Наиболее полный контроль достигается при совместном использовании материала и пользовательской системы освещения.

import {
  AmbientLight,
  DirectionalLight,
  LightingEffect
} from '@deck.gl/core';

const ambientLight = new AmbientLight({
  color: [255, 255, 255],
  intensity: 1.0
});

const directionalLight = new DirectionalLight({
  color: [255, 255, 255],
  intensity: 2.0,
  direction: [-1, -3, -2]
});

const lightingEffect = new LightingEffect({
  ambientLight,
  directionalLight
});

Далее эффект подключается к экземпляру Deck:

const deckgl = new Deck({
  effects: [lightingEffect],
  layers: [layer]
});

Материал каждого слоя начинает взаимодействовать с настроенной схемой освещения.

Производительность и Material Properties

Система материалов реализована на уровне GPU через GLSL-шейдеры и оказывает минимальное влияние на производительность современных видеокарт.

Наиболее затратными факторами являются:

большое количество источников света;
сложные 3D-модели;
сцены с миллионами объектов;
высокие значения детализации геометрии.

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

Практические рекомендации

Аналитические карты

material: {
  ambient: 0.5,
  diffuse: 0.5,
  shininess: 8
}

Приоритет отдаётся данным, а не визуальным эффектам.

Городские модели

material: {
  ambient: 0.25,
  diffuse: 0.8,
  shininess: 16
}

Подчёркивается объём зданий и структура городской среды.

Архитектурные презентации

material: {
  ambient: 0.2,
  diffuse: 0.7,
  shininess: 64,
  specularColor: [255, 255, 255]
}

Достигается более выразительное взаимодействие объектов со светом.

Реалистичные металлические поверхности

material: {
  ambient: 0.15,
  diffuse: 0.75,
  shininess: 128,
  specularColor: [220, 220, 220]
}

Формируются концентрированные отражения, характерные для отполированных материалов.

Взаимосвязь параметров материала

Все параметры работают совместно:

Параметр	Отвечает за
`ambient`	Фоновое освещение
`diffuse`	Рассеянное отражение
`shininess`	Размер и резкость блика
`specularColor`	Цвет зеркального отражения

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