Grafika Komputer Pertemuan Ke-11. Pada materi ini kita akan mempelajari tentang 3D. By: I Gusti Ngurah Suryantara, S.Kom., M.Kom

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

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.

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).

Gambar 10.4. Kubus

Tabel 10.1. Verteks penyusun

Tabel 10.2. Permukaan (Face) kubus

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

Gambar 10.5. Surface revolution dengan fungsi y = cos x

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);

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)

dengan u bergerak dari (a)

o

– (180-a)

o

sebesar ao dan v bergerak dari 0

o

– 360

o

sebesar b

o

.

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

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.

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.

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

Setting Property

Form1

Name

Caption

frmMain

Rotasi Kubus 3D

PictureBox1

Name

BidangGambar

Label1

Name

Caption

Label1

0

Label2

Name

Label2

Label3

Name

Label3

Label4

Name

Caption

Label4

X - Axis :

Label5

Name

Caption

Label5

Y - Axis :

Label6

Name

Caption

Label6

Jumlah Kulit :

Label7

Name

Caption

Label7

Jumlah Pertek :

Label8

Name

Caption

lblJumlahPertek

0

Menu File

Caption

Name

&File

mnuFile

Menu Keluar

Caption

Name

&Keluar

mnuExit

Menu Rendering

Caption

Name

&Rendering

mnuRendrting

Menu Wire Frame

Caption

Name

&Wireframe

mnuWireframe

Menu Proses Rendering

Caption

Name

Proses &Rendering

mnuProsesRendering

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 JumlahPertek(8) As Point 'Tipe data array, jumlah pertek 8 Dim Kulit(12) As Triangle 'Tipe data array, banyak kulit 12 Dim Offset As Single

Dim Vipot As Single Dim DeltaTheta As 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

'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 vectors, not displacement vectors x1 = JumlahPertek(Kulit(i).p2).X - JumlahPertek(Kulit(i).p1).X y1 = JumlahPertek(Kulit(i).p2).Y - JumlahPertek(Kulit(i).p1).Y z1 = JumlahPertek(Kulit(i).p2).Z - 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 P(0)

JumlahPertek(0).X = y1 * z2 - y2 * z1 JumlahPertek(0).Y = x2 * z1 - x1 * z2 JumlahPertek(0).Z = x1 * y2 - x2 * y1 End Sub '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

'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 = -L: JumlahPertek(1).Y = -L: JumlahPertek(1).Z = -L JumlahPertek(2).X = -L: JumlahPertek(2).Y = L: JumlahPertek(2).Z = -L JumlahPertek(3).X = L: JumlahPertek(3).Y = L: JumlahPertek(3).Z = -L JumlahPertek(4).X = L: JumlahPertek(4).Y = -L: JumlahPertek(4).Z = -L JumlahPertek(5).X = -L: JumlahPertek(5).Y = -L: JumlahPertek(5).Z = L JumlahPertek(6).X = -L: JumlahPertek(6).Y = L: JumlahPertek(6).Z = L JumlahPertek(7).X = L: JumlahPertek(7).Y = L: JumlahPertek(7).Z = L JumlahPertek(8).X = L: JumlahPertek(8).Y = -L: JumlahPertek(8).Z = L

'triangles /Kulit

Kulit(1).p1 = 1: Kulit(1).p2 = 4: Kulit(1).p3 = 3 Kulit(2).p1 = 1: Kulit(2).p2 = 3: Kulit(2).p3 = 2 Kulit(3).p1 = 5: Kulit(3).p2 = 1: Kulit(3).p3 = 2 Kulit(4).p1 = 5: Kulit(4).p2 = 2: Kulit(4).p3 = 6 Kulit(5).p1 = 8: Kulit(5).p2 = 5: Kulit(5).p3 = 6 Kulit(6).p1 = 8: Kulit(6).p2 = 6: Kulit(6).p3 = 7 Kulit(7).p1 = 4: Kulit(7).p2 = 8: Kulit(7).p3 = 7 Kulit(8).p1 = 4: Kulit(8).p2 = 7: Kulit(8).p3 = 3 Kulit(9).p1 = 3: Kulit(9).p2 = 7: Kulit(9).p3 = 6 Kulit(10).p1 = 3: Kulit(10).p2 = 6: Kulit(10).p3 = 2 Kulit(11).p1 = 4: Kulit(11).p2 = 1: Kulit(11).p3 = 5 Kulit(12).p1 = 4: Kulit(12).p2 = 5: Kulit(12).p3 = 8 End Sub

'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

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 Integer, X 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

mnuProsesRendering.Checked = False mnuWireframe.Checked = True