Poor rendering performance, but why?

[jessegavin]

I am troubleshooting a rendering performance problem with PIXI.

I have an 1920 x 1080 image slideshow. The images fill the entire window and are scaled up if needed. Once an image has loaded, I load another image on top of that image (with alpha = 0) then fade it in. When the new image is faded in, the previous one is removed from the PIXI.Container.

All this works 100% awesome on my brand new MacBook Pro. 60fps, very low memory consumption. It's great!

But when I load it onto a BrightSign player (basically a ROKU box made specifically for Digital Signage) it has TERRIBLE performance.

I was able to attach a chrome debugger to the chromium instance on the player and found that it's running around ~10 fps on average.

The thing I don't understand is why each frame takes ~120ms. It looks like the CPU time for each frame is only around ~8ms max, sometimes a lot less.

Does anyone here know what might be causing this?

 

 

Here's my code in case it's helpful.

 

// Begin PixiPlugin Hack //////////////////////////////
//
//   This is the only way to force PixiPlugin to be included in the bundle
//
import PixiPlugin from "gsap/PixiPlugin";
var b = PixiPlugin;
console.log(b != null ? "PixiPlugin Loaded" : "");
// End PixiPlugin hack  //////////////////////////////

import { TimelineMax } from "gsap";
import { NewsFetcher, NewsItem } from "../data";
import { isWebGL, getScreenSize } from "../layout";

import { scalePhoto } from "../layout";

let fetcher = new NewsFetcher(window.model);

let begin = async () => {
  const screenSize = getScreenSize();
  const w = screenSize.width;
  const h = screenSize.height;

  let app = new PIXI.Application({
    width: screenSize.width,
    height: screenSize.height,
    antialias: true,
    forceCanvas: !isWebGL(),
    backgroundColor: 0x0
  });

  document.body.appendChild(app.view);

  const photoLayer = new PIXI.Container();
  app.stage.addChild(photoLayer);

  let index: number = 0;
  let content: NewsItem;
  const feed = fetcher.feed;

  const next = async () => {
    // The next() function will download the image and store it in the texture cache
    // if it is not already in the texture cache.
    content = await feed.next();

    // getImage() returns a new PIXI.Sprite using the texture from the cache
    let photo = content.getImage();
    scalePhoto(photo, screenSize);
    photo.position.set(w / 2 - photo.width / 2, h / 2 - photo.height / 2);
    photoLayer.addChild(photo);

    var tl = new TimelineMax({
      onComplete: () => {
        if (index > 0) {
          // Remove previous photo after new photo has faded in on top of it.
          photoLayer.children[0].destroy();
        }
        index++;
        next();
      }
    });

    // This just fades in the photo
    tl.from(photo, 1, { pixi: { alpha: 0 } }, 0);
  };

  next();
};

begin();

 

[ivan.popelyshev]

switch off antialias.