1. Assistant Prof. Dr. Aybars UGUR
Computer Graphics
Assistant Prof. Dr. Aybars UGUR

2. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Contents
What is computer Graphics
3D Transformations
3D Object Representations
Application Areas of Computer Graphics
Major Subfields of CG
Game Engines
3D Application Programming Interfaces
3D Application Programming Interfaces for Mobile Devices
Java 3D
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

3. Computer Graphics (CG)
Computer Graphics is a subfield of computer science.
Studies digitally synthesizing and manipulating visual content using computational techniques.
All aspects of producing pictures or image using a computer.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

4. FACHHOCHSCHULE GIESSEN-FRIEDBERG
3D Computer Graphics
Graphics that use a three-dimensional representation of geometric data that is stored in the computer.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

5. What is computer graphics about?in
out
data
image i o
traditional computing
computer graphics
computer vision
image processing
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

6. FACHHOCHSCHULE GIESSEN-FRIEDBERG
3D Transformations
Some Mathematical Background
Translation,
Rotation x y z P1
P1'
Scaling, etc. x y z
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

7. 3D Object Representations
B-Representation
Sweep Representations
CSG Methods
Splines
Quadrics
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

8. Boundary Representations (B-rep)
Describe a 3D object as a set of surfaces that seperate the object interior from the environment.
A cuboid consists of six faces or rectangular polygons (front, left, back or rear, right, bottom, and top), eight vertices, and twelve edges. x y z
Back
Face
(S0)
Bottom Face (S1)
Left
(S2)
(S3) Front Face
(S4) Top Face
Right
(S5)
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

9. Sweep Representations
Idea is to define a 2D shape and then a sweep which will move the shape through 3D space to create a 3D object.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

10. Sweep Representations
A sweep can follow any path.
The object being swept can vary in size along the path.
A simple 2D curve can
produce interesting 3D shapes.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

11. Constructive Solid-Geometry Methods (CSG)
Given two 3D objects, create new ones with the set operations of
union
intersection
difference
Top subtracted from bottom yields
A flute made from a cylinder, 1 ellipsoid and 8 circles where the ellipsoid and 8 circles are subtracted from the cylinder.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

12. FACHHOCHSCHULE GIESSEN-FRIEDBERG
What is a Spline Curve?
In computer graphics, the term refers to any composite curve formed with polynomial sections satisfying some specified continuity conditions at the boundary of the pieces.
There are many different types of spline curves and we will investigate only a few of them here.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

13. Interpolating and Approximating Splines
We specify a spline curve by giving a set of coordinate positions in 2D.
The coordinates are either interpolated or approximated using points called control points.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

14. Interpolating and Approximating
Interpolation is often used to digitize drawings or specify animation paths.
Approximation is used predominately as a design tool to create object shapes.
Although we are talking about curves right now, these curves can be used to create 3D surfaces such as
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

15. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Working with Splines
Spline curves (and surfaces) are defined, modified, and manipulated with operations on the control points.
The designer selects (often interactively) locations for the control points and these influence the position and shape of the curve.
By repositioning the control points, the curve can be shaped by eyeballing it and adjusting its shape until it is what is desired.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

16. Splines Have Many Nice Characteristics for Graphics
Geometric transformations only must be applied to the control points and then the curve can be regenerated – i.e splines can be manipulated easily just like polygons.
Given a set of points, the convex hull of the points (in 2D) is the smallest set containing all the points that is convex.
Intuitively, think of a rubber band being stretched to include all the points – that would define the convex hull.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

17. Splines Have Many Nice Characteristics for Graphics
For most splines, the curve lies in the convex hull of the control points
This property means the curve will not deviate too far from the control points.
In particular, wild oscillations won’t occur.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

18. 3D Graphics Pipeline WORLD SCENE/OBJECT 2D PIXELMAP DISPLAY
Modelling coordinates:
- world coordinate system,
- object coordinate system
3D MODELLING
VIEWING
3D CLIPPING
Camera coordinates
PROJECTION
Screen/Window coordinates
RASTERIZATION
Device coordinates
2D PIXELMAP DISPLAY
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

19. Application Areas of Computer Graphics
CAD - Computer Aided Design
Education and Training
Entertainment
Scientific Visualization
Virtual Reality
Web and Web3D
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

20. CAD (Computer Aided Design)
is the use of computer technology to aid in the design of a product. Some Fields of Use:
The Architecture, Engineering, and Construction Industry
Mechanical Engineering
Product Design (Textile, Food, Computers, Electronic Devices, etc.)
Automotive, Aerospace, …
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

21. FACHHOCHSCHULE GIESSEN-FRIEDBERG
CAD - I
Los Angeles Airport
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

22. FACHHOCHSCHULE GIESSEN-FRIEDBERG
CAD - II
Boeing 777
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

23. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Entertainment - I
Computer Graphics in movie industry
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

24. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Entertainment
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

25. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Entertainment - II
Games
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

26. Education and Training - I
Computer generated models of physical, financial, political, social, economic, and other systems are often used as educational aids.
Aircraft, naval, and spacecraft simulators
Simulators for practice sessions or training of ship captains, aircraft pilots, heavy equipment operators, and air traffic control personnel.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

27. Education and Training - II
Flight Simulator
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

28. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Virtual Reality (VR)
Virtual Reality (VR) is a computer system used to create an artificial world in which the user has the impression of being in that world and with the ability to navigate through the world and manipulate objects in the world.
VR is a technology, which allows a user to interact with a computer simulated environment, be it a real or imagined one.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

29. Data Gloves, Head Mounted Display
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

30. FACHHOCHSCHULE GIESSEN-FRIEDBERG
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

31. FACHHOCHSCHULE GIESSEN-FRIEDBERG
HMD
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

32. Scientific Visualization I
Scientific, engineering and medical data.
High number of data.
Complex structures (medical, …)
Simulation of complex process
Complex molecular structure
such as protein and DNA
weather forecasting
Complex mathematical object
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

33. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Web and Web3D
The Web3D Consortium is an international organization established to define and promote standards for 3D graphics representation on the World Wide Web. From the perspective of the Web3D Consortium, “Web3D” is an overarching term to describe protocols, languages, file formats, and other technologies that are used to deliver compelling 3D content over the World Wide Web. X3D, Java 3D and VRML are some of the key Web 3D Technologies.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

34. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Major subfields of CG
Geometry (studies representation of three-dimensional objects )
Animation (studies descriptions for surfaces that move or deform over time)
Rendering
Imaging
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

35. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Rendering
Converts a model into an image
Result is physically-based photorealistic images
Illumination,
Reflection,
Refraction,
etc.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

36. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Texture Mapping
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

37. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Ray Tracing
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

38. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Image Processing
Image processing is any form of signal processing for which the input is an image, such as photographs or frames of video; the output of image processing can be either an image or a set of characteristics or parameters related to the image.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

39. Vector Graphics vs. Raster Graphics
Macromedia flash is vector based
JPG images are raster based
Time to transmit vs. time to generate
Reuse of image description
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

40. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Vector Graphics
A line is represented by endpoints (20,20) to (100,100)
If you want the image larger, no problem…
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

41. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Raster Graphics
A line is represented by assigning some pixels a value of 1.
The entire line is specified by the pixel values
What do we do to make image larger?
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

42. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Colors
Color in CG is commonly specified in RGB format.
A color in RGB format is a triplet of numbers. The three components are Red, Green and Blue.
Other Color Models?
Blue
Red
Green
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

43. FACHHOCHSCHULE GIESSEN-FRIEDBERG
GAME ENGINES
Game Engine
3D engine
Sound Engine
Input Engine
Network Engine
Physics Engine
AI Engine
GUI Engine
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

44. FACHHOCHSCHULE GIESSEN-FRIEDBERG
TORQUE GAME ENGINE
GAME ENGINE
MAP EDITOR
TEXTURE GENERATORS
MODEL GENERATORS
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

45. 3D Application Programming Interfaces
For writing applications that produce 2D and 3D computer graphics.
PHIGS (1990’s)
OPENGL was developed by Silicon Graphics Inc. (SGI) in 1992 and is widely used in CAD, VR, scientific visualization, It is also used in video games, where it competes with Direct3D on MS Windows platforms
Java 3D is a scene graph-based 3D application programming interface (API) for the Java platform. It runs on top of either OpenGL or Direct3D.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

46. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Java–based 3D APIs
Java 3D is not the only high-level API option to render 3D in Java. In part due to the pause in development during 2003 and 2004, several competing Java scene graph technologies emerged:
General purpose:
AgentFX
Strata Live 3D
Gaming:
Xith 3D
jMonkey Engine
Espresso3D
Visualization:
Aviatrix 3D
JView
Jreality.
JOGL is a popular alternative to scene graph APIs
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

47. 3D Application Programming Interfaces For Mobile Devices
The Mobile 3D Graphics API, commonly referred to as M3G, is a specification defining an API for writing Java programs that produce 3D computer graphics. M3G is not Java 3D. M3G was designed to meet the specific needs of mobile devices, which are constrained in terms of memory, memory bandwidth, and processing power.
OpenGL ES (OpenGL for Embedded Systems) is a subset of the OpenGL 3D graphics API designed for embedded devices such as mobile phones, PDAs, and video game consoles.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

48. Java 3D

49. 3D Application Programming Interfaces For Mobile Devices
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

50. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Java3D’s SceneGraph
VirtualUniverse
Locale
Root group BG BG TG
robot arm
environment TG TG
view
sphere TG
base S S
Leftupper figure shows a robot arm and a sphere. Right figure shows the java3d scenegraph . In scenegraph, rightmost branch express camera(view), or light(omitted).
Root object(virtualuniverse) is universe verbatim. Locale object abstracts a limit-range of area. BG(branch group) is a group of objects. TG(transform group) abstract the transformation matrix corresponding with such as robot arm’s joint. S(shape3D) express geometry and appearance(color and material, …) of object(arm or sphere , etc..) TG
bottom arm S
up arm S
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

51. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Java3D’s SceneGraph
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

52. SceneGraph Manipulation
Robot arm
Create arm
add robot arm group to SceneGraph
Move arm
modify TransformGroup of the arm
Change color
modify the Appearance of the arm’s Shape3D
Move camera
modify view TransformGroup
In Java3D coding, we only construct the scenegraph for the environment we will make.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

53. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Robot Arm
VitualUniverse
Locale
Root group BG BG TG
robot arm
environment TG TG
view
sphere TG
base S S TG
bottom arm S
up arm S
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

54. Code (construct robot arm) - I
public void init() // applet’s init() function
{ setLayout(new BorderLayout());
GraphicsConfiguration config =
SimpleUniverse.getPreferredConfiguration();
Canvas3D c = new Canvas3D(config);
add("Center", c);
// create simple universe( camera, lights, ...)
u = new SimpleUniverse(c);
// This will move the ViewPlatform back a bit so the
// objects in the scene can be viewed.
u.getViewingPlatform().setNominalViewingTransform();
viewTrans = u.getViewingPlatform().getViewPlatformTransform();
// Create a robot arm
createSceneGraph();
// add root group
u.addBranchGraph(rootGroup); }
This code is a init function of robot arm java applet. In this, we construct the scenegraph. Firstly, make the default scenegraph include light,camera and etc(SimpleUniverse(c))
And attach robot arm’s scenegraph(createSceneGraph() is a user function).
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

55. Code (construct robot arm) - II
public void createSceneGraph() {
// create root
rootGroup = new BranchGroup();
rootTrans = new TransformGroup();
rootTrans.setCapability(TransformGroup.ALLOW_TRANSFORM_READ);
rootTrans.setCapability(TransformGroup.ALLOW_TRANSFORM_WRITE);
// transform sphere
sphereTrans = new TransformGroup();
Transform3D sphereT3d = new Transform3D();
sphereT3d.setTranslation(new Vector3f(0.5f,0.0f,0.0f));
sphereTrans.setTransform(sphereT3d);
In createSceneGraph(), we merely create each node(branch group, transform group, shape3D object, etc.) and construct the hierarchy.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

56. Code (construct robot arm) - I
// create Appearance
Appearance redLook = new Appearance();
ColoringAttributes redColorAttr = new ColoringAttributes();
redColorAttr.setColor(new Color3f(1.0f,0.0f,0.0f));
redLook.setColoringAttributes(redColorAttr);
// create Sphere
sphere = new Sphere(0.1f,redLook);
// add sphere into scenegraph
sphereTrans.addChild(sphere);
rootTrans.addChild(sphereTrans);
// create arm
…..
} // end of createSceneGraph()
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

57. Creating Geometry and Appearance
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

58. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Shape3D Class
Java3D class which defines a visual object.
Geometry class
Appearance class
PointAttributes
LineAttributes
ColoringAttributes
Material
TransparencyAttributes
RenderingAttributes
TextureAttributes
Texture
TexCoordGeneration
Shape3D object has two objects, geometry and appearance
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

59. Easier Content Creation
Using Geometry
Loading Objects (3DS Max, OBJ, etc. Models)
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

60. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Geometry
GeometryArray
GeometryStripArray
Java3D’s Geometry object is abstract of opengl’s geometry-related function. The type of Geometry object is same with opengl’s.
IndexedGeometryArray
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

61. FACHHOCHSCHULE GIESSEN-FRIEDBERG
Conclusion
Web3D
Mobile Graphics
Photorealistic Rendering
Special Effects
Game Engines
Graphics Software
Quality
Cost
Easy
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

62. FACHHOCHSCHULE GIESSEN-FRIEDBERG
References
Aybars UGUR, Computer Graphics Lecture Notes, EGE University, Computer Engineering Department, Turkey, 2001.
Hearn, D. and Baker, M.P., 2004, Computer Graphics with OpenGL, Prentice-Hall, USA, 857p. 
Greg Humphreys, Introduction to Computer Graphics, Lecture Notes, Virginia University, 2004.
Seungwoo Oh, Lecture Notes, KAIST Virtual Reality Lab., Korea, 2004.
Wikipedia, 2008.
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG

63. FACHHOCHSCHULE GIESSEN-FRIEDBERG
THANKS
Any Questions?
April 2008
FACHHOCHSCHULE GIESSEN-FRIEDBERG