パフォーマンスの最大化: PixiJS 最適化の詳細

高度な戦略とテクニックで PixiJS アプリケーションを次のレベルに引き上げます

序文

この投稿では、CPU とメモリの両方の観点から pixiJS 内の複数の要素のレンダリングを最適化するさまざまな方法について説明します。たとえば、キャッシュを使用せずにすべてのフレームを再レンダリングする場合 (CPU 使用率の点でパフォーマンスが良好です)、またはレンダリングされたグラフィックスをメモリにキャッシュする場合の違いを考慮します。これにより、シーン内のグラフィックスの数に比例してメモリ使用量が増加します。

このような最適化に対処するための戦略は多数あります。特に注目すべきはデータ指向設計です。これは、より伝統的に一般的なオブジェクト指向のプログラミング方法とは根本的に異なる一連のアプローチを提示します。

その他の主な方法には、たとえば、C# の NativeArray や TypeScript の TypedArray など、より構造化された形式のカリングと利用が含まれます。これらにより、メモリ バッファの管理が大幅に強化され、キャッシュ ミスが制限される可能性がありますが、エンジニアリングの豊富な経験やカスタマイズも必要になります。

この投稿では、ベスト プラクティスを含む、PixiJS を使用した WebGL 環境の最適化の 1 つの有効な方法であるオブジェクト指向アプローチに焦点を当てます。これにより、PixiJS アプリケーションの速度と効率を向上させる、よく組織された手段が提供されます。

次回の記事では、別の強力な最適化アプローチであるエンティティ-コンポーネント-システム アプローチについて説明します。 ECS のアプローチは驚くほどデータ指向であり、高性能環境での PixiJS の最適化に関しては斬新な外観を提供します。この記事では、引き続き Medium で ECS アプローチの核心を詳しく説明します。

Pixi アプリケーションのパフォーマンスを最適化し、さらに向上させるために、もっと改善できることが常にあるということを常に覚えておいてください。より優れているとは、最も最適化されたり、最速になったりすることを意味するものではありません。最適な解決策は、リソースを過剰に拡張することなく潜在的なユーザーを満足させるのに十分な最適化を行いながら、プロジェクトの期限を確実に守るための、最適化に投資する時間とその投資収益率とのトレードオフの問題です。

オブジェクト指向アプローチ

このセクションでは、PixiJS アプリケーションを最適化する最良の方法を説明します。

このセクションは公式のヒントに基づいているため、確認する価値があります!

残りの議論は、Pixi グラフィックス、スプライト、メッシュ、およびデフォルトの Pixi コンテナの代わりにパーティクル コンテナをいつ使用するかを中心に展開します。この章では、PixiJS プロジェクトが機能し、最大限の効率でレンダリングされるように、オブジェクト指向のコンテキストですべてを最適に使用する方法を明確に示します。

Pixi グラフィックスの内部動作を理解する

Pixi グラフィックを効果的に使用するには、Pixi グラフィックが内部でどのように機能するかを理解する必要があります。それでは、Pixi でグラフィックス オブジェクトを作成する非常に基本的な例から始めましょう:

const graphics = new PIXI.Graphics();
graphics.beginFill(0xff0000);
graphics.drawRect(0, 0, 200, 100);
graphics.endFill();

この単純な実装で重要なのは、「内部で」何が起こるかということです。この種のグラフィックを作成する際、Pixi は GraphicsGeometry オブジェクトと呼ばれるものを作成します。そのオブジェクトの形状とサイズは、描画中の形状に対して指定した寸法とプロパティに基づいて決まります。最終的な Geometry オブジェクトは、Graphics オブジェクト内の GeometryList 内に保存されます。

PIXI.Graphics を使用して何かを描画するたびに、GeometryList が更新されることに注意してください。場合によっては、このリストをクリアしたいだけで、同時に Graphics オブジェクトを維持したいことがあります。そこで .clear() メソッドが活躍します。このプロセスがどのように機能するかを知ることは、Pixi がアプリ内でグラフィックを処理およびレンダリングする方法に直接影響するため、Pixi を使用する際に非常に役立ちます。

Pixi グラフィックスの最適化テクニック

PixiJS で 100 個の Graphics オブジェクトを作成するユースケースを通じて、最適化戦略を探ってみましょう。

function createGraphics(x, y) {
    const graphic = new PIXI.Graphics();
    graphic.beginFill(0xDE3249);
    graphic.drawCircle(x, y, 10);
    graphic.endFill();
    return graphic;
}

for (let i = 0; i < 100; i++) {
    const x = Math.random() * app.screen.width;
    const y = Math.random() * app.screen.height;
    const graphics = createGraphics(x, y);
    app.stage.addChild(graphic);
}

このシナリオでは、100 個のグラフィックス オブジェクトすべてが同じ幅と高さを共有している場合、ジオメトリを再利用することで最適化できます。

GraphicsGeometry を参照として渡す

円用の単一のジオメトリを作成し、それを再利用します。

// Create a single geometry for a circle
const circleGeometry = new PIXI.Graphics();
circleGeometry.beginFill(0xDE3249);
circleGeometry.drawCircle(0, 0, 10); // Draw a circle at the origin
circleGeometry.endFill();
// Function to create a graphic using the circle geometry
function createCircle(x, y) {
    const circle = new PIXI.Graphics(circleGeometry.geometry);
    circle.x = x;
    circle.y = y;
    return circle;
}
// Create 100 circles using the same geometry
for (let i = 0; i < 100; i++) {
    const x = Math.random() * app.screen.width;
    const y = Math.random() * app.screen.height;
    const circle = createCircle(x, y);
    app.stage.addChild(circle);
}

この方法では、オブジェクトごとにジオメトリを複製するのではなく、同じジオメトリを参照することでメモリ使用量が大幅に削減されます。

Draw All in One Graphics Object

For static graphics or complex structures, drawing all elements in a single Graphics object is another optimization technique:

const graphics = new PIXI.Graphics();
// Draw 100 circles using the same PIXI.Graphics instance
for (let i = 0; i < 100; i++) {
    const x = Math.random() * app.screen.width;
    const y = Math.random() * app.screen.height;
    graphics.beginFill(0xDE3249);
    graphics.drawCircle(x, y, 10);
    graphics.endFill();
}
// Add the graphics to the stage
app.stage.addChild(graphics);

In this approach, instead of creating new Graphics objects, we add new geometries to the GeometryList of a single Graphics instance. This method is particularly efficient for more complex graphic structures.

Leveraging the Power of CacheAsBitmap in PixiJS

One of the most powerful features within PixiJS is CacheAsBitmap. Essentially, it lets the engine treat graphics like sprites. This can bring performance up substantially in certain cases.

• Only use CacheAsBitmap if the object is not updated too often.

• Big batch of Graphics can be cached as bitmap in container. Instead having 100 Graphics re-rendered, pixi will take a snapshot and pre-render it as a bitmap.

• Always consider the memory usage, cached bitmaps are using a lot of memory.

When to Use CacheAsBitmap

One should use cacheAsBitmap judiciously. It will be most effective when applied to objects that need to update seldom. For instance, if one happens to have thousands of volume of Graphics that are static or have only a rare change, caching them as a bitmap radically reduces rendering overhead.

Instead of re-rendering 100 individual Graphics, PixiJS can take a 'snapshot' of these and render them as single bitmap. This is how you can implement:

const graphicsContainer = new PIXI.Container();
// Add your graphics to the container
// ...
// Cache the entire container as a bitmap
graphicsContainer.cacheAsBitmap = true;

Memory Usage Consideration

However, it's important to be mindful of memory usage. Cached bitmaps can consume a significant amount of memory. Therefore, while cacheAsBitmap can drastically reduce the rendering load, it trades off by using more memory. This trade-off should be carefully considered based on the specific needs and constraints of your application.

In summary, cacheAsBitmap is an effective tool for optimizing performance in PixiJS, particularly for static or seldom-updated graphics. It simplifies rendering by treating complex graphics as single bitmaps, but it's essential to balance this with the memory footprint implications.

Why Sprites Are Often More Efficient than Graphics in PixiJS

When it comes to memory efficiency in PixiJS, sprites generally have the upper hand over graphics. This is particularly evident when dealing with multiple objects that share the same shape or texture. Let's revisit the example of creating 100 circle graphics, but this time using sprites.

Creating Sprites from a Single Texture

First, we create a texture from the geometry of a single circle graphic:

const circleGraphic = new PIXI.Graphics();
circleGraphic.beginFill(0xDE3249);
circleGraphic.drawCircle(0, 0, 10);
circleGraphic.endFill();
// Generate a texture from the graphic
const circleTexture = app.renderer.generateTexture(circleGraphic);
Next, we use this texture to create sprites:
// Function to create a sprite using the circle texture
function createCircleSprite(x, y) {
    const sprite = new PIXI.Sprite(circleTexture);
    sprite.x = x;
    sprite.y = y;
    return sprite;
}

// Create and add 100 circle sprites to the stage
for (let i = 0; i < 100; i++) {
    const x = Math.random() * app.screen.width;
    const y = Math.random() * app.screen.height;
    const circleSprite = createCircleSprite(x, y);
    app.stage.addChild(circleSprite);
}

In this approach, instead of re-rendering graphics and managing a growing geometry list for each object, we create one texture and reuse it across multiple sprites. This significantly reduces the rendering load and memory usage.

Limitations and Creative Solutions

One limitation of this method is that you're constrained by the textures you've created. However, this is where creativity becomes key. You can generate various shaped textures using PIXI.Graphics and apply them to Sprites. An especially efficient approach is to create a baseTexture, like a 1x1 pixel bitmap, and reuse it for all rectangular sprites. By resizing the sprite to different dimensions, you can leverage the same baseTexture across multiple sprites without redundancy.
For instance:

// This creates a 16x16 white texture
const baseTexture = PIXI.Texture.WHITE;

// Use this baseTexture for all rectangular shapes
const sprite= new PIXI.Sprite(baseTexture);
sprite.tint = 0xDE3249; // Set the sprite color
sprite.position.set(x, y);
sprite.width = width;
sprite.height = height;

With this method, .tint() allows you to color the sprite without triggering a full re-render, as the tint is applied as an additional shader effect directly on the GPU.

Using 100k Sprites in Particle Container

To illustrate the power of this technique, imagine running 100,000 individual sprites with random tints, each transforming on every frame, all while maintaining a smooth 60 FPS.

For further reading on optimizing PixiJS, I highly recommend an insightful article by one of the original creators of PixiJS, which delves deeply into the renderTexture technique. 

You can find it here

すごい! ここまで進んでいただいた方、PixiJS の最適化に関するこの詳細な説明にお付き合いいただき、心から感謝いたします。ここで共有した洞察とテクニックがあなたのプロジェクトにとって有益であると感じていただければ幸いです。次回の記事にご期待ください。そこでは、Entity-Component-System (ECS) アプローチと NativeArrays の力についてさらに詳しく説明します。これらの方法により、PixiJS アプリケーションのパフォーマンスと効率性が新たな高みに引き上げられます。読んでいただきありがとうございます。また次回でお会いしましょう!

以上がパフォーマンスの最大化: PixiJS 最適化の詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。