NewsForumsCodeLogsGallerySpecsSearch

DrawPoly bug?

Monkey Forums/Monkey Bug Reports/DrawPoly bug?

SLotman(Posted 2014) [#1]
I'm doing something heavily using drawpoly, and then I found that this is happening at least on HTML5, Desktop, Android and WP8 targets: the texture is completely distorted, and I have no idea why.

Am I doing something wrong? Maybe passing the texture coords or the triangle data in a wrong order? Can anyone please verify or help out with this?

Screenshot:


The texture:

(save it as bars.png)

The sample code:
Import mojo

Class Game Extends App
	Field image:Image
	
	Method OnCreate()
		image = LoadImage("bars.png")
		SetUpdateRate(30)
	End Method
	
	Method OnRender()
		DrawPoly([0.0,0,0,0, 128,50,128,0, 128,250,128,128, 0,300,0,128], image)
	End Method
	
	Method OnUpdate()
		If KeyHit(KEY_ESCAPE) Then Error ""
	End Method
End Class

Function Main()
	New Game()
End Function



SLotman(Posted 2014) [#2]
There is something really strange going on... even if I split it into 2 triangles, the result is the same:

DrawPoly([0.0,0,0,0, 150,50,128,0, 150,150,128,128], image)		
DrawPoly([150.0,150,128,128, 0,200,0,128, 0,0,0,0], image)


Can anyone please help, or at least verify? I'm about to lose 2 weeks of work :(


skid(Posted 2014) [#3]
If you draw the outline of your trapezoid on a piece of paper and then add a single line to connect opposite corners you will see why the texture is being distorted when stretched onto two very different shaped triangles.


SLotman(Posted 2014) [#4]
I honestly have no idea why...

Ok, after reading this I understand a little better the problem.

But I still have no idea how to fix it, specially on HTML5 :(


Fred(Posted 2014) [#5]
You can subdivide your quads by 2 or 4, which means 8 or 32 triangles, but lowers a lot the issue.


SLotman(Posted 2014) [#6]
Yeah, I tried subdividing it into 10 triangles, and the results are much better - but on HTML5 the speed dropped below acceptable, so I have to think on something else...


SLotman(Posted 2014) [#7]
Maybe this could be of some use?

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_3d-transforms.htm
(This actually works on FF, Chrome and IE...!)

But I think it actually warps the whole canvas... if somehow you could snap a picture of it, and then draw it in place, I think it would be pretty damn fast...!


EDIT: Urg, nevermind. I'm tired, and not thinking straight... even if that worked, it would be only an html5 solution, wouldn't help other platforms at all :(