3D in Processing

Overview and aims

By the end of the lecture you will be able to:

  • Create a 3D program in Processing
  • Load an object you created in blender into your 3D sketch
  • Use 3D transforms appropriately in a Processing program
  • Create a controllable camera for your sketch.

3D in Processing

// import the opengl library (to do 3D)
import processing.opengl.*;
 
// create a 3D screen using OPENGL
size(500, 500, OPENGL);
background(255);
You need to import the OpenGL library to get hardware accelerated 3D.
You then call the size method with OPENGL as a 3rd argument to create a
screen on which you can draw 3D concent.
You can also use a software only 3D system which works some time when OpenGL
does (e.g. there are sometimes problems with applets) but is generally more
rubbish. You don’t need to import opengl and you call size with P3D rather
than OPENGL.
strokeWeight(10);
 
point(100, 50, 50);
 
line(50, 50, 50, 100, 200, 100);
A lot of commands like point and line work in the same way but instead of
just x, and y you also pass a value for the z position.
strokeWeight(2);
// translate with an x,y and z
translate(200, 300, 10);
 
// draw a box height, width, depth
box(50, 50, 100);
box draws a 3D box. The arguments are the width, height and depth. It doesn’t
include an argument to set its positions (it will always draw at 0,0,0) so you
need to use translate to position it (of course, translate takes 3 argments, x, y, z)

Overview and aims

By the end of the lecture you will be able to:

  • Create a 3D program in Processing
  • Load an object you created in blender into your 3D sketch
  • Use 3D transforms appropriately in a Processing program
  • Create a controllable camera for your sketch.

Importing models to Processing.

Complex Objects

Blender to Processing

.OBJ format

Saito obj loader

In order to get objects from Blender you use the .OBJ file format.

Saving OJB

Apply Subserfs

Apply subserfs or other modifiers otherwise you will
save out the unsubdivided polygons.

Put the Cursor in the middle of the object

When you save out, the origin of the object is put at the position of the
blender cursor (the red and white circle). The origin is the (0,0,0) point of
the object. If you do translate(100, 100, 50) then the origin of the object will
be at (100, 100, 50), you will almost always want this to be in the middle of the
object, if its outside the object, you can think you’ve placed an object properly
but it will end up offset from where you thought you put it.

(To be 100% accurate, the origin of the object is put at its pivot position,
which can be controlled in a number of ways, including the cursor, look up
the blender documentation for more details.

Once you have done all that do Export->wavefront obj

Export Normals

Make sure you select Export Normals in the blender export dialog, otherwise
lighting won’t work properly

loading OJB

Saito OBJ Loader

The saito obj loader library allows you to load obj files in Processing.
The website gives full documentation and examples.

Overview and aims

By the end of the lecture you will be able to:

  • Create a 3D program in Processing
  • Load an object you created in blender into your 3D sketch
  • Use 3D transforms appropriately in a Processing program
  • Create a controllable camera for your sketch.

Transformations

Translate

Rotate

Scale

The Processing transforms, translate, rotate and scale become even more
important when we start working in 3D.

They are basically the same as the controls in Blender

Transformations act on the whole processing screen

Translate moves the whole coordinate system by a x and y direction

Anything before the translate call is draw normally…

Anything after the call is drawn relative to the new transformed coordinate system

Scale will change the size of the coordinates relatives to the origin (0, 0)

Rotate rotates the whole coordinate system.

Order of Transforms

The order in which you do the transforms is important,
changing the order changes the end result.
The way it works can be counter intuitive and confusing.

Transforms are applied to Objects in the opposite order that they appear in the program.

A transform applies to all the code that happens after it

That means it also applies to other transforms

translate()

translate()

Translates everything twice

translate()

rotate()

Translates the result of rotating

rotate()

translate()

Rotate the result of translating

Remember: Opposite Order

Best order

Translate

Rotate

Scale

Most of the time this is the order you want to do your transforms in.

rotate()

translate()

rotate()

translate()

Doesn’t end up at the end point of translating

translate()

rotate()

translate()

rotate()

Rotates about its centre

Translates to the right place

When I say centre I actually mean origin or pivot.

There is a similar problem with rotate and scale,
if you scale an object differently along x and y , if you do

scale()

rotate()

The result is no longer a rectangle (skewed)

Multiple Transforms

But what if we want to draw more than one thing?

If we transform the first one then the second, the first transform will apply to the second as well.

Transform Matrices

A transform is represented internally as a matrix

Up to now we have only had 1 matrix.

All transforms are combined together into this matrix

To draw more than one object we need more than one matrix

Matrix Stack

Multiple matrices are stored in a “Stack”

Up to now we have only had 1 matrix.

All transforms are combined together into this matrix

To draw more than one object we need more than one matrix

Stacks

A Stack is like a stack of paper

You can put things on it

“Push” them on the stack

And take them off

“Pop” them off the stack

The last thing to be put on is the first to be taken off

Last in, first out

Storing matrices as a stack means that the most recent transforms are the ones you remove first

Generally what you want

Global transforms that affect the whole picture are at the bottom

Transforms that only affect a single object at the top

pushMatrix(); // create a new matrix on the top of the stack
// do whatever transforms you like
// draw your object
popMatrix(); // remove the matrix from the stack
// you can now draw your next object

PushMatrix() creates a new matrix and puts it on the top of the stack

You can then do any transforms you like

PopMatrix() will then remove the matrix from the stack

i.e. it will remove all the transforms you have done since calling PushMatrix

This means you can now draw your next object without it being affected by the transforms of the previous one.

Overview and aims

By the end of the lecture you will be able to:

  • Create a 3D program in Processing
  • Load an object you created in blender into your 3D sketch
  • Use 3D transforms appropriately in a Processing program
  • Create a controllable camera for your sketch.

Camera Control

You don’t just use transforms to move objects, you can also use them
move the virtual camera, so the viewer can navigate around the screen.

You would typically hook the camera up to a user interface to that you can
move around your 3D scene like in a game.

2 ways of thinking about it

Camera focused

The Camera is at a position and looking in a direction

You move the camera around and rotate it to look around

What you would want for exploring an environment, used in most games

You can create a typical first person game camera, keyboard for moving
forward and backward and strafing (left and right) and mouse for rotating,
changing the direction in which you are facing.

Object focused

The Camera is at a position and looking at something

However you move the camera it always stays looking at an object

Rotate about the object and zoom in and out

e.g. for showing off an object at an e-commerce site or
Zelda type z-targeting for locking on to an enemy in a game

OCD

Obsessive Camera direction

http://www.gdsstudios.com/processing/libraries/ocd/

A useful and very flexible library for 3D camera control in Processing.

Allows you to set up a camera, which is an object/

The feed() method makes the scene draw from the camera’s
position, should be called in your draw method.

Has methods for moving the camera (the names come from cinema camerawork terms):

  • truck (left, right)
  • dolly (in, out)
  • boom (up, down)

methods for camera focused rotation:

  • tilt (rotate about x)
  • pan (rotate about y)
  • roll (rotate about z)
  • look tilt and pan simultaneously

also methods for object focused control:

  • tumble (rotate around an object)
  • zoom
PDF Creator    Send article as PDF to