DrawPoly has gaps on HTLM5

Monkey Forums/Monkey Programming/DrawPoly has gaps on HTLM5

NoOdle

(Posted 2012) [#1]

I was writing some shape code last night when I noticed that DrawPoly had visible seams between edges that share the same coordinates. I opted to draw a line along the seam to hide it but it is still noticeable.

I was writing this piece of test code and noticed that its fine under GLFW; no seams! Anyone know why HTLM5 doesn't display this properly? (I know the shape can be drawn with one DrawPoly command; it has been done like this to illustrate the errors you would get when drawing concave shapes)

Import mojo


Class MyApp Extends App

	
	Method OnCreate()
		SetUpdateRate 60
	End Method
	


	Method OnUpdate()
	End Method
	


	Method OnRender()
		Cls 255, 255, 255

		'draws label
		DrawText "Broken", 100, 50
		

		'create a triangle
		Local points : Float[ 6 ]
		'a
		points[ 0 ] = 100
		points[ 1 ] = 200
		'b
		points[ 2 ] = 200
		points[ 3 ] = 110
		'c
		points[ 4 ] = 310
		points[ 5 ] = 220		
		
		
		'draw broken first part
		SetColor 0, 0, 0
		DrawPoly( points )


		'draw fixed first part
		PushMatrix
			Translate( 300, 0 )
			DrawPoly( points )
		PopMatrix
		

		'new b
		points[ 2 ] = 200
		points[ 3 ] = 300
		'draw broken second part
		DrawPoly( points )

		
		'draw fixed second part
		PushMatrix
			Translate( 300, 0 )
			DrawPoly( points )
			
			'draw line between then seam
			DrawLine points[ 0 ], points[ 1 ], points[ 4 ], points[ 5 ]
			
			'draws label
			SetColor 255, 255, 255
			DrawText "Fixed", 100, 50
		PopMatrix	
		
	End Method
	

End Class



Function Main()
	New MyApp()
End Function

Difference

(Posted 2012) [#2]

I think the current behavior is correct.

Edges can be antialiased, so separate polygons should not necessarily fit together.

I do agree that we need a method to draw concave polys.

That's why we need my DrawTriangles() to go into the main mojo stuff.

It is the only way to draw convex polys without gaps on all supported platforms.

http://monkeycoder.co.nz/Community/posts.php?topic=1905

http://whatsdabomb.com/stuff/monkeyvector.html

http://monkeycoder.co.nz/Community/posts.php?topic=2288

Please note that for HTML5, you can draw concave polygons without problems using the current DrawPoly().

NoOdle

(Posted 2012) [#3]

Yea I'm not bothered by the current behaviour but when trying to draw concave shapes it is a problem that doesn't have an ideal solution.

I really like your demo, I will have to mess about with your code, looks ideal though. Hopefully mark will add this!

Please note that for HTML5, you can draw concave polygons without problems using the current DrawPoly().

Do you mean convex? :)

Difference

(Posted 2012) [#4]

Convex too, but I mean http://en.wikipedia.org/wiki/Concave

HTML and Flash has DrawShape() handles all kinds of polys and that's what Mojo uses.

It's only for OpenGL and DirectX we need to triangulate.

in mojo.graphics put

Method DrawTriangles( verts#[],indexes[] )

in mojo.html5.js

gxtkGraphics.prototype.DrawTriangles=function( verts ,indexes){
	if( verts.length<6 ) return;
	this.gc.beginPath();

	for( var i=0;i<indexes.length;i+=3 ){
    
        this.gc.moveTo(verts[indexes[i]*2],verts[indexes[i]*2+1]); 
 	  	this.gc.lineTo(verts[indexes[i+1]*2+0],verts[indexes[i+1]*2+1]);
		this.gc.lineTo(verts[indexes[i+2]*2+0],verts[indexes[i+2]*2+1]);
               
		
	}
	this.gc.fill();
	this.gc.closePath();
}

I actually don't know if I'm allowed to post these, because they intertwine with the mojo source, so I'll stop here.

I have IOS, HTML, Flash, Android and GLFW versions.

NoOdle

(Posted 2012) [#5]

cheers, thats added, also needed

Function DrawTriangles( verts#[], indexes[] )
#If CONFIG="debug"
	DebugRenderDevice
#End
	ValidateMatrix
	renderDevice.DrawTriangles( verts, indexes )
End

JIM	(Posted 2012) [#6]

This might also be of use: http://monkeycoder.co.nz/Community/posts.php?topic=1994