Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS bug drawing with FBO and ofSetOrientation. #5951

Open
ofTheo opened this issue Apr 5, 2018 · 24 comments
Open

iOS bug drawing with FBO and ofSetOrientation. #5951

ofTheo opened this issue Apr 5, 2018 · 24 comments
Assignees
Milestone

Comments

@ofTheo
Copy link
Member

ofTheo commented Apr 5, 2018

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 ).

screen shot 2018-04-05 at 11 17 38 am

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.

screen shot 2018-04-05 at 11 18 31 am

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:

screen shot 2018-04-05 at 11 25 28 am

@ofTheo ofTheo self-assigned this Apr 5, 2018
@ofTheo ofTheo added this to the 0.10.0 milestone Apr 5, 2018
@ofTheo
Copy link
Member Author

ofTheo commented Apr 5, 2018

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

ping @julapy @tgfrerer @danoli3

@ofTheo ofTheo mentioned this issue Apr 5, 2018
27 tasks
@ofTheo
Copy link
Member Author

ofTheo commented Apr 6, 2018

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
Copy link
Member

danoli3 commented Apr 6, 2018

Hey I can't replicate this black triangle.

image

Xcode 9.3.

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

@cuinjune
Copy link
Contributor

cuinjune commented Apr 6, 2018

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.
screen shot 2018-04-06 at 7 01 14 pm

@danoli3
Copy link
Member

danoli3 commented Apr 6, 2018

@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
Copy link
Member

danoli3 commented Apr 6, 2018

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

@cuinjune
Copy link
Contributor

cuinjune commented Apr 6, 2018

@danoli3 Yes, it looks the same when I tilt it.
screen shot 2018-04-06 at 11 16 24 pm

@ofTheo
Copy link
Member Author

ofTheo commented Apr 6, 2018

@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
Copy link
Contributor

cuinjune commented Apr 6, 2018

@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

screen shot 2018-04-07 at 12 32 04 am

@ofTheo
Copy link
Member Author

ofTheo commented Apr 6, 2018

ios-issue

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
Copy link
Member Author

ofTheo commented Apr 6, 2018

Thanks for confirming @cuinjune

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

@ofTheo
Copy link
Member Author

ofTheo commented Apr 6, 2018

@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?

screen shot 2018-04-06 at 8 51 25 am

screen shot 2018-04-06 at 8 50 28 am

@ofTheo
Copy link
Member Author

ofTheo commented Apr 6, 2018

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
Copy link
Contributor

cuinjune commented Apr 6, 2018

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.

screen shot 2018-04-07 at 1 29 24 am

@ofTheo
Copy link
Member Author

ofTheo commented Apr 6, 2018

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.

screen shot 2018-04-06 at 2 06 39 pm

@ofTheo
Copy link
Member Author

ofTheo commented Apr 6, 2018

Also if you do:

 ofSetupScreenOrtho();

before drawing then there is no issue.

Maybe its a glm issue mixing with the iOS stuff?

@danoli3
Copy link
Member

danoli3 commented Apr 7, 2018

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)
screen shot 2018-04-07 at 11 55 35 am

Simulator Only Bug.

@arturoc
Copy link
Member

arturoc commented Apr 7, 2018

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
Copy link
Member Author

ofTheo commented Apr 9, 2018

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
Copy link
Member

arturoc commented Apr 9, 2018

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
Copy link
Member

danoli3 commented Apr 10, 2018 via email

@danoli3
Copy link
Member

danoli3 commented Apr 10, 2018

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
Copy link
Member Author

ofTheo commented Apr 12, 2018

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

Curious if you have any thoughts on:
#5951 (comment)
( I should probably move it to a separate issue )

@ofTheo ofTheo removed this from the 0.10.0 milestone Apr 12, 2018
@ofTheo ofTheo added this to the 0.10.1 milestone Apr 12, 2018
@dimitre
Copy link
Member

dimitre commented May 7, 2022

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()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants