Smoothing Jagged Lines

beginners
#1

My PolyLines appear jagged or with gaps in the lines. At different points, I’ve tried several smoothing techniques that I found mentioned on the forum but without improvement. However, I suspect I am missing something basic in the way that I am using Fbos. I’m posting some code below in case this error might be obvious to see. Thanks.

//--------------------------------------------------------------
void ofApp::setup(){

fbo1.allocate(ofGetWidth(), ofGetHeight(), GL_RGBA, 4);
fbo1.begin();
ofClear(255, 255, 255, 255);
fbo1.end();

fbo2.allocate(ofGetWidth(), ofGetHeight(), GL_RGBA, 4);
fbo2.begin();
ofClear(255, 255, 255, 255);
fbo2.end();

fbo3.allocate(ofGetWidth(), ofGetHeight(), GL_RGBA, 4);
fbo3.begin();
ofClear(255, 255, 255, 255);
fbo3.end();

//Load an array with the three Fbos after they are set up
fboArray[0] = fbo1;
fboArray[1] = fbo2;
fboArray[2] = fbo3;


//set up hold for the view
hold = ofVec3f(0, 0, 100);
incrementPos = 0;
thisCue = 0;

}

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

if (drawIt) {
    myThreeDPoint.update();
    myThreeDPoint2.update();
    myThreeDPoint3.update();
}

}

//--------------------------------------------------------------
void ofApp::draw(){

//this doesnt seem to do anything
glDepthFunc(GL_ALWAYS);

for(int i = 0; i<=2; i++) //initialize the 3 Fbos
{
    fboArray[i].begin();
    ofClear(0, 0, 0, 0);
    fboArray[i].end();
}

background.draw(); //draw the background in first

if (tiltIt){
    fbo1.begin();
    cam.begin();
    ofScale(1,-1,1);
    ofTranslate(-ofGetWidth()/2, -ofGetHeight()/2);
    cam.orbit(0, 0-updatePos, 0 + moveBack, ofVec3f(0, 0, 0));
    myThreeDPoint.draw();
    cam.end();
    fbo1.end();
    
    fbo2.begin();
    cam.begin();
    ofScale(1,-1,1);
    ofTranslate(-ofGetWidth()/2, -ofGetHeight()/2);
    cam.orbit(0, 0-updatePos, 0 + moveBack, ofVec3f(0, 0, 0));
    myThreeDPoint2.draw();
    cam.end();
    fbo2.end();
  
    fbo3.begin();
    cam.begin();
    ofScale(1,-1,1);
    ofTranslate(-ofGetWidth()/2, -ofGetHeight()/2);
    cam.setPosition(hold.x, hold.y + incrementPos, hold.z);
    incrementPos += 0.75; //change camera positions slightly
    cam.lookAt(ofVec3f(0, 0, 0));
    myThreeDPoint3.draw();
    cam.end();
    fbo3.end();
}

ofSetColor(255, 255, 255); 
//shape on the left
fbo1.draw(ofGetWidth()/3.0, 0 + ofGetHeight()/5.0, ofGetWidth()/3.0, ofGetHeight()/1.5  );

//shape in the middle
fbo3.draw(0, 0 + ofGetHeight()/5.0, ofGetWidth()/3.0, ofGetHeight()/1.5 );

//shape on the far right
fbo2.draw((ofGetWidth()/3.0)*2.0, 0 + ofGetHeight()/5.0, ofGetWidth()/3.0, ofGetHeight()/1.5 );

}

#2

Perhaps It is because you are scaling down your fbos when you are drawing them. Does this problem persist when you draw the fbo’s in the size you allocated them in? If not, perhaps the polylines are not thick enough to scale down well.

If this is the problem you might look into thickening your lines up so they scale down better.

You could also possibly use dilate in ofxcv to thicken them since you are drawing into an FBO anyway. Although that would make maintaining the clear background harder.

#3

Thanks so much. I think that you are right. I can use ofSetLineWidth() and make the value 4 or something and then the lines are not so jagged. However, the goal is to have a single, very thin line, so then it looks too thick when I set the line thickness to 4. I’m not sure how best to keep a curved line thin without making it jagged in this context. I will try using dilate in ofxcv. Thank you!

#4

Yah, If you use dilate in combination with erode you might be able to get what you want.
Dilate it up to fill in the gaps erode it down again to make them thin.

Perhaps if you allocate your fbos the size you want to draw them in the problem won’t be so bad.

#5

Yes, when I allocate the fbos at the same size that I want to draw them, that improves things a lot. Then I was able to find a compromise between allocating at that size and at the larger size so that I could have a thinner line width look. Thanks again!