Programmable pipeline and ofxUI

Hi forum,

I have implemented a tiny application with the programmable pipeline. Check the following scree-shot

http://imgur.com/lGizG0z

Then i wanted to use the ofxUI object inside it for some interactivity . And now i get the following output

http://imgur.com/25VwtDP

which looks so wrong. I am getting hole in the teapot and the faces are also visible. The only addition inside the code snippet is as follows

Inside the setup

   gui = new ofxUISuperCanvas("Blinn-Phong Parameters");
   gui->addSpacer();

   gui->addSlider("Red",0,1,&(diffuse_color.r));
   gui->addSlider("Green",0,1,&(diffuse_color.g));
   gui->addSlider("Blue",0,1,&(diffuse_color.b));

   gui->autoSizeToFitWidgets();
   ofAddListener(gui->newGUIEvent,this,&ofApp::guiEvent); 

What might have went wrong ?

Any hint?

Thanks

try to wrap your whole draw code in push & pop, then draw the gui after the scene

void::draw() {
  ofPushMatrix();
  ofPushStyle();

  <scene draw>

  ofPopStyle();
  ofPopMatrix();

  <draw gui>
}

Hi @Kj1

Thanks for the hint!

But it did not change the behavior. Here goes the snippet as you suggested. Please check if i got you right

//--------------------------------------------------------------
void ofApp::setup()
{
   enableDepth = false;

   ofSetVerticalSync(true);

   ofDisableArbTex();

   ofEnableAntiAliasing();
   ofEnableSmoothing();

   ofLoadImage(texture,"render-checkerboard.jpg");
   
   model.loadModel("teapot.obj",true);
   model.enableNormals();
   model.enableTextures();

   //scale the model
   model.setScale(0.7,0.7,0.7);

   //define the diffuse color that will be
   //interacted by the user
   diffuse_color =  ofFloatColor(0.5,0.2,0.7,1.0);


   //depth testing makes the teapot
   //rendered properly
   ofEnableDepthTest();   
      
   //load the programmable shaders
   if(ofIsGLProgrammableRenderer())
   {
      perFragmentShader.load("shaders/shader-gauraud-fragment");
   }
   else
   {
      std::cout << "Programmable Shading is not supported. " << std::endl;
      exit();
   }

   //define the texture height and width
   texture_width = 512;
   texture_height = 512;


   //declare a fbo setting object
   //to store the fbo setting value
   ofFbo::Settings s;

   //define the fbo settings parameter
   s.width = texture_width;
   s.height = texture_height;
   s.internalformat = GL_RGBA;
   s.useDepth = true;
   s.depthStencilAsTexture = true;

   //allocate buffer for the fbo
   fbo.allocate(s);

   if(!fbo.isAllocated())
   {
      std::cerr << "Fbo allocation was not successful." << std::endl;
      OF_EXIT_APP(0);
   }
   
   fbo.getTextureReference().setTextureWrap( GL_REPEAT, GL_REPEAT );
   
   //the set function will be called internally
   //so we do not need to call the set the function
   box.resizeToTexture(fbo.getTextureReference());

   box.setUseVbo(true);
   
   box.mapTexCoordsFromTexture( fbo.getTextureReference() );

}


//--------------------------------------------------------------
void ofApp::update()
{
   float f  = ofGetElapsedTimef() * 60;

   //render starts on the attached texture of the fbo
   fbo.begin();

   //clear the background
   //before the main rendering

   //I WAS HAVING THE TRASPARENCY PROBLEM
   //BECAUSE THE ALPHA VALUE WAS SET TO 50
   //NOW IT IS 255 AND I GOT RID OF ALL THE
   //ARTIFACTS, TACK SJÄLV!!!
   ofBackground(50,50,50,255);

   //ofSetRectMode(OF_RECTMODE_CENTER);
   
   //re-position the teapot model
   model.setPosition(texture_width/2,
		     texture_height/2,
		     0);

   //animate the model
   model.setRotation(0,f,1,0,0);
   model.setRotation(1,f,0,1,0);
   model.setRotation(2,f,0,0,1);
         
   //texture.bind();
   
   //the teapot goes through the shader
   perFragmentShader.begin();
   
   perFragmentShader.setUniform3f("specular_albedo",1.0f,1.0f,1.0f);
   perFragmentShader.setUniform1f("specular_power",30.0f);   
   perFragmentShader.setUniform3f("diffuse_albedo",
				  diffuse_color.r,
				  diffuse_color.g,
				  diffuse_color.b);
   
   //draw the teapot

   model.drawFaces();
   
   perFragmentShader.end();   

   //texture.unbind();
   
   fbo.end();
}

//--------------------------------------------------------------
void ofApp::draw()
{
   ofPushMatrix();
   ofPushStyle();
   
   ofBackground(ofFloatColor(0.5,0.5,0.5,1.0));

   ofFill();
   
   camera.begin();

   //bind the fbo texture we have rendered to
   ((enableDepth) ? fbo.getDepthTexture().bind() : fbo.getTextureReference().bind());

   box.draw();

   ((enableDepth) ? fbo.getDepthTexture().unbind() : fbo.getTextureReference().unbind());
      
   camera.end();

   ofPopStyle();
   ofPopMatrix();

   gui = new ofxUISuperCanvas("Blinn-Phong Parameters");

   
   gui->addSpacer();
   gui->addSlider("Red",0,1,&(diffuse_color.r));
   gui->addSlider("Green",0,1,&(diffuse_color.g));
   gui->addSlider("Blue",0,1,&(diffuse_color.b));

   gui->autoSizeToFitWidgets();
   ofAddListener(gui->newGUIEvent,this,&ofApp::guiEvent);	             
}

What did i miss ?

Thanks

hi sajjad,
you need to add the gui setup code in the setup() method of your app, and then do gui->draw() or something at the end of the draw method.

hi sajjad,

I don’t think the UI is the problem here… can you share you code/project and I will make sure of this.

In addition ofxUI automatically draws itself, so its not necessary to do anything like gui->draw() within your draw loop.

Cheers,
Reza

Hi @reza

Please check your email address . I sent an invitation to the repsitory with the public access. The whole source is out there for your review.

Thanks

Hi @reza

Have you managed to access the source that i shared with you ?

after looking through your source code, all you need to change is to make sure to enable depth testing before rendering to your FBO and drawing the cube:

ofEnableDepthTest();

Cheers,
Reza

1 Like

Thanks !

Eventually it did work.

I was calling the ofEnableDepthTest() inside the setup(). Should it not be enough ?

Now i moved the call inside the update() right before rendering to the fbo