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 y

sesudah

sesudah

sebelum

z

x

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  Q = Qy  dan 1  1      1 dari 12 Disusun oleh : Eko Sediyono

Gambar 7. dan d.a pengaruh translasi. pengaruh shear. rotasi dan shear. pengaruh skala.  Qx   Px       Q y  = T  Py  Q  P   z  z atau ringkasnya Q = T(P) Transformasi Affine mempunyai bentuk seperti berikut ini. menunjukkan pengaruh transformasi-transformasi dasar tersebut dalam gambar. b. Gambar 7.2. Transformasi dari titik P menuju titik Q menggunakan fungsi T() berikut ini.2) ke Q dengan matriks transformasi berikut ini  3  − 2  0  0 1 0 5  2 1  Jawab :  Qx   3    Qy  =  .2  1  0    0 1 0 5  1   8      2  2  =  2      1  1   1  Transformasi Affine berpengaruh pada 4 transformasi dasar. 2 dari 12 Disusun oleh : Eko Sediyono . c. skala.0)).Hal ini berarti titik P berada pada lokasi P = Px i + Py j + ϑ Dimana ϑ adalah titik pusat koordinat (tidak harus selalu (0.  Q x   m11 Px + m12 Py + m13       Q y  =  m21 Px + m 22 Py + m23   1    1     dalam bentuk persamaan matriks persamaan di atas dapat diubah menjadi  Q x   m11 m12 m13  Px        Q y  =  m21 m22 m23  Py   1  0   0 1     1  Contoh : Lakukan transformasi Affin dari titik P = (1. pengaruh rotasi. yaitu : translasi.2.

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. Transformasi Affine untuk translasi diberikan oleh persamaan berikut ini.2. Qx = Px cos(θ) – Py sin(θ). 3 dari 12 Disusun oleh : Eko Sediyono . Qy = Px sin(θ) – Py cos(θ). m23) adalah vektor offset yang menyatakan besarnya pergeseran. Persamaan transformasinya diberikan pada persamaan berikut ini. Transformasi Dasar. Transformasi Affine untuk skala melakukan penskalaan dengan menggunakan dua faktor skala yaitu S x dan Sy masing-masing untuk koordinat x dan y.  Q x  1    Q y  =  0  1   0    0 1 0 m13  Px    m 23  Py    1   1  atau lebih ringkasnya  Q x   Px + m13       Q y  =  Py + m 23   1    1     Vektor (m13 . ( Qx.Gambar 7.

Matrik transformasinya adalah sebagai berikut. Qx = Px + hPy Qy = Py Dimana h menyatakan besarnya perubahan P pada sumbu y. Titik P dinyatakan dengan P = Px i + Py j + Pz k + ϑ 4 dari 12 atau Disusun oleh : Eko Sediyono . Lebih jelasnya dapat dilihat pada gambar berikut ini. Transformasi Affine 3D Seperti pada transformasi Affine 2D. Transformasi Shear 7. transformasi Affine 3D juga menggunakan koordinat frame. Transformasi Rotasi Transformasi Affine untuk shearing diberikan oleh persamaan berikut ini.y y Matriks transformasinya adalah sebagai berikut . 1  0 0  h 1 0 0  0 1  Bentuk tranformasinya secara grafis dapat diihat pada gambar berikut ini.3. Gambar 7.4.3.0) ke arah berlawanan jarum jam sebesar sudut θ. Gambar 7. sesudah sesudah cos(θ) − sin(θ) 0    cos(θ) 0   sin(θ)   0 0 x 1 z sebelum sebelum x Rotasi mempunyai pengertian diputar dengan pusat titik asal (0.

1  f 0  0  0 1 0 0 0 0 1 0 0  0 0  1  Kalau matrik transformasi dikalikan dengan titik P akan menghasilkan Q = (Px. Sy. m24. sumbu y. yaitu rotasi terhadap sumbu x. Pz). m34) adalah besarnya translasi yang diinginkan. Untuk penskalaan matrik transformasinya adalah sebagai berikut. Sz) adalah besarnya skala yang diinginkan. Jadi komponen Px. Px    P  P = y P  z 1   Dan transformasinya secara transformasi berikut ini. fPx + Py . 5 dari 12 Disusun oleh : Eko Sediyono . sedangkan komponen Py berubah secara proporsional. dimana f adalah konstanta yang kita inginkan. dan Pz tetap. umum dinyatakan dengan persamaan  Qx   Px       Qy   Py  = M Q  P   z  z  1  1      m11  m M =  21 m  31  0  m12 m22 m32 0 m13 m23 m33 0 m14   m24  m34   1   dengan M nya adalah Untuk translasi matrik M tersebut adalah sebagai berikut  1 0 0 m14     0 1 0 m 24  0 0 1 m  34   0 0 0 1    dimana (m14. dan sumbu z. Untuk rotasi ada 3 macam transformasi. 0 0 Sx 0    0 S y 0 0 0 0 S z 0   0 0 0 1   dimana (Sx. Untuk shearing matriks transformasinya adalah sebagai berikut.

30o terhadap sumbu y. Penggunaan Transformasi Affine 3D dalam OpenGL Pada gambar 7. dan d.5. Transformasi Rotasi 3D 7. matrik rotasinya adalah 0 0  0 0  s 0 c 0 0 0 1 0 Dimana c adalah cos(θ) dan s adalah sin(θ). untuk θ yang diinginkan.4. matrik rotasinya adalah 0  0  0 c s 0 0 −c c 0 0  0 0  1  0  c  1  0 Rotasi dengan sumbu y. matrik rotasinya adalah − s 0   0 0  c − s   c s Rotasi dengan sumbu z.6 ditunjukkan proses komputer “melihat” obyek sampai menampilkannya di layar sebagai obyek 2D. Ruang pandang ( view volume) dari kamera dibatasi oleh “balok berongga” yang luasnya sama dengan window. dan 6 dari 12 Disusun oleh : Eko Sediyono . Contoh: Gambar berikut ini menunjukkan a. “Mata” yang melihat pemandangan. -70 o terhadap sumbu x. c.1  0 Rotasi dengan sumbu x. Gambar gudang dengan posisi awal. sepanjang sumbu z. mengarah ke window yang terletak pada bidang x-y. 0  0 0  1  0  0 0  1  Gambar 7. rotasi -90o terhadap sumbu z. dan rotasi dari titik pusat sebesar b.

diproyeksikan ke window sejajar dengan sumbu z. Proses melihat dan menampilkan obyek 2D dengan OpenGL Berikut ini disajikan proses melihat dan menampilkan obyek dalam bentuk 3D. Transformasi viewport yang terpisah memetakan titik yang diproyeksikan dari window ke peralatan tampilan (Layar komputer). Proses Pipeline dalam OpenGL 7 dari 12 Disusun oleh : Eko Sediyono . z1) menjadi (x1.7 ditunjukkan obyek 3D yang sebagian berada di luar ruang pandang. yaitu membuang bagian obyek yang berada di luar ruang pandang. Dengan kata lain penggambaran titik 3D ke dalam window adalah memproyeksikan titik (x1. Gambar 7. Titik yang berada diluar ruang pandang dipotong dan dibuang.8 menunjukkan proses penampilan gambar sampai ke view port. Proses ini dalam OpenGL disebut pipelining. Obyek 3D yang Sebagian berada di luar ruang pandang Gambar 7. Gambar 7.7. Gambar 7.kedalamannya dibatasi oleh bidang dekat (near plane) dan bidang jauh (far plane). y2. 0). Pada gambar 7. Pada penampilannya terdapat proses clipping. Setiap titik yang berada pada ruang pandang.6. y1.8.

far). Disusun oleh : Eko Sediyono 8 dari 12 . Vertek-vertek tersebut dikalikan dengan matriks. uz). look. bott.x. Rotasi ini menggunakan persamaam 7….x. look. // membangkitkan matrik modelview glLoadIdentity(). y dengan dy. uy. Demikian juga untuk far.Setiap vertek dari obyek harus melewati pipeline dengan pemanggilan fungsi glVertex3d(x. dan sejajar dengan sumbu z sepanjang -near sampai -far.x.x.z). Hasilnya dikembalikan lagi ke matrik obyek. Beberapa fungsi dalam OpenGL yang diperlukan untuk pipeline adalah : • Untuk mengatur transformasi modelview glMatrixMode(GL_MODELVIEW) harus ada di dalam fungsi init().y. up. uz) Matrik dari obyek dikalikan masingmasing untuk rotasi sebesar sudut angle dan berputar mengelilingi sumbu antara titik pusat dengan titik (ux. Dan terakhir dipetakan ke viewport..z. far) Digunakan untuk membangun ruang pandang yang berupa balok berongga yang sejajar dengan sumbu x sepanjang left sampai right. eye. sy. right. eye.y. look. y dengan sy. matrik proyeksi dan matrik viewport. • Untuk mengatur kamera dengan proyeksi paralel. // inisialisasi matrik proyeksi glOrtho(left.z. top. up. sejajar sumbu y sepanjang bott sampai top.z). up. top.z.y.x. misalnya far = 20. Hasilnya dikembalikan lagi ke matrik obyek. diantaranya adalah matrik modelview. glOrtho(left. dz) Matrik dari obyek dikalikan masing-masing untuk translasi x dengan dx. dan z dengan dz. • Untuk mengatur posisi kamera gluLookAt( eye.y. up. up. // mengalikannya dengan matrik baru. // inisialisasi matrik modelview gluLookAt( eye. dan z dengan sz. Digunakan tanda negatif karena defaultnya kamera terletak pada titik pusat dan melihat ke bawah sumbu negatif z.y. glTranslated(dx. bottom. near. glScaled(sx. look. dy. Urutan perintahnya haruslah seperti berikut ini. eye. sz) matrik dari obyek dikalikan masing-masing untuk penskalaan x dengan sx. // membangkitkan matrik proyeksi glLoadIdentity(). artinya meletakkan bidang dekat pada z=-2 atau 2 unit di depan mata.x.y. z). right. Urutan perintah untuk proyeksi paralel adalah : glMatrixMode(GL_PROJECTION). look. eye. uy. glRotated(angle. artinya meletakkan bidang jauh 20 unit di depan mata. near. Untuk near bernilai 2.z. ux. y. glMatrixMode(GL_MODELVIEW). up. look.

0). 3. gluLookAt(4. Glint nStacks) Tempat the : glutWireTeapot(Gldouble size) nSlices menyatakan banyaknya irisan mengelilingi sumbu z. 1. 1.1. dan nStacks menyatakan banyaknya irisan mengelilingi sumbu y.1. 0.2. Glint nSlices.4. Disusun oleh : Eko Sediyono 9 dari 12 . menampilkan kubus dengan panjang sisi masing-masing sepanjang size.2. 4. Gldouble outRad. Gambar yang akan ditampilkan adalah seperti berikut ini.8 glMatrixMode(GL_MODELVIEW).4 dan tinggi 4. Dan misalnya ingin diatur pula near = 1 dan far = 50. 0. glMatrixMode(GL_PROJECTION). -2. Gambar 7. Berikut ini adalah program untuk menampilkan obyek-obyek dasar yang telah disediakan oleh OpenGL. // mengatur ruang pandang glLoadIdentity(). // lebar 6.4 dan setinggi 4. Glint nSlices. glOrtho(-3.// mengalikannya dengan matrik baru Contoh : Mengatur kamera Kamera biasanya diatur melihat ke bawah ke obyek dari posisi yang paling dekat.4. melihat titik pusat dengan look=(0. // mengatur letak kamera glLoadIdentity(). obyek-obyek tersebut adalah : • • • • Kubus : glutWireCube(GLdouble size). 0. 50).4. Gambar 7. 0). menunjukkan kamera dengan posisi-posisi eye=(4. Arah atas diatur dengan up=(0.9.9 Mengatur Kamera dengan gluLookAt() OpenGL menyediakan bentuk-bentuk dasar untuk obyek 3D dalam bentuk wireframe.4). 2. Glint nStacks) Kerucut : glutWireTorus(Gldouble inRad. 4. Misalnya juga diinginkan ruang pandangnya selebar 6. 1. Maka kodenya haruslah dibuat seperti berikut ini.0).8 (atau aspect ratio nya 640/480). Donat : glutWireSphare(Gldouble radius.

0).h> #include <gl/glut.0*64/48.0. 100).0. // along the z-axis glEnd(). gluLookAt(2.0*64/48.04. Obyek Dasar Wireframe dari OpenGL #include <windows.Gambar 7. 0. 0. -2. // set the view volume shape glLoadIdentity(). 2.10. // position and aim the camera glLoadIdentity().1. // z-axis glPushMatrix().0.0. glBegin(GL_LINES).0. glClear(GL_COLOR_BUFFER_BIT). 0.0). 12.0.0.0. 9). 2.5).length -0. glVertex3d(0. 0. 1. 0. 0. glPopMatrix().0. glTranslated(0. glutWireCone(0. 0.h> #include <gl/Glu. glOrtho(-2. 0.length). // clear the screen glColor3d(0.2.2). 0. 2. 0). with cone at end glPushMatrix().0.0. 2. glMatrixMode(GL_MODELVIEW).0. // draw black lines axis(0.0.h> //suitable when using Windows 95/98/NT #include <gl/Gl. 10 dari 12 Disusun oleh : Eko Sediyono . glVertex3d(0.h> //<<<<<<<<<<<<<<<<<<< axis >>>>>>>>>>>>>> void axis(double length) { // draw a z-axis.0. } //<<<<<<<<<<<<<<<<<<<<<<<<<<<<< displayWire >>>>>>>>>>>>>>>>>>>>>> void displayWire(void) { glMatrixMode(GL_PROJECTION).

1. // big cube at (0. glPopMatrix(). 0. 1. qobj = gluNewQuadric(). // y-axis // z-axis glPushMatrix().0).5. glPopMatrix().0).1) glPopMatrix(). glRotated(-90. axis(0.4. glTranslated(0. glPopMatrix().0).15).0).2.1.0. glPopMatrix().5). 0. 0.5).1) glutWireCone(0.1. glTranslated(0.0. 0.10). glutWireTeapot(0. 0). } //<<<<<<<<<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 11 dari 12 Disusun oleh : Eko Sediyono .0.0) glScaled(0.1. glTranslated(1. // teapot at (1.1.5.5.0.0.0).0 . glFlush().1. 0 . // cone at (1.5) glutWireCube(1. 10.0) glRotated(90.5. axis(0.1. gluQuadricDrawStyle(qobj.5.GLU_LINE).1. glTranslated(0. // dodecahedron at (1.1) glutWireCube(0. 1.glRotated(90. // cylinder at (0. 0.2. 0. glPushMatrix(). glTranslated(1. glutWireTorus(0. 0 .5). 0). 0.0. glPopMatrix(). glPopMatrix().0.1.2. glPushMatrix().0 . glTranslated(1.15. glutWireDodecahedron(). glPopMatrix().2).0. glTranslated(1. 10.0. 0. glPushMatrix(). 0. 1. // torus at (0.0) glutWireSphere(0.0).15. 10.1).1.0). glPushMatrix().0.0. glPushMatrix(). 0.25.0).0. 0. // sphere at (1.25). gluCylinder(qobj. 0. glPushMatrix(). 8).3. 8. 8). glTranslated(0. // small cube at (0. glPushMatrix(). 0. glPopMatrix().1. 1.1) GLUquadricObj * qobj.8).

0f. 0. glutInitWindowPosition(100. 12 dari 12 Disusun oleh : Eko Sediyono . d – diagonal kiri. // background is white glViewport(0.0. l – ke kiri. glutCreateWindow("Transformation testbed . glClearColor(1.void main(int argc. glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB ). Tambahkan fasilitas keyboard untuk memutar dan menggeser gambargambar tersebut. 1.0f. 1. sebagai berikut : u – ke atas. b – ke bawah. 640.0f.0f). 100). glutInitWindowSize(640. 480). } Tugas : Ketik dan jalankan program tersebut di atas sampai benar. argv). a – diagonal kanan. char **argv) { glutInit(&argc. r – ke kanan. s – geser kanan. glutMainLoop(). glutDisplayFunc(displayWire). w – geser kiri.wireframes").480).

Sign up to vote on this title
UsefulNot useful