Removing black border around Primitive_Points?

#1

Hello wonderful people, quick question for you all…

Is there a way to remove this black outline from the primitive points, without introducing a shader/texture?

Thank you all!

#2

hey armon!
How are you drawing those?

#3

Hi @armonnaeini , same question as @roymacdonald - by primitive points do you mean mesh with a OF_PRIMITIVE_POINTS mode? I just ran a bit of test code, I don’t see this behaviour - what oF version are you on and please share some code!

#4

@roymacdonald @ayruos
Hello friends! First, I’m using of_v20191108_osx_nightly for oF.

In my update function I’m converting a contour to a polyline (pp) then I feed the polyline’s vertices into a mesh:

if (bFluctuate == false){
        for(int i = 0; i < pp.size(); i++) {
            pp[i] = pp[i].getSmoothed(25);
            for (int j = 0; j < pp[i].size(); j+=10){
                lineMesh.addVertex(pp[i][j]);
                lineMesh.addColor(255);
            }
        }
}

Then, in my draw function:

lineMesh.draw();

Thank you guys for your help.

#5

Hey @armonnaeini,
I’ve seen this problem before. I think it was @zach that gave an answer before.

are you setting the mesh mode some where? if so into which mode is the mesh set. (lineMesh.setMode(…)?
Are you rendering directly onscreen or through an fbo and then compositing all?

#6

In my setup:

lineMesh.setMode(OF_PRIMITIVE_POINTS);

I am not using an FBO before drawing on screen, everything is a direct render. Would an FBO resolve this issue?

#7

So how are you making the points bigger?
I am not seeing that with glPointSize(100)

#8

This is the code I used for testing.
ofApp.h

#pragma once

#include "ofMain.h"

class ofApp : public ofBaseApp{

	public:
		void setup();
		void update();
		void draw();

		void keyPressed(int key);
		void keyReleased(int key);

		void mouseDragged(int x, int y, int button);
		void mousePressed(int x, int y, int button);
		void mouseReleased(int x, int y, int button);
	void mouseScrolled(int x, int y, float scrollX, float scrollY );
	
	ofMesh lineMesh;
	vector<ofPolyline> pp;
	
	void updateMesh( int x, int y);
	
	ofEasyCam cam;
	
	bool bUseEasyCam = false;

	float pointSize = 50;
	bool bDrawHelp = true;
};

ofApp.cpp

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){
	lineMesh.setMode(OF_PRIMITIVE_POINTS);
	
	cam.removeAllInteractions();
	cam.addInteraction(ofEasyCam::TRANSFORM_TRANSLATE_XY, OF_MOUSE_BUTTON_LEFT);
	cam.addInteraction(ofEasyCam::TRANSFORM_TRANSLATE_Z, OF_MOUSE_BUTTON_RIGHT);
	cam.enableOrtho();
	cam.setNearClip(-1000000);
	cam.setFarClip(1000000);
	cam.setVFlip(true);
	cam.disableMouseInput();
}

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

}
//--------------------------------------------------------------
void ofApp::updateMesh( int x, int y){
	lineMesh.clear();
	
	glm::vec3 pos (x, y, 0);
	

	pos = cam.screenToWorld(pos);
	
	pp.back().addVertex(pos);
	
	for(int i = 0; i < pp.size(); i++) {
		auto p = pp[i].getSmoothed(25);
		for (int j = 0; j < p.size(); j+=10){
			lineMesh.addVertex(p[j]);
			lineMesh.addColor(255);
		}
	}
}
//--------------------------------------------------------------
void ofApp::draw(){
	
	cam.begin();
	glPointSize(pointSize);
	
	lineMesh.draw();
	
	cam.end();

	if(bDrawHelp){
	stringstream ss;
	ss << "Drag the mouse to add points to the polylines" << endl;
	ss << "Scroll up/down to change the point size" << endl;
	ss << "While pressing the space bar:" <<endl;
	ss << "			Drag mouse with left button to move around canvas" <<endl;
	ss << "			Drag mouse with right button to zoom in or out" <<endl;
	ss << "			Scroll up/down to zoom in or out" << endl;
	ss << "Press h key to toggle this help text.";
		
		
	
	ofDrawBitmapStringHighlight(ss.str(), 20, 20);
	}
}

//--------------------------------------------------------------
void ofApp::keyPressed(int key){
	if(key == ' '){
		if(!bUseEasyCam){
			cam.enableMouseInput();
			bUseEasyCam = true;
		}
	}else if(key == 'h'){
		bDrawHelp ^= true;
	}

}

//--------------------------------------------------------------
void ofApp::keyReleased(int key){
	if(key == ' '){
		cam.disableMouseInput();
		bUseEasyCam = false;
	}
}

//--------------------------------------------------------------
void ofApp::mouseScrolled(int x, int y, float scrollX, float scrollY ){
//	cout << "scrollX: " << scrollX  << "  scrollY: " << scrollY << endl;
	if(!bUseEasyCam){
		pointSize += scrollY;
	}
}
//--------------------------------------------------------------
void ofApp::mouseDragged(int x, int y, int button){
	if(!bUseEasyCam){
		updateMesh(x,y);
	}
}

//--------------------------------------------------------------
void ofApp::mousePressed(int x, int y, int button){
	if(!bUseEasyCam){
		pp.push_back(ofPolyline());
		updateMesh(x,y);
	}
}

//--------------------------------------------------------------
void ofApp::mouseReleased(int x, int y, int button){
	if(!bUseEasyCam){
		updateMesh(x,y);
	}
}
#9

Well I went through my code and realized that in my setup, I have

ofEnableDepthTest();

When I comment it out, the borders around the circles were removed. Thanks so much for your help Roy.

1 Like
#10

Yeah, having depth test on would mean your points are Z fighting coz they’re on the same Z coordinate. Glad you solved it! :slight_smile:

1 Like
#11

Good to know that you solved it.
BTW, it is usually a good idea to keep the depth test disabled and only enable it for the parts that that you really need it.

1 Like