CODEWITHSUNDEEP
javascripthtml5-canvaswebglpixi.js
whoMe
whoMe

Reputation: 247

How to render videos in PixiJS without lowering performance

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?

Upvotes: 2

Views: 3100

Answers (1)

whoMe
whoMe

Reputation: 247

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

Upvotes: 1

Related Questions