lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2891/5/bab iii.pdf · untuk...
TRANSCRIPT
Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP
Hak cipta dan penggunaan kembali:
Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.
Copyright and reuse:
This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.
BAB III
METODOLOGI
3.1. Gambaran Umum
Tugas akhir ini akan menghasilkan lima buah set puzzle dan kartu jajanan pasar
Indonesia yang dapat divisualisasikan dalam bentuk 3D pada sebuah aplikasi AR.
Setiap kepingan puzzle berisi gambar bahan dari jajanan pasar, dan ketika seluruh
kepingan puzzle disatukan, akan menghasilkan visualisasi 3D dari jajanan pasar
sesuai dengan bahan pembuatnya.
3.1.1. Gameplay
Terdapat 5 jenis kartu kue yang terdiri dari klepon, kue apem, kue mangkok,
nagasari, dan kue bugis. Setiap kartu kue memiliki warna yang berbeda, dan
masing-masing puzzle bahan-bahan kue harus tersusun sesuai dengan warna yang
ada pada kartu jajanan puzzle, sehingga dapat menghasilkan visualisasi 3D dalam
wujud AR dari jajanan pasar sesuai dengan bahan bakunya. Berikut adalah daftar
jajanan pasar dengan bahan-bahan yang terdapat dalam setiap kepingan puzzle:
Tabel 3. 1. Tabel Konten Puzzle
No. Jajanan Pasar Bahan-bahan
1 Klepon - Gula Merah
- Daun Pandan
- Tepung Ketan
- Air
- Daun Suji
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
- Kelapa
2 Kue Apem - Tepung Beras
- Tape Singkong
- Ragi
- Telur
- Santan
- Gula Pasir
3 Kue Mangkok - Pewarna Makanan
- Gula Pasir
- Air
- Ragi
- Tepung Beras
- Tape Singkong
- Tepung Terigu
4 Nagasari - Pisang
- Gula Pasir
- Santan
- Tepung Beras
- Daun Pisang
- Daun Pandan
5 Kue Bugis - Santan
- Kelapa
- Garam
- Daun Pisang
- Ketan Hitam
- Gula Merah
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
3.1.2. Posisi Penulis
Dalam tugas akhir ini, penulis berperan sebagai modeler, yang bertugas untuk
membuat visualisasi 3D dari rancangan visual yang sudah tersedia, sehingga dapat
diaplikasikan ke dalam AR. Proses visualisasi 3D ini terdiri dari proses modeling
dan texturing dari bahan-bahan dan jajanan pasar.
3.2. Tahapan Kerja
Tahapan kerja berisi tahapan-tahapan yang dikerjakan oleh penulis pada saat
pengumpulan data.
Gambar 3. 1. Skema Tahapan Kerja
Praproduksi Produksi Pascaproduksi
Konsep Visual &
Desain Layout
Puzzle
Research
Texturing
Modeling
Animation
VFx
Augmented Reality
Exporting Assets
+ marker
Final APK &
Printed Puzzle
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
3.2.1. Praproduksi
Dalam tahap praproduksi dimulai dengan membuat konsep dari hasil jadi jajanan-
jajanan pasar dan bahan-bahan pembuat jajanan pasar, berdasarkan referensi dari
gambar asli.
3.2.1.1. Konsep Visual
Konsep visual dari hasil jadi jajanan pasar adalah jenis visual stylized digital
painting sederhana yang imajinatif. Warna dan bentuk dari jajanan pasar
dan bahan-bahan menyesuaikan dengan bentuk dan warna asli dari jajanan
pasar dan bahan-bahannya. Pada jajanan pasar, setiap kue memiliki mata
dan mulut, yang bertujuan untuk menunjukkan sisi imajinatif dan membuat
karakter kue menjadi lebih hidup, dikenali, dan diingat oleh anak-anak.
Gambar 3. 2. Referensi Jajanan Pasar
Gambar 3. 3. Konsep Hasil Jadi Jajanan Pasar
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 4. Konsep Awal Bahan-bahan Pembuat Jajanan Pasar
3.2.1.2. Referensi
Dalam mengumpulkan data untuk tugas akhir ini, penulis menggunakan
metode studi existing, dengan mengumpulkan beberapa referensi kartu AR
untuk pembelajaran anak-anak. Referensi kartu AR tersebut menggunakan
model non-realis, yang disertai dengan animasi sederhana. Penggunaan low
poly modeling untuk menyesuaikan dengan platform yang digunakan yaitu
smartphone Android dan iOS, sehingga visualisasi 3D dalam AR dapat
dinikmati secara maksimal tanpa terbebani dari segi visualnya.
Gambar 3. 5. Referensi Kartu AR
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 6. Kartu Transportasi ABC
Referensi yang pertama adalah kartu AR ABC Transport dari studio
kuasar yang berguna untuk mempelajari jenis-jenis transportasi. Dalam
kartu ini, penggunaan style toon shading tampak dalam visualisasi model
3D kendaraan, yang dapat semakin menunjukkan bahwa set kartu ini
ditujukan untuk anak-anak. Penggunaan visual yang imajinatif juga tampak
dalam tampilan visual masing-masing model, yang tampak pada adanya
mata dan mulut pada setiap kendaraan.
Selain itu, tampilan dalam aplikasi ABC Transport dilengkapi
dengan gambaran dari kemudi kendaraan yang dapat digerakkan sesuai
dengan keinginan penggunanya. Pada aplikasi ini, setiap model 3D yang
muncul dari kartu memiliki suara sesuai dengan jenis kendaraannya.
Penggunaan User Interface seperti pada kartu AR ABC Transport ini
menarik untuk anak-anak, karena mereka dapat memahami bagaimana
wujud, gerakan, dan suara dari kendaraan.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 7. Wujud AR Kartu Transportasi ABC
Referensi selanjutnya adalah kartu AR Animal 4D+ dari Octagon
Studio, yang bertema binatang. Pada kartu ini tampak style yang lebih realis
namun tetap menggunakan model low poly. Kesan realis tersebut tampak
pada penggunaan tekstur yang lebih detail, sehingga sesuai seperti binatang
asli.
Gambar 3. 8. Kartu Animal 4D+
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 9. Wujud kartu AR Animal 4D+
Kartu ini juga disertai dengan adanya interaksi antara satu kartu
dengan kartu yang lainnya. Seperti pada contoh ketika kartu bergambar
bunga didekatkan dengan kartu bergambar lebah, maka akan muncul sebuah
animasi AR yang baru dari lebah yang sedang menghisap madu dari bunga.
Gambar 3. 10. Interaksi Antar Kartu AR Animal 4D+
Referensi yang terakhir adalah kartu AR Octaland 4D+ dari Octagon
Studio, yang bertema pekerjaan. Pada kartu ini tampak style visual yang
realis namun tetap tampak seperti kartun dan menggunakan model low poly.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 11. Kartu Octaland 4D+
Gambar 3. 12. Wujud AR Kartu Octaland 4D+
Berdasarkan riset studi existing didapatkan pula media lain berupa
buku cerita dongeng mengenai kuliner nusantara. Buku ini bertujuan untuk
memperkenalkan kuliner Indonesia melalui jalan cerita yang imajinatif,
sehingga dapat dinikmati oleh anak-anak. Visual buku dongeng tersebut
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
diilustrasikan menggunakan style digital painting dengan warna-warna
yang cerah dan kontras.
Gambar 3. 13. Buku Dongeng Kuliner Nusantara
Referensi modeling low poly yang digunakan adalah model low poly
yang memaksimalkan penggunaan tekstur untuk meminimalkan jumlah
polygon, juga referensi model-model 3D yang digunakan untuk AR dan
Virtual Reality (VR).
Referensi yang pertama adalah sebuah model low poly ramen, hal
ini tampak pada kurang halusnya sisi-sisi mangkok ramen tersebut. Model
ini memaksimalkan penggunaan tekstur untuk membentuk wujud mie,
sehingga mie dapat tampak lebih nyata dan berisi, tanpa harus menggunakan
banyak poly untuk membentuk wujud mie. Kemudian ditemukan pula set
model low poly makanan yang dapat digunakan untuk AR dan VR. Model-
model tersebut memiliki jumlah polygon dibawah 500, dan memanfaatkan
tekstur untuk membuat model menjadi lebih hidup dan menyerupai
makanan aslinya.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 14. Model Low Poly Ramen Memanfaatkan Tekstur
(https://67.media.tumblr.com/5f69e848de6749eb6fe04507d94232f6/tumblr_n0tsmjbfuo1r
x0figo1_500.png)
Gambar 3. 15. Set Model Low Poly Makanan Untuk AR dan VR
(https://www.cgtrader.com/3d-models/food/miscellaneous/cookie-boxes-low-poly)
3.2.1.3. Interaktivitas Permainan
Pada tahap ini pula, penulis merancang konsep gameplay dari kartu jajanan
pasar dan puzzle sehingga dapat dipahami oleh anak-anak. Penulis
menyusun layout puzzle yang akan digunakan dan memilih warna-warna
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
latar yang cenderung cerah untuk desain puzzle dan kartu jajanan pasar.
Pemilihan warna latar puzzle dan kartu juga berpengaruh pada pembacaan
marker AR. Kartu jajanan pasar berfungsi sebagai patokan warna untuk anak
dalam mencari kepingan puzzle.
Pada kartu jajanan pasar, terdapat AR berupa model seluruh bahan-
bahan pembuat kue yang ada pada kartu, yang tampak dengan perbandingan
ukuran aslinya. Setiap kepingan puzzle juga memiliki AR berupa model
bahan yang terdapat dalam ilustrasi pada puzzle. Ketika kepingan-kepingan
puzzle dengan warna yang sama, disusun menjadi satu kesatuan, maka akan
menghasilkan AR dari model jajanan pasar, sesuai dengan ilustrasi bahan-
bahan yang terdapat pada tiap kepingan puzzle.
Gambar 3. 16. Konsep Interaktivitas
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 17. Layout Puzzle dan Kartu Jajanan Pasar
3.2.2. Produksi
Dalam tahap produksi, dilakukan proses pembuatan ilustrasi jajanan pasar dan
bahan-bahannya berdasarkan referensi foto asli, juga dilakukan proses modeling,
UV mapping dan texturing dari aset-aset yang dibutuhkan berdasarkan ilustrasi-
ilustrasi tersebut.
Aplikasi 3DS Max digunakan untuk membuat seluruh model, melakukan
proses UV mapping dan pengaplikasian tekstur. Untuk proses texturing UV map,
penulis menggunakan program Adobe Photoshop. Bentuk setiap model dan
pewarnaan tekstur disesuaikan dengan style dan warna dari ilustrasi.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 18. Hasil Visualisasi 3D Jajanan Pasar dan Perbadingan Ukurannya
Gambar 3. 19. Hasil Visualisasi 3D Bahan-bahan dan Perbandingan Ukurannya
Modeling aset dibuat dengan jumlah poly serendah mungkin, dan dibatasi
pada batas jumlah polygon yaitu 1500. Pada beberapa model juga menggunakkan
tekstur alpha modifier smooth atau mesh smooth untuk menghaluskan sisi-sisi dari
setiap model, sehingga model dapat tampil secara lebih halus dan menarik.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Berikut adalah proses produksi model 3D dari hasil jadi jajanan pasar dan
bahan-bahan pembuatnya:
3.2.2.1. Klepon
Klepon merupakan jajanan pasar yang khas dengan bentuk bulatnya, warna
hijau cerah, dan parutan kelapa yang menyelimutinya. Oleh karena itu,
penggunaan warna hijau diterapkan dalam pembuatan ilustrasi dari klepon.
Gambar 3. 20. Foto Referensi Klepon
(http://1.bp.blogspot.com/AB6UmD7lcvc/VmLQ6Ru2V3I/AAAAAAAASY4/0gKG1H
Mjerw/s1600/resep%2Bklepon%2Bncc.jpg)
Gambar 3. 21. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Klepon
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 22. Pemisahan Badan Klepon dan Parutan Kelapa
Proses modeling klepon menggunakan dua bagian sphere yang
terpisah. Bagian dalam berwarna hijau untuk badan klepon dan bagian luar
untuk parutan kelapa. Pemisahan parutan kelapa menjadi objek baru dapat
lebih efektif untuk menghemat jumlah polygon dibandingkan dengan secara
satu persatu menempelkan plane ke badan klepon untuk menimbulkan
kesan parutan kelapa yang tidak beraturan. Oleh karena itu, untuk membuat
kesan parutan kelapa, pada objek parutan kelapa diberikan map alpha yang
transparan.
Gambar 3. 23. Tekstur Klepon dan Parutan Kelapa
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Pada texturing, proses unwrap UVW dilakukan kepada model
sehingga dapat diperoleh map UV yang kemudian dilakukan proses
pewarnaan sesuai dengan konsep visual dalam program Adobe Photoshop.
Material parutan kelapa disimpan ke dalam ekstensi file png dengan latar
transparan, agar dapat digunakan dalam program Unity. Jumlah polygon
model-model klepon adalah 780 atau 1560 tris. Terdapat pula animasi
dalam model klepon berupa ketiga karakter klepon yang melompat secara
bergantian dengan jumlah frame sebanyak 80 dan berulang (looping).
Jumlah frame ini menghasilkan animasi berdurasi 3 detik untuk
menunjukkan karakteristik klepon yang kenyal.
Gambar 3. 24. Modeling dan Texturing Klepon
3.2.2.2. Kue Apem
Kue apem memiliki ciri khas warna putih pada bagian atas dan warna coklat
pada bagian bawah, juga disertai dengan hiasan potongan daun pandan.
Penggunaan warna dalam ilustrasi mengambil referensi dari warna asli kue
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
apem yang dibuat lebih cerah dibandingkan kue aslinya. Potongan daun
pandan juga disertakan untuk menunjukkan karakteristik dari kue apem.
Gambar 3. 25. Foto Referensi Kue Apem
(http://www.buahatiku.com/wp-content/uploads/2016/01/Kue-Apem-Kukus.jpg)
Gambar 3. 26. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Kue Apem
Dalam modeling kue apem, modifier unwrap UVW diaplikasikan
pada model kue apem untuk mendapatkan map UVW, sehingga dapat
dilakukan proses texturing material untuk model kue apem. Pewarnaan map
menggunakan palet warna dari warna asli kue dan diwarnai sesuai dengan
ilustrasi yang ada.
Modifier mesh smooth digunakan untuk memperhalus sisi-sisi dari
model kue apem, sehingga dapat terbentuk sisi yang bulat seperti pada kue
apem asli. Jumlah polygon akhir dalam modeling kue apem adalah 368 atau
736 tris, dan masih berada di jumlah normal batas polygon untuk aplikasi
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
mobile. Terdapat animasi berulang sebanyak 100 frame berupa kue apem
yang melompat dan berusaha meniup potongan daun pandan. Animasi ini
untuk menunjukkan karakteristik kue apem yang cukup kenyal dan
potongan daun pisang yang ringan, juga menunjukkan sisi imajinatif dari
karakter kue apem.
Gambar 3. 27. Tekstur Kue Apem
Gambar 3. 28. Model Kue Apem Sebelum Menggunakan Modifier Mesh Smooth
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 29. Model Kue Apem Setelah Menggunakan Modifier Mesh Smooth
3.2.2.3. Kue Mangkok
Kue mangkok memiliki ciri khas dari warna yang menarik dan rasanya yang
manis. Kue mangkok biasanya berwarna merah cerah, merah muda maupun
oranye yang dapat menarik perhatian. Penggunaan warna pada ilustrasi kue
mangkok berdasarkan warna-warna asli kue, dan menggunakan paduan
warna dari warna merah.
Gambar 3. 30. Foto Referensi Kue Mangkok
(https://s-media-cache-
ak0.pinimg.com/originals/86/ac/d0/86acd0c7aa2bc5f313b24d7972d5500f.jpg)
Setelah proses penggambaran kue mangkok selesai, dilakukan
proses modeling dan texturing yang dibuat sesuai dengan ilustrasi. Pada
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
proses modeling, modifier mesh smooth digunakan untuk memperhalus
bentuk kue mangkok yang didominasi oleh sisi-sisi bulat. Jumlah total
polygon ketiga model kue mangkok adalah 750 atau 1500 tris.
Gambar 3. 31. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Kue Mangkok
Gambar 3. 32. Tekstur Kue Mangkok
Gambar 3. 33. Modeling dan Texturing Kue Mangkok
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Untuk proses texturing, menggunakan modifier unwrap UVW,
kemudian map diwarnai sesuai dengan warna yang ada pada ilustrasi, dan
diaplikasikan ke dalam model-model 3D. Terdapat animasi berulang berupa
setiap model yang memiliki gerakannnya masing-masing, sebanyak 90
frame. Animasi pada kue-kue mangkok bertujuan untuk menampilkan
karakteristik kue mangkok yang kenyal, dan menunjukkan sisi imajinatif
dari karakter kue mangkok.
3.2.2.4. Nagasari
Nagasari memiliki ciri khas pada adanya potongan buah pisang yang berada
pada bagian tengah kue, dan kue dibungkus dalam potongan daun pisang.
Ilustrasi nagasari dibuat berdasarkan referensi dari kue nagasari asli.
Gambar 3. 34. Foto Referensi Nagasari
(http://3.bp.blogspot.com/cnWVOYoU_yQ/VaWJft75yFI/AAAAAAAAOxg/5T0DTfhA
B4Q/s1600/resep-kue-nagasari-isi-pisang-manis.jpg)
Setelah proses ilustrasi nagasari selesai, proses modeling dan
texturing dilakukan. Pada proses modeling, modifier mesh smooth
digunakan untuk memperhalus bentuk nagasari. Modifier shell diberikan
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
pada plane daun pisang, agar kedua sisi dapat terbaca dengan baik dalam
Unity.
Gambar 3. 35. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Nagasari
Jumlah polygon akhir dalam modeling nagasari adalah 542 atau
1084 tris. Modifier unwrap UVW kemudian diaplikasikan pada model
nagasari, sehingga dapat proses texturing material dapat dilakukan.
Pewarnaan map menggunakan palet warna dari ilustrasi nagasari.
Pada model nagasari, digunakan 6 buah bones untuk daun pisang
untuk membantu dalam proses animasi. Animasi berulang sebanyak 70
frame berupa model kue nagasari yang melompat dan memantul ketika daun
pisang terbuka. Animasi selama 3 detik ini, bertujuan untuk menunjukkan
karakteristik dari nagasari yang kenyal.
Gambar 3. 36. Tekstur Nagasari dan Daun Pisang
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 37. Modeling dan Texturing Nagasari
3.2.2.5. Kue Bugis
Kue bugis merupakan jenis kue yang dibungkus oleh daun pisang. Ciri khas
kue bugis tampak pada warna dan bentuk yang berasal dari bahan baku
ketan hitam dan hasil dari pembungkusan menggunakan daun pisang yang
dibentuk segitiga.
Gambar 3. 38. Foto Referensi Kue Bugis
(https://id.pinterest.com/pin/385902261791481195/)
Penggunaan warna dan bentuk pada ilustrasi kue bugis berdasarkan
referensi kue bugis asli. Setelah proses penggambaran kue bugis selesai,
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
dilakukan proses modeling dan texturing yang dibuat sesuai dengan
ilustrasi.
Gambar 3. 39. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Kue Bugis
Pada model kue bugis, modifier mesh smooth digunakan untuk
memperhalus sisi-sisi kue bugis, dan modifier shell diberikan pada model
daun pisang. Model Kue bugis menggunakan bones sebanyak 6 buah yang
terdapat pada daun pisang, sehingga dapat membantu dalam proses animasi.
Total akhir jumlah polygon pada model kue bugis adalah 718 atau 1436 tris
dan animasi sebanyak 50 frame. Animasi berupa kue bugis yang melompat
dan memantul ketika daun pisang terbuka, untuk menunjukkan karakteristik
kue bugis yang cukup kenyal.
Gambar 3. 40. Tekstur Kue Bugis
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 41. Model Kue Bugis Sebelum Menggunakan Modifier Mesh Smooth
Gambar 3. 42. Model Kue Bugis Sesudah Menggunakan Modifier Mesh Smooth
3.2.2.6. Daun Pandan
Daun pandan memiliki ciri khas pada bentuk daun sejajar, dan cenderung
kaku. Dalam pembuatan ilustrasi daun pandan, bentuk dan warna yang
digunakan mengambil referensi dari daun pandan asli, sehingga wujud daun
pandan dapat terlihat dengan baik.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
. Gambar 3. 43. Foto Referensi Daun Pandan
(http://media.viva.co.id/thumbs2/2016/01/13/200791-0_641_452.jpg)
Gambar 3. 44. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Daun Pandan
Proses modeling daun pandan dilakukan dengan menggunakan
plane dan memanfaatkan map alpha dalam proses texturing, sehingga
penggunaan polygon dapat berkurang. Tekstur daun pandan berupa bentuk
daun pandan yang disesuaikan dengan ilustrasi daun pandan yang telah
dibuat sebelumnya. Kemudian tekstur diaplikasikan pada plane.
Gambar 3. 45. Tekstur Daun Pandan
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Modifier shell diaplikasikan pada model, sehingga, jumlah akhir
polygon adalah 288 atau 576 tris. Terdapat animasi berulang berupa daun
pandan yang berjatuhan secara bergantian, untuk menunjukkan karakteristik
daun pandan yang sedikit kaku dengan jumlah frame sebanyak 90.
Gambar 3. 46. Modeling dan Texturing Daun Pandan
3.2.2.7. Daun Pisang
Daun pisang pada umumnya berukuran besar dan memiliki tekstur yang
lentur. Sebagai pembungkus makanan, daun pisang dipotong menjadi
bentuk segi empat terlebih dahulu sehingga dapat membungkus makanan
dengan lebih rapi.
Gambar 3. 47. Foto Referensi Daun Pisang
(http://findfood.ru/attaches/product/dobavki/listja-banana.png)
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 48. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Daun Pisang
Proses visualisasi 3D daun pisang dimulai dengan pembuatan
ilustrasi daun pisang, daun pisang asli dijadikan sebagai referensi. Proses
visualisasi 3D daun pisang dimulai dengan pembuatan ilustrasi daun pisang,
daun pisang asli dijadikan sebagai referensi.
Kemudian dilakukan tahap modeling dengan menggunakan plane
dalam membentuk model daun pisang. Texturing model menggunakan map
alpha yang berwujud gambar daun pisang utuh, yang kemudian
diaplikasikan pada model. Modifier shell diaplikasikan pula ke dalam
model, untuk menambah sisi plane Jumlah polygon pada model 3D daun
pisang adalah 188 atau 376 tris, dengan total animasi berulang sebanyak 50
frame.
Gambar 3. 49. Tekstur Daun Pisang
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Animasi berupa daun pisang utuh yang kemudian terbelah menjadi
4 potongan daun pisang yang berbentuk segi empat, seperti bentuk daun
pisang untuk membungkus kue. Animasi ini untuk menunjukkan bagaimana
proses daun pisang digunakan untuk membungkus makanan.
Gambar 3. 50. Modeling dan Texturing Daun Pisang
3.2.2.8. Pisang
Pisang memiliki ciri khas pada warna kuning yang cerah. Pada pembuatam
ilustrasi pisang, pisang asli dijadikan sebagai sumber referensi utama untuk
bentuk dan warna dari ilustrasi pisang yang dihasilkan.
Gambar 3. 51. Foto Referensi Pisang
(https://laven01.files.wordpress.com/2015/01/banana4_s.jpg)
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 52. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Pisang
Model pisang terdiri dari model kulit pisang dan 6 buah model
potongan pisang, yang masing-masing model memiliki tekstur sesuai
dengan yang dibutuhkan. Modifier smooth digunakan pada model isi pisang
untuk memperhalus sisi-sisi model tanpa mengalami penambahan jumlah
polygon yang signifikan, sedangkan pada model kulit pisang diberi modifier
mesh smooth.
Gambar 3. 53. Tekstur Pisang
Bagian kulit pisang dilengkapi oleh bones yang terbagi menjadi 3
bagian set bones untuk membantu dalam proses animasi, karena animasi
pada pisang berupa animasi kulit pisang yang terbuka menjadi 3 bagian, dan
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
menunjukkan isi pisang. Jumlah akhir polygon pada model pisang adalah
799 atau 1598 tris, dengan animasi berulang sebanyak 120 frame.
Gambar 3. 54. Modeling Dan Texturing Pisang Sebelum Diberi Modifier Shell
Gambar 3. 55. Modeling Dan Texturing Pisang Sesudah Diberi Modifier Shell
3.2.2.9. Daun Suji
Daun suji digunakan sebagai zat pewarna hijau alami bersama dengan daun
pandan sebagai pemberi aroma. Tanaman ini memiliki ciri khas pada bentuk
daun yang sejajar dan lemas, juga memiliki batang yang kokoh.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 56. Foto Referensi Daun Suji
(https://ecs7.tokopedia.net/img/cache/200-square/product-
1/2016/5/27/1552227/1552227_c19feff6-eb2f-41ad-90fa-b53ba18cc2f6.jpg)
Dalam pembuatan ilustrasi daun suji, daun suji asli digunakan
sebagai referensi bentuk dan warna. Kemudian dilakukan proses modeling
daun-daun suji menggunakan plane dan modifier shell, juga map alpha
untuk texturing. Map alpha berwujud bentuk daun suji yang mengambil
referensi dari ilustrasi daun suji.
Gambar 3. 57. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Daun Suji
Pada model daun suji, jumlah polygon adalah 713 atau 1426 tris, dan
disertai dengan animasi berupa daun suji yang satu per satu berjatuhan dari
batangnya secara berulang sebanyak 120 frame. Animasi ini bertujuan
untuk menunjukkan karakteristik daun suji yang cukup kaku.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 58. Tekstur Daun Suji
Gambar 3. 59. Modeling dan Texturing Daun Suji
3.2.2.10. Garam
Referensi untuk garam mengarah pada wujud tempat garam yang sering
ditemui dalam kehidupan sehari-hari. Dalam pembuatan ilustrasi garam,
mengambil referensi dari tempat garam dari kaca, dengan tutup yang
disertai oleh lubang-lubang untuk mengeluarkan isi garam. Pada pembuatan
ilustrasi, digambarkan tempat garam terbuat dari plastik, yang juga disertai
dengan label bertuliskan garam, untuk semakin membantu anak-anak
mengenali ilustrasi garam.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 60. Foto Referensi Garam
(http://res.cloudinary.com/dk0z4ums3/image/upload/v1470370099/attached_image/janga
n-selalu-dimusuhi-manfaat-garam-juga-banyak-alodokter.jpg)
Gambar 3. 61. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Garam
Setelah ilustrasi selesai, garam kemudian divisualisasikan ke dalam
bentuk 3D. Dalam proses modeling, modifier mesh smooth kembali
digunakan untuk memperhalus sisi-sisi model. Tekstur pada garam dibuat
dengan mewarnai map UVW, untuk membuat bulatan-bulatan pada tutup
garam, dan agar tekstur pada model garam sesuai dengan ilustrasi.
Animasi pada model garam berupa model garam yang sedang
mengeluarkan butiran-butiran garam. Butiran-butiran garam tersebut
berperan sebagai visual effect sederhana pada model garam. Visual effect
dibuat dengan menggunakan plane yang diberi modifier shell, dan
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
memanfaatkan map alpha sehingga menghasilkan tekstur yang transparan.
Penggunaan plane dan map alpha lebih efektif untuk mengurangi jumlah
polygon, dan cukup ringan dalam penggunaannya, dibandingkan dengan
menggunakan particle system sebagai visual effect.
Gambar 3. 62. Tekstur Garam dan Butiran Garam
Jumlah total polygon pada model garam adalah 710 atau 1420 tris,
dengan animasi berulang sebanyak 60 frame. Animasi sebanyak 2 detik
yang berulang bertujuan untuk menunjukkan proses penuangan butiran
garam dari botol garam, dan menunjukkan karakteristik tekstur garam yang
berupa butiran-butiran halus.
Gambar 3. 63. Model Garam dan Visual Effect Butiran Garam
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
3.2.2.11. Gula
Dalam pembuatan ilustrasi gula, mengambil referensi dari pot gula yang
dapat ditemui dalam kehidupan sehari-hari. Tempat gula disertai dengan
label bertuliskan gula, untuk membantu anak-anak mengenali ilustrasi gula
tersebut.
Gambar 3. 64. Foto Referensi Gula
(http://sc01.alicdn.com/kf/HTB1v3t1KVXXXXaQXVXXq6xXFXXXZ/Terracotta-sugar-
Pot-with-lid.jpg_200x200.jpg) dan
(http://a3.cdn.whatstrending.com/post_items/images/000/023/065/large/spoon-full-of-
sugar-art.jpg)
Gambar 3. 65. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Gula
Gula kemudian divisualisasikan ke dalam bentuk 3D dan
memanfaatkan modifier mesh smooth untuk membentuk sisi bulat yang
sempurna. Texturing dengan menggunakan map UVW juga digunakan agar
dapat membuat model dapat sesuai dengan ilustrasi yang penulis ciptakan.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Pada model gula, terdapat animasi sederhana yang berulang sebanyak 90
frame animasi.
Animasi berupa gerakan ketika pot gula terbuka dan terdapat
tumpukan gula, serta sendok yang mengambil gula dari dalam pot. Ketika
sendok diangkat, terdapat visual effect sederhana berupa butiran-butiran
gula yang terjatuh dari atas sendok. Animasi ini dibuat untuk menunjukkan
karakteristik tekstur gula berupa butiran-butiran halus. Seperti pada model
garam, visual effect dibuat dengan menggunakan plane yang diberi modifier
shell, dan menggunakan map alpha untuk menghasilkan kesan butiran gula.
Jumlah total polygon pada model gula 648 atau 1296 tris.
Gambar 3. 66. Tekstur Gula dan Tekstur Butiran Gula
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 67. Modeling, Texturing, dan Visual Effect Gula
3.2.2.12. Kelapa
Kelapa yang digunakan sebagai referensi adalah kelapa yang sudah tua,
karena kelapa tua dapat diolah kembali menjadi kepala parut dan santan.
Kelapa parut digunakan sebagai penambah daya tarik visual dari jajanan
pasar, maupun menjadi isian dari jajanan pasar.
Gambar 3. 68. Foto Referensi Kelapa
(http://www.blueband.co.id/old-content/uploads/2016/01/10.jpg)
Ilustrasi kelapa yang terbelah dipilih untuk menunjukkan bagaimana
pemotongan kelapa dilakukan untuk mendapatkan parutan kelapa. Dalam
visualisasi 3D, penulis menambahkan model alat pemarut kelapa, mangkok,
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
serta hasil parutan kelapa. Pada model alat pemarut kelapa, texturing sangat
berperan dalam membentuk wujud alat pemarut kelapa.
Gambar 3. 69. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Kelapa
Selain itu, terdapat animasi sederhana berupa kelapa yang terbelah
kemudian mengalami proses pemarutan dan menjadi parutan kelapa.
Terdapat pula visual effect sederhana berupa efek butiran parutan kelapa
yang terbuat dari plane yang diberi modifier shell dan texturing dengan
menggunakan map alpha. Jumlah polygon akhir pada model kelapa adalah
530 atau 1060 tris, dengan animasi berulang sebanyak 130 frame. Animasi
bertujuan untuk menunjukkan bagaimana proses pembuatan parutan kelapa
secara singkat.
Gambar 3. 70. Modeling dan Texturing Kelapa
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 71. Tekstur Parutan dan Butiran Kelapa
3.2.2.13. Ketan Hitam
Ketan hitam dimanfaatkan sebagai bahan pewarna dan pemberi cita rasa
yang khas pada jajanan pasar. Ilustrasi ketan hitam mengambil referensi
wujud ketan hitam, yang ditampilkan dalam bentuk gunungan ketan hitam
yang berada dalam sebuah tempat kayu. Setelah ilustrasi selesai, proses
visualisasi 3D dilakukan. Model 3D dibentuk sesuai ilustrasi, kemudian
mengalami proses texturing.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 72. Foto Referensi Ketan Hitam
(http://3.bp.blogspot.com/-
8b5mUi10gKU/VXEJLzU2FFI/AAAAAAAACRM/PStvQbRbPsA/s1600/ketan%2Bhita
m.jpg)
Gambar 3. 73. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Ketan Hitam
Animasi sederhana yang berulang sebanyak 60 frame animasi
terdapat pada model ketan hitam, yang bertujuan untuk menunjukkan
karakteristik tekstur ketan hitam berupa butiran-butiran. Animasi berupa
sekop yang mengambil ketan hitam dan disertai dengan visual effect
sederhana berupa butiran-butiran ketan hitam yang terjatuh.
Visual effect dibuat dengan menggunakan plane yang diberi
modifier shell, dan untuk texturing pada plane menggunakan map alpha
untuk menghasilkan kesan butiran ketan hitam. Jumlah total polygon pada
model gula adalah 656 atau 1312 tris.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 74. Tekstur Ketan Hitam dan Butiran Ketan Hitam
Gambar 3. 75. Modeling dan Texturing Ketan Hitam
3.2.2.14. Ragi
Ragi digunakan untuk membuat kue menjadi mengembang. Dalam projek
ini bentuk bungkus ragi yang sering ditemui di pasaran menjadi referensi
utama dalam pembuatan ilustrasi untuk ragi.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 76. Foto Asli Bungkus Ragi
(https://image1ws.indotrading.com/s3/productimages/co30295/p217190/w300-
h300/9d5a968b-d967-4ec1-91cd-1313930d72daw.jpg)
Gambar 3. 77. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Ragi
Setelah ilustrasi ragi selesai, dilakukan proses visualisasi 3D ragi.
Pembuatan model menggunakan box dan memanfaatkan tekstur dalam
membentuk wujud bungkus ragi. Tekstur dibuat dengan mewarnai map
UVW menyerupai ilustrasi yang telah dibuat sebelumnya. Pada bagian ujung
bungkus ragi dibuat terpisah untuk kebutuhan animasi.
Animasi pada ragi berupa bagian atas bungkusan yang disobek
sehingga dapat mengeluarkan isi ragi yang berupa visual effect plane
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
dengan tekstur map alpha berupa butiran ragi. Animasi ini untuk
menunjukkan karakteristik tekstur ragi yang berupa butiran-butiran yang
tidak halus. Pada plane visual effect dan model bungkus ragi, diberikan
modifier shell. Sehingga, jumlah polygon akhir pada model ragi adalah 244
atau 488 tris, dengan jumlah animasi berulang sebanyak 100 frame.
Gambar 3. 78. Tekstur Bungkus Ragi dan Butiran Ragi
Gambar 3. 79. Modeling dan Texturing Ragi
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
3.2.2.15. Tepung Terigu
Dalam pembuatan ilustrasi tepung terigu, referensi karung tepung terigu
digunakan sebagai referensi utama. Pada ilustrasi, bungkus tepung terigu
berupa karung putih yang khas digunakan sebagai bungkus tepung terigu
dengan jumlah besar.
Gambar 3. 80. Referensi Tepung Terigu
(http://itpc-busan.kr/wp-content/uploads/2015/07/produk-bogasari.jpg)
Gambar 3. 81. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Tepung Terigu
Setelah ilustrasi tepung terigu selesai, kemudian dilakukan proses
modeling dan texturing, pada model, modifier mesh smooth juga
diaplikasikan. Modifier unwrap UVW diberi pada model untuk proses
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
texturing. Texturing model kemudian dilakukan dengan mewarnai UVW
map sesuai dengan ilustrasi yang ada.
Gambar 3. 82. Tekstur Tepung Terigu dan Butiran Tepung Terigu
Animasi pada tepung terigu dimulai dengan terangkatnya sekop
tepung, sehingga menjatuhkan butiran-butiran tepung terigu, yang bertujuan
untuk menunjukkan karakteristik tekstur tepung terigu yaitu berupa butiran-
butiran halus.
Gambar 3. 83. Modeling dan Texturing Tepung Terigu
Butiran tepung terigu merupakan visual effect sederhana dengan
menggunakan plane dan map alpha. Plane visual effect diberi modifier
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
shell, agar kedua sisi dapat terbaca dengan baik pada Unity. Jumlah total
polygon pada model adalah 737 atau 1474 tris, dengan animasi berulang
sebanyak 60 frame.
3.2.2.16. Gula Merah
Gula merah memiliki ciri khas yaitu berbentuk silinder dan setengah
lingkaran dengan warna merah bata atau coklat. Pembuatan ilustrasi gula
merah mengambil referensi dari bentuk dan warna gula merah asli. Gula
merah memiliki tekstur yang tampak kasar, sehingga bentuk ilustrasi gula
merah dibuat kasar dan cenderung kurang beraturan pada pewarnaannya.
Gambar 3. 84. Foto Referensi Gula Merah
(http://4.bp.blogspot.com/-
kau4fyns2DE/UI25Go69YuI/AAAAAAAAByA/WYYzPAFGNWo/s1600/gula.jpg)
Gambar 3. 85. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Gula Merah
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Pada proses modeling, vertex-vertex pada model dibuat kurang
beraturan sehingga dapat terlihat kesan kasar dari sisi-sisi gula merah,
modifier smooth juga diberikan pada model. Kemudian model diberi
modifier unwrap UVW sehingga dapat dilakukan pewarnaan tekstur sesuai
dengan ilustrasi. Jumlah total polygon pada model gula merah adalah 139
atau 279 tris. Animasi berulang pada gula merah menampilkan gula merah
yang terbelah dengan panjang frame sebanyak 50. Animasi ini untuk
menunjukkan karakteristik gula merah yang cukup keras.
Gambar 3. 86. Tekstur Gula Merah
Gambar 3. 87. Modeling dan Texturing Gula Merah
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
3.2.2.17. Santan
Santan digunakan sebagai salah satu bahan baku utama, dan pemberi rasa
gurih pada jajanan pasar, sehingga jajanan pasar dapat menjadi semakin
lezat. Bentuk santan pada projek ini mengambil referensi dari bentuk
bungkusan santan yang sering ditemui dalam kehidupan sehari-hari.
Gambar 3. 88. Referensi Bungkus Santan
(http://assets.klikindomaret.com/products/10022118/10022118_1.jpg)
Ilustrasi santan untuk marker berupa santan yang berada dalam
mangkok kayu. Kemudian, ilustrasi mengalami proses visualisasi 3D pada
program 3DS Max. Modeling bungkus santan dibagi menjadi 2 bagian
terpisah, yaitu bagian badan bungkus santan, dan bagian segel bungkus
santan sebagai tempat mengeluarkan isi santan.
Gambar 3. 89. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Santan
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 90. Tekstur Santan
Gambar 3. 91. Modeling dan Texturing Santan
Pada bagian segel bungkus santan, terdapat 4 buah bones yang
berperan dalam proses animasi, karena animasi pada santan berupa bungkus
santan yang seolah dirobek pada bagian segel, sehingga dapat mengeluarkan
isi santan. Isi santan terbuat dari box yang dibentuk menyerupai cairan yang
sedang dituang kesebuah tempat. Animasi ini untuk menunjukkan
karakteristik santan yang kental. Tekstur berperan sangat penting dalam
pembuatan bungkus santan, agar dapat menunjukkan bentuk dari bungkus
santan. Tekstur dibuat dengan mengaplikasikan modifier unwrap UVW,
kemudian mewarnai map UVW sesuai dengan ilustrasi. Total jumlah
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
polygon pada santan adalah 399 atau 798 tris, dengan animasi berulang
sebanyak 140 frame.
3.2.2.18. Pewarna Makanan
Pewarna makanan digunakan untuk membuat tampilan jajanan pasar
menjadi menarik. Ilustrasi untuk pewarna makanan berdasarkan referensi
botol pewarna makanan yang sering ditemui dipasaran, karena akan lebih
mudah untuk dikenali. Botol menggunakan warna merah muda, karena
hanya akan digunakan pada layout puzzle untuk kue mangkok, yang
memiliki tone warna serupa. Selain itu, untuk semakin memperjelas,
ilustrasi botol diberi label bertuliskan pewarna makanan.
Gambar 3. 92. Foto Referensi Pewarna Makanan
(http://images.sukamart.com/media/catalog/product/cache/1/thumbnail/9df78eab33525d0
8d6e5fb8d27136e95/d/s/dsc_0085_6.jpg)
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 93. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Pewarna
Makanan
Model 3D pewarna makanan terbagi menjadi 2 bagian, yaitu tutup
dan badan botol, agar dapat membantu dalam proses texturing. Animasi
pada model pewarna makanan berupa pewarna makanan mengeluarkan
tetesan pewarna yang berwarna merah muda, untuk menunjukkan
bagaimana cara untuk memberikan pewarna pada makanan. Tetesan ini
terbuat dari box yang diolah sehingga dapat menyerupai wujud cairan. Total
akhir jumlah polygon adalah 675 atau 1350 tris, dengan animasi sebanyak
80 frame.
Gambar 3. 94. Tekstur Pewarna Makanan
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 95. Modeling dan Texturing Pewarna Makanan
3.2.2.19. Telur
Telur berperan dalam pembuatan jajanan pasar yang dapat membuat tekstur
jajanan pasar menjadi lembut. Dalam pembuatan ilustrasi telur, telur asli
dijadikan referensi utama dari bentuk dan warnanya. Pembuatan ilustrasi
telur pada mulanya berwujud tiga buah telur utuh, dengan salah satu bentuk
telur yang telah dipecahkan.
Gambar 3. 96. Referensi Telur
(https://www.ngopy.com/content/images/20150930152014-tips-memilih-telur.jpg)
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 97. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Telur
Proses modeling telur dilakukan sesuai dengan ilustrasi, dan terdiri
dari 3 bagian utama, yaitu cangkang telur bagian atas, bagian bawah dan isi
telur. Model telur menggunakan modifier smooth untuk menghaluskan sisi-
sisi model. Pada bagian putih telur, diberikan bones sebanyak 4 buah.
Modifier unwrap UVW diberikan pada model cangkang telur untuk
mendapatkan map UVW sehingga dapat diwarnai sesuai dengan ilustrasi.
Gambar 3. 98. Tekstur Telur
Animasi pada model telur berupa telur yang dipecahkan sehingga
tampak bagian isi telur, yang menunjukkan cara untuk memecahkan telur.
Jumlah total polygon adalah 516 atau 1032 tris, dengan jumlah animasi
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
sebanyak 60 frame yang berulang. Durasi animasi selama 2 detik ini untuk
menunjukkan proses pecahnya telur.
Gambar 3. 99. Modeling dan Texturing Telur
3.2.2.20. Tape Singkong
Tape singkong pada jajanan pasar berfungsi untuk memberikan tekstur, rasa
dan aroma yang khas. Pada pembuatan ilustrasi tape, mengarah pada
referensi asli tape singkong, dari segi warna dan bentuk.
Gambar 3. 100. Referensi Tape Singkong
(http://resepkus.exe.bz/wp-content/uploads/2016/06/tape+singkong-2-500x479.jpg)
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 101. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Tape Singkong
Modeling dan texturing tape singkong mengacu pada ilustrasi.
Modifier mesh smooth, dan smooth digunakan untuk memperhalus sisi-sisi
model tape. Modifier unwrap UVW diaplikasikan pada model, sehingga
dapat dilakukan texturing sesuai dengan ilustrasi. Jumlah total polygon
model tape adalah 514 atau 1028 tris. Animasi berulang sebanyak 50 frame
berupa tape yang secara bergantian jatuh ke atas daun pisang, untuk
menunjukkan karakteristik tape singkong yang cukup kenyal, namun cukup
keras pula.
Gambar 3. 102. Tekstur Tape Singkong
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 103. Modeling dan Texturing Tape Singkong
3.2.2.21. Tepung Beras
Referensi untuk tempat tepung beras adalah baskom yang sering ditemui
dalam kehidupan sehari-hari, yang kemudian disatukan dengan gambar
tepung beras. Ilustrasi kemudian dibuat berdasarkan kedua referensi
tersebut.
Gambar 3. 104. Referensi Tepung Beras
(https://www.tokopedia.com/anekaperabot/baskom-murah-kode-175 dan
http://www.deyaza.com/wp-content/uploads/2015/09/membuat-tepung-beras.jpg)
Gambar 3. 105. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Tepung Beras
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Model 3D kemudian dibuat berdasarkan ilustrasi, yang terbagi
menjadi dua objek, yaitu objek tepung dan baskom, untuk mempermudah
dalam proses texturing. Texturing dilakukan dengan mewarnai map UVW
yang telah diperoleh dari hasil unwrap UVW model. Modifier mesh smooth
digunakan untuk memperhalus sisi baskom yang bulat. Total polygon pada
model tepung beras adalah 740 atau 1480 tris.
Terdapat animasi berulang sederhana sebanyak 50 frame pada
model tepung beras, yaitu baskom bergoyang sehingga tepung beras
menyebar dan tidak lagi membentuk gunungan, untuk menunjukkan cara
merapikan gunungan tepung beras.
Gambar 3. 106. Tekstur Tepung Beras
Gambar 3. 107. Modeling dan Texturing Tepung Beras
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
3.2.2.22. Tepung Ketan
Tepung ketan memiliki tampilan warna yang lebih kusam dibandingkan
tepung beras dan tepung terigu, hal ini kemudian dijadikan acuan dalam
pembuatan ilustrasi tepung ketan. Baskom kembali digunakan sebagai
tempat bagi tepung ketan.
Gambar 3. 108. Referensi Tepung Ketan
(http://anekaresepmasakan.net/wp-content/uploads/2012/05/tepung-ketan.jpeg)
Gambar 3. 109. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Tepung Ketan
Kemudian, dilakukan proses visualisasi 3D dari ilustrasi tepung
ketan. Model tepung ketan terbagi menjadi dua objek, yaitu objek tepung
dan baskom, untuk membantu dalam mempercepat proses texturing dengan
mewarnai map UVW. Modifier mesh smooth digunakan unruk memperhalus
sisi-sisi model, sehingga model dapat tampak lebih menarik. Terdapat
animasi sederhana pada model, yaitu berupa baskom yang digoyangkan,
sehingga gunungan tepung ketan menjadi rata, untuk menunjukkan cara
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
merapikan gunungan tepung ketan. Total polygon pada model tepung ketan
adalah 664 atau 1328 tris, dengan animasi berulang sebanyak 50 frame.
Gambar 3. 110. Tekstur Tepung Ketan
Gambar 3. 111. Modeling dan Texturing Tepung Ketan
3.2.2.23. Air
Dalam pembuatan ilustrasi air, teko air plastik yang biasa ditemui dalam
kehidupan sehari-hari menjadi referensi utama. Dalam ilustrasi air, terdiri
dari gambar teko dan gelas dengan warna senada yang terisi dengan air
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 112. Referensi Teko Air
(https://images-na.ssl-images-amazon.com/images/I/31zdpFj-9oL.jpg)
Setelah itu, dilakukan proses modeling air serta gelas dalam program
3DS Max. Tekstur pada model memanfaatkan material bawaan dari
program, karena tekstur pada model berupa plastik transparan, sehingga
akan lebih baik jika menggunakan material langsung pada program.
Gambar 3. 113. Hasil Ilustrasi (Kiri) dan Visualisasi 3D (Kanan) Air
Model 3D air menggunakan modifier mesh smooth untuk
menghaluskan sisi-sisi model. Pada model juga terdapat animasi berulang
sederhana berupa teko yang menumpahkan air ke dalam gelas, hingga gelas
terisi. Isi air tersebut dibuat menggunakan box hingga membentuk wujud
air yang tertuang dari teko, untuk menunjukkan cara menuangkan air ke
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
dalam sebuah gelas. Jumlah total polygon model air adalah 667 atau 1334
tris, dengan jumlah animasi sebanyak 120 frame.
Gambar 3. 114. Modeling dan Texturing Air
3.2.3. Pascaproduksi
Pada tahap pascaproduksi, seluruh aset yang telah dihasilkan diekspor dari 3DS
Max ke dalam wujud file FBX, kemudian diimpor ke dalam program Unity. Ketika
projek 3D diimpor dari 3DS Max ke Unity, projek-projek tersebut akan mengalami
proses triangulation atau pembentukan polygon ke bentuk polygon segitiga (tris)
untuk memaksimalkan detail visualnya.
Setelah seluruh aset telah diimpor ke dalam projek program Unity, package
Vuforia diimpor pula ke dalam projek untuk membuat seluruh aset dapat tampil
dalam wujud AR. Package Vuforia ini dapat diperoleh dari situs developer Vuforia
secara gratis dengan cara mendaftar sebagai member dalam situs developer Vuforia.
Package ini berfungsi untuk membuat model-model 3D dapat diwujudkan dalam
bentuk AR. Gambar puzzle dan kartu yang telah didaftarkan sebagai marker pada
situs developer Vuforia, diimpor pula ke dalam projek Unity. Setelah seluruh aset
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
telah dimasukkan ke dalam projek Unity, marker-marker disusun sesuai dengan
gambaran layout awal, dan model-model 3D juga disusun sesuai dengan ilustrasi
yang ada pada layout.
Gambar 3. 115. Pengimporan dan Penyusunan Aset
Pencetakan layout puzzle, kartu jajanan pasar dan buklet panduan
permainan dilakukan pula pada tahapan ini. Set Puzzle akan berwujud puzzle
magnet, yang nantinya dapat ditempel ke sebuah whiteboard kecil pada packaging.
Wujud packaging ini dipilih agar buklet panduan, puzzle dan kartu dapat disusun
secara rapi dalam satu tempat. Packaging ini mengambil referensi dari set puzzle
magnet yang dapat ditemui dalam kehidupan sehari-hari.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 116. Packaging Projek “Jajanan Pasar"
Selain itu, pada tahap pascaproduksi, dilakukan pula pembuatan User
Interface (UI) dan User Experience (UX) untuk aplikasi AR Jajanan Pasar, yang
ditujukan untuk platform android. Tampilan desain aplikasi menyerupai tampilan
untuk layout buklet panduan dan packaging puzzle.
UI pada aplikasi dibuat sederhana dengan adanya beberapa tombol yang
memungkinkan pengguna melakukan perintah pada aplikasi. Pada menu utama
terdapat tiga buah tombol yaitu AR Camera, Fun Facts dan Exit.
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Gambar 3. 117. Tampilan Menu Utama Aplikasi “Jajanan Pasar”
Pada menu AR Camera, aplikasi akan menampilkan kamera AR yang dapat
diarahkan langsung kepada puzzle-puzzle dan kartu jajanan pasar untuk
menampilkan model-model 3D dalam wujud AR-nya. Pada menu ini, terdapat tiga
buah tombol, yaitu tombol lambang kamera untuk mengambil gambar, tombol
lambang segitiga untuk kembali ke menu utama, dan tombol X untuk menutup
aplikasi.
Dalam menu AR Camera, pengguna dapat mengubah dan memutar ukuran
model 3D dengan mencubit layar smartphone menggunakan dua jari. Selain itu
letak model 3D juga dapat dipindahkan dengan menyentuh layar smartphone.
Gambar 3. 118. Tampilan Menu AR Camera Aplikasi “Jajanan Pasar”
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017
Terdapat pula menu Fun Facts yang berisi informasi mengenai filosofi yang
terdapat pada setiap jajanan pasar. Informasi dibuat dengan bahasa yang ringan agar
dapat dimengerti oleh anak-anak. Pada menu ini terdapat enam buah tombol, lima
tombol merupakan tombol menuju ke halaman masing-masing jajanan pasar, dan
satu tombol adalah tombol kembali ke menu utama.
Gambar 3. 119. Tampilan Menu Fun Facts Aplikasi “Jajanan Pasar”
Perancangan Visualisasi...,Jessica Carlina,FSD UMN,2017