Poor performance with single physics object (Firefox?)

Hi,

I’m getting pretty choppy performance using Firefox with a very simple implementation of matter to simulate one object.

Either this is an issue with Firefox (?) or perhaps my code which I’ll add below. I really didn’t think that one physics object would lag the page like it does.

// --- matter.js ---
// Initialize world
let Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Vertices = Matter.Vertices,
Bodies = Matter.Bodies;

let engine = Engine.create(),
    world = engine.world;

// Setup when init() is called from a button press
function init() {
    let width = window.innerWidth;
    let height = Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight
    );

    let wrapper = document.querySelector('.wrapper-medium'),
        text = document.querySelector('p'),
        pic = document.getElementById('trigger');

    let wrapperBounds = wrapper.getBoundingClientRect(),
        textBounds = text.getBoundingClientRect(),
        picBounds = pic.getBoundingClientRect();

    let wrapWidth = wrapperBounds.width,
        textTop = textBounds.top + (575 / 2) + window.scrollY,
        picMiddle = (picBounds.bottom + picBounds.top) / 2;

    let picRatioX = pic.clientWidth/pic.naturalWidth,
        picRatioY = pic.clientHeight/pic.naturalHeight; 
        
    // Some random force
    let xforce = (Math.random() * 8) - 4,
        yforce = (Math.random() * 8) - 4;
    
    engine.events = {};
    World.clear(engine.world);
    Engine.clear(engine);
    
    engine = Engine.create();

    let render = Render.create({
        element: document.querySelector('#matter'),
        engine: engine,
        options: {
            wireframes: false,
            background: 'transparent',
            width: width,
            height: height
        }
    });
    
    // Custom object
    let facePath = Vertices.fromPath('387 30 202 11 92 63 67 259 169 472 250 489 347 440 440 136');
    Vertices.scale(facePath, picRatioX, picRatioY);

    let face = Bodies.fromVertices(width / 2, picMiddle, facePath,
    {
        density: 0.0025,
        restitution: 0.75,
        friction: 0.75,
        force: { x: xforce, y: yforce },
        render: {
            sprite: {
                texture: '../assets/images/profile-small.png', // set texture here
                xScale: picRatioX,
                yScale: picRatioY,
            }
        }
    }
    );

    // Add objects
    World.add(engine.world, [
        Bodies.rectangle(width / 2, height + 50, width, 100, {
            isStatic: true
        }),
        Bodies.rectangle(width / 2, -50 - window.scrollY, width, 100, {
            isStatic: true
        }),
        Bodies.rectangle(-50, height / 2, 100, height, {
            isStatic: true
        }),
        Bodies.rectangle(width + 50, height / 2, 100, height, {
            isStatic: true
        }),
        Bodies.rectangle(width / 2, textTop, wrapWidth, 575, {
            isStatic: true,
            friction: 0.75,
            render: {
            visible: false
            }
        }),
        face,
    ]);
    Engine.run(engine);
    Render.run(render);
}

[tommers-walker]

Hi Liam, firstly thank you for such an awesome library! 👍 Not sure whether to open a new issue or revisit this one, but we’re having issues with performance in Firefox. I’ve made a codepen and turned on debug mode: https://codepen.io/niceandserious/pen/e0448a9f65be6cf9e9526ba9a80795cc?editors=1010 In Chrome and Safari the fps stays at 60 but Firefox seems to really struggle, sometimes almost dropping to half that as the number of bodies increases. I tested it in wireframe mode as per your suggestion above and sure enough Firefox behaved. So I guess my question is is there a particular reason why Firefox struggles when using sprites?

[liabru]

@tommers-walker sorry I’d missed this earlier - interested to know if you did get to the bottom of it?

The way sprites work is pretty straightforward, just drawing an image to canvas in the usual way, so it could just be that Firefox has trouble with that so not sure if there’s something I can fix.

If it is just a browser limitation then you may need to look into alternatives like pixi.js which use WebGL and GPU instancing and might be better (but I’m not sure).