Sign in to follow this  

Poor rendering performance, but why?

Recommended Posts

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


  const photoLayer = new PIXI.Container();

  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;

    // 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);

    var tl = new TimelineMax({
      onComplete: () => {
        if (index > 0) {
          // Remove previous photo after new photo has faded in on top of it.

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




Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.