Computer Graphics

Computer GraphicsComputer Graphics

Assistant Prof. Dr. Aybars UGURAssistant Prof. Dr. Aybars UGUR

April 2008 2FACHHOCHSCHULE GIESSEN-FRIEDBERG

ContentsContents

What is computer GraphicsWhat is computer Graphics 3D Transformations3D Transformations 3D Object Representations3D Object Representations Application Areas of Computer GraphicsApplication Areas of Computer Graphics Major Subfields of CGMajor Subfields of CG Game EnginesGame Engines 3D Application Programming Interfaces3D Application Programming Interfaces 3D Application Programming Interfaces 3D Application Programming Interfaces

for Mobile Devicesfor Mobile Devices Java 3DJava 3D


Computer Graphics (CG)Computer Graphics (CG)

Computer Graphics is a subfield of Computer Graphics is a subfield of computer science.computer science.

Studies digitally synthesizing and Studies digitally synthesizing and manipulating visual content using manipulating visual content using computational techniques.computational techniques.

All aspects of producing pictures or image All aspects of producing pictures or image using a computerusing a computer..


3D Computer Graphics3D Computer Graphics

Graphics that use a three-dimensional Graphics that use a three-dimensional representation of geometric data that is representation of geometric data that is stored in the computer. stored in the computer.


What is computer graphics What is computer graphics about?about?computer

in out

data

image

data imagei

o

traditional computing

computer graphics

computer vision

image processin

g


3D Transformations3D Transformations

Some Mathematical BackgroundSome Mathematical Background

Translation, Translation,

x

y

z

P1

P1' Scaling, etc.

x

y

z

Rotation


3D Object Representations3D Object Representations

B-RepresentationB-Representation Sweep RepresentationsSweep Representations CSG MethodsCSG Methods SplinesSplines QuadricsQuadrics


Boundary Representations Boundary Representations (B-rep)(B-rep)

Describe a 3D object as a set of surfaces Describe a 3D object as a set of surfaces that seperate the object interior from the that seperate the object interior from the environment.environment.

A cuboid consists of six faces or A cuboid consists of six faces or rectangular polygons (front, left, back or rectangular polygons (front, left, back or rear, right, bottom, and top), eight rear, right, bottom, and top), eight vertices, and twelve edges. vertices, and twelve edges.

x

y

z

BackFace(S0)

Bottom Face (S1)

LeftFace(S2)

(S3) Front Face

(S4) Top Face

RightFace(S5)


Sweep RepresentationsSweep Representations

Idea is to define a 2D shape and then a Idea is to define a 2D shape and then a sweep which will move the shape through sweep which will move the shape through 3D space to create a 3D object.3D space to create a 3D object.


Sweep RepresentationsSweep Representations A sweep can follow any path.A sweep can follow any path. The object being swept can vary in size The object being swept can vary in size

along the path.along the path. A simple 2D curve can A simple 2D curve can

produce interestingproduce interesting 3D shapes.3D shapes.


Constructive Solid-Geometry Constructive Solid-Geometry MethodsMethods

(CSG)(CSG) Given two 3D objects, create new ones Given two 3D objects, create new ones with the set operations ofwith the set operations of unionunion intersectionintersection differencedifference

Top subtracted from Top subtracted from bottom yieldsbottom yields

A flute made from a A flute made from a cylinder, 1 ellipsoid and 8 cylinder, 1 ellipsoid and 8 circles where the ellipsoid circles where the ellipsoid and 8 circles are subtracted and 8 circles are subtracted from the cylinder.from the cylinder.


What is a Spline Curve?What is a Spline Curve?

In computer graphics, the term refers to In computer graphics, the term refers to any composite curve formed with any composite curve formed with polynomial sections satisfying some polynomial sections satisfying some specified continuity conditions at the specified continuity conditions at the boundary of the pieces.boundary of the pieces.

There are many different types of spline There are many different types of spline curves and we will investigate only a few curves and we will investigate only a few of them here.of them here.


Interpolating and Interpolating and Approximating SplinesApproximating Splines

We specify a spline curve by giving a set We specify a spline curve by giving a set of coordinate positions in 2D.of coordinate positions in 2D.

The coordinates are either interpolated or The coordinates are either interpolated or approximated using points called control approximated using points called control points.points.


Interpolating and Interpolating and ApproximatingApproximating

Interpolation is often used to digitize Interpolation is often used to digitize drawings or specify animation paths.drawings or specify animation paths.

Approximation is used predominately as a Approximation is used predominately as a design tool to create object shapes.design tool to create object shapes.

Although we are talking about curves Although we are talking about curves right now, these curves can be used to right now, these curves can be used to create 3D surfaces such as create 3D surfaces such as


Working with SplinesWorking with Splines

Spline curves (and surfaces) are defined, Spline curves (and surfaces) are defined, modified, and manipulated with operations modified, and manipulated with operations on the control points.on the control points.

The designer selects (often interactively) The designer selects (often interactively) locations for the control points and these locations for the control points and these influence the position and shape of the influence the position and shape of the curve.curve.

By repositioning the control points, the By repositioning the control points, the curve can be shaped by eyeballing it and curve can be shaped by eyeballing it and adjusting its shape until it is what is desired.adjusting its shape until it is what is desired.


Splines Have Many Nice Splines Have Many Nice Characteristics for GraphicsCharacteristics for Graphics

Geometric transformations only must be Geometric transformations only must be applied to the control points and then the applied to the control points and then the curve can be regenerated – i.e splines can curve can be regenerated – i.e splines can be manipulated easily just like polygons.be manipulated easily just like polygons.

Given a set of points, the convex hull of Given a set of points, the convex hull of the points (in 2D) is the smallest set the points (in 2D) is the smallest set containing all the points that is convex.containing all the points that is convex.

Intuitively, think of a rubber band being Intuitively, think of a rubber band being stretched to include all the points – that stretched to include all the points – that would define the convex hull.would define the convex hull.


Splines Have Many Nice Splines Have Many Nice Characteristics for GraphicsCharacteristics for Graphics

For most splines, For most splines, the curve lies in the the curve lies in the convex hull of the convex hull of the control pointscontrol points

This property means the curve will not deviate too far from the control points.

In particular, wild oscillations won’t occur.


3D Graphics Pipeline3D Graphics PipelineWORLD SCENE/OBJECT

3D MODELLING

3D CLIPPING

PROJECTION

RASTERIZATION

2D PIXELMAP DISPLAY

Modelling coordinates:- world coordinate system, - object coordinate system

Camera coordinates

Screen/Window coordinates

Device coordinates

VIEWING


Application Areas of Application Areas of Computer GraphicsComputer Graphics

CAD - Computer Aided DesignCAD - Computer Aided Design Education and TrainingEducation and Training EntertainmentEntertainment Scientific VisualizationScientific Visualization Virtual RealityVirtual Reality Web and Web3DWeb and Web3D


CAD (Computer Aided CAD (Computer Aided Design)Design)

is the use of computer technology to aid in the is the use of computer technology to aid in the design of a product. Some Fields of Use:design of a product. Some Fields of Use:

The Architecture, Engineering, and The Architecture, Engineering, and Construction Industry Construction Industry

Mechanical EngineeringMechanical Engineering

Product Design (Textile, Food, Computers, Electronic Devices, Product Design (Textile, Food, Computers, Electronic Devices, etc.)etc.)

Automotive, Aerospace, …Automotive, Aerospace, …


CAD - ICAD - I

Los Angeles AirportLos Angeles Airport


CAD - IICAD - II

Boeing 777Boeing 777


Entertainment - IEntertainment - I

Computer Graphics in movie industryComputer Graphics in movie industry


EntertainmentEntertainment


Entertainment - IIEntertainment - II

GamesGames


Education and Training - IEducation and Training - I

Computer generated models of physical, Computer generated models of physical, financial, political, social, economic, and other financial, political, social, economic, and other systems are often used as educational aids.systems are often used as educational aids.

Aircraft, naval, and spacecraft simulatorsAircraft, naval, and spacecraft simulators

Simulators for practice sessions or training of Simulators for practice sessions or training of ship captains, aircraft pilots, heavy equipment ship captains, aircraft pilots, heavy equipment operators, and air traffic control personnel. operators, and air traffic control personnel.


Education and Training - IIEducation and Training - II

Flight SimulatorFlight Simulator


Virtual Reality (VR)Virtual Reality (VR)

Virtual Reality (VR) is a computer Virtual Reality (VR) is a computer system used to create an artificial system used to create an artificial world in which the user has the world in which the user has the impression of being in that world impression of being in that world and with the ability to navigate and with the ability to navigate through the world and manipulate through the world and manipulate objects in the worldobjects in the world..

VR is a technology, which allows a VR is a technology, which allows a user to interact with a computer user to interact with a computer simulated environment, be it a real simulated environment, be it a real or imagined one.or imagined one.


Data Gloves, Head Mounted Data Gloves, Head Mounted DisplayDisplay


HMDHMD


Scientific VisualizationScientific VisualizationII

Scientific, engineering and medical Scientific, engineering and medical data.data.

High number of data.High number of data. Complex structures (medical, …)Complex structures (medical, …) Simulation of complex process Simulation of complex process Complex molecular structure Complex molecular structure such as protein and DNAsuch as protein and DNA weather forecastingweather forecasting Complex mathematical objectComplex mathematical object


Web and Web3DWeb and Web3D

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


Major subfields of CGMajor subfields of CG

Geometry (studies Geometry (studies representation of representation of three-dimensional three-dimensional objects )objects )

Animation (studies Animation (studies descriptions for descriptions for surfaces that move surfaces that move or deform over or deform over time)time)

RenderingRendering ImagingImaging


RenderingRendering

Converts a model into an imageConverts a model into an image Result is physically-based photorealistic Result is physically-based photorealistic

images images Illumination,

Reflection,

Refraction,

etc.


Texture MappingTexture Mapping


Ray TracingRay Tracing


Image ProcessingImage Processing

Image processingImage processing is any form of signal is any form of signal processing for which the input is an image, processing for which the input is an image, such as photographs or frames of video; the such as photographs or frames of video; the output of image processing can be either an output of image processing can be either an image or a set of characteristics or image or a set of characteristics or parameters related to the image. parameters related to the image.


Vector Graphics vs. Raster Vector Graphics vs. Raster GraphicsGraphics

Macromedia flash is vector Macromedia flash is vector basedbased

JPG images are raster basedJPG images are raster based

Time to transmit vs. time to generateTime to transmit vs. time to generate Reuse of image descriptionReuse of image description


Vector GraphicsVector Graphics

A line is represented by endpoints (A line is represented by endpoints (220,0,220) 0) to (to (10100,0,10100)0)

If you want the image larger, no problem…If you want the image larger, no problem…


Raster GraphicsRaster Graphics

A line is represented by assigning some A line is represented by assigning some pixels a value of 1pixels a value of 1..

The entire line is specified by the pixel The entire line is specified by the pixel valuesvalues

What do we do to make image larger?What do we do to make image larger?


ColorsColors

Color in Color in CG CG is commonly specified in RGB is commonly specified in RGB format.format.

A color in RGB format is a triplet of A color in RGB format is a triplet of numbers. The three components are Red, numbers. The three components are Red, Green and Blue.Green and Blue.

Other Color Models?Other Color Models?

RedGreen

Blue


GAME ENGINESGAME ENGINES

Game EngineGame Engine 3D engine3D engine Sound EngineSound Engine Input EngineInput Engine Network EngineNetwork Engine Physics EnginePhysics Engine AI EngineAI Engine GUI EngineGUI Engine


TORQUE GAME ENGINETORQUE GAME ENGINE

GAME ENGINE MAP EDITOR

TEXTURE GENERATORS MODEL GENERATORS


3D Application 3D Application Programming InterfacesProgramming Interfaces

For writing applications that produce 2D and 3D For writing applications that produce 2D and 3D computer graphics. computer graphics.

PHIGS PHIGS (1990’s)(1990’s) OPENGL OPENGL was developed by Silicon Graphics Inc. was developed by Silicon Graphics Inc.

(SGI) in 1992 and is widely used in CAD, VR, (SGI) in 1992 and is widely used in CAD, VR, scientific visualization, It is also used in video scientific visualization, It is also used in video games, where it competes with Direct3D on MS games, where it competes with Direct3D on MS Windows platforms Windows platforms

Java 3D Java 3D is a scene graph-based 3D application is a scene graph-based 3D application programming interface (API) for the Java programming interface (API) for the Java platform. It runs on top of either OpenGL or platform. It runs on top of either OpenGL or Direct3D. Direct3D.


Java–based 3D APIsJava–based 3D APIs Java 3D is not the only high-level API option to render 3D Java 3D is not the only high-level API option to render 3D

in Java. In part due to the pause in development during in Java. In part due to the pause in development during 2003 and 2004, several competing Java scene graph 2003 and 2004, several competing Java scene graph technologies emerged:technologies emerged:

General purpose:General purpose: AgentFXAgentFX Strata Live 3D Strata Live 3D

Gaming:Gaming: Xith 3DXith 3D jMonkey Engine jMonkey Engine Espresso3D Espresso3D JOGL is a popular

alternative to scene graph APIs

JOGL is a popular alternative to scene graph APIs

Visualization:Visualization: Aviatrix 3DAviatrix 3D JViewJView Jreality. Jreality.

http://www3.math.tu-http://www3.math.tu-berlin.de/jreality/berlin.de/jreality/


3D Application 3D Application Programming Interfaces Programming Interfaces

For Mobile DevicesFor Mobile Devices The The Mobile 3D Graphics APIMobile 3D Graphics API, commonly referred to , commonly referred to

as as M3GM3G, is a specification defining an API for writing , is a specification defining an API for writing Java programs that produce 3D computer graphics. Java programs that produce 3D computer graphics. M3G is not Java 3D. M3G was designed to meet the M3G is not Java 3D. M3G was designed to meet the specific needs of mobile devices, which are specific needs of mobile devices, which are constrained in terms of memory, memory bandwidth, constrained in terms of memory, memory bandwidth, and processing power.and processing power.

OpenGL ESOpenGL ES ( (OpenGLOpenGL for for EEmbedded mbedded SSystems) is a ystems) is a subset of the OpenGL 3D graphics API designed for subset of the OpenGL 3D graphics API designed for embedded devices such as mobile phones, PDAs, and embedded devices such as mobile phones, PDAs, and video game consoles. video game consoles.

Java 3DJava 3D


3D Application 3D Application Programming Interfaces Programming Interfaces

For Mobile DevicesFor Mobile Devices


Java3D’s SceneGraphJava3D’s SceneGraph

S

BG

TG

TG

TG

S

S

S

TG

Locale

VirtualUniverse

viewspherebase

bottom arm

up arm

robot arm environmentBG

Root group

TG


Java3D’s SceneGraphJava3D’s SceneGraph


SceneGraph ManipulationSceneGraph Manipulation

Robot armRobot arm Create arm Create arm

add robot arm group to SceneGraphadd robot arm group to SceneGraph Move armMove arm

modify TransformGroup of the armmodify TransformGroup of the arm Change colorChange color

modify the Appearance of the arm’s modify the Appearance of the arm’s Shape3DShape3D

Move camera Move camera modify view TransformGroup modify view TransformGroup


Robot ArmRobot Arm

S

BG

TG

TG

TG

S

S

S

TG

Locale

VitualUniverse

viewspherebase

bottom arm

up arm

robot arm environmentBG

Root group

TG


Code (Code (construct construct robot arm)robot arm) - I - Ipublic void init() // applet’s init() functionpublic void init() // applet’s init() function { setLayout(new BorderLayout());{ setLayout(new BorderLayout()); GraphicsConfiguration config =GraphicsConfiguration config = SimpleUniverse.getPreferredConfiguration();SimpleUniverse.getPreferredConfiguration();

Canvas3D c = new Canvas3D(config);Canvas3D c = new Canvas3D(config); add("Center", c); add("Center", c);

// create simple universe( camera, lights, ...)// create simple universe( camera, lights, ...) u = new SimpleUniverse(c);u = new SimpleUniverse(c);

// This will move the ViewPlatform back a bit so the// This will move the ViewPlatform back a bit so the // objects in the scene can be viewed.// objects in the scene can be viewed. u.getViewingPlatform().setNominalViewingTransform();u.getViewingPlatform().setNominalViewingTransform(); viewTrans =viewTrans =

u.getViewingPlatform().getViewPlatformTransform();u.getViewingPlatform().getViewPlatformTransform(); // // Create a robot armCreate a robot arm createSceneGraph();createSceneGraph(); // // add root groupadd root group u.addBranchGraph(rootGroup);u.addBranchGraph(rootGroup); }}


Code (Code (construct construct robot arm)robot arm) - II - IIpublic void createSceneGraph() public void createSceneGraph() {{

// create root// create root rootGroup = new BranchGroup();rootGroup = new BranchGroup(); rootTrans = new TransformGroup();rootTrans = new TransformGroup();

rootTrans.setCapability(TransformGroup.ALLOW_TRArootTrans.setCapability(TransformGroup.ALLOW_TRANSFORM_READ);NSFORM_READ); rootTrans.setCapability(TransformGroup.ALLOW_TRArootTrans.setCapability(TransformGroup.ALLOW_TRANSFORM_WRITE);NSFORM_WRITE);

// // transform spheretransform spheresphereTrans = new TransformGroup();sphereTrans = new TransformGroup();Transform3D sphereT3d = new Transform3D();Transform3D sphereT3d = new Transform3D();sphereT3d.setTranslation(new sphereT3d.setTranslation(new Vector3f(0.5f,0.0f,0.0f));Vector3f(0.5f,0.0f,0.0f));sphereTrans.setTransform(sphereT3d); sphereTrans.setTransform(sphereT3d);


Code (Code (constructconstruct robot arm) robot arm) - I - I

// // create Appearancecreate AppearanceAppearance redLook = new Appearance();Appearance redLook = new Appearance();ColoringAttributes redColorAttr = new ColoringAttributes redColorAttr = new ColoringAttributes();ColoringAttributes();redColorAttr.setColor(new Color3f(1.0f,0.0f,0.0f));redColorAttr.setColor(new Color3f(1.0f,0.0f,0.0f));redLook.setColoringAttributes(redColorAttr);redLook.setColoringAttributes(redColorAttr);

// // create Spherecreate Sphere sphere = new Sphere(0.1f,redLook);sphere = new Sphere(0.1f,redLook);

// // add sphere into scenegraphadd sphere into scenegraphsphereTrans.addChild(sphere);sphereTrans.addChild(sphere);rootTrans.addChild(sphereTrans);rootTrans.addChild(sphereTrans);

// // create armcreate arm … …....

} // end of createSceneGraph()} // end of createSceneGraph()


Creating Creating Geometry and AppearanceGeometry and Appearance


Shape3D ClassShape3D Class

Java3D class which defines a visual object.Java3D class which defines a visual object. Geometry classGeometry class Appearance classAppearance class

PointAttributesPointAttributes LineAttributesLineAttributes ColoringAttributesColoringAttributes MaterialMaterial TransparencyAttributesTransparencyAttributes RenderingAttributesRenderingAttributes TextureAttributesTextureAttributes TextureTexture TexCoordGenerationTexCoordGeneration


Easier Content CreationEasier Content Creation

Using GeometryUsing Geometry

Loading Objects Loading Objects (3DS Max, OBJ, (3DS Max, OBJ, etc. Models)etc. Models)


GeometryGeometry

GeometryArray

GeometryStripArray

IndexedGeometryArray


ConclusionConclusion

Web3DWeb3D Mobile GraphicsMobile Graphics Photorealistic RenderingPhotorealistic Rendering Special EffectsSpecial Effects Game EnginesGame Engines Graphics SoftwareGraphics Software

QualityQuality CostCost EasyEasy


ReferencesReferences

Aybars UGUR, Computer Graphics Lecture Notes, Aybars UGUR, Computer Graphics Lecture Notes, EGE University, Computer Engineering EGE University, Computer Engineering Department, Turkey, 2001.Department, Turkey, 2001.

Hearn, D. and Baker, M.P., 2004, Computer Hearn, D. and Baker, M.P., 2004, Computer Graphics with OpenGL, Prentice-Hall, Graphics with OpenGL, Prentice-Hall, USA, 857p.USA, 857p.

Greg Humphreys, Introduction to Computer Greg Humphreys, Introduction to Computer Graphics, Lecture Notes, Virginia University, Graphics, Lecture Notes, Virginia University, 2004. 2004.

Seungwoo OhSeungwoo Oh, Lecture Notes, KAIST Virtual , Lecture Notes, KAIST Virtual Reality Lab., Korea, 2004.Reality Lab., Korea, 2004.

Wikipedia, 2008.Wikipedia, 2008.


THANKSTHANKS

Any Questions?Any Questions?

Computer Graphics

Documents

Transcript of Computer Graphics