2

I am building a game with PixiJS and need to use videos as the background. I am able to load the video and have it fill the canvas but when the video plays I get a major performance hit on the rest of the game.

I have seen something about rendering the video with its own ticker so it's not rendering at ~60fps but I have not been able to figure out how to add multiple ticker instances in PixiJS.

Here is my code for the video:

        let video = document.createElement('video');
        video.preload = 'auto';
        video.loop = true;
        video.autoplay = false;
        video.src = '../assets/placeholder/VIDEO FILE.mp4';
    
        let texture = PIXI.Texture.from(video);

        let videoSprite = new PIXI.Sprite(texture);

        app.stage.addChild(videoSprite);

And here is my render code:

function render() {
    app.ticker.add((delta) => {
        elapsed += delta;
    
        gameLoop()
    });
}

Is this the proper way to use video textures in PixiJS?

whoMe
  • 227
  • 2
  • 13
  • 1
    see: https://github.com/pixijs/pixijs/issues/4789#issuecomment-454189200 , https://github.com/pixijs/pixijs/commit/8e9402301da154286a07057416c19e0f8c164ddd , and `options.updateFPS` in https://pixijs.download/dev/docs/PIXI.VideoResource.html – domis86 Aug 10 '22 at 07:04
  • 2
    You could pre-process the video to lower the resolution, especially if it's a 4K video. – Kokodoko Aug 10 '22 at 11:59

1 Answers1

1

I was able to fix this issue using VideoResource and setting the FPS:

        const videoResource = new PIXI.resources.VideoResource(video); 

        videoResource.updateFPS = 30 // set video to render at 30FPS to avoid performance issues

        let texture = PIXI.Texture.from(videoResource);

        let videoSprite = new PIXI.Sprite(texture);

        this.backgroundVideo = videoSprite

        this.backgroundVideo.height = h
        this.backgroundVideo.width = w

        app.stage.addChild(this.backgroundVideo);
whoMe
  • 227
  • 2
  • 13