Размер частиц и его изменение со временем

В Babylon.js система частиц предоставляет мощный инструмент для создания визуальных эффектов, таких как дым, огонь, пыль и другие анимации. Размер частиц является одним из ключевых параметров в настройке поведения системы частиц. Этот параметр позволяет моделировать эффекты, где частицы увеличиваются или уменьшаются в размере, создавая тем самым динамичное визуальное восприятие.

Структура системы частиц

Система частиц в Babylon.js основана на объекте ParticleSystem, который управляет коллекцией частиц. Каждая частица имеет несколько атрибутов, таких как позиция, скорость, цвет, время жизни и, конечно, размер. Размер частиц можно задать статически или анимировать его изменение с течением времени.

Установка и базовые параметры размера частиц

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

var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
particleSystem.startSize = 0.1;  // начальный размер частиц
particleSystem.endSize = 0.1;    // конечный размер частиц (фиксированный)
particleSystem.start();

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

Анимация изменения размера частиц

Для создания более сложных эффектов, таких как увеличение или уменьшение частиц в процессе их жизни, можно использовать функцию анимации. Это может быть полезно для имитации таких явлений, как взрыв или раскалённый металл. В Babylon.js изменение размера частиц можно анимировать с помощью кривых времени, заданных через startSize и endSize.

particleSystem.addSizeGradient(0, 0.1);  // начальный размер на старте жизни
particleSystem.addSizeGradient(1, 2);    // конечный размер в конце жизни

Здесь используется метод addSizeGradient, который принимает два параметра: первый — это нормализованное время жизни частицы (от 0 до 1), а второй — размер. В данном примере частицы начинают с размера 0.1 и увеличиваются до 2 к концу своего существования.

Плавное изменение размера с помощью кривых

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

var sizeCurve = new BABYLON.Animation("sizeAnimation", "startSize", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var keys = [
    { frame: 0, value: 0.1 },
    { frame: 20, value: 1 },
    { frame: 100, value: 0.1 }
];
sizeCurve.setKeys(keys);
particleSystem.animations.push(sizeCurve);

В данном примере частица будет начинаться с размера 0.1, увеличиваться до 1 в 20-й кадр и снова уменьшаться до 0.1 к 100-му кадру. Такое изменение размера будет происходить циклично.

Использование случайных значений для размера

Можно добавить случайность в размер частиц, чтобы создать эффект, при котором частицы будут иметь разные размеры при каждом запуске системы. Для этого используется свойство startSize как диапазон значений:

particleSystem.startSize = { min: 0.1, max: 0.5 };  // случайный размер от 0.1 до 0.5

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

Контроль размера частиц через кривые жизни

В Babylon.js можно также изменять размер частиц в зависимости от их текущего состояния жизни. Это позволяет более точно настроить поведение частиц. Для реализации такого контроля используется метод addSizeGradient, который позволяет задать несколько контрольных точек для изменения размера частиц по мере их старения.

particleSystem.addSizeGradient(0, 0.1);  // на старте жизни
particleSystem.addSizeGradient(0.5, 1);  // в середине жизни
particleSystem.addSizeGradient(1, 0.3);  // в конце жизни

В этом примере частицы начинают с размера 0.1, увеличиваются до 1 в середине своей жизни и снова уменьшаются до 0.3 к её завершению. Такое использование позволяет моделировать более сложные эффекты, такие как расширение пламени и его последующее сокращение.

Пример с изменяющимся размером частиц

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

var flameParticleSystem = new BABYLON.ParticleSystem("flameParticles", 2000, scene);
flameParticleSystem.particleTexture = new BABYLON.Texture("flame.png", scene);
flameParticleSystem.emitter = new BABYLON.Vector3(0, 0, 0);

flameParticleSystem.startSize = { min: 0.2, max: 0.5 };
flameParticleSystem.addSizeGradient(0, 0.5);     // начальный размер
flameParticleSystem.addSizeGradient(0.2, 1.5);   // увеличение до 1.5 на 20% жизни
flameParticleSystem.addSizeGradient(1, 0.1);     // уменьшение до 0.1 в конце жизни

flameParticleSystem.start();

В этом примере частицы начинают с случайного размера между 0.2 и 0.5 и, по мере их жизни, постепенно увеличиваются до 1.5 и затем сокращаются до 0.1. Такой подход помогает создать эффект живого пламени, где частицы расширяются и затем исчезают.

Заключение

Размер частиц является важным параметром при работе с системой частиц в Babylon.js. Он позволяет моделировать разнообразные визуальные эффекты, изменяя размер частиц как статически, так и динамически. Использование различных подходов — от простых линейных изменений до сложных кривых анимаций — открывает широкие возможности для создания эффектных и натуральных визуализаций в трехмерных сценах.

Оглавление