PointsMaterial

PointsMaterial — это специализированный материал для рендеринга точек (THREE.Points) в сцене. Он позволяет контролировать цвет, размер и прозрачность отдельных точек, а также поддерживает текстуры и эффекты освещения в ограниченном объёме. В отличие от стандартных материалов для мешей (MeshBasicMaterial, MeshStandardMaterial), PointsMaterial ориентирован именно на визуализацию облаков точек, частиц и других аналогичных структур.

Создание PointsMaterial

Для создания материала используется конструктор THREE.PointsMaterial с объектом параметров:

const material = new THREE.PointsMaterial({
    color: 0xff0000,   // Цвет точек
    size: 1.0,         // Размер каждой точки
    sizeAttenuation: true, // Зависимость размера от расстояния
    transparent: true, // Включение прозрачности
    opacity: 0.8,      // Прозрачность
});

Ключевые параметры:

  • color — основной цвет точек. Может быть задан как число в формате 0xRRGGBB или объект THREE.Color.
  • size — базовый размер каждой точки в единицах сцены.
  • sizeAttenuation — если true, размер точки уменьшается с увеличением расстояния до камеры, создавая эффект перспективы.
  • map — текстура для точек. Позволяет создавать круглые, звёздчатые или произвольные формы.
  • alphaMap — карта прозрачности, влияющая на отдельные участки текстуры.
  • transparent и opacity — управление прозрачностью точек.

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

Текстуры делают точки более выразительными. Наиболее часто применяются PNG-файлы с альфа-каналом:

const textureLoader = new THREE.TextureLoader();
const sprite = textureLoader.load('textures/particle.png');

const material = new THREE.PointsMaterial({
    color: 0xffffff,
    size: 5,
    map: sprite,
    transparent: true,
    alphaTest: 0.5 // Отсечение полностью прозрачных пикселей
});

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

  • Для корректного отображения текстур важно устанавливать transparent: true и, при необходимости, alphaTest.
  • Параметр alphaTest помогает избегать наложения прозрачных пикселей и улучшает производительность рендеринга.

Атрибуты для динамических систем частиц

PointsMaterial часто используется вместе с BufferGeometry для управления большим количеством точек:

const geometry = new THREE.BufferGeometry();
const positions = [];

for (let i = 0; i < 1000; i++) {
    positions.push(
        (Math.random() - 0.5) * 100,
        (Math.random() - 0.5) * 100,
        (Math.random() - 0.5) * 100
    );
}

geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

const points = new THREE.Points(geometry, material);
scene.add(points);

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

  • Каждая точка задаётся через атрибут position.
  • Дополнительно можно использовать атрибуты color, size или кастомные атрибуты для шейдеров, если требуется индивидуальное управление каждой точкой.

Интеграция с шейдерами

Для сложных эффектов можно применять пользовательские шейдеры. PointsMaterial поддерживает стандартные свойства, но их можно расширять через onBeforeCompile:

material.onBeforeComp ile = function(shader) {
    shader.vertexShader = shader.vertexShader.replace(
        '#include <common>',
        `
        #include <common>
        attribute float customSize;
        `
    );

    shader.vertexShader = shader.vertexShader.replace(
        '#include <begin_vertex>',
        `
        #include <begin_vertex>
        transformed *= customSize;
        `
    );
};

Преимущества:

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

Советы по производительности

  1. Использовать BufferGeometry вместо Geometry. Это критично для большого количества точек.
  2. Минимизировать количество текстур и использовать альфа-каналы вместо сложных шейдеров, если это возможно.
  3. Включать frustumCulled = true для объектов, которые не видны камере.
  4. Размер точек лучше задавать с учётом sizeAttenuation, чтобы избежать слишком больших элементов на близком расстоянии.

Взаимодействие с камерой и светом

  • PointsMaterial не реагирует на свет стандартным образом, если используется базовый color. Для освещённой сцены можно применять THREE.PointsMaterial с шейдерами или использовать THREE.PointsStandardMaterial (через пользовательский шейдер).
  • sizeAttenuation создаёт иллюзию перспективного уменьшения точек, делая облака точек более естественными.

Примеры применения

  • Облака точек для визуализации 3D-сканов и LIDAR-данных.
  • Системы частиц для огня, дыма, снега, звездных эффектов.
  • Интерактивные эффекты с динамическими изменениями позиции и цвета точек.

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

Оглавление