I'm running into some unexpected caching behavior with Spine in PixiJS.
Package versions:
"pixi.js": "8.17.1"
"@esotericsoftware/spine-pixi-v8": "4.2.107"

Code example:

// STEP 1 — Load bundle

await Assets.loadBundle('preloader');

// Assets are now available
console.log([...Cache.keys()]); 
// = ['logoSkeleton', 'logoAtlas']

Assets.cache.has('logoSkeleton'); // = true
Assets.cache.has('logoAtlas');    // = true


// STEP 2 — Create first Spine instance
const spine = Spine.from({
  skeleton: 'logoSkeleton',
  atlas: 'logoAtlas'
});


// Cache AFTER creating Spine 
// record 'logoSkeleton-logoAtlas-1' added by Spine.from()
console.log([...Cache.keys()]); 
// = ['logoSkeleton', 'logoAtlas', 'logoSkeleton-logoAtlas-1']

Assets.cache.has('logoSkeleton') ;              // = true
Assets.cache.has('logoAtlas');                  // = true
Assets.cache.has('logoSkeleton-logoAtlas-1');   // = true


// STEP 3 — Unload bundle
await Assets.unloadBundle('preloader');


// Verify Assets cache is cleared
Assets.cache.has('logoSkeleton');               // = false
Assets.cache.has('logoAtlas');                  // = false
Assets.cache.has('logoSkeleton-logoAtlas-1');   // = true !!!


// Check Cache after unload
console.log([...Cache.keys()]); 
// = ['logoSkeleton-logoAtlas-1']
// ! Unload did not remove 'logoSkeleton-logoAtlas-1' from Cache


// STEP 4 — Create second Spine instance,
// still works because 'logoSkeleton-logoAtlas-1' is in Cache,
// even though original assets were unloaded
spine2 = Spine.from({
  skeleton: 'logoSkeleton',
  atlas: 'logoAtlas'
});

Expected behavior:
Spine.from() should throw because assets were unloaded.

I would expect that unloading a bundle remove all related assets => proper memory management.
I’ve confirmed that this works, but it doesn’t seem maintainable or flexible for future extensions:
Cache.remove('logoSkeleton-logoAtlas-1');

Any guidance?

// STEP 1 — Load bundle

await Assets.loadBundle('preloader');

// Assets are now available
console.log([...Cache.keys()]); 
// = ['logoSkeleton', 'logoAtlas']

Assets.cache.has('logoSkeleton'); // = true
Assets.cache.has('logoAtlas');    // = true


// STEP 2 — Create first Spine instance
const spine = Spine.from({
  skeleton: 'logoSkeleton',
  atlas: 'logoAtlas'
});


// Cache AFTER creating Spine 
// record 'logoSkeleton-logoAtlas-1' added by Spine.from()
console.log([...Cache.keys()]); 
// = ['logoSkeleton', 'logoAtlas', 'logoSkeleton-logoAtlas-1']

Assets.cache.has('logoSkeleton') ;              // = true
Assets.cache.has('logoAtlas');                  // = true
Assets.cache.has('logoSkeleton-logoAtlas-1');   // = true


// STEP 3 — Unload bundle
await Assets.unloadBundle('preloader');


// Verify Assets cache is cleared
Assets.cache.has('logoSkeleton');               // = false
Assets.cache.has('logoAtlas');                  // = false
Assets.cache.has('logoSkeleton-logoAtlas-1');   // = true !!!


// Check Cache after unload
console.log([...Cache.keys()]); 
// = ['logoSkeleton-logoAtlas-1']
// ! Unload did not remove 'logoSkeleton-logoAtlas-1' from Cache


// STEP 4 — Create second Spine instance,
// still works because 'logoSkeleton-logoAtlas-1' is in Cache,
// even though original assets were unloaded
spine2 = Spine.from({
  skeleton: 'logoSkeleton',
  atlas: 'logoAtlas'
});

I would expect that unloading a bundle remove all related assets.
Why is this not the case? Do I need to implement a workaround?
I’ve confirmed that this works, but it doesn’t seem maintainable or flexible for a larger codebase:

Cache.remove('logoSkeleton-logoAtlas-1');

and this one happened.
Asset id ./Assets/dragon-skeleton.atlas was not found in the Cache.
Cannot read properties of undefined (reading 'skeleton').

I got a pixijs v8.1.15
Is there any help for me?

Issues occur on an Iphone13 so I can't imagine what would happen on a lower-end device.

Here's how I'm using it:
The reel is passed as a source and a renderTexture is created from it, the reel itself is then not rendered anymore.

const createRt = (source, width = source.width, height = source.height) => {
  const texture = RenderTexture.create({ width, height });

  if (RENDERER.mask) {
    RENDERER.mask.enableScissor = true;
  }

  const updater = () => RENDERER.render(source, { renderTexture: texture });

  CombinedTicker.Ticker.add(updater);

  const sprite = new Sprite(texture);

  return sprite;
};

I have a surely a trivial question for some of you, but What is the good rule to have always  crispy texts in pixi.js.

Something like ?

 this.text = new PIXI.Text(this.model.text, this.model.style);

this.text.resolution = window.devicePixelRatio;

Currently I'm able to resizing the canvas keeping 16:9 aspect ratio for landscape and 9:16 for portrait, everything works fine in landscape because I firstly designed it this way. But when i rotate to portrait everything's off screen.
To fix this I think I should provide a resize method for every component and call them all together on resize event.

Does anybody know if there is a better way to achieve this?
I really found few topics talking about this so I think it could be interesting for everyone.

renderer.plugins.interaction.on('pointerdown'

However there doesn't seem to be anything similar for the event system.

Everything on internet is so old. What is the modern way to build pixi for native ?

Before years there was cocoonjs for games against cordova and phonegap. As I see cocoonjs is abandoned.

We want to make very simple, non-physics game at early. So we don't need phaser or some game engines. Just pure PIXI.

As details we prefer PIXI v.5 and typescript.

Using Pixi v5 and have it setup so that it detects support for WebGL and displays a 'browser not supported' message when not supported.  It should work fine on IE but for some other reason my project doesn't work and it doesn't even display an error in the console.  Really don't want to debug and figure out what's not working, so I'm tempted to just reject any IE browser. 

Does anyone else do this?

Looking at the stats, IE 11 is 1.5% of my visitors.

Also, if you don't bother with IE 11, do you go full ES6?

I can't figure out how to dynamically update the background color after that.

renderer.backgroundColor property seems to be deprecated in v7.

To start, I understand that Unity currently is the best choice for anyone who want to develop games for tvOS. But I've got some codebase in JS and I wanted to continue using it.

Then, I found that react native allows to develop for tvOS. But in this case I would need to use Skia as a rendering backend. Recently they added WebGPU support to react native, with Google's Dawn as backend (https://github.com/wcandillon/react-native-webgpu), but Dawn says that it doesn't support tvOS yet.

If Dawn supported tvOS, that would be amazing, because (if I understood it correctly) it would allow me to use pixi.js v8 on tv without even changing any codebase (because it supports WebGPU; Three.js supports it too and it can run on Dawn without code changes).

So until Dawn support for tvOS is available, what can I use instead? Is it true that I can use Skia, get it's rendering context and give it to pixi (not WebGPU, but WebGL or canvas, idk)? What do you think about the performance - would it be super slow or OK for some game with 20 spines on screen and +-200 sprites? Are there any alternative ways to develop with pixi for tvOS? How do you think - would it be hard and worth it to dig into Dawn's source code and implement tvOS support for them?

Thanks in advance for any of your thoughts.
Yurii.

Examples how it looks without scaling and with scaling I attached.

Would like to hear any advice on subject.

Thanks in advance!

When viewed on a 4k screen, the image renders nicely and the text is clear (see picture 1), but when I view the canvas on a 1080p screen, it gets blurry and aliased (see picture 2). It will also blur of I set the scale of the 4k screen high (like 200%) in windows.

I am using pixi-viewport to zoom in and out, so these comparisons were taken with the image at a similar zoom level.

I am rendering the sprite at a fixed width and height of 1191x842 (basically a3 aspect ratio). It is also the res of the core image file. This is still high enough to be clear when viewed on the 1080p screen with a normal photo viewer.

I have tried playing with the canvas resolution, setting it more or less than window.devicePixelRatio, changing the size of the sprite to higher and lower, changing the size of the canvas itself, but nothing seems to fix the blur on lower res screens reliably.

Should also mention that when I zoom in, the blur/aliasing goes away, and the text clears up. It's only when zoomed out that it appears.

Any help is appreciated, I feel like there is a gap in my understanding of how resolution/scale is handled with Pixi.

But instead I don't get anything, not even an error. But I see my uniforms filled in correctly (I think):

v7 code:
tutorialShaderFrag.txt

shaders.ts.txt

In my view I do following (uses pixi default vertex shader):

private filterShader: TutorialFilter = new TutorialFilter();

//... Apply
this.backgroundGraphic = new Pixi.Graphics();
this.backgroundGraphic.pivot.set(0.5, 0.5);
this.backgroundGraphic.beginFill(0xffffff);
this.backgroundGraphic.drawRect(-2000, -2000, 5000, 5000);
this.backgroundGraphic.endFill();
this.backgroundGraphic.filters = [this.filterShader];

// ... Update
this.filterShader.uniforms.uResolution = [appResolution.w, appResolution.h];
const rNormalized = transform.r / actualGameResolution.w;
this.filterShader.uniforms.uCirclePosition = [xNormalized, yNormalized];
this.filterShader.uniforms.uCircleRadius = rNormalized;
this.filterShader.uniforms.uSquashFactorY = transform.sy;

v8 code:

shaders.mts.txt

private filterShader: TutorialFilter = new TutorialFilter();

//... Apply
this.backgroundGraphic = new Pixi.Graphics();
this.backgroundGraphic.rect(-2000, -2000, 5000, 5000);
this.backgroundGraphic.fill({ color: 0xffffff });
this.backgroundGraphic.filters = [this.filterShader];

// ... Update
this.filterShader?.update({
    resolution: new Float32Array([appResolution.w, appResolution.h]),
    circlePosition: new Float32Array([xNormalized, yNormalized]),
    circleRadius: rNormalized,
    squashFactorY: transform.sy ?? 1.0,
    alpha: 0.8,
});

We also upgraded the project to ESM, but I don't think that is the issue. WebGL only, no WebGPU (yet).
The pixi version we use at the moment is v8.7.2.

I don't have a clue what I might have missed.

Thanks in advance!

I have three approaches:
1. Instance many unique graphics contexts

2. Instance many graphics objects sharing 1 of 4 GraphicsContexts

3. Use a sprite with 1 of 4 different textures

Results

The takeaway: sprites are way more performant.

The second takeaway: there is no point to use GraphicsContext asides from load time. This must be wrong though? I feel like it can't be right based off the pixi documentation. Maybe I am doing something wrong in my testing code.

Test code:

Many new unique Graphics objects

function createCirclesWithTint(app: PIXI.Application, count: number) {
    console.time('New Tint Approach');

    const circleContext = new PIXI.GraphicsContext()
        .circle(0,0,10)
        .fill(0xFFFFFF);

    for (let i = 0; i < count; i++) {
        // Generate random color
        const color = Math.random() * 0xFFFFFF;
        const circle = new PIXI.Graphics(circleContext);
        circle.tint = color;
        // Position randomly
        circle.x = Math.random() * app.screen.width;
        circle.y = Math.random() * app.screen.height;

        app.stage.addChild(circle);
    }

    console.timeEnd('New Tint Approach');
}

Shared Graphics Contexts

function createCirclesFromPalette(app: PIXI.Application, count: number) {
    console.time('New Palette Approach');

    const paletteContext1 = new PIXI.GraphicsContext()
        .circle(0,0,10)
        .fill(0xFFFFFF * Math.random());

    const paletteContext2 = new PIXI.GraphicsContext()
        .circle(0,0,10)
        .fill(0xFFFFFF * Math.random());
    const paletteContext3 = new PIXI.GraphicsContext()
        .circle(0,0,10)
        .fill(0xFFFFFF * Math.random());
    const paletteContext4 = new PIXI.GraphicsContext()
        .circle(0,0,10)
        .fill(0xFFFFFF * Math.random());

    const choices = [paletteContext1, paletteContext2, paletteContext3, paletteContext4]
    for (let i = 0; i < count; i++) {
        const circle = new PIXI.Graphics(choices[Math.floor(Math.random()*choices.length)]);
        // Position randomly
        circle.x = Math.random() * app.screen.width;
        circle.y = Math.random() * app.screen.height;
        app.stage.addChild(circle);
    }

    console.timeEnd('New Palette Approach');
}

Sprite Approach

async function createSprites(app: PIXI.Application, count: number) {
    console.time('New Sprite Approach');
    const tex1 = await PIXI.Assets.load(ImgSrc1);
    const tex2 = await PIXI.Assets.load(ImgSrc2);
    const tex3 = await PIXI.Assets.load(ImgSrc3);
    const tex4 = await PIXI.Assets.load(ImgSrc4);

    const choices = [tex1, tex2, tex3, tex4]
    for (let i = 0; i < count; i++) {
        const sprite = new PIXI.Sprite(choices[Math.floor(Math.random()*choices.length)]);
        sprite.anchor.set(0.5)
        // Position randomly
        sprite.x = Math.random() * app.screen.width;
        sprite.y = Math.random() * app.screen.height;
        app.stage.addChild(sprite);
    }

    console.timeEnd('New Sprite Approach');
}

I am porting a game from C to JavaScript and usng pixiJS as the renderer.

In the original C game there is a part in the code where a random number from 0 to 3 is generated, there is a texture that is 256 x 64 (4x1 of 64px tiles)and depending on the random number either the first, second, third or fourth tile is copied into the container.

I have been through the docs on renderTexture but I am finding it hard to understand how to do the part where I take only a single tile (a rectangle) from the source image and render it onto the renderTexture, is it possible?

many thanks for any help

James

async function animateSpineBoy() {
  PIXI.Assets.add({
    alias: "spineboyData",
    src: "/assets/spine/spineboy-pro.json",
  });
  PIXI.Assets.add({
    alias: "spineboyAtlas",
    src: "/assets/spine/spineboy-pro.atlas",
  });
  await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);

  const spineboy = Spine.from({
    atlas: "spineboyAtlas",
    skeleton: "spineboyData",
    scale: 1,
  });

  spineboy.label = "spineboy";
  spineboy.state.data.defaultMix = 0.2;

  spineboy.state.setAnimation(0, "walk", true);

  window.__MAIN_CONTAINER__.addChild(spineboy);

  spineboy.x = window.innerWidth / 2 - spineboy.width / 2;
  spineboy.y = window.innerHeight / 2 - spineboy.height / 2;
  spineboy.width = 400;
  spineboy.height = 600;

  console.log("size:", spineboy.getSize()); // returns size: {width: 0, height: 0}
  console.log("spineboy: ", spineboy);
}

My question is about "containsPoint" in PIXI v8, I developed a drag'n'drop module for my game. I use graphics and containsPoint to map my mouse coordinates to a polygon, ellipse, etc.

In pixi v7.x.x everything works very well, a couple of days ago I started porting my engine to v8, all the features work fine too. But when I started testing my DnD I saw a strange behavior, maybe it's a new behavior in v8 and it's part of optimization. When moving the graphic to a different position, the movement is not registered for containsPoint.

To understand what I'm talking about, below are some examples:

https://jsfiddle.net/Yarchick1034/vw5h7sfr/126/

https://jsfiddle.net/Yarchick1034/c6v4ym2f/40/

Does anyone know of a solution to this WebGL error on IE11?

"WEBGL11257: WebGL content is taking too long to render on your GPU. Temporarily switching to software rendering."

Should I be using the canvas renderer for IE11?

Maybe it will sounds strange but some modern browsers on old machines tries to render a WebGL content with CPU instead of using the GPU acceleration and obviously the perfomance is poor (happen on old Chrome 36 and IE11)

I'm asking for a method to check if the above is true and to switch the renderer into Canvas.

And one more question - Is there a way to run somekind of a simple "stress" test to detect poor WebGL performance?

Any help would be greatly appreciated.

p.s. sorry for my bad English

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Spine Animation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.5.10/browser/pixi.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pixi-spine@4.0.4/dist/pixi-spine.umd.js"></script>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        background-color: rgb(76.5, 76.5, 76.5);
        height: 100vh;
        width: 100vw;
      }
      canvas {
        width: 100%;
        height: 100%;
        display: block;
      }
    </style>
  </head>a
  <body id="container">
    <canvas id="canvas"></canvas>
      <div style="color: #fff; position: fixed; top: 0; width: 100%; display: flex; justify-content: center;">
          <span id="status"></span>
          &nbsp;
          <span id="animation"></span>
          &nbsp;
          <span>Render: </span><button id="render">Render next frame</button>
      </div>
    <script>
      var spineAnimation;
      var lastFrameTime;
      var canvas = document.getElementById("canvas");
      
      var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        if (!gl) {
            alert('WebGL is unavailable.');
        }

      var renderButton = document.getElementById('render');
      renderButton.addEventListener('click', render);

      const pixiapp = new PIXI.Application({
        width: window.innerWidth,
        height: window.innerHeight,
        transparent: true,
        backgroundAlpha: 0,
        view: document.getElementById("canvas"),
        resizeTo: document.getElementById("container")
      });

      document.body.appendChild(pixiapp.view);

      pixiapp.loader
        .add("spine", "./spines/Eff_UI_SumeruBirthFloatToyLoading_Spine01.skel")
        .load((loader, resources) => {
          try {
            document.getElementById("status").textContent = "Spine created, loading animation...";
            spineAnimation = new PIXI.spine.Spine(resources.spine.spineData);
            if (spineAnimation) {
              spineAnimation.scale.set(
                Math.min(
                  window.innerWidth / spineAnimation.spineData.width,
                  window.innerHeight / spineAnimation.spineData.height
                ) * 0.8
              );
              spineAnimation.x = window.innerWidth / 2;
              spineAnimation.y =
                pixiapp.screen.height / 2 + spineAnimation.height / 2;
              pixiapp.stage.addChild(spineAnimation);

              spineAnimation.skeleton.setToSetupPose();
              lastFrameTime = Date.now() / 1000;
              spineAnimation.state.setAnimation(0, "In", true);

              window.addEventListener("resize", () => {
                spineAnimation.scale.set(
                  Math.min(
                    window.innerWidth / spineAnimation.spineData.width,
                    window.innerHeight / spineAnimation.spineData.height
                  ) * 0.8
                );
                spineAnimation.x = window.innerWidth / 2;
                spineAnimation.y =
                  pixiapp.screen.height / 2 + spineAnimation.height / 2;
              });
              document.getElementById("status").textContent = "Animation loaded";
            }
            
            requestAnimationFrame(render);
          } catch (error) {
            console.error("Spine creation error: ", error);
          }
        });

      function render() {
        var state = spineAnimation.state;
        var skeleton = spineAnimation.skeleton;
        var animationDuration = spineAnimation.spineData.animations.find(animation => animation.name === "In").duration;
        var now = Date.now() / 1000;
        var delta = now - lastFrameTime;
        lastFrameTime = now;
        document.getElementById("animation").textContent = `now: ${now} delta: ${delta} anim: ${animationDuration}`;
        state.update(delta);
        state.apply(skeleton);
        // requestAnimationFrame(render);
      }
    </script>
  </body>
</html>

Eff_UI_SumeruBirthFloatToyLoading_Spine01.skel Eff_UI_SumeruBirthFloatToyLoading_Spine01.atlas

https://streamable.com/wdnbzt

Above is a video of how it behave. Any help is appreciated!

     |========|
     |                   |
---|------------|--------->
     |                   |
     |========|

where the box represents the viewable area, and as you can see there's a long line/path that starts from a point outside the visible area and also ends outside it (drawn here as a straight line for ease of demonstration, but it's a actually a bezier curve). So, while the start and end are not visible, the "center" portion of the path is.

The main problem I have is that there are a relatively large number of these paths, which are adding a performance overhead because they're rendered all the time, even when they are completely off-view. I could implement a naive culling technique based on the control points of the bezier curve, but that could also clip paths like in the example given, where a "portion" of them is actually visible.

Is there any way to make such an optimization?

I'm also happy to listen to alternative approaches to the problem of the performance load, in case this is not (easily) possible; because I could be going about this problem in a wrong direction. Thanks in advance