Setting PIXI.settings.RESOLUTION breaks iOS Webview

Expected Behavior

I have been using pixi successfully via Capacitor (Runs web apps in a webview, kinda like cordova did). I recently added ability to cache some complex elements via cacheAsBitmap, this worked but cached content was blurry. I was able to fix it by setting PIXI.settings.RESOLUTION = window.devicePixelRatio. This worked while I was testing in browser on my mac, but was broken when I tested my app in iOS simulator and actual iOS Device (iPhone XS). Note: No issues arise when setting Application resolution and PIXI.settings.FILTER_RESOLUTION. All of this works good.

Current Behavior

1. This is how scene looks on iOS simulator and actual device without PIXI.settings.RESOLUTION

1. This is how scene looks on iOS simulator with PIXI.settings.RESOLUTION. Notice how only text works, text is a BitmapFont / BitmapText

1. On actual iOS device with PIXI.settings.RESOLUTION set, application crashes with following error

2020-12-31 11:52:23.769068+0200 App[9255:2862777] [ProcessSuspension] 0x1078c5000 - ProcessAssertion: Failed to acquire RBS Background assertion 'ConnectionTerminationWatchdog' for process because PID is invalid
2020-12-31 11:52:23.771697+0200 App[9255:2862777] [Process] 0x103037618 - [pageProxyID=6, webPageID=7, PID=9256] WebPageProxy::processDidTerminate: (pid 9256), reason 3
2020-12-31 11:52:23.793303+0200 App[9255:2862777] [assertion] Error acquiring assertion: <Error Domain=RBSAssertionErrorDomain Code=2 "Specified target process does not exist" UserInfo={NSLocalizedFailureReason=Specified target process does not exist}>
2020-12-31 11:52:23.793385+0200 App[9255:2862777] [ProcessSuspension] 0x1078c5040 - ProcessAssertion: Failed to acquire RBS Background assertion 'WebProcess Background Assertion' for process with PID 9256, error: Error Domain=RBSAssertionErrorDomain Code=2 "Specified target process does not exist" UserInfo={NSLocalizedFailureReason=Specified target process does not exist}
2020-12-31 11:52:23.802323+0200 App[9255:2862777] [Loading] 0x103037618 - [pageProxyID=6, webPageID=7, PID=9256] WebPageProxy::dispatchProcessDidTerminate: reason = 3
2020-12-31 11:52:23.816338+0200 App[9255:2862777] [assertion] Error acquiring assertion: <Error Domain=RBSAssertionErrorDomain Code=2 "Specified target process does not exist" UserInfo={NSLocalizedFailureReason=Specified target process does not exist}>
2020-12-31 11:52:23.816590+0200 App[9255:2862777] [ProcessSuspension] 0x1078c5100 - ProcessAssertion: Failed to acquire RBS Background assertion 'WebProcess Background Assertion' for process with PID 9256, error: Error Domain=RBSAssertionErrorDomain Code=2 "Specified target process does not exist" UserInfo={NSLocalizedFailureReason=Specified target process does not exist}

Possible Solution

Not sure. I am also not entirely sure if this is issue related to pixi or WKWebView itself, but I decided to start here.

Steps to Reproduce

You’ll probably need to test this in XCode and set PIXI.settings.RESOLUTION = window.devicePixelRatio. I also use render textures as showcased below, doing so helps me to ensure assets are always ready in the game without any delays / extra work. Might be possible cause of the problem as well?

      // Create a loader, name is a string, image is an image source
      loader.add(name, image);
      loader.load((_, resources) => {
        // Get texture
        const texture = resources[name]?.texture;
        
        if (texture) {
          // Create sprite from texture
          const sprite = new Sprite(texture);
          const { width, height } = sprite;
          // Create render texture
          const renderTexture = RenderTexture.create({
            width,
            height
          });
          // Render the render texture
          renderer.render(sprite, renderTexture);
          // Create Spritesheet using renderTexture
          const sheet = new Spritesheet(renderTexture, json);
          // sheet is then stored and used as a texture source for all sprites in a game
        }
      });

Environment

• pixi.js version: 5.3.7
• Browser & Version: iOS WKWebView
• OS & Version: iOS 14.3
• Running Example: -

[themoonrat]

And just one final question, when I create cacheAsBitmap container, it does not re-create / copy that massive sprite-sheet graphic, it only creates image of what's inside of the container correct Think of cacheAsBitmap as ‘an automatic way to create, and use a render texture, based on the container and it’s contents, rather than render them all individually’. Plus sides; only have to render 1 texture now, rather than all the children, so can be quicker. Downside, it has to create this render texture, which has a 1 off little time to create, and will increase amount of memory the gpu is using. The problem you were having, was that the size of the renderTexture cacheAsBitmap was creating was bigger than the original sprite-sheet, because it was creating a render texture of the image dimensions * resolution, to keep the sharp look.

So this solves it for my personal use-case, I assume issue can be closed, or do you guys want to keep it open, as there was a mention of some clarifications / deprecation of related functionality in v6? We’ve already got this covered elsewhere, thank you, we just haven’t quite known what strategy to take to resolve 😃

[0xAsimetriq]

@themoonrat Ok, so with this further explanation I was able to achieve desired result by combining these:

1. Set PIXI.settings.RESOLUTION = devicePixelRatio
2. Set optional resolution argument of RenderTexture to 1
3. Remove resolution option from my Application completely

This results in a sharp looking app as well as all of my cacheAsBitmap textures looking sharp as well. I assume you need your sprite sheet exported at @3x for this approach to work as well.

As far as I can tell memory / power / cpu usage is also good 👍

So this solves it for my personal use-case, I assume issue can be closed, or do you guys want to keep it open, as there was a mention of some clarifications / deprecation of related functionality in v6?

And just one final question, when I create cacheAsBitmap container, it does not re-create / copy that massive sprite-sheet graphic, it only creates image of what’s inside of the container correct? And while using max of 2 for resolution looks a bit degraded, I set it to 2.6 and it feels good. There is no issue in using fractional values like that for resolution right?