Pixel Perfect 2D rendering?

BlitzMax Forums/OpenGL Module/Pixel Perfect 2D rendering?

EOF	(Posted 2010) [#1]

Hi GLCoders,

How do I render pxiel-perfect 2D images?
Here is the original image:

This is what I am getting with my sample code (below). The pair of circles on the left are scaled to their natural size (1.0 , 1.0)
The circles over to the right are scaled at 1.5,1.5

I want to avoid all filtering and maintain a raw pixel perfect look

The code I am using is a modified version of slenkar's (credit due!)

EXAMPLE

' openGL - LoadImage

Strict
Framework BRL.Blitz
Import "GLGraphicsMicro.bmx"

AppTitle ="GL Test - LoadImage"
Const SW=512 , SH=300
Graphics SW,SH,0,30

Local img:TImage=TImage.Load("circles.png")

Repeat
	Cls
	img.SetScale
	img.Draw 10,50
	img.SetScale 1.5,1.5
	img.Draw 200,50
	Flip
Until KeyHit(KEY_ESCAPE)

End

IMPORT


Strict
Import BRL.PngLoader
Import PUB.OpenGL
Import BRL.GLGraphics
Import PUB.Glew

Global state_texenabled
Global state_boundtex

Type TImage
	Field num,path$,realwidth,realheight
	Field height#,width#
	Field handlex#,handley#
	Field scalex#=1.0 , scaley#=1.0
	Field vertex#[8]
	Field texcoord#[8]
	'
	Function Load:TImage(url:String)
		If FileType(url)=1
			Local pix:TPixmap=LoadPixmap(url)
			If pix=Null
				RuntimeError "Image not loaded: "+url
			EndIf
			pix=YFlipPixmap(pix)
			pix=MaskPixmap(pix,0,0,0)
			Local tex=GLTexFromPixmap(pix)
			Local i:TImage=New TImage
			i.num=tex ; i.path=url
			i.realwidth=PixmapWidth(pix)
			i.realheight=PixmapHeight(pix)
			i.width=i.realwidth ; i.height=i.realheight
			i.updateshape() ; i.ResetTexCoords()
			Return i
		Else
			RuntimeError "Image not found: "+url
		EndIf
	End Function
	'
	Method Draw(x,y,frame=0)
		EnableTex num
		gltranslatef(x,y,0)
		glscalef(scalex,scaley,1)
		glBegin(GL_QUADS)
	  	  glTexCoord2f(texcoord[0],texcoord[1])
		  glVertex2f(vertex[0],vertex[1] )
		  glTexCoord2f(texcoord[2],texcoord[3])
		  glVertex2f(vertex[2],vertex[3])
		  glTexCoord2f(texcoord[4],texcoord[5])
		  glVertex2f(vertex[4],vertex[5])
		  glTexCoord2f(texcoord[6],texcoord[7])
		  glVertex2f(vertex[6],vertex[7])
		glEnd()
		glloadidentity()
		DisableTex
		gltranslatef(0.375,0.375,0)
	End Method
	'
	Method SetScale(sx#=1.0,sy#=1.0)
		scalex=sx ; scaley=sy
	End Method
	' note: clockwise direction from top/left
	Method updateshape()
		vertex[0]=-handlex 		; vertex[1]=-handley
		vertex[2]=-handlex+width	; vertex[3]=-handley
		vertex[4]=-handlex+width	; vertex[5]=-handley+height
		vertex[6]=-handlex 		; vertex[7]=-handley+height
	End Method
	'
	Method ResetTexCoords()
		' anti-clockwise coords from bottom/left
		texcoord[0]=0.0 ; texcoord[1]=1.0
		texcoord[2]=1.0 ; texcoord[3]=1.0
		texcoord[4]=1.0 ; texcoord[5]=0.0
		texcoord[6]=0.0 ; texcoord[7]=0.0
		' clockwise coords from top/left
'		texcoord[0]=0.0 ; texcoord[1]=0.0
'		texcoord[2]=1.0 ; texcoord[3]=0.0
'		texcoord[4]=1.0 ; texcoord[5]=1.0
'		texcoord[6]=0.0 ; texcoord[7]=1.0
	End Method
	'
	Method SetHandle(x,y)
		handlex=x ; handley=y ; updateshape()
	End Method
	'
EndType

Function Graphics(xsize,ysize,screendepth=0,fps=30)
	GLGraphics(xsize,ysize,ScreenDepth,fps,GRAPHICS_BACKBUFFER|GRAPHICS_DEPTHBUFFER) '| BGL_FULLSCREEN
	glMatrixMode(GL_PROJECTION)
	glLoadIdentity()
	glClearColor(0,0,0,0)
	glOrtho (0,XSize, YSize,0,0,1)
	glDisable(GL_DEPTH_TEST)
	glMatrixMode (GL_MODELVIEW)
	glLoadIdentity()
	glTranslatef(0.375,0.375,0)
	glEnable(GL_BLEND)
	glEnable(GL_TEXTURE_2D)
	glenable(GL_SCISSOR_TEST)
	glscissor(0,0,xsize,ysize)
	glblendfunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA)
	Cls ; Flip ; Cls
EndFunction

Function Cls()
	glClear(GL_COLOR_BUFFER_BIT)
EndFunction

Function EnableTex(name)
	BindTex name
	If state_texenabled Return
	glEnable GL_TEXTURE_2D
	state_texenabled=True
End Function

Function DisableTex()
	If Not state_texenabled Return
	glDisable GL_TEXTURE_2D
	state_texenabled=False
End Function

Function BindTex( name )
	If name=state_boundtex Return
	glBindTexture GL_TEXTURE_2D,name
	state_boundtex=name
End Function

Function Pow2(v)
	Local p=2
	Repeat
		If v<=p Then Return p
		p:*2
	Forever
End Function

_JIM	(Posted 2010) [#2]

The first step in pixel-perfect rendering is to have the image be pixel-perfect in the graphics card's memory. Graphics cards always operate with power-of-two textures. If your texture is not pow2, it will scale it UP (using filtering) to the nearest pow2 texture.

I bet if your texture was 256x256 it would look sharp.

As for the second image, scaled to 150%, you will need to disable filtering. And for that, you will have to replace the GLTexFromPixmap function with a few lines of code:

Local texid:Int
glGenTextures(1, VarPtr(texid))
glBindTexture(GL_TEXTURE_2D, texid)
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST)
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST)
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, pix.Width, pix.Height, 0, GL_RGBA, GL_UNSIGNED_BYTE, pix.Pixels)
glBindTexture(GL_TEXTURE_2D, 0)

By default, I think GLTexFromPixmap uses GL_LINEAR as GL_TEXTURE_MIN_FILTER and GL_TEXTURE_MAX_FILTER. Using GL_NEAREST should disable filtering.

Good luck ;)

Kryzon

(Posted 2010) [#3]

That's the good thing of having the module's source for tampering...

I agree with the GL_NEAREST flag - although, that won't do much difference if you don't position the quads properly in the first place.

EOF	(Posted 2010) [#4]

Many thanks _JIM
Your replacement code worked straight off the bat

_JIM	(Posted 2010) [#5]

Always a pleasure to help :o)