Getting started with simple 3d

I have a lot of experience with 2d rendering / generation, but would like to dip my toes in 3d. I want to start with something that seems basic, which is to render a grid of 2d rectangles, but vary the z order. However, I am pretty new to 3d, and am not sure where to start.

Couple of questions:

  1. Can I render 2d items in a 3d space? or do I actually render a quad / cube and display it from straight forward?
  2. Where should I start to learn how to do this? i.e. which classes should I look up, or any suggested hello world tutorials?

Thanks for any pointers.

mike

ok. I think I found enough to get started:

ofSetColor(0, 255, 0);
ofFill();
ofDrawPlane(150, 150, 0, 100, 100);`

Now to figure out the camera.

mike

Hi Mike,

Welcome to 3D!

There are plenty of examples in OF for 3D, have a look in the “examples/3d” folder in your OF directory.

I recommend to start with the easyCam example. EasyCam is a 3D camera that has the mouse interaction built in, drag to rotate, zoom etc…

Everything is rendered in 3D space, what changes is the camera. For a 2D “look”, usually you have a fixed orthographic camera, with the Y-coordinates flipped and origin at the top-left corner of the window. For 3D, perspective and origin at the center.

Like @Hennio mentioned, the examples are a good resource.
You may have a bit more info on:

— the work in progress ofBook;
@lewislepton’s video tutorials;
mastering openframeworks book (it’s from 2013, the reference has changed a bit, but the basic concepts remain the same);
— any bibliography/tutorial/article/etc. from other similar frameworks (cinder, processing, vvvv, touchdesigner, vuo) or game engine (unity, unreal) or even go straight to openGL (you don’t need to redo everything that OF already does, but it’s great to understand the basics).

Hope this is useful, any questions and you know where to find us. :slight_smile:

1 Like

Thanks. This is super helpful.

I am reading through the OpenGL chapter now in ofBook, and it is providing a good base.

One quick follow up question on this:

Everything is rendered in 3D space, what changes is the camera. For a 2D “look”, usually you have a fixed orthographic camera, with the Y-coordinates flipped and origin at the top-left corner of the window. For 3D, perspective and origin at the center.

Is there a preset for this (for the 2d camera view? Basically, I want to render my own 2d scene (composed of individual planes) and then rotate around it.

mike

Making some progress on this.

Here is what I have thus far

ofEasyCam cam = ofEasyCam();


ofRectangle viewport;

//--------------------------------------------------------------
void ofApp::setup(){
    
    cam.setupPerspective();
    cam.enableOrtho();
    
    viewport = ofGetCurrentViewport();
}

void ofApp::draw(){
    
    cam.setupPerspective();
    cam.begin(viewport);
    
    ofSetColor(0, 255, 0);
    ofFill();
    ofDrawPlane(0,0,0 , 100, 100);
    
    ofSetColor(255, 0, 0);
    ofFill();
    ofDrawPlane(250, 150, 0, 100, 100);
    
    ofSetColor(0, 0, 255);
    ofFill();
    ofDrawPlane(150, 250, 0, 100, 100);
    
    
    ofSetColor(255, 255, 0);
    ofFill();
    ofDrawPlane(250, 250, 0, 100, 100);
    
    cam.end();
 }

However, I am running into two issues.

First, I have to call cam.setupPerspective(); every draw call, or else the camera resets the origin (0,0) to the middle of the screen. This is something ofEastCam is doing behind the scenes, since just using ofCamera doesnt have this issue. (I want to use ofEasyCam as I want to be able to rotate the view eventually).

Second, if I draw a plane at 0,0,0, with width / height of 100 in 3D, it is actually drawn at the middle point of the plane (i.e. -50, -50). Is this normal, and is there a setting to make it use the same coordinate space as 2d.

Basically, I am trying to draw in 2D (maybe with different z orders) and then rotate in 3D.