An Interactive Introduction to OpenGL Programming

OpenGL Programming

Dr. Mohammad Iqbal

Based-on slide : Dave Shreiner, Ed Angel, Vicki Shreiner

Agenda

z General OpenGL Introduction z Rendering Primitives z Rendering Modes z Lighting z Texture Mapping z Additional Rendering Attributes z Imaging

Goals for Today

z Tujuan : mendemonstrasikan OpenGL dalam menghasilkan program grafik interaktif dalam

z Membuat model 3D obyek atau imagery z Lighting - pencahayaan z texture mapping

z Mengenalkan topik lanjut untuk pendalaman berikutnya

OpenGL and GLUT Overview

z Apakah OpenGL & apa manfaatnya? z OpenGL dalam sistem window z Mengapa GLUT z Template program GLUT

Apakah OpenGL?

z Graphics rendering API (Application Programming Interface)

z citra warna high-quality yang terdiri dari

geometric dan citra primitif z Independen window system

z Independen operating system

Arsitektur OpenGL

Per Vertex

Primitive Assembly

Display

Per Fragment Frame

Texture Memory

Pixel Operations

OpenGL sebagai Renderer

z Geometric primitif

z titik, garis dan poligon

z Image Primitif

z Citra dan bitmap z Memisahkan pipeline untuk citra dan

geometry

z linked ketika penerapan texture mapping

z Rendering tergantung pada status

z warna, material, light sources, dll.

API yang Terkait OpenGL

z AGL, GLX, WGL

z Perekat antara OpenGL dan sistem window

z GLU (OpenGL Utility Library)

z Bagian OpenGL z NURBS, tessellators, quadric shapes, dll.

z GLUT (OpenGL Utility Toolkit)

z portable windowing API z Bukan bagian OpenGL secara ofisial

API yang Terkait OpenGL

application program

OpenGL Motif widget or similar

GLUT

GLX, AGL

GLU

or WGL

GL X, Win32, Mac O/S

software and/or hardware

Preliminaries

z Headers Files

z #include <GL/gl.h> z #include <GL/glu.h> z #include <GL/glut.h>

z Libraries z Enumerated Types

z OpenGL defines numerous types for compatibility

z GLfloat, GLint, GLenum, etc.

Dasar-dasar GLUT

z Struktur Aplikasi

z Configure dan open window z Initialisasi status OpenGL z Register fungsi input callback

z render z resize z input: keyboard, mouse, dll.

z Enter event processing loop

Contoh Program

void main( int argc, char** argv ) {

int mode = GLUT_RGB|GLUT_DOUBLE; glutInitDisplayMode( mode );

glutCreateWindow( argv[0] ); init(); glutDisplayFunc( display );

glutReshapeFunc( resize ); glutKeyboardFunc( key ); glutIdleFunc( idle );

glutMainLoop();

Inisialisasi OpenGL

z Set up status yg ingin digunakan

void init( void ) {

glClearColor( 0.0, 0.0, 0.0, 1.0 ); glClearDepth( 1.0 );

glEnable( GL_LIGHT0 ); glEnable( GL_LIGHTING ); glEnable( GL_DEPTH_TEST );

Fungsi input Callback GLUT

z Rutin yang dipanggil ketika sesuatu terjadi

z window resize atau redraw z user input z animasi

z Me-“register” callbacks pada GLUT

glutDisplayFunc( display ); glutIdleFunc( idle ); glutKeyboardFunc( keyboard );

Rendering Callback

z Lakukan penggambaran grafik pada bagian ini :

glutDisplayFunc( display );

void display( void ) {

glClear( GL_COLOR_BUFFER_BIT ); glBegin( GL_TRIANGLE_STRIP );

glVertex3fv( v[0] ); glVertex3fv( v[1] ); glVertex3fv( v[2] ); glVertex3fv( v[3] );

glEnd(); glutSwapBuffers();

Idle Callbacks

z Gunakan untuk animasi dan update yang continyu

glutIdleFunc( idle );

void idle( void ) {

t += dt; glutPostRedisplay();

User Input Callbacks

z Untuk pemrosesan input dari user

glutKeyboardFunc( keyboard );

void keyboard( unsigned char key, int x, int y ) {

switch( key ) { case ‘q’ : case ‘Q’ :

exit( EXIT_SUCCESS ); break;

case ‘r’ : case ‘R’ :

rotate = GL_TRUE; glutPostRedisplay(); break;

Agenda Elementary Rendering

z Geometric Primitives z Managing OpenGL State z OpenGL Buffers

OpenGL Geometric Primitif

z Semua jenis geometric primitif dispesifikasikan oleh pipeline vertices

GL_LINES GL_LINES

GL_POINTS GL_POINTS GL_POLYGON GL_POLYGON

GL_LINE_STRIP GL_LINE_STRIP GL_LINE_LOOP GL_LINE_LOOP

GL_TRIANGLES GL_TRIANGLES

GL_TRIANGLE_STRIP GL_TRIANGLE_STRIP

GL_QUADS GL_QUADS

GL_QUAD_STRIP GL_QUAD_STRIP

GL_TRIANGLE_FAN GL_TRIANGLE_FAN

Contoh Sederhana

void drawRhombus( GLfloat color[] ) {

glBegin( GL_QUADS ); glColor3fv( color ); glVertex2f( 0.0, 0.0 ); glVertex2f( 1.0, 0.0 ); glVertex2f( 1.5, 1.118 ); glVertex2f( 0.5, 1.118 ); glEnd();

Format Perintah OpenGL

glVertex3fv( glVertex3fv( v v ) )

Number of Number of

Vector Vector components components

Data Type Data Type

b b - - byte byte

omit omit “ “ v v ” ” for for

ub ub - - unsigned byte unsigned byte

2 2 - - (x,y) (x,y)

scalar form scalar form

s s - - short short

3 3 - - (x,y,z) (x,y,z)

us us - - unsigned short unsigned short

4 4 - - (x,y,z,w) (x,y,z,w)

glVertex2f( x, y ) i glVertex2f( x, y ) i - - int int ui ui - - unsigned int unsigned int

f f - - float float d d - - double double

Specifying Geometric Primitives

z Primitif dispesifikasikan menggunakan :

glBegin( glBegin( primType primType ); ); glEnd(); glEnd();

z primType menentukan bagaimana vertice dikombinasikan

GLfloat red, green, blue; Glfloat coords[3];

glBegin( primType ); for ( i = 0; i < nVerts; ++i ) {

glColor3f( red, green, blue ); glVertex3fv( coords );

} glEnd();

Model Warna

OpenGL

Texture Texture

Pixel Pixel

z RGBA atau Color Index

color index mode

Red Green Blue

RGBA mode

Mengendalikan tampilan Appearance (Rendering)

Dari Wireframe menjadi Texture Mapped

Mesin Status OpenGL

z Setiap atribut rendering di encapsulapsi

dalam OpenGL State

z rendering styles z shading z lighting z texture mapping

Manipulasi Status OpenGL

z Tampilan dikendalikan oleh status terakhir

for each ( primitive to render ) {

update OpenGL state render primitive

z Manipulasi atribut vertex adalah cara umum untuk memanipulasi status

glColor*() / glIndex*() glNormal*() glTexCoord*()

Mengendalikan Status terakhir

z Setting Status

glPointSize( glPointSize( size size ); ); glLineStipple( glLineStipple( repeat repeat , , pattern pattern ); ); glShadeModel( glShadeModel( GL GL _ _ SMOOTH SMOOTH ); );

z Enabling Features

glEnable( glEnable( GL GL _ _ LIGHTING LIGHTING ); ); glDisable( glDisable( GL_TEXTURE_2D GL_TEXTURE_2D ); );

Transformasi

Transformasi dalam OpenGL

z Modeling z Viewing

z orientasi kamera z projection

z Animasi z Map to screen

Analogi Kamera

z 3D adalah seperti mengambil citra pada

fotografi (Banyak foto!)

viewing volume

camera

model

tripod

Analogi Kamera dan Transformasi

z Projection transformations

z Mengatur lensa kamera

z Viewing transformations

z Mengatur posisi tripod dan orientasi viewing suatu volume dalam dunia nyata (world)

z Modeling transformations

z memindahkan model

z Viewport transformations

z Memperbesar atau mengurangi fotografi secara fisik

Sistem Koordinat dan Transformasi

z Langkah dalam menyiapkan citra

z spesifikasikan geometri (world coordinates) z spesifikasikan kamera (camera coordinates) z proyeksi (window coordinates) z Petakan ke viewport (screen coordinates)

z Setiap langkah menggunakan transformasi z Setiap transformasi adalah ekuivalen pada

perubahan di sistem koordinat (frames)

Transformasi Affine

z Transformasi yang mempertahankan bentuk geometri

z garis, poligon, quadric

z Affine = mempertahankan garis (line preserving)

z Rotasi, translasi, skala z Proyeksi z Konkatnasi (komposisi)

Koordinat Homogen

z Setiap vertex adalah vector kolom

z w umumnya bernilai 1.0 z Semua operasi adalah perkalian matriks z Arah (directed line segments) direpresentasikan w = 0.0

3D Transformations

z Vertex ditransformasikan oleh 4 x 4 matrik

z Semua operasi affine adalah perkalian matriks z Semua matrik disimpan secara column-major

dalam OpenGL z matriks selalu dalam kondisi post-multiplied z Produk matrik dan vector adalah M vK

⎡ m 0 m 4 m 8 m 12 ⎤

m 1 m 5 m 9 m ⎢ 13 ⎥ M = ⎢ m 2 m 6 m 10 m 14 ⎥

⎥ m 3 m 7 m 11 ⎣ m 15 ⎦

Menspesifikasikan Transformasi

z Programmer memiliki 2 styles untuk men-spesifikasikan transformasi

z spesifikasikan matriks ( glLoadMatrix, glLoadMatrix,

glMultMatrix glMultMatrix )

z spesifikasikan operasi ( glRotate, glRotate,

glOrtho glOrtho )

z Programmer tidak perlu mengingat jenis

matriksnya secara tepat

z cek lampiran buku Red Book (Programming Guide)

Programming Transformations

z Sebelum proses rendering, view, locate, dan orientasi :

z Posisi mata/kamera z 3D geometri

z Mengatur matriks

z Termasuk matriks stack

z Kombinasikan (composite) transformasi

Pipeline

Transformasi

Texture Pixel

Modelview Projection Perspective Viewport

e Matrix

Matrix

Division Transform

Modelview Projection z Bbrp kalkulasi tambahan :

z material Î color

Modelview

z shade model (flat) z polygon rendering mode

zz

z polygon culling

z clipping

Operasi Matriks

z Spesifikasikan Matriks Stack terkini

glMatrixMode( GL_MODELVIEW atau GL_PROJECTION )

z Matriks atau operasi Stack lain

glLoadIdentity() glPushMatrix() glLoadIdentity() glPushMatrix() glPopMatrix() glPopMatrix()

z Viewport

z Biasanya sama dengan ukuran window size z aspek rasio viewport harus sama dengan

transformasi proyeksi atau citra hasilnya akan terdistorsi

glViewport( x, y, width, height )

Transformasi Proyeksi

Bentuk untuk menampilkan (viewing) frustum : z Perspective projection

gluPerspective( fovy, aspect, zNear, zFar ) glFrustum( left, right, bottom, top, zNear, zFar

z Orthographic parallel projection

glOrtho( left, right, bottom, top, zNear, zFar ) gluOrtho2D( left, right, bottom, top )

z Gunakan glOrtho dengan nilai z mendekati nol

Mengaplikasikan Transformasi Proyeksi

z Pengunaan Umum (orthographic projection)

glMatrixMode( GL_PROJECTION ); glMatrixMode( GL_PROJECTION ); glLoadIdentity(); glLoadIdentity(); glOrtho( left, right, bottom, top, zNear, zFar glOrtho( left, right, bottom, top, zNear, zFar

Viewing Transformations

z Posisi Kamera/mata dalam scene

z Posisikan tripod (eye) ; persiapkan (aim) Kamera

z Untuk Scene “fly through”

tripod

z Ubah transformasi viewing dan re-draw scene

gluLookAt( eye x , eye y , eye z , aim x , aim y , aim z , up x , up y , up z )

z up vector menghasilkan orientasi unik z Berhati-hati dalam de-generate posisi

Modeling Transformations

z Memindahkan obyek

glTranslate{fd}( glTranslate{fd}( x, y, z x, y, z ) )

z Rotasi obyek di sekitar sumbu utama ( x y z )

glRotate glRotate { { fd fd }( }( angle, x, y, z angle, x, y, z ) )

z angle dalam derajat

z Dilasi (stretch atau shrink) atau mirror object

glScale{fd}( glScale{fd}( x, y, z x, y, z ) )

Connection: Viewing dan Modeling

z Memindahkan kamera equivalent

dengan memindahkan setiap obyek di dunia nyata di depan kamera diam

z Viewing transformation equivalent dengan transformasi modeling

gluLookAt() memiliki perintah tersendiri yaitu polar view atau pilot view

Proyeksi dengan kaidah tangan kiri

z Projection transformations ( gluPerspective, glOrtho ) berdasarkan kaidah tangan kiri

z bayangkan zNear dan zFar sebagai jarak tertentu dari view point

z Setiap hal selain itu adalah kaidah tangan kanan, termasuk vertex yang di

yy

render

z+

left handed

right handed

x z+

Penggunaan Umum Transformasi

z 3 contoh rutin resize()

z Re-status proyeksi & viewing transformations

z Umumnya dipanggil ketika window resize

z Di-register sebagai callback untuk glutReshapeFunc() z Di-register sebagai callback untuk glutReshapeFunc()

void resize( int w, int h ) {

glViewport( 0, 0, (GLsizei) w, (GLsizei) h );

glMatrixMode( GL_PROJECTION ); glLoadIdentity(); gluPerspective( 65.0, (GLdouble) w / h,

glMatrixMode( GL_MODELVIEW ); glLoadIdentity(); gluLookAt( 0.0, 0.0, 5.0,

Efek yang sama dengan LookAt :

void resize( int w, int h ) {

glViewport( 0, 0, (GLsizei) w, (GLsizei) h ); glMatrixMode( GL_PROJECTION ); glLoadIdentity(); gluPerspective( 65.0, (GLdouble) w/h,

glMatrixMode( GL_MODELVIEW ); glLoadIdentity(); glTranslatef( 0.0, 0.0, -5.0 ); glMatrixMode( GL_MODELVIEW ); glLoadIdentity(); glTranslatef( 0.0, 0.0, -5.0 );

void resize( int width, int height ) {

GLdouble aspect = (GLdouble) width / height;

GLdouble left = -2.5, right = 2.5; GLdouble bottom = -2.5, top = 2.5; glViewport( 0, 0, (GLsizei) w,

(GLsizei) h ); glMatrixMode( GL_PROJECTION ); glLoadIdentity();

… continued … … continued …

if ( aspect < 1.0 ) {

left /= aspect; right /= aspect;

} else {

bottom *= aspect; top *= aspect;

} glOrtho( left, right, bottom, top,

near, far ); glMatrixMode( GL_MODELVIEW ); glLoadIdentity();

Membangun Modeling Transformations

z Masalah 1: hirarki obyek

z Suatu posisi tergantung pada posisi sebelumnya z Lengan robot atau tangan ; sub-assemblies

z Solusi 1: memindahkan sistem koordinat lokal

z modeling transformation untuk memindahkan sistem koordinat

z post-multiply column-major matrices z OpenGL post-multiplies matrices

Membangun Modeling Transformations

z Masalah 2 : obyek berpindah secara relatif pada absolute world origin

z Obyek berotasi di area yang salah pada origin

z Membuat obyek spin di sekitar center atau suatu area

z Solusi 2: fixed coordinate system

z modeling transformations akan memindahkan

obyek disekitar fixed coordinate system z pre-multiply column-major matrices

z OpenGL post-multiplies matrices z harus me-reverse order operasi untuk

mendapatkan efek yang diinginkan

Area Clipping Tambahan

z Paling tidak ada 6 atau lebih area clipping z Baik untuk perhitungan cross-sections z Modelview matrix memindahkan area clipping

clipped Ax + By + Cz + D < 0

glEnable( GL_CLIP_PLANEi ) glClipPlane( GL_CLIP_PLANEi, GLdouble* coeff )

Reversing Koordinat Proyeksi

z Screen space kembali ke world space

glGetIntegerv( GL_VIEWPORT, GLint viewport[4] ) glGetDoublev( GL_MODELVIEW_MATRIX, GLdouble

mvmatrix[16] ) glGetDoublev( GL_PROJECTION_MATRIX,

GLdouble projmatrix[16] )

gluUnProject( GLdouble winx, winy, winz, mvmatrix[16], projmatrix[16], GLint viewport[4], GLdouble *objx, *objy, *objz )

z gluProject untuk memindahkan world space ke screen space

Prinsip Pencahayaan

z Pencahayaan mensimulasikan bagaimana obyek memantulkan cahaya

z Komposisi material obyek z Warna cahaya dan posisi z Parameter global pencahayaan

z Cahaya ambien z Pencahayaan dua sisi

z Terdapat pada color index dan mode RGBA

Bagaimana OpenGL Mensimulasikan Cahaya

z Model Pencahayaan Phong

z Perhitungan pada vertices

z Kontributor Pencahayaan

z Properti permukaan material z Properti cahaya z Properti Model pencahayaan

Surface

Normals

Texture Pixel

Pixel

z Normal mendefinisikan bagaimana pemukaan

memantulkan cahaya

z z glNormal3f( glNormal3f( x, y, z x, y, z ) )

z Current normal digunakan untuk menghitung warna vertex

z Gunakan unit normals untuk pencahayaan yang tepat

z Skalakan efek pada panjang normal

glEnable( GL_NORMALIZE )

or

glEnable( GL_RESCALE_NORMAL )

Material Properties

z Definisikan properti permukaan obyek primitif

glMaterialfv( face, property, value );

GL_DIFFUSE

Base color

GL_SPECULAR

Highlight Color

GL_AMBIENT

Low-light Color

GL_EMISSION

Glow Color

GL_SHININESS

Surface Smoothness

z Pisahkan material antara bagian front dan back

Properti Cahaya

glLightfv( light, property, value );

z light menspesifikasikan jenis cahaya

z multiple lights, mulai dari GL_LIGHT0

glGetIntegerv( GL_MAX_LIGHTS, &n );

z properties

z Warna z posisi dan type z Attenuation (metode perambatan)

Sumber cahaya

z Light color properties

GL_AMBIENT GL_DIFFUSE GL_SPECULAR

Tipe Cahaya

z OpenGL mendukung 2 tipe Cahaya :

z Local (Point) light sources z Infinite (Directional) light sources

z Tipe cahaya dikendalikan oleh koordinat

w = 0 Infinite Light directed along ( x y z )

≠ 0 Local Light positioned at ( w w w )

Menyalakan (Turning on) Cahaya

z Flip setiap “switch” cahaya

glEnable( GL_LIGHTn );

z Turn on the power

glEnable( GL_LIGHTING );

Mengendalikan Posisi Cahaya

z Modelview matrix berpengaruh pada posisi cahaya:

z Perbedaan efek berdasarkan kapan posisi cahaya dispesifikasikan

z eye coordinates z world coordinates z model coordinates

z Matrik Push dan pop untuk pengendali unik posisi cahaya

Fitur Pencahayaan Lanjut

z Spotlight

z Melokalisasi efek cahaya

z GL_SPOT_DIRECTION z GL_SPOT_CUTOFF z GL_SPOT_EXPONENT

Fitur Pencahayaan Lanjut

z Perambatan cahaya (Light attenuation)

z decrease light intensity with distance

z GL_CONSTANT_ATTENUATION z GL_LINEAR_ATTENUATION z GL_QUADRATIC_ATTENUATION

Properti Model Cahaya

glLightModelfv( property, value );

z Enabling two sided lighting

GL_LIGHT_MODEL_TWO_SIDE

z Global ambient color

GL_LIGHT_MODEL_AMBIENT

z Local viewer mode

GL_LIGHT_MODEL_LOCAL_VIEWER

z Separate specular color

GL_LIGHT_MODEL_COLOR_CONTROL

Tips untuk pencahayaan yg baik

z Pemanggilan Pencahayaan dikomputasi hanya pada vertices

z Pemanggilan pada model tessellation memang menghasilkan kualitas pencahayaan yang lebih baik tapi proses

geometrinya lebih kompleks

z Gunakan cahaya tunggal infinite untuk perhitungan pencahayaan cepat

z Karena komputasi minimal untuk setiap

vertex-nya

Depth Buffering dan

Animation dan Depth Buffering

z Mendikusikan double buffering dan animasi

z Mendiskusikan hidden surface removal

menggunakan depth buffer

Double

Buffering

Texture Texture

Pixel Pixel

Front

8 8 Back

Buffer

Buffer

Display

Animasi menggunakan Double Buffering

c Defenisikan double buffered pada color buffer

glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE

d Clear color buffer

glClear( GL_COLOR_BUFFER_BIT );

e Render scene

f Definisikan swap untuk front dan back buffers

glutSwapBuffers();

z Ulangi langkah 2 - 4 untuk animasi

Depth Buffering dan Hidden Surface Removal

Color 8 8 Depth

Buffer Buffer

Display

Depth Buffering menggunakan OpenGL

c Defenisikan depth buffer

glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE

| GLUT_DEPTH );

d Enable depth buffering

glEnable( GL_DEPTH_TEST );

e Clear color dan depth buffers

glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );

f Render scene

g Swap color buffers

An Updated Program Template

void main( int argc, char** argv ) {

glutInit( &argc, argv ); glutInitDisplayMode( GLUT_RGB |

GLUT_DOUBLE | GLUT_DEPTH ); glutCreateWindow( “Tetrahedron” ); init(); glutIdleFunc( idle ); glutDisplayFunc( display ); glutMainLoop();

An Updated Program Template (Lanjutan)

void init( void ) { glClearColor( 0.0, 0.0, 1.0,

void idle( void ) {

glutPostRedisplay();

An Updated Program Template (Lanjutan)

void drawScene( void ) {

GLfloat vertices[] = { … }; GLfloat colors[] = { … };

glClear( GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT ); glBegin( GL_TRIANGLE_STRIP ); /* calls to glColor*() and

glVertex*() */

glEnd(); glutSwapBuffers();

Texture

Mapping

Texture Texture

Pixel Pixel

z mengaplikasikan citra 1D, 2D, atau 3D

ke geometrik primitif z Hal yang digunakan untuk proses

Texturing

z simulasi material z Mengurangi kompleksitas geometrik z image warping z refleksi z simulasi material z Mengurangi kompleksitas geometrik z image warping z refleksi

image

geometry

Texture Mapping dan OpenGL Pipeline

z Citra dan geometri mengalir dalam

pipeline yang terpisah pada proses di rasterizer

z “kompleks” textures tidak berpengaruh pada kompleksitas geometrik

vertices

geometry pipeline

rasterizer image

pixel pipeline

Contoh Tekstur

z Tekstur ini adalah citra 256 x 256 yang di gabung (mapped) dengan poligon

persegi panjang yang di tampilkan pada perspektif

Cara mengaplikasikan Tekstur I

z Three steps

c specify texture

z read or generate image z assign to texture z enable texturing

d assign texture coordinates to vertices

e specify texture parameters

z wrapping, filtering

Tekstur Obyek

z Like display lists for texture images

z one image per texture object z may be shared by several graphics contexts

z Generate texture names

glGenTextures( n, *texIds );

Cara mengaplikasikan Tekstur II

z specify textures in texture objects z set texture filter z set texture function z set texture wrap mode z set optional perspective correction hint z bind texture object z enable texturing z supply texture coordinates for vertex

z coordinates can also be generated

Tekstur Obyek (lanjutan)

z Create texture objects with texture data and

state

glBindTexture( target, id );

z Bind textures before using

glBindTexture( target, id );

Memilih citra

untuk Tekstur

Texture Texture

Pixel Pixel

z Define a texture image from an array of texels in CPU memory

z glTexImage2D( target, level, components, w, h, border, format, type, *texels );

z dimensions of image must be powers of 2

z Texel colors are processed by pixel pipeline

z pixel scales, biases and lookups can be done

Konversikan citra Tekstur

z If dimensions of image are not power of 2 z gluScaleImage( format, w_in, h_in,

type_in, *data_in, w_out, h_out,

type_out, *data_out );

z *_in is for source image z *_out is for destination image

z Image interpolated and filtered during scaling

Memilih Tekstur: Methode Lainnya

z Use frame buffer as source of texture image

z uses current buffer as source image

glCopyTexImage1D(...) glCopyTexImage1D(...) glCopyTexImage2D(...) glCopyTexImage2D(...)

z Modify part of a defined texture

glTexSubImage1D(...) glTexSubImage1D(...) glTexSubImage2D(...) glTexSubImage2D(...) glTexSubImage3D(...) glTexSubImage3D(...)

z Do both with glCopyTexSubImage2D(...) , etc.

Memetakan

(Mapping) Tekstur Vertex

Texture Texture

Pixel Pixel

z Based on parametric texture coordinates z glTexCoord*() specified at each vertex

Texture Space

Object Space

(s, t) = (0.2, 0.8) 0, 1

c (0.4, 0.2) b

B C (0.8, 0.4)

1, 0 s

Membuat Koordinat Tekstur

z Automatically generate texture coords

glTexGen{ifd}[v]()

z specify a plane

z generate texture coordinates based upon distance

+ By + Cz + D = 0

from plane Ax

z generation modes

z GL_OBJECT_LINEAR z GL_EYE_LINEAR z GL_SPHERE_MAP

Metode Aplikasi Tekstur

z Filter Modes

z minification or magnification z special mipmap minification filters

z Wrap Modes

z clamping or repeating

z Texture Functions

z how to mix primitive’s color with texture’s color

z blend, modulate or replace texels

Filter Modes

Example:

glTexParameteri( glTexParameteri( target, type, mode target, type, mode ); );

Texture

Polygon Magnification

Polygon

Texture

Minification

Tekstur Mipmapped

z Mipmap allows for prefiltered texture maps of decreasing resolutions

z Lessens interpolation errors for smaller textured objects

z Declare mipmap level during texture definition

glTexImage*D( glTexImage*D( GL_TEXTURE_*D, level, GL_TEXTURE_*D, level, … … ) )

z GLU mipmap builder routines

gluBuild*DMipmaps( gluBuild*DMipmaps( … … ) )

z OpenGL 1.2 introduces advanced LOD controls

Mode Wrapping

z Example:

glTexParameteri( GL_TEXTURE_2D,

GL_TEXTURE_WRAP_S, GL_CLAMP )

glTexParameteri( GL_TEXTURE_2D,

GL_TEXTURE_WRAP_T, GL_REPEAT )

GL_REPEAT

GL_CLAMP

texture

wrapping

wrapping

Fungsi berkaitan dengan Tekstur

z Controls how texture is applied

z glTexEnv{fi}[v]( GL_TEXTURE_ENV, prop,

param )

z GL_TEXTURE_ENV_MODE modes

z GL_MODULATE z GL_BLEND z GL_REPLACE

z Set blend color with GL_TEXTURE_ENV_COLOR

Tips untuk Koreksi Perspektif

z Texture coordinate and color interpolation

z either linearly in screen space z or using depth/perspective values (slower)

z Noticeable for polygons “on edge”

z glHint( GL_PERSPECTIVE_CORRECTION_HINT,

hint )

where hint is one of

z GL_DONT_CARE z GL_NICEST z GL_FASTEST

Adakah tempat untuk Tekstur?

z Query largest dimension of texture image

z typically largest square texture z doesn’t consider internal format size

z glGetIntegerv( GL_MAX_TEXTURE_SIZE, &size

z Texture proxy

z will memory accommodate requested texture size? z no image specified; placeholder z if texture won’t fit, texture state variables set to 0

z doesn’t know about other textures z only considers whether this one texture will fit all of memory

Texture Residency

z Working set of textures

z high-performance, usually hardware accelerated z textures must be in texture objects z a texture in the working set is resident z for residency of current texture, check

GL_TEXTURE_RESIDENT state

z If too many textures, not all are resident

z can set priority to have some kicked out first z establish 0.0 to 1.0 priorities for texture objects

Imaging and Raster Primitives

z Describe OpenGL’s raster primitives: bitmaps and image rectangles

z Demonstrate how to get OpenGL to read and render pixel rectangles

Pixel-based primitives

z Bitmaps

z 2D array of bit masks for pixels

z update pixel color based on current color

z Images

z 2D array of pixel color information

z complete color information for each pixel

z OpenGL doesn’t understand image formats

Pixel Pipeline

Texture Texture

Pixel Pixel

z Programmable pixel storage and transfer operations

glBitmap(), glDrawPixels()

Per Fragment Frame CPU

Operations Buffer Modes

(and Pixel Map)

Pixel Zoom)

Texture

glCopyTex*Image();

Memory

glReadPixels(), glCopyPixels()

Positioning Image Primitives

z glRasterPos3f( x, y, z )

z raster position transformed like geometry z discarded if raster position

is outside of viewport

z may need to fine tune viewport for desired results

Raster Position

Rendering Bitmaps

z glBitmap( width, height, xorig, yorig, xmove, ymove, bitmap )

z ( ⎣ x − xorig ⎦⎣ y − yorig ⎦ ) render bitmap in current color

( xmove z advance raster position by ymove )

yorig

after

width

rendering

xorig

xmove

Rendering Fonts using Bitmaps

z OpenGL uses bitmaps for font rendering

z each character is stored in a display list

containing a bitmap z window system specific routines to access

system fonts

z glXUseXFont() z wglUseFontBitmaps()

Rendering Images

z glDrawPixels( width, height, format,

type, pixels )

z render pixels with lower left of image at current raster position

z numerous formats and data types for specifying storage in memory

z best performance by using format and type that

matches hardware

Reading Pixels

z glReadPixels( x, y, width, height,

format, type, pixels )

z read pixels from specified (x,y) position in framebuffer

z pixels automatically converted from framebuffer format into requested format and type

z Framebuffer pixel copy

z glCopyPixels( x, y, width, height,

type )

Pixel Zoom

z glPixelZoom( x, y )

z expand, shrink or reflect pixels around current raster position

z fractional zoom supported

Raster

glPixelZoom(1.0, -1.0);

Position

Storage and Transfer Modes

z Storage modes control accessing memory

z byte alignment in host memory z extracting a subimage

z Transfer modes allow modify pixel values

z scale and bias pixel component values z replace colors using pixel maps

Advanced OpenGL Topics

z Display Lists and Vertex Arrays z Alpha Blending and Antialiasing z Using the Accumulation Buffer z Fog z Feedback & Selection z Fragment Tests and Operations z Using the Stencil Buffer

Immediate Mode versus Display Listed Rendering

z Immediate Mode Graphics

z Primitives are sent to pipeline and display right

away z No memory of graphical entities

z Display Listed Graphics

z Primitives placed in display lists z Display lists kept on graphics server z Can be redisplayed with different state z Can be shared among OpenGL graphics contexts

Immediate Mode versus Display Lists

Immediate Mode

Per Vertex

Primitive Assembly

Display

Per Fragment Frame

Display Listed

Texture Memory

Pixel Operations

Display Lists

Texture Texture

Pixel Pixel

z Creating a display list

GLuint id; void init( void ) {

id = glGenLists( 1 ); glNewList( id, GL_COMPILE ); /* other OpenGL routines */ glEndList();

z Call a created list

void display( void ) {

glCallList( id );

Display Lists

z Not all OpenGL routines can be stored in display lists

z State changes persist, even after a display list is finished

z Display lists can call other display lists z Display lists are not editable, but you can fake

it

z make a list (A) which calls other lists (B, C, and D) z delete and replace B, C, and D, as needed

Display Lists and Hierarchy

z Consider model of a car

z Create display list for chassis z Create display list for wheel

z glNewList( CAR, GL_COMPILE );

glCallList( CHASSIS );

glTranslatef( … );

glCallList( WHEEL );

glTranslatef( … );

glCallList( WHEEL );

z glEndList();

Advanced Primitives

z Vertex Arrays z Bernstein Polynomial Evaluators

z basis for GLU NURBS

z NURBS (Non-Uniform Rational B-Splines)

z GLU Quadric Objects

z sphere z cylinder (or cone) z disk (circle)

Vertex

Arrays

Texture Pixel

Pixel

z Pass arrays of vertices, colors, etc. to OpenGL in a large chunk

Color Vertex

glVertexPointer( 3, GL_FLOAT, 0, coords )

data data

z glColorPointer( 4, GL_FLOAT, 0, colors ) z glEnableClientState( GL_VERTEX_ARRAY ) z glEnableClientState( GL_COLOR_ARRAY ) z glDrawArrays( GL_TRIANGLE_STRIP, 0,

numVerts );

z All active arrays are used in rendering

Why use Display Lists or Vertex Arrays?

z May provide better performance than immediate mode rendering

z Display lists can be shared between multiple OpenGL context

z reduce memory usage for multi-context

applications

z Vertex arrays may format data for better

memory access

Alpha: the 4 th Color Component

z Measure of Opacity

z simulate translucent objects

z glass, water, etc.

z composite images z antialiasing z ignored if blending is not enabled

glEnable( GL_BLEND )

Blending

Texture Texture

Pixel Pixel

z Combine pixels with what’s in already in the framebuffer z glBlendFunc( src, dst )

C = src C dst

Blending Blending

Equation

Equation

Blended Blended Fragment Fragment

Pixel Pixel ( ( src src ) )

Framebuffer Framebuffer Pixel Pixel

( ( dst dst ) )

Multi-pass Rendering

z Blending allows results from multiple drawing passes to be combined together

z enables more complex rendering algorithms

Example of bump-mapping done with a multi-pass OpenGL algorithm

Antialiasing

z Removing the Jaggies

z glEnable( mode )

z GL_POINT_SMOOTH z GL_LINE_SMOOTH z GL_POLYGON_SMOOTH

z alpha value computed by computing sub-pixel coverage

z available in both RGBA and colormap modes

Accumulation Buffer

z Problems of compositing into color buffers

z limited color resolution

z clamping z loss of accuracy

z Accumulation buffer acts as a “floating point” color buffer

z accumulate into accumulation buffer z transfer results to frame buffer

Accessing Accumulation Buffer

z glAccum( op, value )

z operations

z within the accumulation buffer: GL_ADD,

GL_MULT z from read buffer: GL_ACCUM, GL_LOAD

z transfer back to write buffer: GL_RETURN

z glAccum(GL_ACCUM, 0.5) multiplies

each value in write buffer by 0.5 and adds to accumulation buffer

Accumulation Buffer Applications

z Compositing z Full Scene Antialiasing z Depth of Field z Filtering z Motion Blur

Full Scene Antialiasing : Jittering the view

z Each time we move the viewer, the image shifts

z Different aliasing artifacts in each image z Averaging images using accumulation

buffer averages out these artifacts

Depth of Focus : Keeping a Plane in Focus

z Jitter the viewer to keep one plane unchanged

Back Plane

Focal Plane Front Plane

eye pos 1 eye pos 2

Fog

z glFog{if}( property, value )

z Depth Cueing

z Specify a range for a linear fog ramp

z GL_FOG_LINEAR

z Environmental effects

z Simulate more realistic fog

z GL_FOG_EXP z GL_FOG_EXP2

Feedback Mode

z Transformed vertex data is returned to the application, not rendered

z useful to determine which primitives will

make it to the screen

z Need to specify a feedback buffer

z glFeedbackBuffer( size, type, buffer )

z Select feedback mode for rendering

z glRenderMode( GL_FEEDBACK )

Selection Mode

z Method to determine which primitives are inside the viewing volume

z Need to set up a buffer to have results returned to you

glSelectBuffer( glSelectBuffer( size, buffer size, buffer ) )

z Select selection mode for rendering

z glRenderMode( GL_SELECT )

Selection Mode (cont.)

z To identify a primitive, give it a name

z “names” are just integer values, not strings

z Names are stack based

z allows for hierarchies of primitives

z Selection Name Routines

glLoadName( name ) glPushName( name )

glInitNames()

Picking

z Picking is a special case of selection z Programming steps

z restrict “drawing” to small region near pointer

use gluPickMatrix() on projection matrix

z enter selection mode; re-render scene z primitives drawn near cursor cause hits z exit selection; analyze hit records

Picking Template

glutMouseFunc( pickMe ); void pickMe( int button, int state, int x, int y )

{ GLuint nameBuffer[256]; GLint hits; GLint myViewport[4]; if (button != GLUT_LEFT_BUTTON ||

state != GLUT_DOWN) return; glGetIntegerv( GL_VIEWPORT, myViewport ); glSelectBuffer( 256, nameBuffer ); (void) glRenderMode( GL_SELECT ); glInitNames();

Picking Template (cont.)

glMatrixMode( GL_PROJECTION ); glPushMatrix(); glLoadIdentity(); gluPickMatrix( (GLdouble) x, (GLdouble)

(myViewport[3]-y), 5.0, 5.0, myViewport ); /* gluPerspective or glOrtho or other

projection */ glPushName( 1 ); /* draw something */ glLoadName( 2 ); /* draw something else … continue … */

Picking Template (cont.)

glMatrixMode( GL_PROJECTION ); glPopMatrix(); hits = glRenderMode( GL_RENDER );

/* process nameBuffer */ }

Picking Ideas

z For OpenGL Picking Mechanism

z only render what is pickable (e.g., don’t clear screen!)

z use an “invisible” filled rectangle, instead of text z if several primitives drawn in picking region, hard to

use z values to distinguish which primitive is “on top”

z Alternatives to Standard Mechanism

z color or stencil tricks (for example, use glReadPixels() to obtain pixel value from back buffer)

Getting to the Framebuffer

Depth Logical Depth

Test Operations Test

Operations Framebuffer

Scissor Box

z Additional Clipping Test

glScissor( x, y, w, h )

z any fragments outside of box are clipped z useful for updating a small section of a

viewport

z affects glClear() operations

Alpha Test

Texture Texture

Pixel Pixel

z Reject pixels based on their alpha value

z glAlphaFunc( func, value ) z glEnable( GL_ALPHA_TEST )

z use alpha as a mask in textures

Stencil Buffer

Texture Texture

Pixel Pixel

z Used to control drawing based on values in the stencil buffer

z Fragments that fail the stencil test are not drawn

z Example: create a mask in stencil buffer

and draw only objects not in mask area

Controlling Stencil Buffer

z glStencilFunc( func, ref, mask )

z compare value in buffer with ref using func

z only applied for bits in mask which are 1 z func is one of standard comparison functions

z glStencilOp( fail, zfail, zpass )

z Allows changes in stencil buffer based on passing

or failing stencil and depth tests: GL_KEEP, GL_INCR

Creating a Mask

z glInitDisplayMode( …|GLUT_STENCIL|… ); z glEnable( GL_STENCIL_TEST ); z glClearStencil( 0x0 );

z glStencilFunc( GL_ALWAYS, 0x1, 0x1 ); z glStencilOp( GL_REPLACE, GL_REPLACE,

GL_REPLACE );

z draw mask

Using Stencil Mask

z Draw objects where stencil = 1

z glStencilFunc( GL_EQUAL, 0x1, 0x1

z Draw objects where stencil != 1

z glStencilFunc( GL_NOTEQUAL, 0x1,

0x1 );

z glStencilOp( GL_KEEP, GL_KEEP,

GL_KEEP );

Dithering

z glEnable( GL_DITHER )

z Dither colors for better looking results

z Used to simulate more available colors

Logical Operations on Pixels

z Combine pixels using bitwise logical operations

z glLogicOp( mode )

z Common modes

z GL_XOR z GL_AND

Advanced Imaging

z Imaging Subset

z Only available if GL_ARB_imaging defined

z Color matrix z Convolutions z Color tables z Histogram z MinMax z Advanced Blending

On-Line Resources

z http://www.opengl.org

z start here; up to date specification and lots of sample code

z news:comp.graphics.api.opengl

z http://www.sgi.com/software/opengl z http://www.mesa3d.org/

z Brian Paul’s Mesa 3D

z http://www.cs.utah.edu/~narobins/opengl.html

z very special thanks to Nate Robins for the OpenGL Tutors z source code for tutors available here!

Buku

z rd OpenGL Programming Guide, 3 Edition z rd OpenGL Reference Manual, 3 Edition

z OpenGL Programming for the X Window System

z includes many GLUT examples

z Interactive Computer Graphics: A top- down approach with OpenGL, 2 nd Edition