1. Computer Graphics Coursework Cookbook original from Anthony Jones modified Dan Cornford (Oct 2010)

2. Introduction Me – Dan Cornford – Used to teach this before I got sacked... You – Computer graphics students – Attending labs? This lecture – Aims to help you with your coursework – Available online... 2

3. Lecture Outline The specification Approaching the problem – Simplification – Paper designs as stepping stones – Scene graphs – Objects – Animations – Lights – Cameras Lecture outcomes Where to get further help 3

4. The Specification It’s a checklist – Covering everything you’ll see in the labs Try to tick off as much as you can – Some items are easier or harder than others – Some items are related The checklist is flexible – Remi will give you marks where you deserve them! A total of 100 marks is available and will be allocated along the following lines: Basic 3D OpenGL program which renders correctly [10] A basic animation (e.g. movement) of a simple object [5] with basic user interaction [5] A self created, well defined 3D object with correct normals [10] Sensible use of lighting, materials and textures [15] Advanced animation (not just static objects moving, but components that move relative to each other) [10] The clarity of the code [5], and good documentation of the program [5] A clear introductory description of the program [5], and a correct scene graph [5] Innovation and novelty in the animation (your ideas - can't tell you this bit!) [25] A total of 100 marks is available and will be allocated along the following lines: Basic 3D OpenGL program which renders correctly [10] A basic animation (e.g. movement) of a simple object [5] with basic user interaction [5] A self created, well defined 3D object with correct normals [10] Sensible use of lighting, materials and textures [15] Advanced animation (not just static objects moving, but components that move relative to each other) [10] The clarity of the code [5], and good documentation of the program [5] A clear introductory description of the program [5], and a correct scene graph [5] Innovation and novelty in the animation (your ideas - can't tell you this bit!) [25] 4

5. The Specification It’s a checklist – Covering everything you’ll see in the labs Try to tick off as much as you can – Some items are easier or harder than others – Some items are related The checklist is flexible – Remi will give you marks where you deserve them! A total of 100 marks is available and will be allocated along the following lines: Basic 3D OpenGL program which renders correctly [10] A basic animation (e.g. movement) of a simple object [5] with basic user interaction [5] A self created, well defined 3D object with correct normals [10] Sensible use of lighting, materials and textures [15] Advanced animation (not just static objects moving, but components that move relative to each other) [10] The clarity of the code [5], and good documentation of the program [5] A clear introductory description of the program [5], and a correct scene graph [5] Innovation and novelty in the animation (your ideas - can't tell you this bit!) [25] A total of 100 marks is available and will be allocated along the following lines: Basic 3D OpenGL program which renders correctly [10] A basic animation (e.g. movement) of a simple object [5] with basic user interaction [5] A self created, well defined 3D object with correct normals [10] Sensible use of lighting, materials and textures [15] Advanced animation (not just static objects moving, but components that move relative to each other) [10] The clarity of the code [5], and good documentation of the program [5] A clear introductory description of the program [5], and a correct scene graph [5] Innovation and novelty in the animation (your ideas - can't tell you this bit!) [25] 5

6. The Specification It’s a checklist – Covering everything you’ll see in the labs Try to tick off as much as you can – Some items are easier or harder than others – Some items are related The checklist is flexible – Remi will give you marks where you deserve them! A total of 100 marks is available and will be allocated along the following lines: Basic 3D OpenGL program which renders correctly [10] A basic animation (e.g. movement) of a simple object [5] with basic user interaction [5] A self created, well defined 3D object with correct normals [10] Sensible use of lighting, materials and textures [15] Advanced animation (not just static objects moving, but components that move relative to each other) [10] The clarity of the code [5], and good documentation of the program [5] A clear introductory description of the program [5], and a correct scene graph [5] Innovation and novelty in the animation (your ideas - can't tell you this bit!) [25] A total of 100 marks is available and will be allocated along the following lines: Basic 3D OpenGL program which renders correctly [10] A basic animation (e.g. movement) of a simple object [5] with basic user interaction [5] A self created, well defined 3D object with correct normals [10] Sensible use of lighting, materials and textures [15] Advanced animation (not just static objects moving, but components that move relative to each other) [10] The clarity of the code [5], and good documentation of the program [5] A clear introductory description of the program [5], and a correct scene graph [5] Innovation and novelty in the animation (your ideas - can't tell you this bit!) [25] 6

7. The Specification It’s a checklist – Covering everything you’ll see in the labs Try to tick off as much as you can – Some items are easier or harder than others – Some items are related The checklist is flexible – Remi will give you marks where you deserve them! A total of 100 marks is available and will be allocated along the following lines: Basic 3D OpenGL program which renders correctly [10] A basic animation (e.g. movement) of a simple object [5] with basic user interaction [5] A self created, well defined 3D object with correct normals [10] Sensible use of lighting, materials and textures [15] Advanced animation (not just static objects moving, but components that move relative to each other) [10] The clarity of the code [5], and good documentation of the program [5] A clear introductory description of the program [5], and a correct scene graph [5] Innovation and novelty in the animation (your ideas - can't tell you this bit!) [25] A total of 100 marks is available and will be allocated along the following lines: Basic 3D OpenGL program which renders correctly [10] A basic animation (e.g. movement) of a simple object [5] with basic user interaction [5] A self created, well defined 3D object with correct normals [10] Sensible use of lighting, materials and textures [15] Advanced animation (not just static objects moving, but components that move relative to each other) [10] The clarity of the code [5], and good documentation of the program [5] A clear introductory description of the program [5], and a correct scene graph [5] Innovation and novelty in the animation (your ideas - can't tell you this bit!) [25] 7

8. The Specification Topic changes every year – What is the topic this year? Lecture example: – Topic: “A sporting event” – Idea: England won the world cup in 1966 How do we turn this idea into code? 8

9. Approaching The Problem: Mind the Gap! protected void renderScene() { // draw the ground plane GL11.glPushMatrix(); { // position, scale and draw the ground plane GL11.glTranslatef(0.0f,-2.15f,-10.0f); GL11.glScaled(10.0f, 1.0f, 10.0f); drawUnitPlane(); } GL11.glPopMatrix(); // position, rotate and draw the person GL11.glTranslatef(0.0f,personOffsetY,-10.0f); GL11.glRotatef(personSpinY, 0.0f, 1.0f, 0.0f); person.draw(); } 9

10. The Wrong Approach 10

11. The Right Approach Methodical, incremental development based on a careful design Treat the specification as a checklist Customize the coursework template 11

12. The Right Approach Methodical, incremental development based on a careful design Treat the specification as a checklist Customize the coursework template Keep It Short & Simple! (KISS) “ Everything should be made as simple as possible, but no simpler.” ( Albert Einstein) 12

13. The Right Approach protected void renderScene() { // draw the ground plane GL11.glPushMatrix(); { // position, scale and draw the ground plane GL11.glTranslatef(0.0f,-2.15f,-10.0f); GL11.glScaled(10.0f, 1.0f, 10.0f); drawUnitPlane(); } GL11.glPopMatrix(); // position, rotate and draw the person GL11.glTranslatef(0.0f,personOffsetY,-10.0f); GL11.glRotatef(personSpinY, 0.0f, 1.0f, 0.0f); person.draw(); } Objects Animations Lights Cameras 13

14. Simplify Your 3D Scene Remember to KISS! Ideas  Paper design – Objects – Animations – Lights – Cameras Paper Design  Code 14

15. Simplify Your 3D Scene Remember to KISS! Ideas  Paper design – Objects – Animations – Lights – Cameras Paper Design  Code 15

16. Paper Design Pencil and paper – Remember to KISS! – Start in 2D and move to 3D later – Use different colours Understand your scene as: – Scene graph – Objects – Animations 16

17. Scene Graphs Nodes Arcs Sun Earth Moon 17

18. Scene Graphs Nodes – Scene objects – Based about a centroid Typically a central point Defines the object’s position “Object handle” Sun Earth Moon 18

19. Scene Graphs Arcs – Connect one node centroid to another – Create a node hierarchy Node ownership Node dependency Sun Earth Moon 19

20. Scene Graphs Body Head Arms: – Shoulder – Upper Arm – Elbow – Lower Arm 20

21. Scene Graphs Body Head Arms Waist Legs: – Hip – Upper Leg – Knee – Lower Leg – Foot 21

22. Each leg: Hip Upper leg Knee Lower leg Foot Body Hea d Waist World Origin Each arm: ● Shoulder ● Upper arm ● Elbow ● Lower arm 22

23. Exercise 1: Draw The Scene Graph Upper arm Elbow Lower arm Upper claw Lower claw Wrist Shoulder 23

24. Exercise 1: Solution Upper arm Elbow Lower arm Upper claw Lower claw Wrist World Origin Shoulder 24

25. Scene Graphs  Code Start at the world origin Traverse your scene graph Move from one object to another Move along the arcs Move down and right only Sun Earth Moon Mars Phobos Deimos Scene Origin 25

26. Scene Graphs  Code Each time you move along an arc, you need a matrix transform Typically a translation and/or a rotation Sometimes the identity matrix Sun Earth Moon Mars Phobos Deimos Scene Origin 26

27. Scene Graphs  Code When you reach an object, draw it Using your own objects Using GLUT quadrics Sun Earth Moon Mars Phobos Deimos Scene Origin 27

28. Scene Graphs  Code Traverse your scene graph Move from one object to another Move along the arcs Move down and right only What happens when you reach the Moon? You can’t go down and right! Sun Earth Moon Mars Phobos Deimos Scene Origin 28

29. Scene Graphs  Code Use the matrix stack to jump between nodes PushMatrix saves your current position PopMatrix restores the last saved position So... Push at the Sun Traverse to the Moon Pop back to the Sun Sun Earth Moon Mars Phobos Deimos Scene Origin (PUSH) 29

30. Scene Graphs  Code Once you’re back at the Sun... Traverse to Mars Push Mars Traverse to Phobos Pop back to Mars Traverse to Deimos Sun Earth Moon Mars Phobos Deimos Scene Origin (PUSH) 30

31. Scene Graphs  Code Simple rule: For each child in the current object’s children { PushMatrix(); Transform to child Draw child PopMatrix(); } Sun Earth Moon Mars Phobos Deimos Scene Origin 31

32. Paper Design Pencil and paper – Remember to KISS! – Start in 2D and move to 3D later – Use different colours Understand your scene as: – Scene graph – Objects – Animations 32

33. Objects Centroids – “Object handles” Unit sizes – Unit cube – Unit quad GLU Quadrics Your own objects Materials and textures 33

34. Objects Centroids – “Object handles” Unit sizes – Unit cube – Unit quad GLU Quadrics Your own objects Materials and textures 34 1 unit

35. Objects Centroids – “Object handles” Unit sizes – Unit cube – Unit quad GLU Quadrics Your own objects Materials and textures 35

36. GLU Quadrics “Automatic” objects Spheres, cylinders and disks Much of the work is done for you – Vertices calculated for you – Faces defined for you – Surface normals calculated for you Provide appropriate parameters – Commonly defined by radius, slices and stacks (disks have loops instead of stacks) Check the documentation 36

37. Objects Centroids – “Object handles” Unit sizes – Unit cube – Unit quad GLU Quadrics Your own objects Materials and textures 37

38. Defining Your Own Objects Position centroid – at {0.0, 0.0, 0.0} 1 unit 38

39. Defining Your Own Objects Position centroid Define vertices – A {-0.5,-0.5,+0.5} – B {-0.5,+0.5,+0.5} – C {+0.5,+0.5,+0.5} – D {+0.5,-0.5,+0.5} AD BC 1 unit 39

40. Defining Your Own Objects Position centroid Define vertices – A {-0.5,-0.5,+0.5} – B {-0.5,+0.5,+0.5} – C {+0.5,+0.5,+0.5} – D {+0.5,-0.5,+0.5} – E {-0.5,-0.5,-0.5} – F {-0.5,+0.5,-0.5} – G {+0.5,+0.5,-0.5} – H {+0.5,-0.5,-0.5} AD BC E FG H 1 unit 40

41. Defining Your Own Objects Position centroid Define vertices Define faces – Front {C, B, A, D} – Left {B, F, E, A} – Back {F, G, H, E} – Right {G, C, D, H} – Top {C, G, F, B} – Bottom {D, A, E, H} AD BC EFGH 1 unit 41

42. Defining Your Own Objects Position centroid Define vertices Define faces – Front {C, B, A, D} – Left {B, F, E, A} – Back {F, G, H, E} – Right {G, C, D, H} – Top {C, G, F, B} – Bottom {D, A, E, H} AD BC EFGH 1 unit 42

43. Defining Your Own Objects Position centroid Define vertices Define faces – Front {C, B, A, D} – Left {B, F, E, A} – Back {F, G, H, E} – Right {G, C, D, H} – Top {C, G, F, B} – Bottom {D, A, E, H} AD BC EFGH 1 unit 43

44. Defining Your Own Objects Position centroid Define vertices Define faces – Front {C, B, A, D} – Left {B, F, E, A} – Back {F, G, H, E} – Right {G, C, D, H} – Top {C, G, F, B} – Bottom {D, A, E, H} AD BC EFGH 1 unit 44

45. Defining Your Own Objects Position centroid Define vertices Define faces – Front {C, B, A, D} – Left {B, F, E, A} – Back {F, G, H, E} – Right {G, C, D, H} – Top {C, G, F, B} – Bottom {D, A, E, H} AD BC EFGH 1 unit 45

46. Defining Your Own Objects Position centroid Define vertices Define faces – Front {C, B, A, D} – Left {B, F, E, A} – Back {F, G, H, E} – Right {G, C, D, H} – Top {C, G, F, B} – Bottom {D, A, E, H} AD BC EFGH 1 unit 46

47. Defining Your Own Objects Position centroid Define vertices Define faces Normals – Java Normal class – 3 Vertex parameters – Same order as when defining faces – Should be clear from the lab code C E 1 unit 47

48. Exercise 2: Define The Pyramid Position centroid {0.0,0.0,0.0} Define vertices –A {-0.5,-h/2,+0.5} –B {?,?,?} –C {?,?,?} –D {?,?,?} –E {?,?,?} Define faces –Front {A, B, E} –Left {?,?,?} –Back {?,?,?} –Right {?,?,?} –Bottom {?,?,?,?} 1 unit h units ABCDE 48

49. Exercise 2: Solution Position centroid {0.0,0.0,0.0} Define vertices –A {-0.5,-h/2,+0.5} –B {+0.5,-h/2,+0.5} –C {-0.5,-h/2,-0.5} –D {+0.5,-h/2,-0.5} –E {0.0,+h/2, 0.0} Define faces –Front {A, B, E} –Left {C, A, E} –Back {D, C, E} –Right {B, D, E} –Bottom {C, D, B, A} 1 unit h units ABCDE 49

50. Objects Centroids – “Object handles” Unit sizes – Unit cube – Unit quad GLU Quadrics Your own objects Materials and textures 50

51. Materials And Textures Did you remember to KISS? Use materials and not colours – More marks for you! – Make sure you’ve removed any glColor calls Use Nate Robins’ online tutorial programs – Interactive – Choose material properties for your objects Only texture square faces – Ask in the labs for help with other shapes 51

52. Paper Design Pencil and paper – Remember to KISS! – Start in 2D and move to 3D later – Use different colours Understand your scene as: – Scene graph – Objects – Animations 52

53. Animations 2 types of animation 1.User controlled animation 2.Scripted animation 53

54. All Animations 5 simple steps: 1.Identify animated transforms 2.Declare variables for angles and offsets 3.Initialize your variables when they are declared 4.Update your variables in your updateScene method 5.Use your variables in your drawing methods 54

55. User Controlled Animations 5 simple steps: 1.Identify animated transforms 2.Declare variables for angles and offsets 3.Initialize your variables when they are declared 4.Update your variables in your updateScene checkSceneInput method 5.Use your variables in your drawing methods Adding user interaction to your animations – Don't update your variables in your updateScene method – Modify them in your checkSceneInput method instead 55

56. Scripted Animations 5 simple steps: 1.Identify animated transforms 2.Declare variables for angles and offsets 3.Initialize your variables when they are declared 4.Update your variables in your updateScene method 5.Use your variables in your drawing methods Use animation scripts in your updateScene method to change your scene at runtime according to a set of predefined rules 56

57. Scripted Animations Make the pendulum swing Frame 57

58. Scripted Animations Make the pendulum swing – 60 degree swing Frame 58

59. Scripted Animations Make the pendulum swing – 60 degree swing Frame frame = 0 swing = 0.0 59

60. Scripted Animations Make the pendulum swing – 60 degree swing Frame frame = 30 swing = -30.0 30 60

61. Scripted Animations Make the pendulum swing – 60 degree swing Frame frame = 90 swing = +30.0 3060 61

62. Scripted Animations Make the pendulum swing – 60 degree swing Frame frame = 120 swing = 0.0 306030 62

63. Scripted Animations Make the pendulum swing – 60 degree swing Frame frame = 0 swing = 0.0 306030 63

64. Pendulum Code // increment the frame counter ++frame; 64

65. Pendulum Code // increment the frame counter ++frame; if (frame < 30) // During the first 30 frames, { swing = swing - 1.0; // swing the pendulum to the left } 65

66. Pendulum Code // increment the frame counter ++frame; if (frame < 30) // During the first 30 frames, { swing = swing - 1.0; // swing the pendulum to the left } else if (frame < 90) // During the next 60 frames, { swing = swing + 1.0; // swing the pendulum to the right } 66

67. Pendulum Code // increment the frame counter ++frame; if (frame < 30) // During the first 30 frames, { swing = swing - 1.0; // swing the pendulum to the left } else if (frame < 90) // During the next 60 frames, { swing = swing + 1.0; // swing the pendulum to the right } else if (frame < 120) // During the next 30 frames, { swing = swing - 1.0; // swing the pendulum back to 0 } 67

68. Pendulum Code // increment the frame counter ++frame; if (frame < 30) // During the first 30 frames, { swing = swing - 1.0; // swing the pendulum to the left } else if (frame < 90) // During the next 60 frames, { swing = swing + 1.0; // swing the pendulum to the right } else if (frame < 120) // During the next 30 frames, { swing = swing - 1.0; // swing the pendulum back to 0 } else { frame = 0; // Reset the animation } 68

69. Simplify Your 3D Scene Remember to KISS! Ideas  Paper design – Objects – Animations – Lights – Cameras Paper Design  Code 69

70. Lights Global properties Per-light properties 70

71. Lights // global ambient light level float globalAmbient[] = {0.2f, 0.2f, 0.2f, 1.0f}; // set the global ambient lighting glLightModel(GL_LIGHT_MODEL_AMBIENT, globalAmbient); // the first light for the scene is soft blue... float diffuse0[] = { 0.2f, 0.2f, 0.4f, 1.0f}; //...with a very dim ambient contribution... float ambient0[] = { 0.05f, 0.05f, 0.05f, 1.0f}; //...and is positioned above the viewpoint float position0[] = { 0.0f, 10.0f, 0.0f, 1.0f}; // supply OpenGL with the properties for the first light glLight(GL_LIGHT0, GL_AMBIENT, ambient0); glLight(GL_LIGHT0, GL_DIFFUSE, diffuse0); glLight(GL_LIGHT0, GL_POSITION, position0); // enable the first light glEnable(GL_LIGHT0); // enable lighting calculations glEnable(GL_LIGHTING); 71

72. Lights Global properties Per-light properties – 8 lights in total – Named GL_LIGHT0 to GL_LIGHT7 – Describe, enable and disable each one separately 72

73. Lights // global ambient light level float globalAmbient[] = {0.2f, 0.2f, 0.2f, 1.0f}; // set the global ambient lighting glLightModel(GL_LIGHT_MODEL_AMBIENT, globalAmbient); // the first light for the scene is soft blue... float diffuse0[] = { 0.2f, 0.2f, 0.4f, 1.0f}; //...with a very dim ambient contribution... float ambient0[] = { 0.05f, 0.05f, 0.05f, 1.0f}; //...and is positioned above the viewpoint float position0[] = { 0.0f, 10.0f, 0.0f, 1.0f}; // supply OpenGL with the properties for the first light glLight(GL_LIGHT0, GL_AMBIENT, ambient0); glLight(GL_LIGHT0, GL_DIFFUSE, diffuse0); glLight(GL_LIGHT0, GL_POSITION, position0); // enable the first light glEnable(GL_LIGHT0); // enable lighting calculations glEnable(GL_LIGHTING); 73

74. Cameras gluLookAt(x,y,z, x,y,z, x,y,z) – Camera position (x,y,z) – Target position (x,y,z) – Up vector (x,y,z) 74

75. Cameras gluLookAt – Camera position (x,y,z) – Target position (x,y,z) – Up vector (x,y,z) 75

76. Cameras gluLookAt – Camera position (x,y,z) – Target position (x,y,z) – Up vector (x,y,z) 76

77. Cameras gluLookAt – Camera position (x,y,z) – Target position (x,y,z) – Up vector (x,y,z) (0.0,1.0,0.0) in most cases 77

78. Cameras gluLookAt – Camera position (x,y,z) – Target position (x,y,z) – Up vector (x,y,z) (1.0,0.0,0.0) or (0.0,0.0,1.0) when looking down 78

79. Lecture Outcomes: A Better Approach 1.Design a simple scene – Think about how you can satisfy the coursework specification; treat it as a checklist 2.Understand your scene with a paper design – Scene graphs – Objects – Animations – Lights – Cameras 3.Translate your paper design to OpenGL code – A simplified process using scene graphs 79

80. Where To Get Help Did you remember to KISS? Return to pencil and paper Labs – Lab notes – Lab examples – Lab demonstrators Internet and others – But be careful to avoid collusion – It’s a bit obvious… Remi... 80

81. Lecture Summary The specification Approaching the problem – Simplification – Paper designs as stepping stones – Scene graphs – Objects – Animations – Lights – Cameras Lecture outcomes Where to get further help 81

82. Thanks for listening 82