Grafika Komputer Pertemuan Ke-11
BAB-10 DUNIA 3D Pada materi ini kita akan mempelajari tentang 3D. By: I Gusti Ngurah Suryantara, S.Kom., M.Kom
10.1. PENDAHULUAN Apakah yang membedakan 2D dan 3D ?, jawabannya adalah kedalamannya. Kedalaman didefinisikan sebagai jarak antara viewer terhadap benda yang dia lihat. Pada 2D menggunakan 2 ukuran yaitu panjang dan lebar. Pada 3D menggunakan 3 ukuran yaitu: Panjang, Lebar dan Kedalaman. Dalam 3D ke tiga ukuran tersebut disimbulkan dengan:
Gambar 10.1. Sumbu Cartesian 3D
10.2. SISTEM KOORDINAT Ada dua cara menyatakan sistem koordinat 3D, yaitu aturan tangan kiri dan aturan tangan kanan. Pada dasarnya perbedaan antara dua aturan tersebut adalah kemana sumbu x+ menunjuk. Perhatikan Gambar 10.2. pada Gambar 10.2.a. aturan tangan kiri, Gambar
133
Grafika Komputer Pertemuan Ke-11 10.2.b. aturan tangan kanan, sumbu x+ menunjuk arah kiri. Pada kedua aturan tersebut, sumbu y+ maupun z+ menunjuk arah yang sama.
(a) Aturan tangan kiri
(b) Aturan tangan kiri dan tangan kanan
10.3. REPRESENTASI DATA LOKASI TITIK 3D Bagaimana kita menyimpnan informasi mengenai lokasi sebuah titik 3D menggunakan komputer?. Kita dapat mendefinisikan struktur data seperti pada listing 10.1. Type Tpoint3D = Record X,Y,Z : Real; End;
10.4. MEMBUAT BEDA 3D Ada tiga cara untuk menghasilkan permukaan benda 3D, yaitu: 1. Manual. 2. Surface of revolution. 3. Parametric surface. 134
Grafika Komputer Pertemuan Ke-11 10.4.1. Manual Cara manual dilakukan dengan cara menghitung atau menentukan lokasi verteks oleh pemrograman dan kemudian memasukkan lokasi verteks dan permukaan benda satu persatu. Benda 3D disusun dari sekumpulan kulit (surface). Kulit dapat dibuat dari rangkian polygon. Seperti pada Gambar 10.3.
Gambar 10.3. Kulit penyusun benda 3D Bentuk poligon yang paling tepat digunakan untuk membuat permukaan benda 3D adalah poligon segitiga (triangle). Hal ini dikarenakan poligon segitiga akan selalu berada dalam keadaan planar (datar) sementara poligon dengan verteks yang lebih dari 3 dapat berada dalam kondisi non planar karena salah satu verteks tidak berada dilokasi yang sejajar.
Struktur Data Benda 3D Sebuah benda 3D dapat dibuat dengan menghubungkan sejumlah titik. Kumpulan titik-titik yang saling terhubung tersebut disebut sebagai wireframe atau kerangka. Sedangkan permukaan benda 3D yang disusun dari kumpulan titik-titik disebut sebagai Mesh (permukaan).
135
Grafika Komputer Pertemuan Ke-11
Gambar 10.4. Kubus Tabel 10.1. Verteks penyusun kubus
Tabel 10.2. Permukaan (Face) kubus
Tabel 10.2. menyatakan urutan verteks yang menyusun sebuah permukaan. Untuk setiap permukaan didefinisikan sebagai poligon segitiga (triangle), sebagai contoh permukaan kubus bagian depan didefinisikan melalui dua buah segitiga, yaitu: F1.a dan F1.b yang masing-masing disusun dari verteks 0, verteks 1, dab verteks 3, serta verteks 0, verteks 2, dan verteks 3. 10.4.2. Surface of Revolution (Benda Putar) Surface of Revolution atau disebut juga benda putar merupakan metode memperoleh permukaan benda dengan cara memutar vereks terhadap sebuah sumbu. 136
Grafika Komputer Pertemuan Ke-11
Gambar 10.5. Surface revolution dengan fungsi y = cos x
Gambar 10.6. Contoh suatu objek dengan surface revolution
137
Grafika Komputer Pertemuan Ke-11
Gambar 10.7 Sebuah objek dibuat dengan teknik surface of revolution Contoh:
Gambar 10.8. Objek dibuat dengan teknik Surface of Revolution with(plots): setoptions3d(scaling=constrained); f:= (x) -> sin(x) + 2; f := x -> sin(x) + 2; plot3d([u, f(u)*cos(v), f(u)*sin(v)], u=-Pi..Pi, v=0..2*Pi, axes=normal, orientation=[90,90], color=blue);
138
Grafika Komputer Pertemuan Ke-11
Gambar 10.9. Contoh beberapa objek dibuat dengan teknik Surface of Revolution
10.4.3. Parametric Surface Metode ini merupakan metode memperoleh permukaan benda berdasarkan rumus tertentu. Beberapa benda yang dapat didefinsikan melalui paramteric surface antara lain: 1. Bola 2. Bidang Datar 3. Bezier patch 4. dll 1. Bola Sebuah bola dapat direpresentasikan melalui rumus: x(u,v) = r sin(u)cos(v) y(u,v) = r cos(u) z(u,v) = r sin(u)sin(v)
139
Grafika Komputer Pertemuan Ke-11 dengan u bergerak dari (a)o – (180-a)o sebesar ao dan v bergerak dari 0o – 360o sebesar bo.
Gambar 10.9. Permukaan mesh mempresentasikan bola 2. Bidang Datar (Lane) Sebuah bidang dapat didefinisikan melalui tiga buah vektor, yaitu vektor c, a, dan b seperti pada gambar 10.10. sembarang titik yang ada pada bidang dapat ditentukan berdasarkan penjumlahan vektor, vektor c, ditambah sejumlah (u) vektor a dan ditambah sejumlah (v) vektor a, sehingga kita memperoleh c + au + bv.
Gambar 10.10. Bidang datar Secara parametric dapat dituliskan sebagai rumus p(u,v) = c + au + bv. Rumus berikut dapa dituliskan kedalam bentuk sebagai berikut: X(u,v) = cx + auu + bxv Y(u,v) = cy + ayu + byv Z(u,v) = cz + azu + bzv 140
Grafika Komputer Pertemuan Ke-11
10.5. MODEL TAMPILAN BENDA 3D Dalam menampilkan benda 3D ada beberapa model yaiu: 1. Wireframe 2. Solid 3. Shaded WIREFRAME Wireframe digunakan untuk menampilkan benda 3D dalam bentuk kerangka, atau dalam bentuk jaring-jaring kawat seperti pada Gambar 10.11.
Gambar 10.11. Objek bola dalam tampilan wireframe SOLID Solid menampilkan benda 3D dalam bentuk kulit direndering, namun jaring-jaring kawat pembentuknya masih kelihatan. Seperti pada Gambar 10.12.
Gambar 10.12. Objek bola dalam tampilan solid
141
Grafika Komputer Pertemuan Ke-11 SHADED Shaded menampilkan benda 3D dalam bentuk yang lebih realistis seperti gambar
Gambar 10.13. Objek bola dalam tampilan shaded
Bahan Praktikum Pada praktikum ini kita akan membuat objek 3D yaitu KUBUS. Kubus yang dibuat dapat diputar terhadap sumbu y dan sumbu x. Objek kubus yang dibuat dapat ditampilkan dalam tampilan wireframe dan rendering.
Gambar 10.14. Objek kubus dalam tampilan wireframe
142
Grafika Komputer Pertemuan Ke-11
Rancang Menu Aplikasi Dalam form buat strktur menu sebagai berikut File Rendering Keluar Wireframe Proses Rendering
Setting proprty pada masing-masing objek Nama Objek Property Form1 Name Caption PictureBox1 Name Label1 Name Caption Label2 Name Label3 Name Label4 Name Caption Label5 Name Caption Label6 Name Caption Label7 Name Caption Label8 Name Caption Menu File Caption Name Menu Keluar Caption Name Menu Rendering Caption Name Menu Wire Frame Caption Name Menu Proses Rendering Caption Name
143
Setting Property frmMain Rotasi Kubus 3D BidangGambar Label1 0 Label2 Label3 Label4 X - Axis : Label5 Y - Axis : Label6 Jumlah Kulit : Label7 Jumlah Pertek : lblJumlahPertek 0 &File mnuFile &Keluar mnuExit &Rendering mnuRendrting &Wireframe mnuWireframe Proses &Rendering mnuProsesRendering
Grafika Komputer Pertemuan Ke-11
Programnya Option Explicit 'Untuk mengecat suatu bidang dengan metode FloodFill, kita gunakan fungsi dari gdi32 Private Declare Function FloodFill Lib "gdi32" (ByVal hdc As Long, ByVal X As Long, ByVal Y As Long, ByVal crcolor As Long) As Long 'Tipe data buatan sendiri Private Type Point X As Single Y As Single Z As Single xp As Single yp As Single End Type 'Tipe data buatan sendiri Private Type Triangle p1 As Long p2 As Long p3 As Long DotProduct As Single End Type Dim Dim Dim Dim Dim
JumlahPertek(8) Kulit(12) Offset Vipot DeltaTheta
As As As As As
Point 'Tipe data array, jumlah pertek 8 Triangle 'Tipe data array, banyak kulit 12 Single Single Single
'Fungsi membuat kuliat belakang Function KulitBelakang() Dim i As Long For i = 1 To 12 ComputeCrossProduct i Kulit(i).DotProduct = ComputeDotProduct Next i End Function 'Merendering permukaan kulit dengan metode floodfill Sub KulitBentukSegitiga(p1 As Long, p2 As Long, p3 As Long) Dim X As Single, Y As Single, Z As Single 'find point inside the triangle (centroid) X = (JumlahPertek(p1).X + JumlahPertek(p2).X + JumlahPertek(p3).X) * 0.33333 Y = (JumlahPertek(p1).Y + JumlahPertek(p2).Y + JumlahPertek(p3).Y) * 0.33333 Z = (JumlahPertek(p1).Z + JumlahPertek(p2).Z + JumlahPertek(p3).Z) * 0.33333 'screen x-y is same as object x-y plus Offset X = X + Offset Y = Y + Offset X = X / Screen.TwipsPerPixelX Y = Y / Screen.TwipsPerPixelY FloodFill BidangGambar.hdc, X, Y, vbBlue End Sub
144
Grafika Komputer Pertemuan Ke-11 'Memutar arah sumbu X Sub PutarArahSumbuX(Angle As Single) Dim i As Long, NewY As Single, NewZ As Single For i = 1 To 8 NewY = JumlahPertek(i).Y * Cos(Angle) - JumlahPertek(i).Z * Sin(Angle) NewZ = JumlahPertek(i).Y * Sin(Angle) + JumlahPertek(i).Z * Cos(Angle) JumlahPertek(i).Y = NewY JumlahPertek(i).Z = NewZ Next i End Sub 'Memutar arah sumbu Y Sub PutarArahSumbuY(Angle As Single) Dim i As Long, NewX As Single, NewZ As Single For i = 1 To 8 NewX = JumlahPertek(i).Z * Sin(Angle) + JumlahPertek(i).X * Cos(Angle) NewZ = JumlahPertek(i).Z * Cos(Angle) - JumlahPertek(i).X * Sin(Angle) JumlahPertek(i).X = NewX JumlahPertek(i).Z = NewZ Next i lblJumlahPertek.Caption = i - 1 End Sub Sub ComputeCrossProduct(i As Long) Dim x1 As Single, y1 As Single, z1 As Single, x2 As Single, y2 As Single, z2 As Single 'cross products done on position x1 = JumlahPertek(Kulit(i).p2).X y1 = JumlahPertek(Kulit(i).p2).Y z1 = JumlahPertek(Kulit(i).p2).Z
vectors, not displacement vectors - JumlahPertek(Kulit(i).p1).X - JumlahPertek(Kulit(i).p1).Y - JumlahPertek(Kulit(i).p1).Z
x2 = JumlahPertek(Kulit(i).p3).X - JumlahPertek(Kulit(i).p1).X y2 = JumlahPertek(Kulit(i).p3).Y - JumlahPertek(Kulit(i).p1).Y z2 = JumlahPertek(Kulit(i).p3).Z - JumlahPertek(Kulit(i).p1).Z 'T(i) is the triangle 'put resulting vector in JumlahPertek(0).X = y1 * JumlahPertek(0).Y = x2 * JumlahPertek(0).Z = x1 * End Sub
P(0) z2 - y2 * z1 z1 - x1 * z2 y2 - x2 * y1
'Kalkulasi titik Function ComputeDotProduct() ComputeDotProduct = 0 * JumlahPertek(0).X + 0 * JumlahPertek(0).Y + Vipot * JumlahPertek(0).Z End Function '-------------'Obejk KUBUS '-------------Sub Kubus() Dim i As Long, Draw As Boolean BidangGambar.Cls If mnuProsesRendering.Checked = True Then Draw = True For i = 1 To 12 If (Draw = True And Kulit(i).DotProduct > 0) Or Draw = False Then MenggambarGaris Kulit(i).p1, Kulit(i).p2, vbBlue MenggambarGaris Kulit(i).p2, Kulit(i).p3, vbBlue MenggambarGaris Kulit(i).p3, Kulit(i).p1, vbBlue
145
Grafika Komputer Pertemuan Ke-11 'Apakah melakukan rendering If mnuProsesRendering.Checked = True Then KulitBentukSegitiga Kulit(i).p1, Kulit(i).p2, Kulit(i).p3 End If End If Label1.Caption = i Next i End Sub 'Menggambar Garis Sub MenggambarGaris(p1 As Long, p2 As Long, iColor As Long) Dim x1 As Single, y1 As Single, x2 As Single, y2 As Single 'screen x-y is same as object x-y plus Offset x1 = JumlahPertek(p1).X + Offset y1 = JumlahPertek(p1).Y + Offset x2 = JumlahPertek(p2).X + Offset y2 = JumlahPertek(p2).Y + Offset BidangGambar.Line (x1, y1)-(x2, y2), iColor End Sub Sub Inisialisasi(L As Single) DeltaTheta = 0.02 Vipot = 5000 'points / Perteks JumlahPertek(1).X JumlahPertek(2).X JumlahPertek(3).X JumlahPertek(4).X JumlahPertek(5).X JumlahPertek(6).X JumlahPertek(7).X JumlahPertek(8).X
= = = = = = = =
-L: JumlahPertek(1).Y = -L: JumlahPertek(1).Z = -L -L: JumlahPertek(2).Y = L: JumlahPertek(2).Z = -L L: JumlahPertek(3).Y = L: JumlahPertek(3).Z = -L L: JumlahPertek(4).Y = -L: JumlahPertek(4).Z = -L -L: JumlahPertek(5).Y = -L: JumlahPertek(5).Z = L -L: JumlahPertek(6).Y = L: JumlahPertek(6).Z = L L: JumlahPertek(7).Y = L: JumlahPertek(7).Z = L L: JumlahPertek(8).Y = -L: JumlahPertek(8).Z = L
'triangles /Kulit Kulit(1).p1 = 1: Kulit(1).p2 = Kulit(2).p1 = 1: Kulit(2).p2 = Kulit(3).p1 = 5: Kulit(3).p2 = Kulit(4).p1 = 5: Kulit(4).p2 = Kulit(5).p1 = 8: Kulit(5).p2 = Kulit(6).p1 = 8: Kulit(6).p2 = Kulit(7).p1 = 4: Kulit(7).p2 = Kulit(8).p1 = 4: Kulit(8).p2 = Kulit(9).p1 = 3: Kulit(9).p2 = Kulit(10).p1 = 3: Kulit(10).p2 Kulit(11).p1 = 4: Kulit(11).p2 Kulit(12).p1 = 4: Kulit(12).p2 End Sub
4: Kulit(1).p3 = 3 3: Kulit(2).p3 = 2 1: Kulit(3).p3 = 2 2: Kulit(4).p3 = 6 5: Kulit(5).p3 = 6 6: Kulit(6).p3 = 7 8: Kulit(7).p3 = 7 7: Kulit(8).p3 = 3 7: Kulit(9).p3 = 6 = 6: Kulit(10).p3 = 2 = 1: Kulit(11).p3 = 5 = 5: Kulit(12).p3 = 8
'Menrender kulit Sub FillTriangle(p1 As Long, p2 As Long, p3 As Long) Dim DeltaX As Single, DeltaY As Single, i As Long Dim x1 As Single, y1 As Single, x2 As Single, y2 As Single x1 = JumlahPertek(p1).X + Offset y1 = JumlahPertek(p1).Y + Offset DeltaX = (JumlahPertek(p3).X - JumlahPertek(p2).X) / 200 DeltaY = (JumlahPertek(p3).Y - JumlahPertek(p2).Y) / 200 x2 = JumlahPertek(p2).X + Offset y2 = JumlahPertek(p2).Y + Offset For i = 1 To 200
146
Grafika Komputer Pertemuan Ke-11 x2 = x2 + DeltaX y2 = y2 + DeltaY BidangGambar.Line (x1, y1)-(x2, y2), vbRed Next i End Sub Sub PipeLine() PutarArahSumbuX DeltaTheta PutarArahSumbuY DeltaTheta KulitBelakang Kubus End Sub Private Sub Form_Activate() Kubus End Sub Private Sub Form_Resize() Inisialisasi BidangGambar.Width * 0.1 Offset = BidangGambar.Width * 0.5 End Sub Private Sub mnuExit_Click() End End Sub Private Sub BidangGambar_MouseMove(Button As Integer, Shift As Single, Y As Single) Dim DeltaY As Single, DeltaX As Single Static X_Lama As Single, Y_Lama As Single DeltaX = X_Lama - X DeltaY = Y_Lama - Y If Abs(DeltaX) > Abs(DeltaY) Then If DeltaX > 0 Then PutarArahSumbuY DeltaTheta * 5 Else PutarArahSumbuY -DeltaTheta * 5 End If Else If DeltaY > 0 Then PutarArahSumbuX -DeltaTheta * 5 Else PutarArahSumbuX DeltaTheta * 5 End If End If X_Lama = X Y_Lama = Y Label2.Caption = X_Lama Label3.Caption = Y_Lama 'rest of pipeline If mnuProsesRendering.Checked = True Then KulitBelakang Kubus End Sub Private Sub mnuProsesRendering_Click() mnuProsesRendering.Checked = True mnuWireframe.Checked = False End Sub Private Sub mnuWireframe_Click()
147
Integer, X As
Grafika Komputer Pertemuan Ke-11 mnuProsesRendering.Checked = False mnuWireframe.Checked = True End Sub
148
