Jump to content

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


Recommended Posts

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

Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

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.

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