Fill Bezier curve with a texture using PIXI.Rope - V5

[ygorlf]

Hi folks,

I'm working with PIXI for a few months and Canvas2d for a few years I'm working on a rewrite of my app using PIXI and react.js and it's working pretty well.

I'm struglling only with strokes definition and already found a simple workaround:

 1 - draw all my shapes strokes on a single canvas context 

 2 - transform on a PIXI Texture to use on a simple Sprite

(I'm using in this way because the antialias config is causing a very significant performance loss on my app and it's not possible to use on elements level only on render)

 

This approach works really well for my static shapes but I'm also need strokes that move on the screen (lines in cubic bezier format). I have some movable squares that are attached to those lines and update the lines coordinates together.

So my natural approach is:

1- Draw the bezier using Graphics API

2 - Redraw on every move the new bezier coordinates

this is the result: https://codesandbox.io/s/pixi-bezier-example-bqgfn

It works but the quality of the line it's not very good with the antialias turned off so I end up with this idea of fill all the bezier points with a texture using a PIXI.Rope pretty similar to this:

https://codepen.io/osublake/pen/vNjjqa?editors=0010 (Still trying to grasp all the concepts and adapt to my use case)

@OSUblake I found this codepen and read some of your amazing examples here and other foruns, Is this approach possible? any thoughts on this are very welcome from anyone

[ivan.popelyshev]

> quality of the line it's not very good with the antialias turned off

the only way to make it better is to use Rope with a texture that has a gradient transparency on edge. or make your own shader for mesh. There's no silver bullet for this issue, webgl AA is broken.

Edited June 9, 2020 by ivan.popelyshev

[ygorlf]

Hi @ivan.popelyshev, thanks for the reply. I'll dig into the Rope Component and update my code.

[ygorlf]

@ivan.popelyshev the trick with the Rope and transparent texture works really well, thanks!

One last thing that I don't get yet, how can I update the points later? I tried to pass a new array of points to the Rope reference but it's not working

[ivan.popelyshev]

If docs & demo https://pixijs.io/examples/#/mesh-and-shaders/textured-mesh-basic.js is not enough for you, look in the source : https://github.com/pixijs/pixi.js/tree/dev/packages/mesh-extras/src . Clone pixi repo to your computer, open it in separate IDE window and search classes when you use them. PixiJS is not a black box.

[ygorlf]

My mistake, I need to update the points individually instead of pass a entire new Array. It's working now!

Thanks!!!

Edited June 10, 2020 by ygorlf