Texture on ofSpherePrimitive breaks

Hey,

I’ve been working on an iOS project where I am trying to map a texture (world map) onto a ofSpherePrimitive, but there seems to be some rendering issue.

While I can get the texture to be mapped onto the sphere, there seems to be parts of the sphere where the texture in the foreground does not render properly but instead it appears “transparent” and renders the far-side of the sphere, the texture inside out. Below two images to illustrate the point.

First, here with a red light illuminating the front/top and colouring the texture correctly, whereas on the bottom part of the sphere there are those unlit texture parts from inside the sphere’s other side.

Second, here a minimum test case with no lights, cameras, etc, just a checkered pattern. You can see the smaller checkers from the backside in the bottom half of the sphere. Note, that it is not exclusively in the bottom, but as the sphere rotates, also parts of the top half show the same problem.

For the second example, the relevant code is:

void ofApp::setup(){
    r = 0;
    sphere.setRadius(100);
    texture.loadImage("test.png");
}

//--------------------------------------------------------------
void ofApp::update(){
    r += 0.25;
}

//--------------------------------------------------------------
void ofApp::draw(){
    ofPushMatrix();
    
    ofTranslate(ofGetWidth() / 2, ofGetHeight() / 2);
    ofRotateY(r);
    
    texture.getTextureReference().bind();
    sphere.draw();
    
    texture.unbind();
	
    ofPopMatrix();
}

Noteworthy is that while the sphere is rotating the “transparent” parts rotate with the sphere.

You can also check out the whole code of the second example here: https://github.com/kontur/openframeworks-ios-sphere-texturing-problem

Both texture images are powers of two, the world map image being 1024x1024 and the checker pattern being 512x512 pixels.

I am pretty sure this is some minor problem somehow to do with setting a flag to render the sphere solid, but as a beginner I have not made any progress with this no matter what I have tried so far.

Any ideas?

Try calling ofEnableDepthTest() in your setup function

Also, texture used on spheres should be ratio 2x1 (as in 360 degrees longitude / 180 latitude)

Best,
V

Thanks for the suggestion. I previously tried this as well as a couple of other settings in ofGraphics() to see if they have any effect, but to no avail.

Thanks for the suggestion. Initially I had used a 1024x512 texture map, but tested with a square one just to be sure. It doesn’t seem to make a difference to this problem though.

Forgot to mention that on iOS you have to enable the depth buffer in your main function:

int main(){
    ofAppiOSWindow * iOSWindow = new ofAppiOSWindow();
    iOSWindow->enableDepthBuffer();
    ofSetupOpenGL(iOSWindow, 1024, 768, OF_FULLSCREEN);
    
    ofRunApp(new ofApp);
}

And then call ofEnableDepthTest(); in your setup function
Does the PrimitivesExample work as expected for you?

Hey, thanks for the suggestion!

Your solution works indeed! Also, I’ve in the meantime done some more testing, and also explicitly setting the backface culling before the ofSpherePrimitive.draw(); call works, like so:

glEnable(GL_CULL_FACE); // Cull back facing polygons
glCullFace(GL_BACK); // might be GL_FRONT instead
texture.getTextureReference().bind();
sphere.draw();
texture.unbind();

The primitives example works as well. I started from the ProjectGenerator, so I never came across the different setup code in main.mm. Makes me wonder if the code generated from ProjectGenerator shouldn’t be amended to use iOSWindow in the first place.

Solved :slight_smile:

1 Like