Difficulty drawing pixel-accurate images in iOS 10.1 GLES2

[kylemcdonald]

trafficstars

When I draw an image that's made up of alternating black and white pixels like this:

    for(int y = 0; y < h; y++) {
        for(int x = 0; x < w; x++) {
            bool on = x % 2 == 0 && y % 2 == 0;
            img.setColor(x, y, on ? ofColor::white : ofColor::black);
        }
    }

(Inverse of the pattern here.) Then I get moire patterns.

The above test is with ES2 and with 4-sample antialiasing enabled. Disabling antialiasing changes the pattern but does not remove the moire. ES1 does not show a moire pattern regardless of whether antialiasing is true or false.

I checked out the latest OF, pulled libs, and created a project with the project generator (copied from the 0.9.8-ios release). I'm running iOS 10.1 and XCode 8.1.

If I add the line ofSetupScreenOrtho(ofGetWidth(), ofGetHeight(), -1, +1); at the top of draw() then everything is ok on the real hardware. In the simulator the pattern is still "blurry" (instead of a 2x2 square being [255, 0, 0, 0] it's [149, 43, 43, 17]) but there is no moire. I tried checking if the difference between the hardware and the simulator is due to floating point accuracy, but I think it must be the graphics card. Because the matrices computed by ofSetupScreenOrtho() are exactly the same.

[arturoc]

i suppose you are drawing the image with it's original size right?

by antialiasing you mean ofDisableAntialiasing()? that shouldn't make any difference for images. have you tried what happens if you use nearest neighbour for min mag filters in the image texture?

[danoli3]

It's probably the floating point accuracy the embedded ES2 default shader ... now where is that...

[kylemcdonald]

@arturoc yes the image is being drawn at its original size with img.draw(0,0); by disabling antialiasing I mean ofxiOSWindowSettings::enableAntiAliasing and ofxiOSWindowSettings::numOfAntiAliasingSamples which I think controls how everything is drawn, not just shapes.

I haven't tried setting the min/mag filters yet.

Also @danoli3 I haven't looked into the ES2 default shader, that sounds way more likely to me...

[dimitre]

Maybe related to ofTexture hack? bTexHackEnabled

here is a comment from the code :

	// -------------------------------------------------
	// complete hack to remove border artifacts.
	// slightly, slightly alters an image, scaling...
	// to remove the border.
	// we need a better solution for this, but
	// to constantly add a 2 pixel border on all uploaded images
	// is insane..

[danoli3]

Pretty common to pad textures 2-4 pixels on edge to fix this issue in asset i.e sprite sheets. Commonplace in other engines automatically in packers to prevent this.

Software edge hack needed on old gpu sampling where assets not given padding.

I disabled texture hack and applied padding to sprite sheets in the past which solved this one

On Sat, 7 May 2022 at 1:15 pm, Dimitre @.***> wrote:

Maybe related to ofTexture hack? bTexHackEnabled

here is a comment from the code :

// ------------------------------------------------- // complete hack to remove border artifacts. // slightly, slightly alters an image, scaling... // to remove the border. // we need a better solution for this, but // to constantly add a 2 pixel border on all uploaded images // is insane..

indeed insane

— Reply to this email directly, view it on GitHub https://github.com/openframeworks/openFrameworks/issues/5381#issuecomment-1120121722, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGK2HGFEACSBDHL2KUC6ULVIXN55ANCNFSM4CYMXFDA . You are receiving this because you were mentioned.Message ID: @.***>

[dimitre]

nice! should it be disabled for iOS? what do you think @danoli3 ?

[dimitre]

related issue : https://github.com/openframeworks/openFrameworks/issues/2372