OBJEK 3D DENGAN INTERAKSI KEYBOARD

(1)

OBJEK 3D DENGAN INTERAKSI KEYBOARD

1. Pendahuluan

A. Pengertian Objek 3 Dimensi

Grafik komputer 3 dimensi biasa disebut 3D atau adalah bentuk dari benda yang memiliki panjang, lebar, dan tinggi. Grafik 3 Dimensi merupakan teknik penggambaran yg berpatokan pada titik koordinat sumbu x(datar), sumbu y(tegak), dan sumbu z (miring).

Representasi dari data geometrik 3 dimensi sebagai hasil dari pemrosesan dan pemberian efek cahaya terhadap grafika komputer 2D. Tiga Dimensi, biasanya digunakan dalam penanganan grafis. 3D secara umum merujuk pada kemampuan dari sebuah video card (link). Saat ini video card menggunakan variasi dari instruksi-instruksi yang ditanamkan dalam video card itu sendiri (bukan berasal dari software) untuk mencapai hasil grafik yang lebih realistis dalam memainkan game komputer.

Grafik 3D merupakan perkembangan dari grafik 2D. Didalam grafika komputer, 3D merupakan bentuk grafik yang menggunakan representasi data geometri tiga dimensi.

Perbedaan paling utama dari objek 2 dimensi dan objek 3 dimensi yaitu kedalamannya. Yaitu suatu jarak antara pengamat dengan suatu objek yang dilihat (point of view). Jadi, jika objek 2 dimensi hanya menggunakan 2 ukuran (panjang dan lebar), maka 3 dimensi menggunakan 3 ukuran meliputi panjang, lebar, kedalaman yang disimbolkan dengan sumbu x, y, z.

Suatu objek rangka 3D apabila disinari dari arah tertentu akan membentuk bayangan pada permukaan gambar. Proses pembuatan grafik komputer 3D dapat dibagi ke dalam tiga fase, yaitu 3D modeling yang mendeskripsikan bentuk dari sebuah objek, layout dan animation yang mendeskripsikan gerakan dan tata letak sebuah objek, dan 3D rendering yang memproduksi image dari objek tersebut.

Di dalam dunia game, 3D secara umum merujuk pada kemampuan dari sebuah video card (link). Saat ini video card menggunakan variasi dari instruksi-instruksi yang ditanamkan dalam video card itu sendiri (bukan berasal dari software) untuk mencapai hasil grafik yang lebih realistis dalam memainkan game komputer.

(2)

B. Objek 3 Dimensi

Benda tiga dimensi tersusun dari sekumpulan surface. Surface yaitu permukaan kulit.

Gambar 11.1 Contoh permukaan 3 dimensi

Surface dapat dibuat dari rangkaian Polygon. Polygon adalah bentuk yang disusun dari serangkaian garis yang terhubung satu dengan yang lain dan berbentuk kurva tertutup sehingga membentuk sebuah objek gambar. Titik sudut dari Polygon disebut vertex sedangkan garis penyusun Polygon disebut edge.

Gambar 11.2 Polygon

Polygon digambar dengan menggambar masing-masing edge dengan setiap edge merupakan pasangan dari vertexi – vertexi+1 kecuali untuk edge terakhir merupakan pasangan dari vertexn – vertex1.

(3)

Gambar 11.3 Objek 3D yang tersusun dari kumpulan poligon

Bentuk polygon yang paling tepat digunakan untuk membuat permukaan benda tiga dimensi adalah polygon segitiga (triangle). Hal ini disebabkan polygon segitiga akan selalu berada dalam keadaan planar (datar) se-mentara polygon dengan vertex lebih dari 3 dapat berada dalam kondisi non-planar karena salah satu vertex tidak berada di lokasi yang sejajar. Satu hal yang harus diperhatikan pada saat menggunakan polygon segitiga adalah winding. Winding adalah urutan dan arah vertex-vertex penyusun polygon. Winding menganggap bahwa arah vertex berlawanan jarum jam sebagai tampak depan sedangkan arah vertex searah jarum jam dianggap sebagai bagian belakang benda.

Gambar 11.4 Arah vertex : (a) berlawanan jarum jam; (b) searah jarum jam

Pada gambar 11.4.a polygon menggunakan winding berlawanan jarum jam karena didefinisikan sebagai urutan vertex v3-v4-v5 sedangkan pada gambar 11.4.b menggunakan winding searah jarum jam karena urutan vertex yang digunakan v3-v5-v4.

Pada setiap permukaan dari poligon yang membentuk objek akan memuncukan garis Normal, yaitu vektor tegak lurus pada permukaan. Fungsinya untuk bayangan benda tersebut.

Gambar 11.5 garis normal polygon

C. Alur Proses Rendering Grafis 3D

Pada grafika komputer, rendering adalah proses pembuatan/ produksi image/gambar pada layar dari pendeskripsian suatu model.

(4)

Proses rendering grafis 3D mendeskripsikan objek 3D dari vertex-vertex pada objek primitive(seperti segitiga, titik, garis, dan segiempat), dan menghasilkan warna-warna pada pixel pada layar.

Gambar 11.6 Alur proses Rendering grafis 3D

1. Modelling Trasnformations :

Menempatkan model pada sistem koordinat yang disebut world space. Semua objek, sumber cahaya, dan sudut pandang pengamat berada pada world space.

2. Trival Rejection :

Rejection (penolakan) dilakukan terhadap bagian-bagian yeng tidak perlu sebagai upaya optimalisasi.

3. Illumination :

Cahaya menyebabkan suatu objek dapat terlihat. Warna objek ditentukan dari properti material objek itu sendiri dan sumber cahaya pada tampilan tersebut. Algoritma Illuminasi tergantung pada pemodelan bayangan (shading model) dan pemodenl permukaan (surface model).

4. Viewing transformation :

Transformasi pengamatan adalah bentuk lain dari koordinat sistem. Memetakan titik-titik yang ada pada world space ke ruang pengamatan. Posisi pengamat ditransformasikan ke asalnya. Arah pengamatan diorientasikan sepanjang axis. Mendefinisikan pengamtan volume.

(5)

5. Clipping :

Proses clipping dulakukan pada penggambaran volume 3D yang biasa disebut viewing frustum.Pada tahap ini dilakukan eliminasi total pada objek (dan bagian objek) yang tidak visible bagi citra.

6. Projection :

Objek selanjutnya diproyeksikan ke dalam 2D. Transformasikan dari ruang pengamatan ke layar

7. Rasterization :

Konversi tiap objek primitive ke suah set fragment. Sebuah fragment diperlakukan seperti pixel pada ruang 3 dimensi, selaras dengan grid pixel, dengan atribut seperti posisi, warna, dan tekstur yang normal.

8. Display :

Melakukan interpolasi parameter. Melakukan beragam operasi 2D.

D. Sistem koordinat 3D

Secara umum, sistem koordinat tiga dimensi dibedakan menjadi dua, yaitu sistem koordinat tangan kiri dan sistem koordinat tangan kanan. Sistem koordinat tangan kanan dapat digambarkan dengan tiga buah jari pada tangan kanan yang menghadap pengamat yaitu jari tengah sebagai sumbu z positif, jari telunjuk sebagai sumbu y dan ibu jari sebagai sumbu x. Sedangkan sistem koordinat tangan kiri dapat digambarkan dengan tiga buah jari pada tangan kiri dengan punggung tangan menghadap pengamat dengan jari tengah sebagai sumbu z negatif, jari telunjuk sebagai sumbu y dan ibu jari sebagai sumbu x.

Sistem koordinat tangan kanan banyak digunakan pada penggambaran geometri. Sebaliknya system koordinat tangan kiri banyak digunakan pada peggambaran pada grafika komputer Sistem koordinat tangan kiri digunakan agar objek 3 dimensi memiliki nilai z positif (jarak jauh dekat benda lebih terlihat).

Setiap titik dalam sistem koordinat tiga dimensi dapat ditentukan posisinya dengan meentukan seberapa jauh, tingggi dan lebar dari objek aslinya yang dtentukan berdasarkan koordinat-koordinat pada sumbu x, y, dan z.

(6)

Gambar 11.7 sistem koordinat 3D tangan kiri dan tangan kanan E. Primitive 3D

Ada beberapa bentuk primitive dari objek 3 dimensi. Promitive yaitu bentuk dasar yang dapat dengan mudah didefinisikan secara matematik.

 Sphere

glutWireSphere(5, 20, 20);

Gambar 11.8 sphere (bola)

 Cube

glutWireCube(25);

Gambar 11.9 Cube (kubus)  Cone

(7)

Gambar 11.10 cone (kerucut)

 Dodecahedron

glutWireDodecahedron();

Gambar 11.11 bola segilima

 Teapot

glutWireTeapot(15);

Gambar 11.11 Poci The  Torus

(8)

Gambar 11.12 Cincin

Setiap primitive 3D memiliki parameter nilai yang mengekspresikan letak dan bentuk primitive objek tersebut.

F. Transformasi Objek 3 Dimensi

Metode transformasi objek tiga dimensi sangat berbeda dengan objek dua dimensi karena terdapat sumbu z yang ditambahkan sebagai salah satu acuan untuk memperoleh posisi koordinat baru.

a. Translasi (Perpindahan)

Dalam tranformasi objek tiga dimensi, translasi adalah pemindahan suatu titik dari titik P=(x,y,z) ke posisi P=(x’,y’,z’) (Hearn, 1994) dengan menggunakan operasi matriks :

Parameter tx, ty, dan tz menjelaskan perpindahan jarak untuk koordinat x, y, dan z.

(9)

Sebuah bangun tiga dimensi yang ditranslasikan dengan vektor tertentu, dilakukan dengan memindahkan titik-titik sesuai dengan vektor tersebut.

Gambar 11.14 Memindahkan balok dengan translasi vektor T=(tx, ty, tz)

gltranslatef(x,y,z: GLfloat);

Gambar 11. 15 Posisi bola sebelum dan setelah translasi

Kode program dalam OpenGL dari program di atas adalah :

glbegin(gl_quads); glcolor3f(1,1,1); glvertex3f(-2,0,-2); glvertex3f(-2,0,2); glvertex3f(2,0,2);

(10)

Dari kode diatas diketahui bahwa posisi bola sebelum ditranslasikan berada pada koorinat (0,0,0). Kemudian posisinya ditranslasikan sepanjang sumbu x sebesar 1 satuan dan sepanjang sumbu z sebesar 1 satuan. Dengan adanya proses pentranslasian tersebut, maka pusat koordinat yang baru berada pada koordinat (1,0,1).

b. Rotasi

Untuk merotasikan sebuah objek diperlukan sumbu rotasi (poros untuk merotasikan objek) (Donald Hearn, 1994). Sintaks untuk merotasikan objek pada OpenGL adalah glRotate(sudut, x, y, z).

Parameter pertama adalah nilai perputaran sudut. Parameter kedua , ketiga, dan keempat bernilai 1 apabila sumbunya dijadikan sumbu putar. Contoh perotasian objek ditunjukkan pada gambar di bawah ini.

(11)

Gambar 11. 15 Tabung sebelum dan setelah di rotasi Kode Program :

Pada contoh diatas, diketahui bahwa posisi awal tabung sejajar dengan sumbu z. Namun, setelah dirotasi sebesar -putar x, posisi tabung sejajar dengan sumbu y. Itu menunjukkan bahwa perotasian objek dengan sudut putar positif akan berputar berlawanan dengan arah jarum jam, begitu pula sebaliknya, jika sudut putar bernilai negatif, maka objek akan berputar searah dengan jarum jam.

c. Skalasi

Transformasi skala adalah perubahan ukuran suatu objek (Sutopo, 2002). Sintaks untuk untuk melakukan proses penskalaan dalam OpenGL adalah glScalef(x,y,z:glFloat)

Parameter pertama, kedua, dan ketiga masing-masing menunjukkan nilai skala dari ukuran objek. Apabila parameter tersebut bernilai 1, maka berarti ukuran objek tersebut tetap. Contoh penskalaan ditunjukkan oleh gambar di bawah ini.

quadratic:=glunewquadric();

glucylinder(quadratic,0.25,0.25,1,32,32); gltranslatef(1,0,1);

glrotatef(-90,1,0,0);

(12)

Gambar 8. 11 Segitiga sebelum dan sesudah diskalasi

Program ke-1 :

Penerapan “Cube” pada GLUT

Cube menggunakan fungsi void glutWireCube(GLdouble size); untuk menentukan ukuran panjang sisi.

gltranslatef(-1.5,0,0); glBegin(GL_TRIANGLES); glColor3f(1,0,0);glVertex3f(-1,0,0); glColor3f(0,1,0);glVertex3f(0,1,0); glColor3f(0,0,1);glVertex3f(1,0,0); glEnd; gltranslatef(2.5,0,0); glscalef(1.5,0.5,1); glBegin(GL_TRIANGLES); glColor3f(1,0,0);glVertex3f(-1,0,0); glColor3f(0,1,0);glVertex3f(0,1,0); glColor3f(0,0,1);glVertex3f(1,0,0); glEnd; glFlush();

(13)

(14)

Hasil Setelah di-Run :

a. Tanpa interaksi dengan keyboard

b. Dengan interaksi keyboard “x”, maka objek akan bergerak pada sumbu x saja c. Dengan interaksi keyboard “y”, maka objek akan bergerak pada sumbu y saja

(15)

(a) (b) (c) .

Program ke-2 :

Penerapan “WireSphere” pada GLUT

WireSphere menggunakan fungsi void glutWireSphere(GLdouble radius,GLint slices, GLint stacks); untuk membuat bola berpusat pada asal pemodelan system koordinat.

(16)

(17)

Program ke-3 :

Penerapan “WireCone” pada GLUT

WireCone menggunakan fungsi void glutWireCone(GLdouble base, GLdouble height,GLint slices, GLint stacks); untuk membuat ukuran benda ditentukan dari dasar jari-jari alasnya.

(18)

(19)

Hasil Setelah di-Run :

a. Interaksi dengan keyboard “x”, objek akan bergerak pada sumbu x saja. b. Interaksi dengan keyboard “y”, objek akan bergerak pada sumbu y saja

(a) (b)

Program ke-4

Penerapan “Torus” pada GLUT

Torus menggunakan fungsi void glutWireTorus(GLdouble innerRadius, GLdouble outerRadius,GLint nsides, GLint rings); untuk merender 12 sisi yang berpusat pada asal,dan dengan radius sama dengan kuadrat dari 3.

(20)

(21)

Hasil setelah di-Run :

a. Dengan interaksi keyboard “x”, maka objek akan bergerak pada sumbu x saja b. Dengan interaksi keyboard “y”, maka objek akan bergerak pada sumbu y saja c. Dengan interaksi keyboard “z”, maka objek akan bergerak pada sumbu y saja

(22)

(a) (b)

(c)

Program ke-5

Penerapan “Dose” pada GLUT

Dode menggunakan fungsi void glutWireDodecahedron(void); untuk merenders padat atau wireframe 12-sisi biasa padat. Berpusat di sekitar asal dan dengan radius sama dengan akar kuadrat dari 3.

(23)

(24)

Hasil setelah di-Run

(25)

(c) Program ke-6

Penerapan “TetraHedron” pada GLUT

TetraHedron menggunakan fungsi glutWiredTetrahedronvoid (void); untuk merenders padat atau wireframe 4-sisi biasa padat. Berpusat di sekitar asal dan dengan radius sama dengan akar kuadrat dari 3.

(26)

(27)

(a) (b) (c)

Program ke-7

Penerapan “OctaHedron” pada GLUT

OctaHedron menggunakan fungsi void glutWireOctahedron(void); merenders padat atau wireframe 8-sisi biasa padat. Berpusat di sekitar asal dan dengan radius sebesar 1.0.

(28)

a. Dengan interaksi keyboard “x”, maka objek akan bergerak pada sumbu x saja b. Dengan interaksi keyboard “y”, maka objek akan bergerak pada sumbu y saja

(29)

c. Dengan interaksi keyboard “z”, maka objek akan bergerak pada sumbu y saja

(a) (b)

(c)

Program ke-8

Penerapan “TeaPot” pada GLUT

Teapot menggunakan fungsi void glutWireTeapot(GLdouble size); Untuk merender dengan membuat membuat poci teh.

(30)

(31)

(32)