Matter-js: Question: how to texture the cloth/softbody example?

[davidjeliba]

Hi @liabru,

I am attempting to add texture to each of the squares in the cloth example. I can see from enabling the wireframes that the cloth is actually a series of circles:

When I apply a texture, I get:

Which adds the textures to the circles with no cropping. The second screenshot highlights what I would like to do. If the cloth is stretched I would like for the texture to be applied to the warped square, not to the circle.

Is there a way to achieve this?

[liabru]

Texturing a 'mesh' like this isn't built in (it's out of the scope of the project), so you'll need to write your own renderer to do this. I suggest reading the rendering wiki page. To render a textured mesh you could either use a 2d canvas with context.fillStyle set to a CanvasPattern (like in this example) or look into something like three.js.

[davidjeliba]

Thanks for your reply, the fill style on the 2d canvas seems to be in the right direction!

[Nikistorm]

Could u please show how to solve?

[7ammer]

Perhaps you could use pixi.js as the renderer and matter.js for the physics?

Here is an example of pixi warping a snake texture
https://pixijs.io/examples/?v=next#/basics/textured-mesh.js

[gevgeny]

I solved it via applying PIXI.mesh.Plane to softBody but FPS became much lower.

[robksawyer]

@gevgeny can you provide a link to your solve? I’d like to see how you implemented it. Thanks and nice work!

[gevgeny]

Sorry I cannot publish source, but basic idea I have found here https://codepen.io/shshaw/pen/JbrQrW.