Pembuatan Editor Pewarnaan Obyek 3DKartika Gunadi1) Liliana1), Steven Christiansen Megaprawira 3)

1) Dosen tetap Fakultas Teknologi Industri, jurusan Teknik Informatika, Universitas Kristen Petra2) Alumni Fakultas Teknologi Industri, jurusan Teknik Informatika, Universitas Kristen Petra

Jl. Siwalankerto 121-131 Surabayae-mail : kgunadi@peter.petra.ac.id , lilian@peter.petra.ac.id , m 26401121@john.petra.ac.id

ABSTRAK

Perkembangan dunia teknologi di bidang komputer grafis tiga dimensi yang sangat pesat, memicu perkembangan teknologi komputer untuk dapat menampilkan obyek-obyek tiga dimensi dengan kecepatan tinggi. Obyek tiga dimensi yang sering digunakan adalah mesh object. Mesh adalah obyek kompleks yang tersusun atas beberapa face yang berbentuk segitiga. Namun masih terdapat kesulitan dalam pemodelan obyek tiga dimensi ini, yaitu saat memberikan warna. Setiap face hanya memiliki satu warna saja. Oleh karena itu dalam penelitian ini dikembangkan perangkat lunak yang bisa mewarnai obyek tiga dimensi tanpa dibatasi kesamaan warna dalam satu face.

Konsep pewarnaan dari perangkat lunak ini seperti menyemprotkan cat pada patung. Cara pewarnaannya, pertama-tama dibuat sebuah texture yang dapat mewakili pewarnaan pada face dari obyek tersebut. Kemudian mendeteksi titik yang ingin diwarnai lalu menyimpan pewarnaan itu ke dalam texture. Setelah selesai, data texture tersebut disimpan dalam bentuk file obyek tiga dimensi dan file bitmap untuk texture-nya dan dihubungkan ke file obyek mesh yang diwarnai.

Pengujian terhadap perangkat lunak yang dikembangkan ini menunjukkan bahwa perangkat lunak bisa mewarnai pada koordinat titik yang ingin diwarnai dengan tepat. Kesimpulan dari pengujian adalah semakin besar ukuran texture, maka semakin detail pewarnaan yang bisa dilakukan dan semakin sedikit face yang dimiliki, maka semakin detail pula pewarnaan yang bisa dilakukan.

Kata kunci :Mesh, Face, Texture, Pewarnaan, Obyek tiga dimensi, Bitmap.

1. Latar BelakangObyek 3D selain memiliki bentuk-bentuk

geometri, juga memiliki texture. Dalam komputer grafis, texture adalah gambar yang ditempelkan pada permukaan obyek 3D[1]. Dengan menggunakan texture, maka suatu kubus dapat menjadi dadu jika diberi texture yang berupa gambar angka-angka pada permukaan dadu. Jikalau texture yang diberikan berupa gambar kayu, maka kubus itu nampak seperti kotak kayu.

Cara yang dipakai untuk mewarnai yang dipakai oleh program-program aplikasi lain adalah dengan membuat suatu gambar pada program aplikasi lain yang khusus berfungsi sebagai pengolah gambar, kemudian gambar ini akan dijadikan texture yang ditempelkan pada permukaaan obyek tersebut. Hal ini menyebabkan pewarnaan diberikan dengan cara mengira-ngira bagian mana dari texture yang harus diberi warna untuk dapat memberikan hasil sesuai dengan yang diinginkan baru kemudian ditempelkan pada obyek 3D untuk melihat hasilnya seperti yang diinginkan atau tidak. Dengan latar belakang ini penulis berusaha membuat sebuah perangkat lunak untuk dapat mewarnai obyek 3D sambil dapat melihat hasil dari pewarnaan tersebut.

2. TextureDalam komputer grafis, texture adalah

gambar yang ditempelkan pada permukaan obyek 3D. Sedangkan satu texture yang sama dapat dipakai lebih dari satu kali untuk bidang yang berbeda-beda.

Suatu texture mempunyai nilai u dan v yang dimulai dari nol sampai dengan satu, dimana u adalah bagian yang horisontal sedangkan v adalah bagian yang vertikal. Gambaran texture dapat dilihat pada gambar 1 sedangkan penempelannya ke suatu obyek dapat dilihat pada gambar 2

Gambar1. Koordinat u, v pada Texture

Dengan berdasarkan pada koordinat tersebut, maka suatu vertex tidak hanya memiliki koordinat di ruang 3D saja, tetapi juga mempunyai koordinat dari texture sebagai suatu informasi mengenai bagaimana cara menggambar texture pada bidang tersebut.

Gambar 2. Penggambaran Texture pada suatu Bidang

Semua texture yang dimiliki oleh suatu obyek 3D akan digabungkan menjadi satu buah texture saja dan kemudian disimpan ke dalam suatu file bitmap. Hal ini disebabkan karena satu buah texture bisa digunakan oleh lebih dari sebuah bidang, sehinggga jikalau salah satu dari bidang yang memiliki texture yang sama tersebut dirubah texture-nya, maka bidang yang lainnya akan mengalami perubahan karena mengacu pada satu texture yang sama.

Proses penggabungan texture ini dilakukan dengan cara menggambar ulang seluruh bidang yang ada beserta texture yang dimilikinya. Seluruh bidang tersebut harus dirotasikan terlebih dahulu hingga sejajar antara satu dengan lainnya, kemudian seluruh bidang tersebut dihimpitkan pada sumbu x, y. Setelah itu baru dilakukan proyeksi, dan hasil dari proyeksi tersebut akan disimpan menjadi sebuah texture baru yang akan menggantikan seluruh texture yang ada sebelumnya. Dengan cara ini, semua bidang akan digambar ulang meskipun memiliki texture yang sama.

3. Mendeteksi Koordinat MouseBagian ini dibagi menjadi dua bagian

utama, yaitu mengetahui face mana yang ditunjuk dan setelah itu mendapatkan koordinat mouse pada face yang ditunjuk tersebut. Untuk mencari face yang ditunjuk, perlu dilakukan proses perhitungan proyeksinya. Berikut akan dijelaskan lebih lanjut masing-masing bagian.

Proses Perhitungan Perspective

Fungsi dari bagian ini adalah untuk mengubah koordinat 3D menjadi suatu koordinat 3D baru yang sudah dipengaruhi oleh nilai perspektif sehingga semakin jauh suatu obyek,

maka obyek tersebut akan semakin kecil. Caranya adalah dengan membuat suatu matriks kemudian mengalikannya dengan matriks koordinat vertex yang diperoleh dari proses perhitungan camera2.

Informasi-informasi yang diperlukan untuk membentuk matriks tersebut adalah sebagai berikut:1. Field of View

Berisi informasi mengenai besar dari sudut pandang dari camera, dimana hanya obyek yang ada dalam jangkauan sudut pandang inilah yang akan diproyeksikan.

2. Besar Aspec RatioBerisi informasi besar perbandingan antara lebar dan tinggi dari hasil proyeksi.

3. Kedalaman terdekat (ZNear) dan kedalaman terjauh (ZFar)Berisi nilai dari kedalaman terdekat dan kedalaman terjauh yang akan diproyeksikan, semua yang ada diluar area tersebut tidak akan diproyeksikan.

Kemudian informasi-informasi tersebut akan disimpan dalam bentuk sebagai berikut. A = Aspec Ratio x cotangen(Field of View / 2) B = cotangen(Field of View / 2) C = (Zfar + Znear) / (Znear - Zfar) D = 2 (Zfar Znear) / (Znear - Zfar)

Kemudian dari elemen A, B, C, dan D dibentuk matriks:

Berikutnya, matriks ini akan dikalikan dengan koordinat dari vertex, hingga diperoleh koordinat vertex yang baru.

Mencari Face yang DitunjukUntuk mengetahui face mana yang

ditunjuk, dapat dilakukan dengan cara memproyeksikan masing-masing face dengan cara proyeksi yang dijelaskan sebelumnya. Masing-masing face terdiri atas 3 vertex, maka masing-masing vertex ini akan diproyeksikan sehingga diperoleh 3 titik koordinat untuk masing-masing face. Dengan berdasarkan pada informasi ini maka

akan dicari koordinat mouse tersebut berada pada face yang mana.

Mencari Koordinat yang Ditunjuk pada FaceSetelah mengetahui face mana yang

ditunjuk oleh mouse, maka pencarian sudah semakin dipersempit lagi. Salah satu kelebihan dari metode proyeksi yang dipakai ini adalah hasil dari proyeksinya tidak hanya menghasilkan koordinat x dan y saja, melainkan juga z. Hanya hasil proyeksi yang memiliki nilai z antara nol sampai dengan satu saja yang akan digambar karena berada dalam jangkauan pandang yang sudah ditentukan sebelumnya oleh Znear dan Zfar pada perhitungan view.

Dengan informasi dari koordinat mouse yang hanya berupa x dan y saja akan sulit untuk mendapatkan koordinat yang ditunjuk pada face, tetapi dengan adanya Znear dan Zfar tersebut, maka hal ini dimungkinkan. Cara yang digunakan adalah dengan membalik proses proyeksi (unproject) dari 2D menjadi 3D dengan mengikutsertakan nilai Z = 0 dan Z = 1 sehingga diperoleh koordinat dua buah vertex. Untuk lebih jelas, dapat dilihat pada gambar 3. Koordinat vertex yang pertama didapatkan dari x, y mouse dengan Z = 0, sedangkan koordinat vertex yang kedua didapatkan dari x, y mouse dengan Z = 1.

Gambar 3. Titik yang Dicari Koordinat 3 Dimensinya

Berikutnya, dari dua titik ini akan dibuat suatu vektor. Sedangkan untuk bidang yang ditunjuk oleh mouse, akan dicari persamaan dari bidang tersebut dengan mencari normal vektor dari bidang tersebut, sehingga dibentuk suatu persamaan 1:

AX + BY + CZ + D = 0 (1)

Dengan informasi yang dimiliki oleh vektor dan persamaan bidang ini, maka dapat dicari titik perpotongan dari vektor dengan bidang tersebut. Cara untuk mencari titik perpotongan ini adalah menggunakan persamaan:AX1+BY1+CZ1+D+t(AX2 + BY2 + CZ2)=0

A 0 0 00 B 0 00 0 C D0 0 -1 0

XI

YI

ZI

1I

A 0 0 00 B 0 00 0 C D0 0 -1 0

XII

YII

ZII

1II

=

A,B,C,D = didapatkan dari persamaan bidangX1,Y1,Z1 = hasil unproject dari koordinat titik

terdekat (Z = 0)X2,Y2,Z2 = panjang dari vektort = selang dari panjang vektor saat terjadi

perpotonganDari persamaan tersebut, elemen yang

belum diketahui adalah elemen t. Langkah pertama adalah mencari besar elemen t terlebih dahulu. Setelah besar elemen t diketahui, maka untuk menghasilkan koordinat dari perpotongan itu hanya tinggal menambahkan hasil unproject dari koordinat titik terdekat (X1, Y1, Z1) dengan hasil kali antara elemen t dengan panjang dari vektor (t X2, t Y2, t Z2).

4. Pengujian

Pengujian dilakukan terhadap 3 jenis file obyek mesh, yaitu .3DS,.obj dan .ASE. Program dibuat dengan menggunakan bahasa pemrograman Borland Delphi 7.0 dan dengan menggunakan library OpenGl. Spesifikasi komputer yang digunakan P4 2.4 Mb , memory 256Mb. Selain itu juga dilakukan dengan menggunakan fasilitas pewarnaan seperti brush dan pencil. Cara pemberian warna dapat dilihat pada gambar 3.

Gambar 3. Pewarnaan dengan Menggunakan Pencil

Pengujian Menggunakan Texture dengan Ukuran 256 x 256

Pengujian dilakukan dengan menggunakan file obyek “Limas.ASE”, “Kotak.ASE“, “Bola.ASE”, “Teapot.ASE”. Jumlah dari vertex dan face yang dimiliki oleh obyek-obyek tersebut dapat dilihat pada tabel 1 dan gambarnya dapat dilihat pada gambar 4.

Tabel 1. Data Vertex dan Face Obyek INama File Jumlah

VertexJumlah Face

Limas.ASE 4 4

Kotak.ASE 8 12Bola.ASE 191 378Teapot.ASE 302 576

(a) (b)

(c) (d)

Gambar 4. Obyek I yang Digunakan dalam Pengujian,(a) “Limas”, (b) “Kotak”, (c) “Bola”,

(d) “Teapot”.

Pada pengujian dengan menggunakan texture yang berukuran 256 x 256 ini, ukuran file untuk menyimpan texture sebesar 196664 byte dan proses penggambaran obyek tersebut dapat dilakukan dengan cepat karena kecilnya ukuran dari texture. Tetapi pewarnaan yang dilakukan kurang detail (tidak bisa membuat gambar dengan ukuran yang kecil), karena jika melakukan pewarnaan dengan menggunakan brush dengan ukuran terkecil (satu pixel) akan tergambar sebesar satu pixel pada texture tersebut. Sehingga satu kali pewarnaan yang dengan brush ukuran terkecil sudah menempati 1/65536 bagian dari keseluruhan texture. Namun kelemahan ini baru dapat dilihat pada obyek yang memiliki jumlah face yang banyak (pada Gambar 6), sedangkan untuk obyek yang memiliki jumlah face sedikit, kelemahan ini tidak begitu nampak seperti pada contoh Gambar 5.

(a) (b)

Gambar 5. Pengujian pada Obyek I yang Memiliki Jumlah Face Sedikit dengan Texture Berukuran 256,

(a) “Limas”, (b) “Kotak”

(a) (b)Gambar 6. Pengujian pada Obyek I yang Memiliki Jumlah Face Banyak dengan Texture Berukuran

256, (a) “Bola”, (b) “Teapot”

Pengujian Menggunakan Texture dengan Ukuran 512 x 512

Pada pengujian ini, texture yang digunakan memiliki ukuran 512 x 512, sedangkan file obyek yang digunakan adalah sama dengan file obyek yang digunakan pada pengujian 5.3. Besar dari ukuran file texture pada pengujian ini memang lebih besar daripada pengujian sebelumnya. yaitu 786488 byte, namun hasil pewarnaan dua kali lebih detail daripada yang sebelumnya dan proses penggambaran juga masih cepat. Hal ini menyebabkan penggunaan texture dengan ukuran 512 x 512 ini menjadi ukuran yang standart untuk kebanyakan obyek. Hasil dari pengujian terhadap obyek yang memiliki sedikit face dapat dilihat pada Gambar 7. sedangkan untuk obyek yang memiliki banyak face terdapat pada Gambar 8.

(a) (b)Gambar 7. Pengujian pada Obyek I yang Memiliki

Jumlah Face Sedikit dengan Texture Berukuran 512, (a) “Limas”, (b) “Kotak”

(a) (b)Gambar 8. Pengujian pada Obyek I yang Memiliki Jumlah Face Banyak dengan Texture Berukuran

512, (a) “Bola”, (b) “Teapot”

Pengujian Menggunakan Texture dengan Ukuran 1024 x 1024

Pengujian ini dilakukan dengan menggunakan file obyek yang berbeda dengan file obyek yang dipakai pada pengujian-pengujian yang sebelumnya, karena ukuran dari texture yang dipakai pada pengujian ini besar. Adapun file obyek yang dipakai adalah “Ship.ASE”, “Pot.ASE”, “Gear.ASE”, “Fish.ASE”. Jumlah dari vertex dan face yang dimiliki oleh obyek-obyek tersebut dapat dilihat pada tabel 2.

Tabel 2. Data Vertex dan Face Obyek IINama File Jumlah

VertexJumlah Face

Ship.ASE 120 236Pot.ASE 500 980Gear.ASE 672 1226Fish.ASE 677 1340

(a) (b)

(c) (d)

Gambar 5.23. Obyek II yang Digunakan dalam Pengujian,

(a) “Ship”, (b) “Pot”, (c) “Gear”, (d) “Fish”.

Hasil pewarnaan jika menggunakan texture dengan ukuran 1024 x 1024 jelas lebih detail jika dibandingkan dengan pengujian-pengujian yang sebelumnya. Namun kekurangannya selain ukuran file yang semakin besar, adalah proses pewarnaan sudah mulai lambat. Sedangkan untuk perbedaan jumlah dari face, sama seperti pada pengujian yang sebelumnya, yaitu semakin banyak jumlah face maka tingkat detail dari pewarnaan juga semakin berkurang. Hal ini dapat dilihat pada Gambar 12.

Gambar 9. Pengujian pada Obyek Ship

Gambar 10. Pengujian pada Obyek Pot

Gambar 11. Pengujian pada Obyek Gear

Gambar 12. Pengujian pada Obyek Fish

5. Kesimpulan

Berdasarkan hasil pengujian yang telah dilakukan, maka dapat ditarik beberapa kesimpulan, yaitu:

1. File obyek 3D yang sudah disimpan dengan menggunakan aplikasi ini dapat dibaca lagi oleh aplikasi yang dipakai untuk membuat obyek tiga dimensi tersebut dengan hasil yang sama seperti pada saat melakukan pewarnaan.

2. Dengan semakin besarnya ukuran texture yang dipilih, maka semakin detail pula pewarnaan yang dapat dilakukan. Hal ini disebabkan karena dengan semakin besarnya texture maka semakin banyak pula pixel dari texture yang dapat di-mapping-kan.

3. Perangkat lunak yang dikembangkan dalam penelitian ini tidak bisa membaca file obyek 3D yang terlalu kompleks, yaitu obyek 3D yang memiliki lebih dari 5000 face. Hal ini dikarenakan keterbatasan memori.

Daftar Pustaka

[1] Glassner, Andrew S. Graphics Gems. USA : Academic Press, Inc 1990

[2] Kirk, David. Graphics Gems II. USA : Academic Press, Inc 1992

[3] Hearn, Donald and Baker, M. Pauline. Computer Graphics. USA : Prentice-Hall 1986

[4] Harrington, Steven. Computer Graphics 2nd

Edition. New York : McGraw-Hill, Inc 1987

[5] Anton, Howard. Elementary Linear Algebra 6nd

Edition. USA: Anton Textbooks, Inc 1991

[6] Angel, Edward. OpenGL a primer 2nd Edition. Singapore: Addison-Wesley 2002

[7] Angel, Edward. Interactive Computer Graphics : A Top Down Approach With OpenGL 2nd Edition. USA: Addison-Wesley 2000

[8] F.S. Hill, JR. Computer Graphics using OpenGL 2nd Edition. USA: Prentice-Hall 2001

[9] Cantu, Marco. Mastering Delphi 7. USA : SYBEX, Inc 2003

[10] Embley, David W. Object-Oriented System Analysis. New Jersey: Prentice-Hall, Inc 1992

[11] Blaha, Michael and Rumbaugh, James. Object-Oriented Modeling and Design with UML 2nd Edition. New Jersey: Upper Saddle River, 2005