iOS bug drawing with FBO and ofSetOrientation.

[ofTheo]

Found a different bug which prevents drawing on iOS except in Portrait mode.

It looks like when FBOs are being drawn in landscape mode they are being drawn backwards somehow? There is a big black triangle over part of the image.

//--------------------------------------------------------------
void ofApp::setup(){
    ofSetOrientation(OF_ORIENTATION_90_RIGHT);

    fbo.allocate(1024, 1024, GL_RGBA);

    fbo.begin();
    
        ofClear(255, 255, 255, 255);
        ofSetColor(255, 0, 0);
        ofDrawCircle(ofGetWidth()/2, ofGetHeight()/2, 300);
    
    fbo.end();


}
//--------------------------------------------------------------
void ofApp::update(){
}

//--------------------------------------------------------------
void ofApp::draw(){
    ofBackground(0);
    
    if( bRotate ){
        ofSetOrientation(OF_ORIENTATION_90_RIGHT);//Set iOS to Orientation Landscape Right
    }else{
        ofSetOrientation(OF_ORIENTATION_DEFAULT);//Set iOS to Portrait
    }
    
    ofSetColor(255);
    fbo.draw(0,0);
}

//--------------------------------------------------------------
void ofApp::exit(){    
}

//--------------------------------------------------------------
void ofApp::touchDown(ofTouchEventArgs & touch){
	bRotate = true;
}

//--------------------------------------------------------------
void ofApp::touchMoved(ofTouchEventArgs & touch){
}

//--------------------------------------------------------------
void ofApp::touchUp(ofTouchEventArgs & touch){
	bRotate = false;
}

This is what it looks like if you have ofSetOrientation(OF_ORIENTATION_90_RIGHT) set in ofApp::setup or if you just have it before the draw call ( you can even setup the fbo with no orientation set and if you have ofSetOrientation(OF_ORIENTATION_90_RIGHT) before fbo::draw it causes this issue ).

This is what it looks like if you have ofSetOrientation(OF_ORIENTATION_DEFAULT); before the draw call or if you don't set orientation anywhere in the app.

I think this is to do with the vFlip and or matrix stuff https://github.com/openframeworks/openFrameworks/blob/master/libs/openFrameworks/utils/ofMatrixStack.cpp#L49

If I setup the app this way: ( notice the false flag for ofSetOrientation vFlip )

//--------------------------------------------------------------
void ofApp::setup(){
    ofSetOrientation(OF_ORIENTATION_90_RIGHT, false);

    fbo.allocate(1024, 1024, GL_RGBA);

    fbo.begin();
    
        ofClear(255, 255, 255, 255);
        ofSetColor(255, 0, 0);
        ofDrawCircle(ofGetWidth()/2, ofGetHeight()/2, 300);
    
    fbo.end();
}
//--------------------------------------------------------------
void ofApp::draw(){
    ofBackground(0);
    ofSetColor(255);
    fbo.draw(0,0);
}

This produces:

[ofTheo]

note: this happens for both ES1 and ES2 on iOS but doesn't happen on macOS.

ping @julapy @tgfrerer @danoli3

[ofTheo]

The black triangle only seems to come up if you are drawing in non default orientation > window width. Nothing to do with fbo allocation size - just draw size.

[danoli3]

Hey I can't replicate this black triangle.

Xcode 9.3.

Tried ES1/ES2 master and even GLKit PR. Just Doesn't happen for me

[cuinjune]

Hi, This is what I got when I run your code using the latest nightly build from today. I used iPhone 8 plus Simulator using Xcode 9.2.

EDITED: @danoli3 Thanks, I forgot to fix main.mm. Here's what I got now.

[danoli3]

@cuinjune

int main() {

//  here are the most commonly used iOS window settings.
//------------------------------------------------------
ofiOSWindowSettings settings;
settings.enableRetina = false; // enables retina resolution if the device supports it.
settings.enableDepth = false; // enables depth buffer for 3d drawing.
settings.enableAntiAliasing = false; // enables anti-aliasing which smooths out graphics on the screen.
settings.numOfAntiAliasingSamples = 0; // number of samples used for anti-aliasing.
settings.enableHardwareOrientation = true; // enables native view orientation.
settings.enableHardwareOrientationAnimation = true; // enables native orientation changes to be animated.
settings.glesVersion = OFXIOS_RENDERER_ES2; // type of renderer to use, ES1, ES2, ES3
settings.windowMode = OF_FULLSCREEN;
ofCreateWindow(settings);

return ofRunApp(new ofApp);

class ofApp : public ofxiOSApp {

public:
    ofFbo fbo;
    bool bRotate = true;
...

?

[danoli3]

Yep that looks right, if you tilt simulator to the home button on the right side too?

[cuinjune]

@danoli3 Yes, it looks the same when I tilt it.

[ofTheo]

@danoli3 @cuinjune - I just tried again with the nightly and the issue is still there. You have to do mouse down / touch to see it. I am on Xcode 9.2. With iPhone 8 Plus simulator.

More minimal example that doesn't require touch:

//--------------------------------------------------------------
void ofApp::setup(){
    ofSetOrientation(OF_ORIENTATION_90_RIGHT);

    fbo.allocate(1024, 1024, GL_RGBA);
    fbo.begin();
        ofClear(255, 255, 255, 255);
        ofSetColor(255, 0, 0);
        ofDrawCircle(ofGetWidth()/2, ofGetHeight()/2, 300);
    fbo.end();


}
//--------------------------------------------------------------
void ofApp::update(){
}

//--------------------------------------------------------------
void ofApp::draw(){
    ofBackground(0);
    ofSetColor(255);
    fbo.draw(0,0);
}

int main() {
    
    //  here are the most commonly used iOS window settings.
    //------------------------------------------------------
    ofiOSWindowSettings settings;
    settings.enableRetina = false; // enables retina resolution if the device supports it.
    settings.enableDepth = false; // enables depth buffer for 3d drawing.
    settings.enableAntiAliasing = true; // enables anti-aliasing which smooths out graphics on the screen.
    settings.numOfAntiAliasingSamples = 4; // number of samples used for anti-aliasing.
    settings.enableHardwareOrientation = false; // enables native view orientation.
    settings.enableHardwareOrientationAnimation = false; // enables native orientation changes to be animated.
    settings.glesVersion = OFXIOS_RENDERER_ES1; // type of renderer to use, ES1, ES2, etc.
    
    ofCreateWindow(settings);
    
	return ofRunApp(new ofApp);
}

[cuinjune]

@ofTheo I copied your code and now I could get the issue. I also used Xcode 9.2 with iPhone 8 Plus simulator on macOS 10.13.3

[ofTheo]

Here is a gif showing how even a ofScale where the fbo is drawn greater than the window size causes issues.

Code to reproduce below:

//--------------------------------------------------------------
void ofApp::setup(){
    ofSetOrientation(OF_ORIENTATION_90_RIGHT);

    fbo.allocate(256, 256, GL_RGBA);
    fbo.begin();
        ofClear(255, 255, 255, 255);
        ofSetColor(255, 0, 0);
        ofDrawCircle(fbo.getWidth()/2, fbo.getHeight()/2, fbo.getHeight()/2);
    fbo.end();


}
//--------------------------------------------------------------
void ofApp::update(){
}

//--------------------------------------------------------------
void ofApp::draw(){
    ofBackground(0);
    ofSetColor(255);
    
    float scale = ((float)(ofGetElapsedTimeMillis()%4000)) / 1000.0;
    
    ofPushMatrix();
        ofScale(1.0 + scale, 1.0 + scale, 1);
        fbo.draw(0,0);
    ofPopMatrix();
}

[ofTheo]

Thanks for confirming @cuinjune

Wondering if it might have something to do with the viewport? Its really strange.

[ofTheo]

@cuinjune @danoli3 - fyi it doesn't seem to happen when hardware orientation is set to true.

Also I am not sure if this is right but currently OF_ORIENTATION_90_RIGHT results in two different phone orientations depending on whether hardware or software orientation is enabled:

Notice the different phone orientations in the two images below - pinging @julapy too. Not sure if it has always been this way?

[ofTheo]

okay one more clue:

Setting

    ofViewport(0, 0, ofGetWidth()-1, ofGetHeight()-1);

At the top of draw fixes it.

Though having this:

    ofViewport(0, 0, ofGetWidth(), ofGetHeight());

doesn't.

Really, weird. @arturoc do you have any clue what this could be?

[cuinjune]

maybe this is not helpful but I got the following result when I run the same code (ofTheo's minimal example) using of_v0.9.8_ios_release. I could not see the black triangle but size of the circle is much larger.

[ofTheo]

It also seems to affect images / textures as well as FBOs.

If you take the imageLoaderexample and change:

    ofScale(0.5, 0.5, 1.0);

in draw to:

    ofScale(1.5, 1.5, 1.0);

The texture that is drawing bigger than the screen gets the artifact too. It seems to be the same color as the clear color.

[ofTheo]

Also if you do:

 ofSetupScreenOrtho();

before drawing then there is no issue.

Maybe its a glm issue mixing with the iOS stuff?

[danoli3]

With the new test code @ofTheo I was able to re-produce this on the Xcode 9.3 11.3 Simulator.

However I also tested my physical hardware (iPhone 6S) and this bug does NOT occur. (SS from device screen at the point when the black triangle should be visible)

Simulator Only Bug.

[arturoc]

i was thinking that it could be some weird thing with how we bake the orientation in the perspective matrix but it doesn't happen in other platforms so i don't think is related. is there any difference on how we set orientation in iOS and desktop?

[ofTheo]

Still no luck tracking this down on my end. I am okay pushing this to the next bugfix release - especially if it is a simulator only bug.

I can dig in later this week - but if this is holding up the release I am good to go without it.

[arturoc]

ok, i still need to recompile the raspberry pi libraries with a newer compiler version which might take a few days so no worries but i'll take it into account and we can make the release once everything else is solved if this is not yet working. it's really weird that it would only happen in one platform and specifically in the simulator

[danoli3]

I'll later tonight test all my devices, just to be sure. Only tested iPhone 6s so far.

On 10 April 2018 at 05:18, arturo [email protected] wrote:

ok, i still need to recompile the raspberry pi libraries with a newer compiler version which might take a few days so no worries but i'll take it into account and we can make the release once everything else is solved if this is not yet working. it's really weird that it would only happen in one platform and specifically in the simulator

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/openframeworks/openFrameworks/issues/5951#issuecomment-379863432, or mute the thread https://github.com/notifications/unsubscribe-auth/AAytHJPAlBCU4NBm9dOW12-t0GsOSvp2ks5tm7QBgaJpZM4TI9ek .

[danoli3]

Yeah Simulator Only!

Tested Devices

iPad 2 (Non-Retina) - iOS 9.3.5 iPad 4 (Retina) - iOS 10.3.3 iPad Air 2 (Retina) - iOS 11.3 iPad Pro (Retina) 10.5" - iOS 11.3

[ofTheo]

Thanks for testing @danoli3 ! Thats good news - lets move this to the next release.

Curious if you have any thoughts on: https://github.com/openframeworks/openFrameworks/issues/5951#issuecomment-379297513 ( I should probably move it to a separate issue )

[dimitre]

okay one more clue:

Setting

    ofViewport(0, 0, ofGetWidth()-1, ofGetHeight()-1);

At the top of draw fixes it.

Though having this:

    ofViewport(0, 0, ofGetWidth(), ofGetHeight());

doesn't.

Really, weird. @arturoc do you have any clue what this could be?

Hey @ofTheo I've just tested and couldn't reproduce the issue. I was curious to see what happened if we call ofDisableTextureEdgeHack()