NewsForumsCodeLogsGallerySpecsSearch

Turning Off Anti Aliasing

Monkey Forums/Monkey Programming/Turning Off Anti Aliasing

therevills(Posted 2011) [#1]
Flash

mojo.flash.as

Find all the instances of "bitmapData.draw" and change the last parameter to false.

Android

mojo.android.java

In the Bind method alter the gl.glTexParameterx calls from this:

gl.glTexParameterx( GL10.GL_TEXTURE_2D,GL10.GL_TEXTURE_MAG_FILTER,GL10.GL_LINEAR );
gl.glTexParameterx( GL10.GL_TEXTURE_2D,GL10.GL_TEXTURE_MIN_FILTER,GL10.GL_LINEAR );

to this:
gl.glTexParameterx( GL10.GL_TEXTURE_2D,GL10.GL_TEXTURE_MAG_FILTER,GL10.GL_NEAREST );
gl.glTexParameterx( GL10.GL_TEXTURE_2D,GL10.GL_TEXTURE_MIN_FILTER,GL10.GL_NEAREST );


GLFW and iOS

mojo.glfw.cpp and mojo.ios.cpp

In the LoadSurface method alter the glTexParameteri calls from this:
glTexParameteri( GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR );
glTexParameteri( GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR );

to
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST );
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST );


XNA

mojo.xna.cs

In the BeginRender method change the device.SamplerStates from
device.SamplerStates[0]=SamplerState.LinearClamp;

to
device.SamplerStates[0]=SamplerState.PointClamp;


HTML5

Depends on the browser???


matt(Posted 2011) [#2]
I think you mean turning off image-filtering rather than anti-aliasing?

From the wishlist thread:
@ErikT:
Monkey is great. But pleeeeeease add the option to turn off bilinear filtering for images! All pixelled graphics look incredibly ugly with filters applied. There's no reason not to add this option, is there?

Non-filtered resizing of images is only controllable in some web browsers.

Firefox 3.6+: https://developer.mozilla.org/En/CSS/Image-rendering
img { image-rendering: -moz-crisp-edges; }

IE8+: http://msdn.microsoft.com/en-us/library/ms530822(v=vs.85).aspx
img { -ms-interpolation-mode: nearest-neighbor; {

No solution currently for WebKit.

Safari: https://bugs.webkit.org/show_bug.cgi?id=40881
Chrome: http://code.google.com/p/chromium/issues/detail?id=1502


matt(Posted 2011) [#3]
Actually, in the webkit bug thread there's this note:

Comment #8 From Mike Lawther 2011-05-19 19:11:15 PST
The proposed value for CSS3's image-rendering 'optimize-contrast' has been implemented as '-webkit-optimize-contrast' in bug 56627. Right now in WebKit, using this will get you nearest-neighbour interpolation.

will give it a try in a bit.


therevills(Posted 2011) [#4]
Oppps yeah Anisotropic filtering ;)


matt(Posted 2011) [#5]
Try again! :)


therevills(Posted 2011) [#6]
LOL - please see the ;) in my last post :P


matt(Posted 2011) [#7]
Ah ;)


slenkar(Posted 2011) [#8]
good work therevills, does this speed up android and iOS rendering?


matt(Posted 2011) [#9]
The HTML5 fixes mentioned above apply to images in a document as well as the canvas. Tested in Chrome (v13 beta), Safari (WebKit nightly) and Firefox 4.01.

Here's an example of use on a canvas element: http://jsfiddle.net/gingerbeardman/XQkXy/

However, monkey still draws blurred sprites to the canvas even with the following CSS:
canvas, img {
	-ms-interpolation-mode: nearest-neighbor; //IE8+
	image-rendering: -moz-crisp-edges; //FF3.6+
	image-rendering: -webkit-optimize-contrast; //WebKit v?+
}

So there must be some extra changes needed in monkey to see the benefits of this in HTML5?


therevills(Posted 2011) [#10]
Just coded a quick example in Flash:

http://www.therevillsgames.com/monkey/Filtering/index.html

I've "hacked" mojo so I can switch between the different modes.

Quite a few people want this functionality - Mark please add it to Mojo offically :)


lom(Posted 2015) [#11]
Hi therevills,

Could you show an example code with switching between image filtering for Glfw target? Would be highly appreciated :)


Goodlookinguy(Posted 2015) [#12]
If anyone hasn't been keeping up with web browser progress, I just recently learned that Chrome finally added the ability to display pixelated content properly. I wonder why it took them so long. (as a note, I'm a year late finding out, but still...)

Solution: http://stackoverflow.com/a/14068216/1861610
Just make sure to switch out the "img" line with "canvas, img"

Also good information: https://developer.mozilla.org/en/docs/Web/CSS/image-rendering