ofxImGui: Can't display more than one image in a window

beginners
#1

I am trying to display two images inside an ofxImGui window(on Android) My problem is, if I try to display two images using ofxImGui functions, it just displays one image correctly in the window, it just displays a blank square/rectangle instead of the second image.But instead if I draw the two fbos directly onto the screen using ofFbo.draw() function, it is able to display the two images on the screen.

My code is:

void ofApp::setup(){

gui.setup();
....
fbo1.allocate(300,300);
fbo2.allocate(300,300);

void ofApp::draw(){

fbo1.begin();
ofClear(0,0,0,0);
ofSetColor(255,255,255,255);
image1.draw(0,0); //both image1 and image2 are ofImage objects
fbo1.end();

fbo2.begin();
ofClear(0,0,0,0);
ofSetColor(255,255,255,255);
image2.draw(0,0);
fbo2.end();

//here if I write fbo1.draw(); fbo2.draw(), it is able to display the two images on the screen
//directly but they are not controlled by ofxImGui

gui.begin();
ImGui::SetNextWindowPos(ofVec2f(650, 20), ImGuiSetCond_FirstUseEver);

ImGui::SetNextWindowSize(ImVec2(1020, 1000), ImGuiSetCond_Once);

ImGui::Begin("Funky Window");

ImTextureID texid = (ImTextureID) (uintptr_t) (
			fbo1.getTexture().getTextureData().textureID);

ImGui::Image((ImTextureID) (uintptr_t) (texid),
			ImVec2(480, 480), ImVec2(0, 0), ImVec2(1, 1), ImColor(255, 255, 255, 255), ImColor(255, 255, 255, 128));

ImGui::NewLine();

ImTextureID texid2=(ImTextureID)(uintptr_t)(  fbo2.getTexture().getTextureData().textureID);
  
ImGui::Image((ImTextureID) (uintptr_t) (texid2),
 ImVec2(480,480),ImVec2(1,1),ImVec2(1,1),ImColor(255,255,255,255),ImColor(255,255,255,128));
	

ImGui::End();
gui.end();

I will be glad if someone helps.

#2

ofClear is clearing the screen, and you call it after drawing the first image, so that drawing gets cleared.

So don’t call ofClear after drawing anything you want to be able to see.

1 Like
#3

Hello,
I’m not sure this is relevant, but 2 years ago a simple fbo.allocate was not enough for me to display a single fbo in imgui. You can read about the special allocation I used here.

1 Like
#4

Thanks for your answers.

Drazinut, I tried removing ofClear(); but I didn’t notice any difference.

lilive, I had seen the thread you mentioned before and had tried using the ofFboSettings parameter.But it didn’t make difference.I was using the same ofFboSettings object for both of the fbos.I had also tried using different ofFboSettings objects for the fbos but the result was same.

A few minutes ago, I noticed that although in the code I was using different ofFboSettings objects for the fbos, I wrongly used the same object name while setting the ofFboSettings object.So the second ofFboSettings object didn’t have any properties set.

I mean:

ofFbo::Settings fboSettings ;
fboSettings.width = image1.getWidth() ;
fboSettings.height = image1.getHeight() ;
fboSettings.internalformat = GL_RGBA ;
fboSettings.textureTarget = GL_TEXTURE_2D ;
fbo1.allocate( fboSettings ) ;

ofFbo::Settings fboSettings2;
fboSettings.width = image2.getWidth() ; //Note that I wrote fboSettings instead of fboSettings2, my mistake
fboSettings.height = image2.getHeight() ;
fboSettings.internalformat = GL_RGBA ;
fboSettings.textureTarget = GL_TEXTURE_2D ;
fbo2.allocate(fboSettings2);

So you were right lilive, my error was about ofFboSettings.

Thank you lilive and Drazinut.

2 Likes