Draw concave polygon
Monkey Forums/Monkey Programming/Draw concave polygon
| ||
| DrawPoly is designed for convex polygons. I need a idea, how i can draw a concave polygon. For my game, i can split such polygon in "quads" So drawing in not the problem. But i have another problem. I have some space between quads, if they are rotated/scaled. i can see some "background-lines" on Flash and HTML, due to antialiasing effects i can also not size up quads, because i use half-transparent alpha |
| ||
| I don't think there's an easy way to avoid the background lines, unless you do some custom work in the back buffer to make images of polygons. Have you looked to see if there's a native way of drawing concave polygons on your target? |
| ||
| http://monkeycoder.co.nz/Community/posts.php?topic=1994 Tada! :) |
| ||
| @JIM your code do not work: i get this result on HTML (firefox) http://www.pasteall.org/pic/show.php?id=51707 do you see, lines between triangles? |
| ||
| You need to draw all the triangles in a single path to avoid the canvas anti-aliasing causing problems (although behaviour across browsers may not be consistent). Some code was posted here that you can repurpose: http://www.monkeycoder.co.nz/Community/posts.php?topic=2469 |
| ||
| it is funny, that DrawPoly work with concave and convex polys on HTML & Flash. This is by design of it - and should work for every browser. But on DX/OpenGL this is not by design - so concave poly is wrong and must splitted to tris. Interesting is also, that on DX/OpenGL i do not see space between polys. |
| ||
| Well, in my game I actually left the DrawPoly as it was for HTML5, and used my function for all other targets. The difference is that in HTML5, antialiasing is enabled by default, whereas on the others it is disabled. Those errors are caused by antialiasing and the code muddy_shoes posted should do the trick in case you want to enable antialiasing on other targets. |
| ||
| i tested on XNA/Glfw/Android with AA and without, and it works fine... FF/HTML5 do AA a bit different |
| ||
| The difference is the lack of batching in the HTML5 mojo code. When you draw polygons they are rendered immediately and AA applied at that point. As such there's no way for the renderer to know that it's creating a seam. The code I referenced includes all the triangles in one path, so AA occurs on the whole render and internal seams can be eliminated. |
| ||
| Not done anything in 3D yet but the sounds increadibly inefficient would it not be many times faster to only apply the aa etc once the rendering is done or is there a reason marks done it like that ? |
| ||
| The Canvas renderer doesn't "naturally" batch primitives, while OpenGL pushes that model. Things like varying the colour across primitive batches isn't possible in basic HTML5 rendering but can be done in OGL. Shifting the HTML5 renderer to webGL would probably make it possible to smooth out these differences but any other/future target that focused on immediate rendering rather than batched would have the same issue. Not sure what Flash does behind the scenes for instance or if Stage3D would be a possible route to homogenising the behaviour. Oh, and this isn't a 3D issue. Most people who spot the issue are doing 2D with vector graphics/tiled engines. |
| ||
| I think Monkey needs a VectorImage object just like it has an Image object. This will allow the best drawing method for each target. I've experimented quite a bit with this and I think a VectorImage/Shape thingy will be the best solution, because the optimal drawing methods are very different across targets. Hopefully this could open up for SVG support too. I also think it would be a good base for vector fonts. I'm currently using hacked in versions of: DrawTriangles(verts:Float[],indexes:int[]) '( for concave polyguns ) DrawTrinagleStrip(verts:Float[]) '( for thick lines ) It works ok. but it does not make much sense on HTML5 where it's faster to use other methods. |
| ||
| VectorImage looks like a good idea. |
   |