Drawing circles (Beginner question)

Using Cinder
1

Hello,

i am a cinder newbie. My goal is to display some anti-aliased circles and lines using the
GPU.
I looked at the tutorials https://www.libcinder.org/docs/guides/opengl
and derived following code which is intended to be a reduced to the minimum
starting point (draw one circle). It does not show anything though.
I do not know what i am missing here. A hint would be nice.
(As well as a hint on how to implement the anti-aliasing, if possible.
I know this tutorial but cannot translate it to cinder https://rubendv.be/blog/opengl/drawing-antialiased-circles-in-opengl/)

Here is my code:

#include <stdio.h>
#include "cinder/app/App.h"
#include "cinder/app/RendererGl.h"
#include "cinder/gl/gl.h"
#include "cinder/ImageIo.h"
#include "cinder/Utilities.h"
#include "cinder/params/Params.h"
#include "cinder/GeomIo.h"

using namespace std;
using namespace ci;
using namespace ci::app;

class BasicApp : public App {
public:
	void setup() override;
	void draw() override;
	
	CameraPersp		mCam;
	gl::BatchRef	mBatch;
	vector<gl::BatchRef> Circles;
};

void BasicApp::setup() {
	auto lambert = gl::ShaderDef().lambert().color();
	gl::GlslProgRef shader = gl::getStockShader( lambert );
	
	auto circle = geom::Circle().center(vec2(10 , 10)).radius(10);
	mBatch = gl::Batch::create( circle, shader );
	
	mCam.lookAt( vec3( 10, 10, 0 ), vec3( 0 ) );
}

void BasicApp::draw() {
	gl::clear();
	gl::enableDepthRead();
	gl::enableDepthWrite();
	
	gl::setMatrices( mCam );
	mBatch->draw();
}

CINDER_APP( BasicApp, RendererGl )
2

Hi,

  1. Try changing the z coordinate of the eyepoint of your camera, to say 100.
  2. You can set the number of samples for antialiasing in this way:
CINDER_APP( BasicApp, RendererGl( RendererGl::Options().msaa( 4 ) ) )

You can find code for advanced antialiasing under samples/_opengl/PostProcessingAA.

3

Hi,

your camera is positioned at (10, 10, 0), looking at (0, 0, 0). Your circle is drawn in the XY-plane. So you’re looking at the side of the flat circle, which is infinitely thin, so you won’t be able to see it. Try this instead:

mCam.lookAt( vec3( 0, 0, 10 ), vec3( 0 ) );

With that being said, you don’t really need a 3D camera when drawing circles. Circles are flat, 2D objects and, by default, Cinder is setup to draw in 2D with the origin (0, 0) at the upper left corner of the window. Disable the call to gl::setMatrices( mCam ); to see what I mean.

As @balachandran_c pointed out, you can enable multi-sampling using RendererGl::Options().msaa(...). You could also render to a multi-sampled frame buffer object (Fbo) when you create it using gl::Fbo::Format().samples( 16 ). The advanced anti-aliasing found in the PostProcessingAA sample is called FXAA and SMAA, which can be used instead of a multi-sampled Fbo, for instance when using an advanced deferred rendering pipeline. It can not be used with the main buffer. I would advice to simply start with RendererGl::Options().msaa(16) until you have learned more about graphics programming.

-Paul

P.S.: kudo’s for using a batch to render your circle. It is faster than `gl::drawSolidCircle()```.

4

That was it. Error fixed.

Thanks for the hints about anti-aliasing.

Best regards