Jump to content

Pixi.js render + Matter.js wireframe


Recommended Posts


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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...