Jump to content

Shape too complex to fill


Recommended Posts



First of all, thanks for the great library!


I'm using the WebGLRenderer and I am rendering a number of polygons (actually convex 4-gons) into a single PIXI.Graphics instance. They are adjacent to each other, and I'm receiving the error "Shape too complex to fill" -- unsurprisingly certain polygons aren't getting filled.


If I don't use a lineStyle then the error goes away. Also, if I use a lineStyle but don't connect back to the initial point (for each polygon), again the error goes away, although now I'm missing a line.


Although I haven't tried it, I suspect the problem should also go away if I use multiple PIXI.Graphics instances. However, this will mean a lot of instances (which are also continually changing)... and will probably effect performance (?).

Is there any way around this?


Many thanks,




Link to comment
Share on other sites

I don't think there is anything wrong with the code... I say this because it works fine when I don't use lineStyle.


Anyway, here is the function which draws the polygons.



g = the single PIXI.Graphics instance used to draw all the polygons.

camera = an object I'm using to project 3d points, which take the form this[0], this[1], ... 

render : function(g,camera){		var i, proj;		g.beginFill(0x000000);		//g.lineStyle(0.1, 0xFF0000, 1);		proj = camera.project3d(this[0]);		g.moveTo(proj.x,proj.y);		for(i = 1; i < this.length; i++){			proj = camera.project3d(this[i]);			g.lineTo(proj.x,proj.y);		}		//proj = camera.project3d(this[0]);		//g.lineTo(proj.x,proj.y);		g.endFill();	},

If I uncomment "g.lineStyle(0.1, 0xFF0000, 1);" then I get polygons with red borders on 3 of the 4 sides (as expected).

However, if I also uncomment the other two lines, so that I am completing the polygon, then I sometimes get the error "Shape too complex to fill".


Perhaps this happens because I am drawing many polygons adjacent to each other?




Link to comment
Share on other sites



I include three pictures.

For the first two I am using the WebGLRenderer.


1. I use lineStyle and close each polygon (I get "Shape too complex..." errors):




2. I use lineStyle and I do *not* close each polygon (I get no errors):




Note that one edge of each polygon is not drawn in red.


3. Finally, if I use the CanvasRenderer then I get the best image (and no errors), whether or not I close each polygon.





Thanks a lot for your help.

Link to comment
Share on other sites

Sadly not.


The errors change dependent upon whether antialiasing is on, and even then the lines aren't rendered properly (see the first two diagrams above, I have no control over the red lines).

It might be because I'm using a 2008 Mac, which possibly has dodgy webgl drivers, although I'm reaching here.


Anyway, thanks for the suggestion.

Link to comment
Share on other sites

Ah well, maybe I was right.



It seems that in Chrome I need "Override Rendering List" enabled for PIXI to detect WebGL, which means my configuration is unsupported.



I was never seeing any errors with the canvas renderer, so I guess this problem is solved.

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