MATERI 7

Transformasi Obyek : transformasi affine 2D dan 3D

Tujuan Instruksional umum :

Setelah mengikuti materi ini, mahasiswa dapat menjelaskan
bagaimana menyiapkan pemrograman dengan menggunakan OpenGL
pada Microsoft Visual C++ 6.0
Tujuan Instruksional Khusus :
Mahasiswa dapat membuat program untuk menampilkan gambar 3D
Materi yang dipelajari :
1. Transformasi grambar dengan menggunakan transformasi Affine

7.1. Pengertian Dasar

Pada materi empat telah dipelajari transformasi dua dimensi, yaitu

transformasi dari koordinat nyata ke koordinat view-port untuk
mendapatkan ukuran dan posisi gambar yang diinginkan. Pada materi inii
akan dipelajari cara yang lebih fleksibel untuk mendapatkan ukuran, arah
dan posisi obyek. Metode transformasi yang digunakan adalah
transformasi Affine, baik untuk obyek dua dimensi maupun obyek tiga
dimensi.
Untuk memberikan gambaran yang jelas tentang transformasi 2D
maupun 3D yang akan dipelajari pada materi ini, berikut ini disajikan
gambar 7.1. Pada gambar 7.1.a ditunjukkan gambar rumah 2D sebelum
dan sesudah transformasi, sedangkan pada gambar 7.1.b ditunjukkan
gambar rumah 3D sebelum dan sesudah transformasi.
y

sesudah
sesudah

x
z sebelum
sebelum
x

Gambar 7.1. Gambar Rumah sebelum dan sesudah transformasi

7.2. Transformasi Affine 2D

Untuk keperluan transformasi koordinat titik P dan Q dalam 2D dinyatakan

sebagai :
Px Qx

P Py dan Q Qy
1 1

1 dari 12 Disusun oleh : Eko Sediyono

Hal ini berarti titik P berada pada lokasi P = Px i + Py j +
Dimana adalah titik pusat koordinat (tidak harus selalu (0,0)).
Transformasi dari titik P menuju titik Q menggunakan fungsi T() berikut
ini.

Qx Px

Q y T Py atau ringkasnya Q = T(P)
Q P
z z
Transformasi Affine mempunyai bentuk seperti berikut ini.
Q x m11 Px m12 Py m13

Q y m21 Px m22 Py m23
1 1

dalam bentuk persamaan matriks persamaan di atas dapat diubah
menjadi
Qx m11 m12 m13 Px

Q y m21 m22 m23 Py
1 0 0 1 1

Contoh :

Lakukan transformasi Affin dari titik P = (1,2) ke Q dengan matriks

transformasi berikut ini
3 0 5

2 1 2
0 0 1

Jawab :
Qx 3 0 5 1 8

Qy - 2 1 2 2 2
1 0 0 1 1 1

Transformasi Affine berpengaruh pada 4 transformasi dasar, yaitu :

translasi, skala, rotasi dan shear. Gambar 7.2. menunjukkan pengaruh
transformasi-transformasi dasar tersebut dalam gambar. Gambar 7.2.a
pengaruh translasi, b. pengaruh skala, c. pengaruh rotasi, dan d.
pengaruh shear.

2 dari 12 Disusun oleh : Eko Sediyono

 Gambar 7.2. Transformasi Dasar.

Transformasi Affine untuk translasi diberikan oleh persamaan berikut ini.

Qx 1 0 m13 Px

Qy 0 1 m 23 Py atau lebih ringkasnya
1 0 0 1 1

Q x Px m 13

Q y Py m 23
1 1

Vektor (m13 , m23) adalah vektor offset yang menyatakan besarnya

pergeseran.

Transformasi Affine untuk skala melakukan penskalaan dengan

menggunakan dua faktor skala yaitu Sx dan Sy masing-masing untuk
koordinat x dan y. Persamaan transformasinya diberikan pada persamaan
berikut ini.

( Qx, Qy ) = ( Sx Px , Sy Py )

sehingga matriks untuk transformasi skala adalah :

Sx 0 0

0 Sy 0
0 0 1

Transformasi Affine untuk rotasi diberikan oleh persamaan berikut ini.

Qx = Px cos() Py sin(),
Qy = Px sin() Py cos(),

3 dari 12 Disusun oleh : Eko Sediyono

 y

Matriks transformasinya adalah sebagai berikut .

sesudah
sesudah
cos( ) sin( ) 0

sin( ) cos( ) 0
0 0 1 x
sebelum z sebelum
Rotasi mempunyai pengertian
x diputar dengan pusat titik asal (0,0) ke arah
berlawanan jarum jam sebesar sudut . Lebih jelasnya dapat dilihat pada
gambar berikut ini.

Gambar 7.3. Transformasi Rotasi

Transformasi Affine untuk shearing diberikan oleh persamaan berikut ini.

Qx = Px + hPy
Qy = Py
Dimana h menyatakan besarnya perubahan P pada sumbu y. Matrik
transformasinya adalah sebagai berikut.

1 h 0

0 1 0
0 0 1

Bentuk tranformasinya secara grafis dapat diihat pada gambar berikut ini.

Gambar 7.4. Transformasi Shear

7.3. Transformasi Affine 3D

Seperti pada transformasi Affine 2D, transformasi Affine 3D juga

menggunakan koordinat frame. Titik P dinyatakan dengan

P = Px i + Py j + Pz k + atau

4 dari 12 Disusun oleh : Eko Sediyono

 Px

Py
P
P
z
1

Dan transformasinya secara umum dinyatakan dengan persamaan
transformasi berikut ini.

Qx Px

Qy Py
Q M Pz
dengan M nya adalah
z
1 1

m11 m12 m13 m14

m m22 m23 m24
M 21
m m32 m33 m34
31
0 0 0 1

Untuk translasi matrik M tersebut adalah sebagai berikut

1 0 0 m14

0 1 0 m24
0 0 1 m
34

0 0 0 1

dimana (m14, m24, m34) adalah besarnya translasi yang diinginkan.
Untuk penskalaan matrik transformasinya adalah sebagai berikut.

S x 0 0 0

0 S y 0 0
0 0 S z 0

0 0 0 1

dimana (Sx, Sy, Sz) adalah besarnya skala yang diinginkan.
Untuk shearing matriks transformasinya adalah sebagai berikut.

1 0 0 0

f 1 0 0
0 0 1 0

0 0 0 1

Kalau matrik transformasi dikalikan dengan titik P akan menghasilkan Q =
(Px, fPx + Py , Pz). Jadi komponen Px, dan Pz tetap, sedangkan komponen
Py berubah secara proporsional, dimana f adalah konstanta yang kita
inginkan.
Untuk rotasi ada 3 macam transformasi, yaitu rotasi terhadap sumbu x,
sumbu y, dan sumbu z.

5 dari 12 Disusun oleh : Eko Sediyono

 1 0 0 0

0 c c 0
Rotasi dengan sumbu x, matrik rotasinya adalah 0 s c 0

0 0 0 1

c 0 s 0

0 1 0 0
Rotasi dengan sumbu y, matrik rotasinya adalah s 0 c 0

1
0 0 0
c s 0 0

s c 0 0
Rotasi dengan sumbu z, matrik rotasinya adalah 0 0 1 0

0 0 0 1

Dimana c adalah cos() dan s adalah sin(), untuk yang diinginkan.

Contoh:
Gambar berikut ini menunjukkan a. Gambar gudang dengan posisi awal,
dan rotasi dari titik pusat sebesar b. -70o terhadap sumbu x, c. 30o
terhadap sumbu y, dan d. rotasi -90o terhadap sumbu z.

Gambar 7.5. Transformasi Rotasi 3D

7.4. Penggunaan Transformasi Affine 3D dalam OpenGL

Pada gambar 7.6 ditunjukkan proses komputer melihat obyek

sampai menampilkannya di layar sebagai obyek 2D. Mata yang melihat
pemandangan, mengarah ke window yang terletak pada bidang x-y,
sepanjang sumbu z. Ruang pandang (view volume) dari kamera dibatasi
oleh balok berongga yang luasnya sama dengan window, dan

6 dari 12 Disusun oleh : Eko Sediyono

kedalamannya dibatasi oleh bidang dekat (near plane) dan bidang jauh
(far plane). Setiap titik yang berada pada ruang pandang, diproyeksikan
ke window sejajar dengan sumbu z. Dengan kata lain penggambaran titik
3D ke dalam window adalah memproyeksikan titik (x1, y1, z1) menjadi
(x1, y2, 0). Titik yang berada diluar ruang pandang dipotong dan dibuang.
Transformasi viewport yang terpisah memetakan titik yang diproyeksikan
dari window ke peralatan tampilan (Layar komputer).

Gambar 7.6. Proses melihat dan menampilkan obyek 2D dengan OpenGL

Berikut ini disajikan proses melihat dan menampilkan obyek dalam bentuk
3D. Pada gambar 7.7 ditunjukkan obyek 3D yang sebagian berada di luar
ruang pandang. Pada penampilannya terdapat proses clipping, yaitu
membuang bagian obyek yang berada di luar ruang pandang.

Gambar 7.7. Obyek 3D yang Sebagian berada di luar ruang pandang

Gambar 7.8 menunjukkan proses penampilan gambar sampai ke view

port. Proses ini dalam OpenGL disebut pipelining.

Gambar 7.8. Proses Pipeline dalam OpenGL

7 dari 12 Disusun oleh : Eko Sediyono

Setiap vertek dari obyek harus melewati pipeline dengan pemanggilan
fungsi glVertex3d(x, y, z). Vertek-vertek tersebut dikalikan dengan
matriks, diantaranya adalah matrik modelview, matrik proyeksi dan matrik
viewport. Dan terakhir dipetakan ke viewport.
Beberapa fungsi dalam OpenGL yang diperlukan untuk pipeline
adalah :

Untuk mengatur transformasi modelview

glMatrixMode(GL_MODELVIEW)harus ada di dalam fungsi init().

glScaled(sx, sy, sz) matrik dari obyek dikalikan masing-masing untuk

penskalaan x dengan sx, y dengan sy, dan z dengan sz.
Hasilnya dikembalikan lagi ke matrik obyek.
glTranslated(dx, dy, dz) Matrik dari obyek dikalikan masing-masing
untuk translasi x dengan dx, y dengan dy, dan z dengan dz.
Hasilnya dikembalikan lagi ke matrik obyek.
glRotated(angle, ux, uy, uz) Matrik dari obyek dikalikan masing-
masing untuk rotasi sebesar sudut angle dan berputar
mengelilingi sumbu antara titik pusat dengan titik (ux, uy,
uz). Rotasi ini menggunakan persamaam 7..

Untuk mengatur kamera dengan proyeksi paralel.

glOrtho(left, right, bott, top, near, far) Digunakan untuk membangun

ruang pandang yang berupa balok berongga yang sejajar
dengan sumbu x sepanjang left sampai right, sejajar sumbu
y sepanjang bott sampai top, dan sejajar dengan sumbu z
sepanjang -near sampai -far. Digunakan tanda negatif
karena defaultnya kamera terletak pada titik pusat dan
melihat ke bawah sumbu negatif z. Untuk near bernilai 2,
artinya meletakkan bidang dekat pada z=-2 atau 2 unit di
depan mata. Demikian juga untuk far, misalnya far = 20,
artinya meletakkan bidang jauh 20 unit di depan mata.
Urutan perintah untuk proyeksi paralel adalah :

glMatrixMode(GL_PROJECTION); // membangkitkan matrik proyeksi

glLoadIdentity(); // inisialisasi matrik proyeksi
glOrtho(left, right, bottom, top, near, far); // mengalikannya dengan
matrik baru.

Untuk mengatur posisi kamera

gluLookAt( eye.x, eye.y, eye.z, look.x, look.y, look.z, up.x, up.y, up.z);

Urutan perintahnya haruslah seperti berikut ini.

glMatrixMode(GL_MODELVIEW); // membangkitkan matrik modelview

glLoadIdentity(); // inisialisasi matrik modelview
gluLookAt( eye.x, eye.y, eye.z, look.x, look.y, look.z, up.x, up.y, up.z);
8 dari 12 Disusun oleh : Eko Sediyono
 // mengalikannya dengan matrik baru

Contoh : Mengatur kamera

Kamera biasanya diatur melihat ke bawah ke obyek dari posisi yang paling
dekat. Gambar 7.9. menunjukkan kamera dengan posisi-posisi
eye=(4,4,4), melihat titik pusat dengan look=(0,1,0). Arah atas diatur
dengan up=(0,1,0). Misalnya juga diinginkan ruang pandangnya selebar
6.4 dan setinggi 4.8 (atau aspect ratio nya 640/480). Dan misalnya ingin
diatur pula near = 1 dan far = 50. Maka kodenya haruslah dibuat seperti
berikut ini.

glMatrixMode(GL_PROJECTION); // mengatur ruang pandang

glLoadIdentity();
glOrtho(-3.2, 3.2, -2.4, 2.4, 1, 50); // lebar 6.4 dan tinggi 4.8
glMatrixMode(GL_MODELVIEW); // mengatur letak kamera
glLoadIdentity();
gluLookAt(4, 4, 4, 0, 1, 0, 0, 1, 0);

Gambar 7.9 Mengatur Kamera dengan gluLookAt()

OpenGL menyediakan bentuk-bentuk dasar untuk obyek 3D dalam bentuk

wireframe, obyek-obyek tersebut adalah :

Kubus : glutWireCube(GLdouble size); menampilkan kubus dengan

panjang sisi masing-masing sepanjang size.
Donat : glutWireSphare(Gldouble radius, Glint nSlices, Glint
nStacks)
Kerucut : glutWireTorus(Gldouble inRad, Gldouble outRad, Glint
nSlices, Glint nStacks)
Tempat the : glutWireTeapot(Gldouble size)

nSlices menyatakan banyaknya irisan mengelilingi sumbu z, dan nStacks

menyatakan banyaknya irisan mengelilingi sumbu y.
Berikut ini adalah program untuk menampilkan obyek-obyek dasar yang
telah disediakan oleh OpenGL. Gambar yang akan ditampilkan adalah
seperti berikut ini.
9 dari 12 Disusun oleh : Eko Sediyono
 Gambar 7.10. Obyek Dasar Wireframe dari OpenGL

#include <windows.h> //suitable when using Windows 95/98/NT

#include <gl/Gl.h>
#include <gl/Glu.h>
#include <gl/glut.h>
//<<<<<<<<<<<<<<<<<<< axis >>>>>>>>>>>>>>
void axis(double length)
{ // draw a z-axis, with cone at end
glPushMatrix();
glBegin(GL_LINES);
glVertex3d(0, 0, 0); glVertex3d(0,0,length); // along the z-axis
glEnd();
glTranslated(0, 0,length -0.2);
glutWireCone(0.04, 0.2, 12, 9);
glPopMatrix();
}
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<< displayWire >>>>>>>>>>>>>>>>>>>>>>
void displayWire(void)
{
glMatrixMode(GL_PROJECTION); // set the view volume shape
glLoadIdentity();
glOrtho(-2.0*64/48.0, 2.0*64/48.0, -2.0, 2.0, 0.1, 100);
glMatrixMode(GL_MODELVIEW); // position and aim the camera
glLoadIdentity();
gluLookAt(2.0, 2.0, 2.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

glClear(GL_COLOR_BUFFER_BIT); // clear the screen

glColor3d(0,0,0); // draw black lines
axis(0.5); // z-axis
glPushMatrix();
10 dari 12 Disusun oleh : Eko Sediyono
 glRotated(90, 0,1.0, 0);
axis(0.5); // y-axis
glRotated(-90.0, 1, 0, 0);
axis(0.5); // z-axis
glPopMatrix();

glPushMatrix();
glTranslated(0.5, 0.5, 0.5); // big cube at (0.5, 0.5, 0.5)
glutWireCube(1.0);
glPopMatrix();

glPushMatrix();
glTranslated(1.0,1.0,0); // sphere at (1,1,0)
glutWireSphere(0.25, 10, 8);
glPopMatrix();

glPushMatrix();
glTranslated(1.0,0,1.0); // cone at (1,0,1)
glutWireCone(0.2, 0.5, 10, 8);
glPopMatrix();

glPushMatrix();
glTranslated(1,1,1);
glutWireTeapot(0.2); // teapot at (1,1,1)
glPopMatrix();

glPushMatrix();
glTranslated(0, 1.0 ,0); // torus at (0,1,0)
glRotated(90.0, 1,0,0);
glutWireTorus(0.1, 0.3, 10,10);
glPopMatrix();

glPushMatrix();
glTranslated(1.0, 0 ,0); // dodecahedron at (1,0,0)
glScaled(0.15, 0.15, 0.15);
glutWireDodecahedron();
glPopMatrix();

glPushMatrix();
glTranslated(0, 1.0 ,1.0); // small cube at (0,1,1)
glutWireCube(0.25);
glPopMatrix();

glPushMatrix();
glTranslated(0, 0 ,1.0); // cylinder at (0,0,1)
GLUquadricObj * qobj;
qobj = gluNewQuadric();
gluQuadricDrawStyle(qobj,GLU_LINE);
gluCylinder(qobj, 0.2, 0.2, 0.4, 8,8);
glPopMatrix();
glFlush();
}
//<<<<<<<<<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
11 dari 12 Disusun oleh : Eko Sediyono
void main(int argc, char **argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB );
glutInitWindowSize(640,480);
glutInitWindowPosition(100, 100);
glutCreateWindow("Transformation testbed - wireframes");
glutDisplayFunc(displayWire);
glClearColor(1.0f, 1.0f, 1.0f,0.0f); // background is white
glViewport(0, 0, 640, 480);
glutMainLoop();
}

Tugas :

Ketik dan jalankan program tersebut di atas sampai benar.

Tambahkan fasilitas keyboard untuk memutar dan menggeser gambar-
gambar tersebut, sebagai berikut : u ke atas, b ke bawah, l ke kiri, r
ke kanan, d diagonal kiri, a diagonal kanan, w geser kiri, s geser
kanan.

12 dari 12 Disusun oleh : Eko Sediyono