How to do 2D morphing with Pixi.js

[vavouweb]

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 ;)

 

Thanks,

Evan 

[Exca]

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.

[ivan.popelyshev]

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