Класс pc.Color: пространства цвета, альфа

Класс pc.Color является основным способом работы с цветами в PlayCanvas, предоставляя удобные средства для представления и манипулирования цветами в различных пространствах цвета. В PlayCanvas цвета представлены с использованием RGBA (Red, Green, Blue, Alpha), где альфа-канал отвечает за прозрачность, а красный, зелёный и синий каналы определяют основные компоненты цвета.

Конструктор и базовая структура

Конструктор класса pc.Color позволяет создать объект цвета с различными параметрами. Он может быть инициализирован различными способами:

var color1 = new pc.Color();          // Цвет по умолчанию (чёрный)
var color2 = new pc.Color(1, 0, 0);   // Красный цвет
var color3 = new pc.Color(0, 1, 0, 0.5); // Полупрозрачный зелёный цвет

Каждому цвету в классе pc.Color соответствует четыре значения: r (красный), g (зелёный), b (синий) и a (альфа-канал). Эти значения могут быть заданы в диапазоне от 0 до 1. Если значения выходят за этот диапазон, они автоматически обрезаются.

Пространства цвета

В PlayCanvas используется пространство цвета RGB для представления цвета. Компоненты цвета (r, g, b) задаются в пределах от 0 до 1. Например:

  • (1, 0, 0) — чисто красный цвет.
  • (0, 1, 0) — чисто зелёный.
  • (0, 0, 1) — чисто синий.

Чтобы получить цвет в другом пространстве, например в HSL (оттенок, насыщенность, светимость), можно использовать преобразования. Однако, в PlayCanvas основной фокус остаётся на RGB.

Альфа-канал

Альфа-канал (компонент a) управляет прозрачностью цвета, где значение 0 означает полную прозрачность, а 1 — полную непрозрачность. Это важно при работе с текстурами и материалами, а также при создании визуальных эффектов.

Пример:

var color = new pc.Color(1, 0, 0, 0.5); // Полупрозрачный красный

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

Операции с цветами

pc.Color поддерживает стандартные математические операции с цветами, такие как сложение, вычитание и умножение. Это позволяет легко создавать различные эффекты, такие как изменение яркости или контраста, а также комбинирование цветов.

var color1 = new pc.Color(0.5, 0.5, 0.5);
var color2 = new pc.Color(0.2, 0.2, 0.2);

var resultColor = color1.add(color2); // Складывание цветов

В результате складывания цветов, каждый компонент цвета будет складываться по отдельности. Например, для компонентов красного, зелёного и синего каналов:

r = 0.5 + 0.2 = 0.7
g = 0.5 + 0.2 = 0.7
b = 0.5 + 0.2 = 0.7

Этот подход позволяет модифицировать цвета на лету и использовать их в различных вычислениях, таких как освещение и эффекты.

Преобразования цветов

Существует несколько методов для преобразования цвета в строки, числовые значения и другие форматы. Например, метод toString() возвращает строковое представление цвета в формате rgb(r, g, b, a):

var color = new pc.Color(1, 0, 0, 0.5);
console.log(color.toString()); // "rgb(255, 0, 0, 128)"

Метод toArray() преобразует цвет в массив, который можно использовать, например, для передачи в шейдеры:

var colorArray = color.toArray();
console.log(colorArray); // [1, 0, 0, 0.5]

Метод toHex() возвращает строковое представление цвета в шестнадцатеричном формате:

var hexColor = color.toHex();
console.log(hexColor); // "#ff000080"

Важные методы класса pc.Color

  • set(r, g, b, a) — Устанавливает значения компонентов цвета. Если параметр альфа не указан, он будет установлен в 1 (непрозрачный).
color.set(0, 1, 0, 0.7); // Устанавливает цвет как полупрозрачный зелёный
  • clone() — Создаёт новый объект pc.Color, который является копией текущего. Это полезно, когда нужно создать новый объект на основе существующего, не изменяя исходный.
var colorClone = color.clone();
  • lerp(color1, color2, t) — Линейная интерполяция между двумя цветами. Параметр t указывает, насколько сильно должен быть “смешан” второй цвет с первым (0 возвращает первый цвет, 1 — второй).
var resultColor = color1.lerp(color2, 0.5); // Половина пути между color1 и color2
  • equals(color) — Сравнивает два цвета. Возвращает true, если все компоненты цветов одинаковы.
var isEqual = color1.equals(color2); // true, если color1 и color2 идентичны

Работа с цветами в контексте материалов и освещения

В PlayCanvas цвета активно используются при работе с материалами и освещением. Для материалов в PlayCanvas цвет задаётся через различные параметры, такие как diffuse (диффузный цвет), specular (цвет зеркального отражения) и emissive (эмиссический цвет).

var material = new pc.Material();
material.diffuse = new pc.Color(1, 0, 0); // Красный диффузный цвет
material.update();

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

var light = new pc.Light();
light.color = new pc.Color(1, 1, 1); // Белый свет

Заключение

Класс pc.Color предоставляет мощный и гибкий инструмент для работы с цветами в PlayCanvas. Возможность манипулировать компонентами цвета, включая альфа-канал, а также использовать различные методы для преобразования и операций с цветами, делает его незаменимым инструментом при разработке 2D и 3D приложений.

Оглавление