Today s lecture Today we will learn about The mathematics of 3D space vectors How shapes are represented in 3D Graphics Modelling shapes as polygons Aims and objectives By the end of the lecture you will be able to describe 3D coordinates and vectors basic vector mathematics How points are draw using OpenGL How shapes are are drawn using polygons How to use GL_POINTS, GL_TRIANGLES and GL_TRIANGLESTRIP Computer Graphics To do Computer Graphics we have to represent everything as numbers Positions Objects Colours Whatever we want to do with things can be represented as mathematical operations Lets start with positions Coordinates 1
A screen is a 2D grid of pixels Coordinates 2
each pixel has a position defined by 2 numbers x horizontal y vertical any position is relative to the origin Coordinates 3
x and y are distances relative to the top left corner call this the origin The starting point of our coordinates any position is relative to the origin Coordinates 4
doesn t have to be pixels on a screen an represent any point in space by x and y space is continuous not divided into pixels so we use floats not integers Coordinates 5
Again x and y are relative to the origin Coordinates 6
we can combine x and y a single mathematical object a vector (x, y) Coordinates 7
We use vectors to define positions in space but they are always relative positions a point in space is defined by: a vector an origin Coordinates 8
This all works the same in 3D space except vectors now have 3 components (x, y, z) Vectors A vector is a single entity v = (x, y) that combines together x and y It is a convenient way of storing both there are also useful mathematical operations defined on vectors they act on the whole vector not x and y separately Processing has a class PVector 9
Magnitude and Direction Another way of looking at vectors. All vectors have A Magnitude (length) A Director Magnitude and Direction Vectors can have the same magnitude and different directions... Magnitude and Direction 10
the same direction and different magnitudes... or Magnitude and Direction The magnitude is a scalar (single number) The direction is a vector of length 1 The direction gives the relative sizes of x, y, z Magnitude and Direction The larger the magnitude, the longer the vector The relative size of x, y, z in give the direction the vector faces in A negative direction means the opposite direction e.g. setting v.x = v.x reverses the direction along the x axis. 11
Magnitude The magnitude is a scalar (single number) The length of the vector How do we calculate it? Pythagoras Theorem "In a right angle triangle the square on the hypotenuse is the sum of the squares on the other two sides" h 2 = x 2 + y 2 h is the length Magnitude We can use the formula to calculate the magnitude h 2 = x 2 + y 2 12
h = x 2 + y 2 PVector has a method mag for calculating it the mathematical symbol for the magnitude of vector v is v Direction Direction is represented by a vector with length 1 To get the direction you divide a vector by its magnitude The symbol for the direction of v is v v = v V ( x (x, y) =, x 2 +y 2 This it called normalising ) y x 2 +y 2 A vector of length 1 is called normalised PVector has a method normalize for calculating it Multiplying by a Scalar A scalar is a single number (i.e. not a vector) Multiplying a vector by a scalar multiplies the magnitude and keeps the direction the same so 3v goes 3 times as far in the same direction as v so v 2 goes half the distance in the same direction as v so 2v goes twice as far in the opposite direction PVector has a method mult for multiplying by a scalar Vector Addition 13
To add 2 vectors v 1 = (x 1, y 1 ) and v 2 = (x 1, y 2 ) v 1 + v 2 = (x 1 + x 2, y 1 + y 2 ) Gives you the point that is at position v 2 relative to v 1 So the point that is the equivalent of going first v 1 then v 2 relative to the origin Vector Subtraction 14
negating a vector v creates a vector in the opposite direction If you subtract a vector from another v 1 v 2 you first go v 1 relative to the origin and then go back v 2 (i.e. you go in the opposite direction of v 2 If v 1 and v 2 are positions of points then v 1 v 2 will give you the vector that goes from v 2 to v 1 Vector Addition 15
Another way to think about vector addition A point is a vector relative to somewhere? What if we want to know the vector of a point relative to somewhere else? i.e. changing the origin Vector Addition 16
If we know B relative to A and C relative to B How do we get C relative to A? Vector Addition 17
If we know B relative to A and C relative to B How do we get C relative to A? Adding the vector from B->C to that from A->B gives you the vector from A->C Vector Subtraction 18
If we know B and C both relative to A. How do we get C relative to B? Adding the vector from B->C to that from A->B gives you the vector from A->C Vector Subtraction 19
If we know B and C both relative to A. How do we get C relative to B? You subtract the vector A->B from A->C to get B->C Vectors 20
House Gardener Garden Tree If you know the position of the tree relative to the Garden, what is its position in the world? what is its position relative to the house? what vector does the Gardener have to walk along to get to the tree? Vectors 21
House Gardener Garden Tree If you know the position of the tree relative to the Garden, what is its position in the screen? if the position of the tree is t and the origin of the garden is g the screen position is t + g what is its position relative to the house? what vector does the Gardener have to walk along to get to the tree? Vectors 22
House Gardener Garden Tree If you know the position of the tree relative to the Garden, what is its position in the screen? what is its position relative to the house? if the position of the house is h the position relative to the house is t + g h what vector does the Gardener have to walk along to get to the tree? Vectors 23
House Gardener Garden Tree If you know the position of the tree relative to the Garden, what is its position in the screen? what is its position relative to the house? what vector does the Gardener have to walk along to get to the tree? if the gardener s position (relative to the garden) is p t p Distance between 2 points Lets bring this all together How do we calculate the distance between two points v 1 and v 2? Distance between 2 points Lets bring this all together How do we calculate the distance between two points v 1 and v 2? 24
We want the length of the vector between v 1 and v 2 We want the length of v 1 v 2 v 1 v 2 = (x 1 x 2 ) 2 + (y 1 y 2 ) 2 Moving at constant rate towards a point You have an object at a start position v 1 and you want to get to an end position v 2 at constant speed s v 1 v 2 is the vector we want to move along We need the direction from this vector v 1 v 2 v 1 v 2 The magnitude is the same as the speed s multiply the direction by the magnitude: s v1 v2 v 1 v 2 I will ask you to do this in Processing in the next lab Aims and objectives By the end of the lecture you will be able to describe 3D coordinates and vectors basic vector mathematics How points are draw using OpenGL How shapes are are drawn using polygons How to use GL_POINTS, GL_TRIANGLES and GL_TRIANGLESTRIP 1 Shapes in OpenGL OpenGL Drawing in OpenGL is all based around points defined as an (x, y, z) vector relative to an origin In OpenGL they are called Verteces (sing. Vertex) Vertex is a mathematical term which basically means a corner, or somewhere where lines meet Soon we will see how they are used 25
Drawing Verteces To draw a vertex we use a method called gl.glvertex3f The 3f bit means that it takes 3 floats for x, y, and z There are other different variants that take different arguments (look them up) Drawing Verteces g l. g l B e g i n ( g l. GL_POINTS ) ; g l. g l V e r t e x ( 2 0 0, 100, 300); g l. glend ( ) ; All drawing code in OpenGL needs to be in between a call to glbegin and glend The GL_POINTS bit means that were are drawing the verteces as a set of points Drawing Verteces g l. g l B e g i n ( g l. GL_POINTS ) ; g l. g l V e r t e x ( 1 0 0, 100, 300); g l. g l V e r t e x ( 1 0 0, 300, 300); g l. g l V e r t e x ( 3 0 0, 200, 300); g l. glend ( ) ; Lets draw a triangle This draws 3 points What if we want to draw a filled in triangle? Drawing A Triangle g l. g l B e g i n ( g l. GL\ _TRIANGLES ) ; g l. g l V e r t e x ( 1 0 0, 100, 300); g l. g l V e r t e x ( 1 0 0, 300, 300); g l. g l V e r t e x ( 3 0 0, 200, 300); g l. glend ( ) ; GL_TRIANGLE takes each 3 points and draws a triangle out of them Polygons In CG we build 3D shapes from a surface made out of polygons 2D shapes like triangles and squares They are defined by the points at their corners (Verteces) complex 3D surfaces can be build up out of a mesh of polygons 26
Triangles We normally use Triangles because they are the simplest polygons They are simple: you can t get two sides that cross eachother They are convex: you can t have bits that poke in They are always planar: all 3 verteces lie on the same plane (they are flat) This means we can have efficient algorithms for rendering them Sometimes we also use quadrilaterals (quads) 4 sided shapes Triangles They are simple: you can t get two sides that cross eachother They are convex: you can t have bits that poke in They are always planar: all 3 verteces lie on the same plane (they are flat) 27
Triangles They are simple: you can t get two sides that cross eachother They are convex: you can t have bits that poke in They are always planar: all 3 verteces lie on the same plane (they are flat) Triangles 28
They are simple: you can t get two sides that cross eachother They are convex: you can t have bits that poke in They are always planar: all 3 verteces lie on the same plane (they are flat) Creating Complex Shapes g l. g l B e g i n ( g l. GL_TRIANGLES ) ; g l. g l V e r t e x ( 1 0 0, 100, 300); g l. g l V e r t e x ( 1 0 0, 300, 300); g l. g l V e r t e x ( 3 0 0, 100, 300); g l. g l V e r t e x ( 1 0 0, 300, 300); g l. g l V e r t e x ( 3 0 0, 100, 300); g l. g l V e r t e x ( 3 0 0, 300, 300); g l. glend ( ) ; We can create a square by putting wo triangles together 29
the last two verteces of the first triangle are the same as the first two of the second This is quite inefficient you have to draw them twice Triangle strips With GL_TRIANGLES verteces are grouped into triangle by take them 3 at a time GL_TRIANGLESTRIP does it more efficiently Triangle strips The first 3 verteces are formed into a triangle After that triangles are formed by using the last two verteces of the previous triangle and then next vertex in sequence g l. g l B e g i n ( g l. GL_TRIANGLESTRIP ) ; g l. g l V e r t e x ( 1 0 0, 100, 300); g l. g l V e r t e x ( 1 0 0, 300, 300); g l. g l V e r t e x ( 3 0 0, 300, 300); g l. glend ( ) ; 30
More efficient Gets much better when you have really big meshes Triangle fans GL_TRIANGLEFAN is similar to a triangle strip except each triangle is formed from The very first vertex in the list The last vertex in the previous triangle The next vertex in the list Drawing a Cube with a Triangle strip How would you draw a cube using a triangle strip? Drawing a Cube with a Triangle strip 31
g l. g l B e g i n ( g l. GL_TRIANGLESTRIP ) ; g l. g l V e r t e x ( 1 0 0, 100, 100); g l. g l V e r t e x ( 1 0 0, 300, 100); g l. g l V e r t e x ( 3 0 0, 300, 100); g l. g l V e r t e x ( 3 0 0, 300, 300); g l. g l V e r t e x ( 3 0 0, 100, 300); g l. g l V e r t e x ( 1 0 0, 100, 100); g l. g l V e r t e x ( 1 0 0, 100, 300); g l. g l V e r t e x ( 1 0 0, 300, 300); g l. g l V e r t e x ( 1 0 0, 300, 100); g l. g l V e r t e x ( 1 0 0, 300, 100); g l. g l V e r t e x ( 1 0 0, 300, 300); g l. g l V e r t e x ( 1 0 0, 100, 300); g l. g l V e r t e x ( 3 0 0, 100, 300); g l. glend ( ) ; More complex objects Cubes are fine but what about more complex objects There are a couple of libraries that help GLU is part of the OpenGL distribution, it has a number of methods for creating shapes The Processing OBJ loader by Saito allows you to load in objects created in a modeling tool like Maya or Blender Look them up Height Maps 32
Generating Terrain A grid of polygons (quads) evenly spaced in x and z y-value is the height, given by a data set or function called a height map Height Maps g l. g l B e g i n ( g l.gl_quads ) ; f o r ( i n t i = 0 ; i < heightmap. l e n g t h 1; i ++) f o r ( i n t j = 0 ; j < heightmap [ i ]. l e n g t h 1; j ++) { g l. g l V e r t e x 3 f ( i s p a c i n g, heightmap [ i ] [ j ], j s p a c i n g ) ; g l. g l V e r t e x 3 f ( i s p a c i n g, heightmap [ i ] [ j + 1 ], ( j +1) s p a c i n g ) ; g l. g l V e r t e x 3 f ( ( i +1) s p a c i n g, heightmap [ i + 1 ] [ j + 1 ], ( j +1) s p a c i n g ) ; g l. g l V e r t e x 3 f ( ( i +1) s p a c i n g, heightmap [ i + 1 ] [ j ], j s p a c i n g ) ; } g l. glend ( ) ; Aims and objectives By the end of the lecture you will be able to describe 3D coordinates and vectors basic vector mathematics How points are draw using OpenGL How shapes are are drawn using polygons How to use GL_POINTS, GL_TRIANGLES and GL_TRIANGLESTRIP 33