Pixi.js render + Matter.js wireframe

[nilwater]

Hi,

I've been trying out pixi.js lately and wanted to start adding physics. I'm currently looking at matter.js, and although it seems to work fine, one issue I'm having is that I can't (properly) draw the physics wireframes for debugging. I wanted to use the MatterJS/render module to draw the wireframes, but I couldn't get it to work on the Pixi canvas. I assume the reason is that MatterJs/Render is using the 2d context (https://github.com/liabru/matter-js/blob/5a0079df1b0a10b4ec5ef5e645d18b3e3910565c/src/render/Render.js#L89) but Pixi uses Webgl2.

The alternative was to add the MatterJs canvas on top of the Pixi canvas, and have that draw the wireframe. This worked, however I noticed extreme delays in the drawing of the frames (the pixi sprite was being drawn further than the wireframe at high velocity). I assume (and hope) that this is caused by the fact that there are multiple render loops with this method, and not because of faulty code. As far as I could see, collision looked fine.

 

So what I'm wondering; If I'm using Pixi + Matter, do I need to implement my own wireframe drawing in Pixi? Even though I don't think that would be too hard. Collecting all the bodies, mapping over their vertices, would probably be enough to draw all the lines with Pixi. But maybe I'm making this more difficult than necessary?

[ivan.popelyshev]

well if you have not many objects, you can just render everything in one PIXI.Graphics: iterate through all objects, look in fixtures, apply transforms to points - same way its done on canvas, just fill up Graphics. You can use nativeLine setting in line style to make them 1px thin - that'll be fastest mode. Of course, every frame pixi will upload new vertex buffer to gpu.

It can be optimized - separate tu multiple graphics, each one changes only transforms, so no buffer uploads, but at the same time it will cause 1000 drawcalls  To batch or not to batch - that is the question. Deal with that if your debug will be too slow with the naive approach.

[nilwater]

All right, you gave me a lot of useful suggestions. I'll implement it using PIXI.Graphics. Thank you!

[ivan.popelyshev]

Welcome to the forums