GRAFIKA KOMPUTER

Kuliah Semester 5 Jurusan Teknik Informatika ITS 2015

Outline

Review Materi Minggu 1: Definisi dan Aplikasi Grafika, Sejarah Grafika

Sistem Grafika

Gambar Fisik dan Sintetik

Sistem Penggambilan Gambar
Model Kamera Sintetik
Piksel dan Frame Buffer
CPU dan GPU

Programmers Interface
Arsitektur Sistem Grafika
Programmable Pipeline
Karakteristik Performa
Programming in OpenGL 1: Background
Angel: Interactive Computer Graphics6E AddisonWesley 2012

Review: Image Formation

3

In computer graphics, we form images which

are generally two dimensional using a process
analogous to how images are formed by
physical imaging systems

Cameras
Microscopes
Telescopes
Human visual system
Angel: Interactive Computer Graphics6E AddisonWesley 2012

Review: Elements of Image

Formation
4

Objects
Viewer
Light source(s)
Attributes that govern how light interacts with the
materials in the scene
Note the independence of the objects, the viewer,
and the light source(s)
Angel: Interactive Computer Graphics6E AddisonWesley 2012

Review: Light
5

Light is the part of the electromagnetic spectrum

that causes a reaction in our visual systems

Generally these are wavelengths in the range of

about 350-750 nm (nanometers)

Long wavelengths appear as reds and short

wavelengths as blues
Angel: Interactive Computer Graphics6E AddisonWesley 2012

Review: Ray Tracing

6

One way to form an image is to

follow rays of light from a
point source finding which
rays enter the lens of the
camera. However, each
ray of light may have
multiple interactions with objects
before being absorbed or going to infinity.
Angel: Interactive Computer Graphics6E AddisonWesley 2012

Review: Pinhole Camera

7

Use trigonometry to find projection of point at (x,y,z)

xp= -x/z/d

yp= -y/z/d

z p= d

The point (xp, yp, d) is called the projection of the point (x, y, z).
Angel: Interactive Computer Graphics6E AddisonWesley 2012

Angle of view
8

The field, or angle, of view of our

camera is the angle made by the largest
object that our camera can image on its
film plane.

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Review: Synthetic Camera

Model
9

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Review: Synthetic Camera

Model
10

The specification of the objects is independent of the

specification of the viewer.
The image is computed using simple geometric
calculations

Another plane is drawn in front of the lens

The image of a point on the object on the virtual image
plane (called the projection plane) is founded by
drawing a line, called a projector, from the point to the
center of the lens, or the center of projection (COP).
Angel: Interactive Computer Graphics6E AddisonWesley 2012

Review: Synthetic Camera

Model
11

A clipping rectangle, or clipping window, is

placed in the projection plane.
This rectangle acts as a window, through which a
viewer sees the world.

Kuis 1
12

Sebutkan tiga contoh objek geometri primitif di grafika.

Apa itu vertex/vertices?
Bagaimana merepresentasikan titik di grafika?
Bagaimana merepresentasikan garis di grafika?
Bagaimana merepresentasikan poligon di grafika?
Sebutkan dimensi dari objek, viewer, sumber cahaya, dan gambar.
Sebutkan perbedaan antara lines, rays, dan line segments
Sebutkan salah satu cara pembentukan gambar dengan
pendekatan fisika

Click icon to add picture

13

Sesi 1: Sistem Grafika

Sistem Grafika
14

Sistem
Grafika
Programmers
Interface
Arsitektur
Sistem Grafika
Programmable
Pipeline
Karakteristik
Performa

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Piksel dan Frame Buffer

15

Sistem
Grafika

Programmers
Interface
Arsitektur
Sistem Grafika
Programmable
Pipeline

What defines images?

Array or raster of pixels

What defines pixels?

A location in the image

Karakteristik
Performa

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Piksel dan Frame Buffer

16

Sistem
Grafika
Programmers
Interface
Arsitektur
Sistem Grafika
Programmable
Pipeline
Karakteristik
Performa

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Piksel dan Frame Buffer

17

Sistem
Grafika

Programmers
Interface

Arsitektur
Sistem Grafika

Programmable
Pipeline
Karakteristik
Performa

What is a frame buffer?

What is frame buffer resolution?

The number of pixels in the frame buffer

What is the depth, or precision, of the frame

buffer?

A part of memory that stores pixels

The number of bits that are used for each pixel

How many color a 1-bit-deep frame buffer allows?

How many color a 8-bit-deep frame buffer allows?

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Piksel dan Frame Buffer

18

Sistem
Grafika

Programmable
Pipeline
Karakteristik
Performa

Also known as true-color systems, or RGB-color systems

High dynamic range (HDR) systems use 12 or more bits for each
color component.

In a very simple system, the frame buffer holds only the colored
pixels.
In most systems, the frame buffer holds far more information, such
as depth information.

Programmers
Interface
Arsitektur
Sistem Grafika

In full-color systems, there are 24 (or more) bits per pixel.

In these systems, the frame buffer comprises multiple buffers, one or more
of which are color buffers that hold the colored pixels that are displayed.
For now, we can use the terms frame buffer and color buffer
synonymously.

Angel: Interactive Computer Graphics6E AddisonWesley 2012

CPU dan GPU

19

Sistem
Grafika

Programmers
Interface
Arsitektur
Sistem Grafika
Programmable
Pipeline
Karakteristik
Performa

In a simple system, there may be only one processor, the central processing
unit (CPU), which must do both the normal processing and the graphical
processing.

The graphical processing is to take specifications of graphical primitives and to assign

values to the pixels in the frame buffer that best represent these entities.
The conversion of geometric entities to pixel colors and locations in the frame buffer is
known as rasterization, or scan conversion.

In early graphics systems, the frame buffer was part of the standard memory
that could be directly addressed by the CPU.

Today, all graphics systems are characterized by graphics processing units

(GPUs), custom-tailored to carry out specific graphics functions.

The GPU can be either on the mother board of the system or on a graphics card.
The frame buffer is accessed through the GPU and usually is on the same circuit board
as the GPU.

Angel: Interactive Computer Graphics6E AddisonWesley 2012

The Programmers Interface

20

Sistem Grafika
Programmer
s Interface

Programmer sees the graphics system

through a software interface: the
Application Programmer Interface (API)

Arsitektur
Sistem Grafika
Programmable
Pipeline
Karakteristik
Performa
Angel: Interactive Computer Graphics6E AddisonWesley 2012

API Contents
21

Sistem Grafika

Programmer
s Interface

Functions that specify what we need to form

an image

Arsitektur
Sistem Grafika

Programmable
Pipeline

Karakteristik
Performa

Objects
Viewer
Light Source(s)
Materials

Other information

Input from devices such as mouse and keyboard

Capabilities of system

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Object Specification
22

Sistem Grafika

Programmer
s Interface

Arsitektur
Sistem Grafika

Points (0D object)

Line segments (1D objects)
Polygons (2D objects)
Some curves and surfaces
Quadrics

Programmable
Pipeline
Karakteristik
Performa

Most APIs support a limited set of primitives

including

Parametric

polynomials

All are defined through locations in space or

vertices

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Example (old style)

type of object
location of vertex

glBegin(GL_POLYGON)
glVertex3f(0.0, 0.0, 0.0);
glVertex3f(0.0, 1.0, 0.0);
glVertex3f(0.0, 0.0, 1.0);
glEnd( );
end of object definition

Example (GPU based)

Put geometric data in an array

vec3 points[3];
points[0] = vec3(0.0, 0.0, 0.0);
points[1] = vec3(0.0, 1.0, 0.0);
points[2] = vec3(0.0, 0.0, 1.0);

Send array to GPU

Tell GPU to render as triangle

Camera Specification

Six degrees of freedom

Position of center of lens

Orientation

The focal length of the lens:

determines the size of the
image on the film plane or,
the portion of the world the
camera sees
Film size
Orientation of film plane

Lights and Materials

Types of lights

Point sources vs distributed sources

Spot lights
Near and far sources
Color properties

Material properties

Absorption: color properties

Scattering
Diffuse
Specular

Arsitektur Pipeline
27

Sistem Grafika

Programmers
Interface
Arsitektur
Sistem
Grafika
Programmable
Pipeline

We use pipeline architecture when we will do the same

operation on many data sets, just like in computer
graphics, large sets of vertices and pixels are
processed in the same manner.
Four major steps in the imaging process

Vertex processing
Clipping and primitive assembly
Rasterization
Fragment processing

Karakteristik
Performa

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Vertex Processing
28

Sistem Grafika
Programmers
Interface
Arsitektur
Sistem
Grafika
Programmable
Pipeline

Each vertex is processed

independently.
Two major functions of this block:

to carry out coordinate transformations

and
to compute a color for each vertex

Karakteristik
Performa

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Clipping and Primitive Assembly

29

Sistem Grafika
Programmers
Interface

The projections of objects in a clipping volume appear

in the image. Those that are outside do not and are said
to be clipped out.

Clipping must be done on a primitive-by-primitive basis

rather than on a vertex-by-vertex basis. Thus, we must
assemble sets of vertices into primitives, such as line
segments and polygons, before clipping can take place.

So, what is the output of this block?

Arsitektur
Sistem
Grafika
Programmable
Pipeline
Karakteristik
Performa

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Rasterization
30

Programmers
Interface

The primitives that emerge from the clipper are still

represented in terms of their vertices and must be
converted to pixels in the frame buffer.

Arsitektur
Sistem
Grafika

For example, if three vertices specify a triangle with a solid

color, the rasterizer must determine which pixels in the
frame buffer are inside the polygon.

The output of the rasterizer is a set of fragments (potential

pixels that carries with it information) for each primitive.

Sistem Grafika

Programmable
Pipeline
Karakteristik
Performa

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Fragment Processing
31

Sistem Grafika
Programmers
Interface
Arsitektur
Sistem
Grafika
Programmable
Pipeline

It takes in the fragments generated by the rasterizer and updates

the pixels in the frame buffer.

If the application generated three-dimensional data, some

fragments may not be visible because the surfaces that they define
are behind other surfaces.

The color of a fragment may be altered by texture mapping or

bump mapping.

The color of the pixel that corresponds to a fragment can also be

read from the frame buffer and blended with the fragments color to
create translucent effects.

Karakteristik
Performa

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Arsitektur pipeline
32

Sistem Grafika
Programmers
Interface

Arsitektur
Sistem Grafika
Programmab
le Pipeline
Karakteristik
Performa

Selain pipeline, dikenal pula metode lain dalam

mengimplementasikan grafika komputer, seperti ray tracing,
radiosity, atau photon mapping.
Kelebihan arsitektur pipeline dibandingkan metode yang lain:

Program aplikasinya dan program GPUnya mudah

Graphics cards melengkapi GPUnya dengan arsitektur pipeline.
Sesuai untuk aplikasi real time/interaktif seperti game, CAD

Kekurangan arsitektur pipeline dibandingkan metode yang

lain:

Gambar yang dihasilkan kurang realistis karena tidak

memperhitungkan global lighting
Kurang sesuai untuk aplikasi dengan resolusi dan efek realistis
yang tinggi, seperti film animasi

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Arsitektur pipeline
33

Sistem Grafika

Awalnya berisi fixed functionality

Programmers
Interface
Arsitektur
Sistem Grafika
Programmab
le Pipeline
Karakteristik
Performa

Program aplikasi dapat mengeset banyak parameter

fungsi, tetapi operasi dasar yang terdapat didalam
pipeline tetap (tidak dapat diubah).

Saat ini baik vertex maupun fragment processor

dapat diubah fungsi/operasi dasarnya oleh program
aplikasi.

Efeknya banyak efek yang awalnya tidak dapat

dihasilkan secara real-time oleh arsitektur pipeline
menjadi bisa, seperti bump mapping (dulunya hanya
bisa off-line)

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Programmable pipeline
34

Sistem Grafika

Programmers
Interface

Arsitektur
Sistem Grafika
Programmab
le Pipeline
Karakteristik
Performa

Vertex programs can alter the location or color

of each vertex as it flows through the pipeline.

Thus, we can implement a variety of lightmaterial

models or create new kinds of projections.

Fragment programs allow us to use textures in

new ways and to implement other parts of the
pipeline, such as lighting, on a per-fragment
basis rather than per vertex.

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Performa
35

Sistem Grafika

Programmers
Interface

Arsitektur pipeline mendominasi pasar

graphics cards khususnya jika dibutuhkan
aplikasi real-time.

Arsitektur
Sistem Grafika
Programmable
Pipeline

Graphics cards dengan harga murah dapat

merender jutaan poligon bertekstur dan
berwarna dalam satu detik.

Namun jika dibutuhkan aplikasi dengan hasil

lebih realistis, renderer lain lebih unggul
walaupun dengan waktu komputasi lebih
Angel: Interactive Computer Graphics6E Addisonlama, seperti RenderMan
Wesley 2012 milik Pixar, aplikasi

Karakteristik
Performa

Click icon to add picture

36

Sesi 2: Programming in OpenGL 1: Background

Objectives

Development of the OpenGL API

OpenGL Architecture

Functions

OpenGL as a state machine

OpenGL as a data flow machine
Types
Formats

Simple program

Early History of APIs

IFIPS (1973) formed two committees to come up with a

standard graphics API

Graphical Kernel System (GKS)

2D

but contained good workstation model

Core
Both

2D and 3D

GKS adopted as IS0 and later ANSI standard (1980s)

GKS not easily extended to 3D (GKS-3D)

Far behind hardware development

PHIGS and X

Programmers Hierarchical Graphics System (PHIGS)

X Window System

Arose from CAD community

Database model with retained graphics (structures)

DEC/MIT effort
Client-server architecture with graphics

PEX combined the two

Not easy to use (all the defects of each)

SGI and GL

Silicon Graphics Inc (SGI) revolutionized the graphics

workstation by implementing the pipeline in hardware
(1982)

To access the system, application programmers used a

library called GL

With GL, it was relatively simple to program three

dimensional interactive applications

OpenGL

The success of GL lead to OpenGL (1992), a platformindependent API that was

Easy to use
Close enough to the hardware to get excellent performance
Focus on rendering: taking the spec of geometric objects
and their properties and forming a picture of them with a
virtual camera and lights
Omitted windowing and input to avoid window system
dependencies

OpenGL Evolution

Originally controlled by an Architectural Review Board

(ARB)

Members included SGI, Microsoft, Nvidia, HP, 3DLabs, IBM,.

Now Kronos Group
Was relatively stable (through version 2.5)
Backward

compatible
Evolution reflected new hardware capabilities

3D texture mapping and texture objects

Vertex and fragment programs

Allows platform specific features through extensions

Modern OpenGL

Performance is achieved by using GPU

rather than CPU
Control GPU through programs called
shaders
Applications job is to send data to GPU
GPU does all rendering

OpenGL 3.1

Totally shader-based

No default shaders
Each application must provide both a vertex and a
fragment shader

No immediate mode
Few state variables
Most 2.5 functions deprecated
Backward compatibility not required

Other Versions

OpenGL ES

Embedded systems
Version 1.0 simplified OpenGL 2.1
Version 2.0 simplified OpenGL 3.1
Shader

WebGL

based

Javascript implementation of ES 2.0

Supported on newer browsers

OpenGL 4.1 and 4.2

Add geometry shaders and tessellator

What About Direct X?

Windows only
Advantages

Disadvantages

Better control of resources

Access to high level functionality
New versions not backward compatible
Windows only

Recent advances in shaders are leading to convergence

with OpenGL

OpenGL Libraries

OpenGL core library

OpenGL Utility Library (GLU)

OpenGL32 on Windows
GL on most unix/linux systems (libGL.a)

Provides functionality in OpenGL core but avoids having to rewrite code

Links with window system

GLX for X window systems

WGL for Windows
AGL for Macintosh

GLUT

OpenGL Utility Toolkit (GLUT)

Provides functionality common to all window systems

Open

a window
Get input from mouse and keyboard
Menus
Event-driven

Code is portable but GLUT lacks the functionality of a

good toolkit for a specific platform
No

slide bars

freeglut

GLUT was created long ago and has been

unchanged

Amazing that it works with OpenGL 3.1

Some functionality cant work since it requires
deprecated functions

freeglut updates GLUT

Added capabilities
Context checking

GLEW

OpenGL Extension Wrangler Library

Makes it easy to access OpenGL extensions
available on a particular system
Avoids having to have specific entry points
in Windows code
Application needs only to include glew.h and
run a glewInit()

Software Organization

OpenGL Architecture

OpenGL Functions

Primitives

Attributes
Transformations

Points
Line Segments
Triangles

Viewing
Modeling

Control (GLUT)
Input (GLUT)
Query

OpenGL State

OpenGL is a state machine

OpenGL functions are of two types

Primitive generating
Can

cause output if primitive is visible

How vertices are processed and appearance of primitive are controlled by the state

State changing
Transformation

functions
Attribute functions
Under 3.1 most state variables are defined by the application and sent to the
shaders

Lack of Object Orientation

OpenGL is not object oriented so that there are multiple

functions for a given logical function

glUniform3f
glUniform2i
glUniform3dv

Underlying storage mode is the same

Easy to create overloaded functions in C++ but issue is

efficiency

OpenGL function format

function name

dimensions

glUniform3f(x,y,z)
belongs to GL library

x,y,z are floats

glUniform3fv(p)
p is a pointer to an array

OpenGL #defines

Most constants are defined in the include files gl.h, glu.h

and glut.h

Note #include <GL/glut.h> should automatically include the

others
Examples
glEnable(GL_DEPTH_TEST)
glClear(GL_COLOR_BUFFER_BIT)

include files also define OpenGL data types: GLfloat,

GLdouble,.

OpenGL and GLSL

Shader based OpenGL is based less on a

state machine model than a data flow model
Most state variables, attributes and related
pre 3.1 OpenGL functions have been
deprecated
Action happens in shaders
Job is application is to get data to GPU

GLSL

OpenGL Shading Language

C-like with

Matrix and vector types (2, 3, 4 dimensional)

Overloaded operators
C++ like constructors

Similar to Nvidias Cg and Microsoft HLSL

Code sent to shaders as source code
New OpenGL functions to compile, link and get
information to shaders

A Simple Program (?)

Generate a square on a solid background

It used to be easy
#include <GL/glut.h>
void mydisplay(){
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_QUAD);
glVertex2f(-0.5, -0.5);
glVertex2f(-0.5, 0.5);
glVertex2f(0.5, 0.5);
glVertex2f(0.5, -0.5);
glEnd();
glFlush();
}
int main(int argc, char** argv){
glutCreateWindow("simple");
glutDisplayFunc(mydisplay);
glutMainLoop();
}

What happened

Most OpenGL functions deprecated

Makes heavy use of state variable default values
that no longer exist

Viewing
Colors
Window parameters

Next version will make the defaults more explicit

However, processing loop is the same

simple.c

#include <GL/glut.h>
void mydisplay(){
glClear(GL_COLOR_BUFFER_BIT);
// need to fill in this part
// and add in shaders
}
int main(int argc, char** argv){
glutCreateWindow("simple");
glutDisplayFunc(mydisplay);
glutMainLoop();
}

Event Loop

Note that the program defines a display

callback function named mydisplay

Every glut program must have a display callback

The display callback is executed whenever
OpenGL decides the display must be refreshed,
for example when the window is opened
The main function ends with the program
entering an event loop

Compilation on Windows

Visual C++

Get glut.h, glut32.lib and glut32.dll from web

Install in same places as corresponding

OpenGL files

Create an empty application

Add glut32.lib to project settings (under link tab)

Same for freeglut and GLEW

66

Review and Exercises

Last week: Follow the instructions in
the tutorial
http://wiki.codeblocks.org/index.php?title=Using_FreeGlut
_with_Code::Blocks

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Example1.cpp program structure

67

Angel: Interactive Computer Graphics6E AddisonWesley 2012

Example1.cpp init function (1 of 2)

Example1.cpp init function (2 of 2)

Example1.cpp display and keyboard

Example1.cpp main

Example1.cpp GLSL shaders

74

Next Week: Programming in OpenGL 2:

Complete Programs
Also Programming in OpenGL 3: Shaders
Read the Textbook Ch. 2 (pp 43 56)

Angel: Interactive Computer Graphics6E AddisonWesley 2012