Jump to content

How to do 2D morphing with Pixi.js


Recommended Posts

Hi guys,

Here is I would like to achieve : morphing simple 2D shapes (polygons with like 15/20 vertices) using WebGL. People told me Pixi.js would be a good move to do this, but I don't see how I could achieve that for now (using vertex sharders? trying to render svg paths into webgl? ...)

I'd be glad you had any idea/track to explore to realize that ;)




Link to comment
Share on other sites

You have some options.

1. Create a mesh and update it's vertices. This requires uploading of vertices to gpu everytime they change.
2. Create a mesh with custom vertex shader and update the vertice positions on gpu. Fastest option. Pretty hard to do on pixi v4.
3. Create graphics object and do a clear/redraw everytime points change. This will use 2d canvas offscreen texture to draw the image using only cpu.
4. Draw svg into a texture and use that.

I would suggest number 1. from that list fro 15-20 vertices. Assuming you dont need 2d canvas support. If you do, then maybe 3.

There might also be some other methods that I'm not familiar with.

Link to comment
Share on other sites

1. Changing vertices in heaven meshes: https://gameofbombs.github.io/examples-heaven/#/mesh/plane.js ,  (requires https://github.com/gameofbombs/pixi-heaven)

2. Custom shader for sprites via https://github.com/pixijs/pixi-plugin-example or https://github.com/gameofbombs/pixi-heaven or https://github.com/pixijs/pixi-projection  (Requires some knowledge on pixi internals.)



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...