neutrinoparticles.gpu.pixi7

Цей пекедж являє собою інтеграцію ефектів NeutrinoParticles у графічний рушій PIXI.js v7.

NeutrinoParticles - це універсальне рішення для створення та рендеру партікл ефектів для різних платформ та рушіїв. Ефекти експортуються у вигляді вихідного коду у різні мови програмування. Далі, цей код компілюється, оптимізується та збирається разом з додатком, що забеспечує максимальну продуктивність.

neutrinoparticles.gpu.(js|wasm) - це рендерер для ефектів експортованих у спеціальній версії редактору NeutrinoParticles Editor GPU. У цьому редакторі ефекти експортуються у вихідний код GLSL, який використовується рендерером neutrinoparticles.gpu.(js|wasm) для апдейту та рендеру ефектів ресурсами відеокарти, тим самим звільнюючи CPU для інших завдань.

Цей пекедж neutrinoparticles.gpu.pixi7 інтегрує neutrinoparticles.gpu.(js|wasm) у рушій PIXI.js версії 7.

Що я отримаю?

Ефекти з повним GPU прискоренням у сцені графічного рушія PIXI.js. Сотні тисяч партіклів у браузерах на десктопах та від десятків до сотень тисяч на браузерах мобільних пристроїв.

Можливість створювати фантастично складні та красиві ефекти у редакторі NeutrinoParticles та використовувати їх в іграх та додатках на PIXI.js.

Що таке повне GPU прискорення для ефектів?

Ефекти не тільки рендеряться, а ще й апдейтяться за допомогою відеокарти (GPU - Graphics Processing Unit). Це звільнює основний процесор (CPU - Central Processing Unit) для інших задач у грі та дозволяє обробляти у 100 разів більше партіклів у ефектах.

Яке залізо треба?

Будь яке, аби браузер підтримував WebGL 2.

Для ефекту повноекранного сяйва Bloom потрібно, щоб браузер підтримував FLOAT текстури (99.0% девайсів) та FLOAT Blend (89.58% девайсів).

Як встановити?

Треба два пекеджи:

1. @neutrinoparticles/gpu.pixi7 для інтеграції в PIXI
2. @neutrinoparticles/gpu.js або @neutrinoparticles/gpu.wasm для вибору бібліотеки рендереру. Перша на чистому JS, а друга на WebAssembly.

Тобто, в терміналі буде щось типу:

npm install @neutrinoparticles/gpu.pixi7 @neutrinoparticles/gpu.wasm

Швидкий приклад

import { Effect, EffectsUpdateGroup } from '@neutrinoparticles/gpu.pixi7';

// Pick one of two following imports to choose between JS and WASM
//import { default as npgpuLoader } from '@neutrinoparticles/gpu.js';
import { default as npgpuLoader } from '@neutrinoparticles/gpu.wasm';

import * as PIXI from 'pixi.js';

// Creating PIXI Application
const app = new PIXI.Application({ background: '#1099bb', resizeTo: window,
    neutrinoGPU: { // Additional options for NeutrinoParticles Context
        npgpuLoader, // Mandatory. NeutrinoParticles GPU library loader
		texturesBasePath: 'textures/', // Base path for textures. Will be prefixed to exported texture paths in effects
	}
 });

// Wait for GPU library loaded
await app.neutrinoGPU!.loadedPromise;

document.body.appendChild(app.view as HTMLCanvasElement);

PIXI.Assets.addBundle('resources', [
    // Request loading effect in the bundle
	{ 
        name: 'testEffect', // You choose a name of EffectModel in the bundle
        srcs: 'src/shaders/Test.shader', // Path to the effect
        data: app.neutrinoGPU!.loadData // Mark this resource as NeutrinoParticles effect
    },
]);

// Update group is for updating effects in a batch. It works faster.
const updateGroup = new EffectsUpdateGroup(app.neutrinoGPU!);

PIXI.Assets.loadBundle('resources').then((resources) => {

    // Bunny sprite on background
    {
        const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png');
        bunny.anchor.set(0.5);
        bunny.x = app.screen.width / 2;
        bunny.y = app.screen.height / 2;
        bunny.scale = new PIXI.Point(20, 20);
        app.stage.addChild(bunny);
    }

    // Create effect
    {
		// Create instance of the effect
        const effect = new Effect(resources.testEffect);

        // Add the effect to the scene graph
        app.stage.addChild(effect);

        // Start the effect. Should be called after it is added to the scene graph
        // to calculate world position correctly.
        effect.start({
            position: [app.screen.width / 2, app.screen.height / 2, 0]
        })

		// Add it to the update group to update all effects at once
        updateGroup.add(effect);
    }

    // Listen for update
    app.ticker.add((_delta) =>
    {
		// Update effects. Better in a group.
        updateGroup.update(app.ticker.elapsedMS / 1000.0);
    });
});

Пауза

Повна пауза — всі частинки заморожуються, нові не генеруються:

effect.pause();
effect.unpause();

Пауза генераторів — існуючі частинки продовжують жити, але нові не створюються:

effect.pauseGenerators();
effect.unpauseGenerators();

Перезапуск

Перезапуск знищує всі існуючі частинки та запускає ефект з нуля:

effect.restart([newX, newY, 0]);
// З новим обертанням:
effect.restart([newX, newY, 0], newRotationRadians);

Миттєва зміна позиції (телепортація)

Переміщення ефекту через position створює плавний слід з частинок. Для миттєвої телепортації без сліду:

effect.resetPosition([newX, newY, 0]);
// З новим обертанням:
effect.resetPosition([newX, newY, 0], newRotationRadians);

Властивості емітерів

Керування відкритими властивостями емітерів під час роботи:

effect.setPropertyInAllEmitters('MyParticlesPerSecond', 100);
effect.setPropertyInAllEmitters('MyColor', [1.0, 0.5, 0.2]);

Кількість частинок

const numParticles = effect.getNumParticles();

Примітка: повертає кількість з попереднього кадру (асинхронне зчитування з GPU, без затримки GPU).

Більше прикладів

У neutrinoparticles.gpu.pixi7.samples ви знайдете багатий вибір прикладів використання на всі можливі випадки.

Переклад англійською

Для ChatGPT o1-mini:

Перклади простою англійською мовою, тільки в посиланнях заміни README.ua.md на README.md. Результат видай у вигляді похідного .md коду, щоб можна було скопіювати