DrawPoly Textured

Monkey Forums/Monkey Programming/DrawPoly Textured

Hezkore

(Posted 2014) [#1]

I know this has been discussed before and I know DrawPoly with a texture is experimental and that it doesn't work in HTML5.
But is there any way I can actually use DrawPoly with an image? I load an image and call DrawPoly(tri,myImage) but all I get is a line, which is "sorta" textured.

This is how it looks:

If I don't use an image, this is how it looks:

I only need it for PC and Android.

programmer

(Posted 2014) [#2]

' img is Image

Local imgWidth:Float = img.Width()
Local imgHeight:Float = img.Height()

Local displayWidth:Float = 300.0
Local displayHeight:Float = 300.0

DrawPoly(
	' Vertex Format: (x, y, u, v). UV is not normalized!
	' Triangle 1
	[0.0, 0.0, 0.0, 0.0, ' top-left vertex
	displayWidth, 0.0, imgWidth, 0.0, ' top-right vertex
	0.0, displayHeight, 0.0, imgHeight, ' bottom-left vertex
	' Triangle 2
	displayWidth, 0.0, imgWidth, 0.0, ' top-right vertex
	displayWidth, displayHeight, imgWidth, imgHeight, ' bottom-right vertex
	0.0, displayHeight, 0.0, imgHeight],  ' bottom-left vertex
	img)

P.S. Mungo's HTML5 WebGL renderer supports textured DrawPoly.

Raph	(Posted 2014) [#3]

Hmm, I just found that the textured DrawPoly in Mungo is not working for me, actually. I'll post in the Mungo thread about it.

IMMGames

(Posted 2014) [#4]

After having a look at the DrawPoly2 function, I noticed that you have to specify UV yourself.
Thank you "programmer" for the example!

Hezkore

(Posted 2014) [#5]

DrawPoly seems to be a bit buggy still.
If I don't draw anything else, DrawPoly won't show my picture.
But if I draw for example a rectangle before calling DrawPoly, it works just fine!
Maybe that's why it's not working in Mungo either?

Raph	(Posted 2014) [#6]

devolonter posted in the Mungo thread that DrawPoly2 isn't in the release yet, you need to actually grab it from source.

programmer

(Posted 2014) [#7]

I have found that textured DrawPoly uses vertices count to select render mode:
1 - point
2 - line
3 - triangle
4 - quad
5 and more - triangle fan(!!!)

i.e. you should call DrawPoly([array with 3 vertices], image) 2 times to draw 2 triangles in one OpenGL draw call.

Fixed example:

' img is Image

Local imgWidth:Float = img.Width()
Local imgHeight:Float = img.Height()

Local displayWidth:Float = 300.0
Local displayHeight:Float = 300.0

' Draw 2 triangles
DrawPoly(
	' Vertex Format: (x, y, u, v). UV is not normalized!
	' Triangle 1
	[0.0, 0.0, 0.0, 0.0, ' top-left vertex
	displayWidth, 0.0, imgWidth, 0.0, ' top-right vertex
	0.0, displayHeight, 0.0, imgHeight], ' bottom-left vertex
	img)
DrawPoly(
	' Triangle 2
	[displayWidth, 0.0, imgWidth, 0.0, ' top-right vertex
	displayWidth, displayHeight, imgWidth, imgHeight, ' bottom-right vertex
	0.0, displayHeight, 0.0, imgHeight],  ' bottom-left vertex
	img)

' Draw quad
DrawPoly(
	[0.0, 0.0, 0.0, 0.0, ' top-left vertex
	displayWidth, 0.0, imgWidth, 0.0, ' top-right vertex
	displayWidth, displayHeight, imgWidth, imgHeight, ' bottom-right vertex
	0.0, displayHeight, 0.0, imgHeight],  ' bottom-left vertex
	img)

Hezkore

(Posted 2014) [#8]

Thank you programmer.
Once I realized that you need to pass the UV's yourself, I quickly solved the issue and wrote a function that automatically takes care of the UV's for me, just the way I want.

GfK	(Posted 2014) [#9]

Jeez, been playing around with this and wondering what I'm doing wrong.... then find out that DrawPoly(verts[],image) doesn't even work in HTML5 (and this fact isn't documented anywhere, other than here on the forum).

Why not? I thought the idea of "code once, release many" was that all of it worked on all platforms? Currently using 79e which isn't even classed as 'experimental'.

That's two things I've tried in Monkey today (any form of accurate collisions, and this), and both have had problems.

Paul - Taiphoz

(Posted 2014) [#10]

If you solve the collision thing let us know.

Hezkore

(Posted 2014) [#11]

As mentioned above, Mungo supports textured DrawPolygon in WebGL mode, you can grab it over at http://mungo.io/ but I do agree that Monkey is very badly documented, which is odd cause I thought BlitzMax's documents were just fine. I personally think that there needs to be a Image flag for repeating the texture/image, it'd be perfect combined with DrawPolygon.

And I think I've seen some collision examples in the Code Archive - http://www.monkey-x.com/Community/topics.php?forum=212

SLotman

(Posted 2014) [#12]

I just found this online:

Function textureMap(ctx, texture, pts) {
    var tris = [[0, 1, 2], [2, 3, 0]]; // Split in two triangles
    For (var t=0; t<2; t++) {
        var pp = tris[t];
        var x0 = pts[pp[0]].x, x1 = pts[pp[1]].x, x2 = pts[pp[2]].x;
        var y0 = pts[pp[0]].y, y1 = pts[pp[1]].y, y2 = pts[pp[2]].y;
        var u0 = pts[pp[0]].u, u1 = pts[pp[1]].u, u2 = pts[pp[2]].u;
        var v0 = pts[pp[0]].v, v1 = pts[pp[1]].v, v2 = pts[pp[2]].v;

        // Set clipping area so that only pixels inside the triangle will
        // be affected by the image drawing operation
        ctx.save(); ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1);
        ctx.lineTo(x2, y2); ctx.closePath(); ctx.clip();

        // Compute matrix transform
        var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
        var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
        var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
        var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2
                      - v0*u1*x2 - u0*x1*v2;
        var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
        var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
        var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2
                      - v0*u1*y2 - u0*y1*v2;

        // Draw the transformed image
        ctx.transform(delta_a/delta, delta_d/delta,
                      delta_b/delta, delta_e/delta,
                      delta_c/delta, delta_f/delta);
        ctx.drawImage(texture, 0, 0);
        ctx.restore();
    }

I didn't had the time to test it yet, but maybe it will work for html5...

SLotman

(Posted 2014) [#13]

The code above is *almost* working!

For a quick test, I just replaced mojo's DrawPoly2 with the code below. I don't know why the top of the texture is being cut off a little bit - but other than that it looks pretty similar to what it should be (EDIT: I see now the top right of the image is wrong, don't know why...)

Note: The function below will only draw a QUAD, not a textured poly - I needed a quad, and just made it like that as a quick way to test it.

gxtkGraphics.prototype.DrawPoly2=function(pts, texture, srcx, srcy)
{
    for (var t=0; t<2; t++) {
        var x0, y0, x1, y1, x2, y2;
        var u0,u1,u2, v0,v1,v2;
        
        if (t==0)
        {
	        x0 = pts[0]; x1 = pts[4]; x2 = pts[8];
	        y0 = pts[1]; y1 = pts[5]; y2 = pts[9];
	        u0 = pts[2]; u1 = pts[6]; u2 = pts[10];
	        v0 = pts[3]; v1 = pts[7]; v2 = pts[11];
        } else {
	        x0 = pts[08]; x1 = pts[12]; x2 = pts[0];
	        y0 = pts[09]; y1 = pts[13]; y2 = pts[1];        	
	        u0 = pts[10]; u1 = pts[14]; u2 = pts[2];
	        v0 = pts[11]; v1 = pts[15]; v2 = pts[3];
        }

        // Set clipping area so that only pixels inside the triangle will
        // be affected by the image drawing operation
        this.gc.save(); this.gc.beginPath(); 
		  this.gc.moveTo( pts[0],pts[1] );
		  for( var i=4;i<pts.length;i+=4 ){
				this.gc.lineTo( pts[i],pts[i+1] );
	     }
		  this.gc.closePath(); 
		  this.gc.clip();
		  
        // Compute matrix transform
        var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
        var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
        var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
        var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
        var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
        var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
        var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;

        // Draw the transformed image
        this.gc.transform(delta_a/delta, delta_d/delta,
                          delta_b/delta, delta_e/delta,
                          delta_c/delta, delta_f/delta);
                      
        this.gc.drawImage(texture.image, 0,0);
        this.gc.restore();
    }
}

SLotman

(Posted 2014) [#14]

Yes! It works!! The answer is to actually draw the poly triangle by triangle!
Maybe now can someone re-write this to actually draw *any* polys...?

gxtkGraphics.prototype.DrawPoly2=function(pts, texture, srcx, srcy)
{
// 0,0,0,0, 128,50,128,0, 128,250,128,128, 0,300,0,128
    for (var t=0; t<2; t++) {
        var x0, y0, x1, y1, x2, y2;
        var u0,u1,u2, v0,v1,v2;
        
        if (t==0)
        {
	        x0 = pts[0]; x1 = pts[4]; x2 = pts[8];
	        y0 = pts[1]; y1 = pts[5]; y2 = pts[9];
	        u0 = pts[2]; u1 = pts[6]; u2 = pts[10];
	        v0 = pts[3]; v1 = pts[7]; v2 = pts[11];
        } else {
	        x0 = pts[08]; x1 = pts[12]; x2 = pts[0];
	        y0 = pts[09]; y1 = pts[13]; y2 = pts[1];        	
	        u0 = pts[10]; u1 = pts[14]; u2 = pts[2];
	        v0 = pts[11]; v1 = pts[15]; v2 = pts[3];
        }

        // Set clipping area so that only pixels inside the triangle will
        // be affected by the image drawing operation
        this.gc.save(); 
        this.gc.beginPath(); 

	     this.gc.moveTo(x0,y0);
	     this.gc.lineTo(x1,y1);
	     this.gc.lineTo(x2,y2);
	     this.gc.lineTo(x0,y0);
	     
		  this.gc.closePath(); 
		  this.gc.clip();
		  
        // Compute matrix transform
        var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
        var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
        var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
        var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
        var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
        var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
        var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;

        // Draw the transformed image
        this.gc.transform(delta_a/delta, delta_d/delta,
                          delta_b/delta, delta_e/delta,
                          delta_c/delta, delta_f/delta);
                      
        this.gc.drawImage(texture.image, 0,0);
        this.gc.restore();
    }
}

SLotman

(Posted 2014) [#15]

hmmm... is there a bug in DrawPoly?

I'm trying it both with my function above in HTML5 as well in Desktop... If I draw some images before calling DrawPoly, the polygons drawn afterwards will appear in the wrong places - If I don't draw any images with DrawImage, or if I draw then *after* DrawPoly, everything works as supposed.

Even if I surround all the 'DrawImage" calls with PushMatrix() and PopMatrix() the problem endures.

Edit: If I just call "DrawImage" without passing rotation or scaling parameters, everything works as it should... what could be the problem?!

Import mojo
Import autofit

#If TARGET="glfw"
	#GLFW_USE_MINGW=True
	#GLFW_WINDOW_TITLE="DrawPoly Test"
	#GLFW_WINDOW_WIDTH=800
	#GLFW_WINDOW_HEIGHT=480
	#GLFW_WINDOW_FULLSCREEN=False
	#MUSIC_FILES="*.wav|*.ogg"
#End

#MOJO_IMAGE_FILTERING_ENABLED=False

Class Game Extends App
	Field img:Image
	
	Method OnCreate()
		SetUpdateRate(60)
		SetVirtualDisplay 800,480
		
		img = LoadImage("wall.png")
	End Method
	
	Method OnRender()
	   UpdateVirtualDisplay(True)
		SetBlend 0
		SetAlpha 1
		Cls

		Local w:Float = img.Width()
		Local h:Float = img.Height()

		SetColor 255,255,255
		DrawImage img, 0,50, 0, 2,2,0
		
		SetColor 128,128,128
		DrawImage img, 320,100, 0, 1.25,1.25,0
		DrawImage img, 320+320,100, 0, 1.25,1.25,0
		
		DrawImage img, 520, 132, 0, 0.75,0.75,0

		
		' Draw quad
		' top-left, top-right, bottom-right, bottom-left
		SetColor 200,200,200
		Local verts:Float[] = [256.0,50.0,0,0,  256+64.0,50+50.0,w,0,  256+64.0,50+256-46.0,w,h, 256.0,50+256.0,0.0,h]
		DrawPoly(verts, img)

		SetColor 64,64,64
		Local pos:Float = 480
		Local verts2:Float[] = [pos,100.0,0.0,0.0, pos+40.0,132.0,w,0,  pos+40.0, 260-32,w,h, pos, 260.0, 0, h]
		DrawPoly(verts2, img)

	End Method
	
	Method OnUpdate()		
		If KeyHit(KEY_ESCAPE) Then Error ""
	End Method
End Class

Function Main()
	New Game()
End Function

SLotman

(Posted 2014) [#16]

Apparently, changing "DrawPoly" in graphics.monkey to this solved the issue:

Function DrawPoly( verts#[],image:Image,frame:Int=0 )
#If CONFIG="debug"
	DebugRenderDevice
	If frame<0 Or frame>=image.frames.Length Error "Invalid image frame"
#End
	context.Validate '<< added this here
	Local f:=image.frames[frame]
	renderDevice.DrawPoly2 verts,image.surface,f.x,f.y
End

Now to get colors to work with DrawPoly...

SLotman

(Posted 2014) [#17]

Yay, colors works now too!

gxtkGraphics.prototype.DrawPoly2=function(pts, texture, srcx, srcy)
{
// 0,0,0,0, 128,50,128,0, 128,250,128,128, 0,300,0,128
    for (var t=0; t<2; t++) {
        var x0, y0, x1, y1, x2, y2;
        var u0,u1,u2, v0,v1,v2;
        
        if (t==0)
        {
	        x0 = pts[0]; x1 = pts[4]; x2 = pts[8];
	        y0 = pts[1]; y1 = pts[5]; y2 = pts[9];
	        u0 = pts[2]; u1 = pts[6]; u2 = pts[10];
	        v0 = pts[3]; v1 = pts[7]; v2 = pts[11];
        } else {
	        x0 = pts[08]; x1 = pts[12]; x2 = pts[0];
	        y0 = pts[09]; y1 = pts[13]; y2 = pts[1];        	
	        u0 = pts[10]; u1 = pts[14]; u2 = pts[2];
	        v0 = pts[11]; v1 = pts[15]; v2 = pts[3];
        }

        // Set clipping area so that only pixels inside the triangle will
        // be affected by the image drawing operation
        this.gc.save(); 
        this.gc.beginPath(); 

        this.gc.moveTo(x0,y0);
        this.gc.lineTo(x1,y1);
        this.gc.lineTo(x2,y2);
        this.gc.lineTo(x0,y0);
        this.gc.closePath(); 
        this.gc.clip();
		  
        // Compute matrix transform
        var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
        var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
        var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
        var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
        var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
        var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
        var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;

        // Draw the transformed image
        this.gc.transform(delta_a/delta, delta_d/delta,
                          delta_b/delta, delta_e/delta,
                          delta_c/delta, delta_f/delta);
                      
		  if (this.white) 
		  {                    
	        this.gc.drawImage(texture.image, 0,0);
        } else {
			  this.DrawImageTinted( texture.image,0,0,0,0,texture.swidth,texture.sheight );        
		  }
        this.gc.restore();
    }
}

Nobuyuki

(Posted 2014) [#18]

submit patch !