• Content Count

  • Joined

  • Last visited

  1. jessegavin

    Poor rendering performance, but why?

    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; // 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();
  2. jessegavin

    Adaptive playback

    TL;DR - How can I programmatically detect slow / choppy animation? My company uses pixi.js to create animations for digital signage (screens in waiting rooms, train stations, airports, billboards, etc). Our clients use a wide variety of hardware to display our animated content. Some of them are high powered, but most of them are pretty crappy. Most of our animations are rendered at HD (1920x1080) or 4K (3840x2160) and often have large images in them (news photo with headline). I have noticed on really low-end hardware when we animate the images using a ken-burns effect or a slide-in effect, the animation is VERY choppy, even for devices which support WebGL. We want to be able to programmatically detect choppy playback and use that info to adapt the animation. Here's some psuedo code... if (isLowQuality()) { // Show content without animation effects } else { // Use high-quality animation effects (filters, cross-fades, etc) } Does anyone here have advice how I could implement the isLowQuality() function? Do I measure average ticker.FPS over a few seconds? If so, what's the best way to do that? I am new to PIXI. Any help is appreciated