ii
WEB APLIKASI PROFIL PROPERTY BERBASIS 3D
DENGAN MENGGUNAKAN FRAMEWORK WEBGL
DAN LIBRARY THREE.JS
TUGAS AKHIR
Diajukan Guna Memenuhi Sebagian Persyaratan Dalam Rangka Menyelesaikan Pendidikan Sarjana Strata Satu (S1) Program Studi Teknologi Informasi
GEDE RISKA WIRADARMA NIM: 1204505080
JURUSAN TEKNOLOGI INFORMASI
FAKULTAS TEKNIK
iii
LEMBAR PERNYATAAN
Dengan ini saya menyatakan bahwa dalam Tugas Akhir ini tidak terdapat karya yang pernah diajukan untuk memperoleh gelar kesarjanaan di suatu perguruan tinggi dan sepanjang pengetahuan saya juga tidak terdapat karya atau pendapat yang pernah ditulis atau diterbitkan oleh orang lain, kecuali yang secara tertulis diacu dalam naskah ini dan disebutkan dalam daftar pustaka.
26 Pebruari 2016
Jimbaran, 28 Juni 2016
KATA PENGANTAR
Puji dan syukur penulis panjatkan kehadapan Tuhan Yang Maha Esa, karena atas Berkat RahmatNya, akhirnya penulis dapat menyelesaikan Tugas Akhir ini. Tugas Akhir yang berjudul “Web Aplikasi Profil Property Berbasis 3D dengan menggunakan Framework WebgGL dan Library Three.js” ini disusun sebagai syarat untuk memenuhi sebagian persyaratan menyelesaikan Program Sarjana S-1 pada Program Studi Teknologi Informasi Universitas Udayana.
Dalam penyusunan Tugas Akhir ini, penulis mendapatkan petunjuk dan bimbingan dari berbagai pihak. Sehubungan dengan hal tersebut pada kesempatan ini penulis menyampaikan ucapan terima kasih kepada :
1. BapakProf. Ir. Ngakan Putu Gede Suardana, MT.,Ph.D. selaku Dekan Fakultas Teknik Universitas Udayana.
2. BapakDr. Eng. I Putu Agung Bayupati, ST., MT.selaku Ketua Jurusan Teknologi Informasi Universitas Udayana.
3. Bapak I Nyoman Piarsa, S.T., M.T. selaku dosen pembimbing I dan Bapak Prof. Dr. I Kt. Gd. Darma Putra, S.Kom.,M.T. selaku dosen pembimbing II yang telah banyak memberikan bimbingan dan masukan dalam penyusunan tugas akhir ini.
4. Bapak Putu Wira Buana, S.Kom.,M.T. selaku dosen pembimbing akademik, yang telah memberikan bimbingan selama menempuh pendidikan di Jurusan Teknologi Informasi Universitas Udayana.
5. Kedua orang tua dan keluarga yang telah memberikan dukungan dan motivasi dalam pembuatan tugas akhir ini.
vii
Penulis menyadari tugas akhir ini masih jauh dari sempurna. Akhir kata penulis memohon maaf jika ada kesalahan dalam penulisan tugas akhir ini.
Denpasar, 28 Juni 2016 Penulis
ABSTRAK
Arsitek merupakan salah satu bisnis jasa dalam membangun desain property untuk menampilkan menjadi nyata. Kemampuan seorang arsitek untuk merancang pembangunan suatu property menuntut adanya sebuah visualisasi objek sebagai pratinjau rancangan kepada klien. Maket difungsikan sebagai cara untuk mempromosikan rancang property, namun pada perkembangannya biaya pembuatan maket masih dianggap terlalu besar dan kerap membebani pengembang ditambah waktu penyelesaian yang lama. Pemanfaatan media digital pada era pembangunan saat ini masih kurang dalam hal mempromosikan karya arsitektur secara akurat dan mendetail, membuat informasi yang diterima konsumen kurang maksimal, oleh karena itu diperlukan teknologi yang tepat guna. Teknologi komputerisasi memungkinkan membangun teknologi 3D diatas
browser sebagai sarana promosi karya seni arsitektur berbasiskan 3D. Teknologi WebGL memberikan banyak manfaat kepada pihak arsitek, perusahaan konstruksi maupun pengembang property. Teknologi WebGL juga membuat hasil karya terlihat lebih nyata, seperti program 3D yang banyak terdapat dipasaran. Teknologi berbasis cloud dapat diterapkan pada banyak kasus, salah satunya bisnisproperty.
ix ABSTRACT
Architect is one of business services in creating property design to make it become a reality. To design a property development, an architect requires the ability to visualize the object as a preview design to clients. A mock-up is a way to promote a design property, but as time goes on, the cost in making mock-up is too big and it is usually takes a long time to finish a mock-up, sometimes it burdens the developer. The utilizations of digital medias in this century, are still not enough in promoting an accurately and detailed architectural work, make the information that received by the consumers not optimal, because of it, it is needed appropriate technologies. Computerized technology enables to build the 3D technology on the browser as a promotional tool-based architecture 3D artwork.
The WebGL technology gives a lot of advantages to the architect’s side, the construction company’s side and also the property developer’s side. The WebGL
technology also makes the architectural work looks real, like 3D programs that are in market. The cloud-based technology can be used in many cases, such as property business.
DAFTAR ISI
LEMBAR PERNYATAAN ... iii
LEMBAR PENGESAHAN TUGAS AKHIR ... iv
BERITA ACARA TUGAS AKHIR... v
KATA PENGANTAR ... vi
DAFTAR KODE PROGRAM ... xv
BAB I PENDAHULUAN... 1
1.1 Latar Belakang ... 1
1.2 Rumusan Masalah ... 3
1.3 Tujuan ... 3
1.4 Manfaat ... 3
1.5 Batasan Masalah ... 4
1.6 Sistematika Penulisan ... 4
BAB II TINJAUAN PUSTAKA... 6
2.1 State of the Art... 6
2.1.1 PerancanganWebaplikasi profilpropertyberbasis 3D... 6
2.1.2 Diagram Ishikawa(Fishbone)... 7
2.2 WebGL... 8
2.2.1 Rancangan dan Sejarah... 9
2.2.2 Definisi TeknisWebGL... 9
2.3 Three.jsJavascript3DEngine... 11
2.3.1 Fitur There.js ... 11
2.3.2 Simple Page... 13
2.4 Interaksi... 16
2.4.1 Dekteksi Hit,Picking, dan Proyeksi ... 16
2.5 Integrasi... 18
2.5.1 Kombinasi DinamisHTMLdanWebGL... 18
2.5.2 Anotasi Layar 3D Menggunakan Posisi Layar 2D ... 18
2.6 Perangkat Lunak yang Digunakan ... 19
2.6.1 Autodesk Maya 2016 Student Version ... 19
BAB III METODOLOGI DAN PERANCANGAN SISTEM ... 21
3.1 Tempat dan Waktu Penelitian ... 21
3.2 Alur Penelitian ... 21
3.3 Sumber data ... 23
3.4 Gambaran Umum... 23
3.5 User Interface... 26
3.6 User Experience... 34
xi
4.1 KonfigurasiHardware dan Software... 36
4.2 Pengujian Antarmuka Aplikasi ... 36
4.3 Analisis Frame rate Per Second ... 50
4.4 Uji Coba padaDevice... 51
4.4.1 Perangkat Laptop/PC... 52
4.4.2 Perangkat Smartphone ... 53
4.4.3 Perangkat Smart TV ... 55
4.5 Analisa Kecepatan... 56
BAB V PENUTUP... 59
5.1 Simpulan ... 59
5.2 Saran ... 60
DAFTAR GAMBAR
Gambar 2. 1 Diagram Ishikawa (fishbone) ... 8
Gambar 2. 2 Hasil Render Penerepan Sederhana There.js... 14
Gambar 2. 3 Objek 3D Sederhana... 14
Gambar 2. 4 Kamera, Viewport dan Proyeksi ... 17
Gambar 2. 5 Autodesk Maya 2016 Student Version... 19
Gambar 3. 1FlowchartAlur Penelitian... 22
Gambar 3. 2 Gambaran Umum Sistem Web Aplikasi. ... 23
Gambar 3. 3Fishbone... 24
Gambar 3. 4Exterior Property3D ... 26
Gambar 3. 5Interior Property3D (lantai1)... 27
Gambar 3. 6TexureJendela... 28
Gambar 3. 7TexureFurniture... 29
Gambar 3. 8InteriorLantai 2 ... 30
Gambar 3. 9Interiorlantai 3... 31
Gambar 3. 10Interiorlantai 4... 32
Gambar 3. 11TextureImage... 33
Gambar 3. 12 UV Editor ... 34
Gambar 3.13Wireframedan UXDesign WebAplikasi ProfilProperty... 35
Gambar 4. 1 Tampilan beranda web aplikasi... 37
Gambar 4. 2 Tampilan beranda web aplikasi... 38
Gambar 4. 3 Tampilan beranda web aplikasi... 38
Gambar 4. 4 Tampilan beranda web aplikasi... 39
Gambar 4. 5 Tampilan beranda web aplikasi... 40
Gambar 4. 6 Upload Window ... 40
Gambar 4. 7 Library menu ... 41
Gambar 4. 8 Thumbnail Preview ... 42
Gambar 4. 9 Preview 3Dproperty... 42
Gambar 4. 10 Pemilihan Lighting... 43
Gambar 4. 11 Ambient Light ... 44
Gambar 4. 12 Directional Light ... 45
Gambar 4. 13 Point Light... 46
Gambar 4. 14 Spot Light ... 47
Gambar 4. 15 Area Light ... 48
Gambar 4. 16 Category Menu... 49
Gambar 4. 17 Frame rate per Second... 50
Gambar 4. 18 Gedung Teknologi Informasi ... 51
Gambar 4. 19 Pengujian 3D Ekterior Gedung Teknologi Informasi ... 52
Gambar 4. 20 Pengujian 3D Interior Gedung Teknologi Informasi ... 53
Gambar 4. 21 Uji Exterior pada Perangkat Smartphone... 54
Gambar 4. 22 Uji Coba Interior Perangkat Smartphone ... 55
xiii
DAFTAR TABEL
Tabel 4. 1 Tabel Pengujian FPS sesuai keadaan cahaya ... 56
xv
DAFTAR KODE PROGRAM
BAB I
PENDAHULUAN
Pendahuluan dalam bab I adalah mengenai latar belakang diadakannya perancangan Web aplikasi profil property berbasis 3D dengan menggunakan
framework WebGL dan Library Three.js, rumusan masalah yang terjadi dalam penelitian, batasan masalah yang digunakan sebagai titik pusat penelitian, tujuan serta manfaat yang didapat dalam penelitian.
1.1 Latar Belakang
Kemajuan teknologi dan komunikasi ditandai dengan pesatnya penggunaan internet untuk memenuhi kebutuhan informasi yang semakin meningkat, seiring dengan kemajuan diberbagai bidang terutama media promosi. Arsitektur merancang bangunan dengan sangat detail dan harus memiliki kemampuan seni merupakan nilai jual dari sebuah karya. Teknologi yang digunakan untuk mempromosikan karya terbilang kurang, sehingga muncul media yang paling akurat yaitu berupa media videomaupun gambar yang sifatnya statis dan hasil kurang maksimal yang akan diterima oleh konsumen. Pengembang
property mungkin harus lebih hati-hati karena konsumen punya kekuatan untuk menyeret pengembang property ke pengadilan, sebab jika tidak membangun rumah sesuai brosur iklan, pengembang bisa dibui atau tak hanya digugat ganti rugi perdata semata. Solusi yang diperlukan yaitu media promosi yang lebih akurat dan memberi konsumen interaksi denganprojectrancangan (Andi, 2014).
Manusia hidup didunia dan bergerak dalam pengalaman 3D, banyak media
digital yang dapat dijumpai berbasis 3D, padahal yang dialami selama ini adalah menatap layar datar namun yang dibayangkan objek diatas layar datar tersebut bisa dilihat dan digerakkan dari sisi depan, belakang dan samping dalam hal matematika lebih dikenal dengan sumbu x,y,z. Berkembangnya jaringan komunikasi dan web browsermembuat pengembang web mulai membuat sebuah
2
Web tiga dimensi (3D) adalah solusi terbaik yang dapat digunakan untuk memecahkan masalah di atas. Web 3D adalah sebuah aplikasi yang memberikan kemampuan pada sebuah Website untuk membuat sebuah tampilan objek tiga dimensi sehingga pengguna dapat melihat interface serta menu yang disajikan dalam bentuk tiga dimensi. Salah satu teknologi yang dapat digunakan untuk membangunWeb3D adalahWebGL.(Turkowski, 2010)
WebGL (Web Graphics Library) adalah JavaScript API untuk rendering
grafis 3D interaktif dan grafis 2D dalam browser Web yang kompatibel tanpa menggunakan plugin. Seiring kemajuan teknologi komputerisasi memungkinkan membangun teknologi 3D diatas WebGL sebagai sarana promosi karya seni arsitektur yang dapat dilihat selayaknya bermain game 3D. Teknologi WebGL
merupakan teknologi berbasis cloud yang dapat dimanfaatkan oleh pihak arsitektur atau perusahaan maupun pengembangpropertylainnya untuk membuat profil dan mempromosikan sebuah project. Teknologi WebGL dapat memberikan banyak manfaat bagi seorang arsitek selain mengurangi penggunaan hardware
untuk melakukan render menjadikan hasil nyata dari sesuatu yang dikerjakan pada aplikasi 3D, mengawaliweb3D sepenuhnya adalah untuk menampilkan dan menavigasi situs web dengan menggunakan 3D dengan ekstensi. Istilah tersebut digunakan untuk semua konten 3D interaktif yang tertanam ke dalam halaman
webHTML, biasanya membutuhkansoftwareuntuk meng-installsebuah tampilan 3D web untuk melihat jenis konten dan dapat dilihat melalui browser web. Strategi yang tepat guna diperlihatkan untuk mengadopsi teknologi ini mengingat masih minimnya tingkat adopsi teknologi informasi serta tantangan pada aspek keamanan dan keterbasan bandwidth. Teknologi berbasis cloud saat ini dapat diterapkan pada banyak kasus, salah satunya bisnisproperty. (Microsoft, 2015)
Berdasarkan hal tersebut dalam tugas akhir ini dirancang sebuah web aplikasi dengan judul: “Rancang Bangun Web Aplikasi Profil Property Berbasis 3D dengan Menggunakan Framework WebGL dan Library Three.js”. Teknologi ini dapat dikombinasikan dengan PHP, Javascript, dan MySQL sehingga tercipta suatu aplikasi profil yang mampu memproyeksikan 3D visual ke dalam browser
3
1.2 Rumusan Masalah
Rumusan masalah yang menjadi latar belakang dalam tugas akhir dapat dirangkum menjadi beberapa topik permasalahan. Rumusan masalah diantaranya adalah sebagai berikut:
1. Bagaimana bentuk profil dari Web Aplikasi Profil Property Berbasis 3D dengan MenggunakanFramework WebGLdanLibrary Three.jsagar dapat dioperasikan pada browser serta memberikan visualisasi dan informasi yang akurat dan bermanfaat.
2. Bagaimana cara merancang dan membuat Web Aplikasi Profil Property
Berbasis 3D dengan Menggunakan Framework WebGL dan Library Three.jspadabrowser.
1.3 Tujuan
Tujuan yang dapat diambil dari permasalahan tugas akhir yaitu sebagai berikut:
1. Mengetahui bentuk profil dari Web Aplikasi Profil Property Berbasis 3D dengan Menggunakan Framework WebGL dan Library Three.js agar dapat dioperasikan pada browser serta memberikan visualisasi dan informasi yang akurat dan bermanfaat
2. Mengetahui cara merancang dan membuat Web Aplikasi Profil Property
Berbasis 3D dengan Menggunakan Framework WebGL dan Library Three.jspadabrowser
1.4 Manfaat
Manfaat yang didapat dari pembuatan Web aplikasi profil property
berbasis 3D dengan menggunakanframework WebGLdanLibrary Three.jsadalah sebagai berikut:
1. Pengembang property atau perusahaan arsitektur dapat memberikan kemudahan dalam membuat dan mempromosikan profil pada project
4
2. Untuk mengetahui implementasi lebih lanjut tentang Web Aplikasi Profil
Property Berbasis 3D dengan Menggunakan Framework WebGL dan
Library Three.jspada arsitekturproperty.
3. Manfaat teknologi WebGL dan Cloud untuk memudahkan penyampaian informasi dan pengenalanpropertybagi arsitektur.
1.5 Batasan Masalah
Pembatasan yang jelas dan tegas terhadap masalah merupakan hal yang sangat diperlukan agar tidak terjadi kekeliruan dalam pengertian. Pembatasan ruang lingkup masalah juga diperlukan agar permasalahan yang dibahas dalam penelitian tidak melebar. Berikut ruang lingkup dan batasan masalah dalam penelitiantersebutadalah:
1. Aplikasi yang dibangun berbasisWebaplikasi.
2. Property3D dirancang terpisah antaraexteriordaninterior.
3. Web aplikasi menampilkan Canvas 3D dan Informasi pembangunan
propertysesuai kaidah pembangunan dalam dunia arsitek.
4. Web Aplikasi Profil property berbasis 3D dengan Menggunakan
Framework WebGL dan Library Three.js mengacu pada property
bangunan dan jenis arsitektur yang dirancang arsitek/perusahaan atau pengembang 3D lainnya.
1.6 Sistematika Penulisan
Sistematika penulisan dari penulisan tugas akhir ini dapat dijelaskan sebagai berikut:
BAB I : Pendahuluan
Bab I berisikan mengenai gambaran umum dari penulisan yang didalamnya membahas mengenai latar belakang masalah, rumusan masalah, tujuan penelitian, manfaat penelitian, batasan masalah, hingga mengenai sistematika penulisan.
5
Bab II berisikan mengenai berbagai macam teori penunjang dalam memecahkan permasalahan, yakni mulai dari pembahasan mengenaiWebGLketerkaitannya dengan visualisasi 3D.
BAB III : Metode dan Perancangan Sistem
Bab III membahas mengenai Gambaran umum Web aplikasi terkait pemodelan 3D propertydi WebGL, serta sumber data dan metode pengumpulan data.
BAB IV : Pengujian dan Analisa Hasil
Bab IV berisikan mengenai pembahasan terkait tentang uji coba
Web aplikasi yang disertakan dengan analisa sistem secara keseluruhan.
BAB V : Penutup
6 BAB II
TINJAUAN PUSTAKA
Bab II membahasa mengenai penelaahan kepustakaan yang menjadi proses perancangan dan pembuatan sistem, meliputi uraian mengenai WebGL, Definisi teknis WebGL, javascript 3D engine, Graphics, Interaction, Integrating, serta penjelasan mengenai penunjang aplikasi lainnya.
2.1 State of the Art
Pembuatan Webaplikasi profil property berbasis 3D memiliki keterkaitan dengan beberapa sumber yang mendasari pembuatan web aplikasi tersebut. Berikut merupakan pembahasan mengenai teori yang mendasari pembuatan Web
aplikasi profilpropertyberbasis 3D.
2.1.1 PerancanganWebaplikasi profilpropertyberbasis 3D
Pertama kali ide WebGL diterapkan pada buku dengan nama WebGL Up and Running yang diteliti oleh Tony Parisi (United States of America, 2012). Dalam penelitian langsung dimuat framework untuk memudahkan implementasi
WebGLdengan menambahkan fiturThere.jssebagailibrary(Tony, 2012).
Pengembangan WebGL mulai diterapkan pada semua browser desktop,
smartphone dan tablet oleh para perusahaan pengembang browser salah satu adalahgoogle chrome(google chrome extensionupdate, 2014).
Perkembangan teknologi WebGL selanjutnya mulai diterapkan pada bidang hiburan di Indonesia. Pengembang oleh Hendry dengan karyanya membuat Aquarium 3D diatas web browser diimplentasikan pada jurnal yang telah diterbitkannya (Hendry, 2001).
7
sebelumnya seperti dalam melakukanviewdari posisi x,y,z yang dibangung diatas
web browser. Media untuk menampilkan WebGL adalah browser yang mendukung WebGL. Web Aplikasi menggunakan kombinasi dari 3D project property, sehingga web aplikasi profil property menjadi lebih dinamis dalam menampilkanproject3D.
2.1.2 Diagram Ishikawa(Fishbone)
Fishbone diagram atau juga yang sering disebut diagram Ishikawa
merupakan diagram yang digunakan untuk mengidentifikasi kemungkinan penyebab dari suatu masalah. Diagram Ishikawa dapat membantu mengidentifikasi faktor yang signifikan untuk memberikan efek terhadap tujuan suatu project. Diagram Ishikawa ditemukan oleh Kaoru Ishikawa pertama kali pada tahun 1968 (ASQ, 2015).
Diagram Ishikawa dibagi menajdi dua bagian utama, yaitu bagian kepala ikan(effect)dan bagian tulang ikan (cause). Kepala ikan merupakan bagianeffect
atau hasil yang didapat oleh pengaruh dari penyebab yang ada pada bagian tulang ikan. Bagian tulang ikan berisikan kategori yang mempengaruhi atau menyebabkan(cause)suatu capaian dari suatu projek. Kategori yang paling sering digunakan adalah sebagai berikut.
1. Metode, kebutuhan yang spesifik dan bagaimana proses tersebut dilakukan.
2. Orang, yang terlibat pada proses tersebut.
3. Material, material yang diperlukan untuk menjalankan proses tersebut. 4. Mesin, semua mesin dan peralatan yang diperlukan untuk mengerjakan
proses tersebut.
5. Lingkungan, kondisi di sekitar tempat kerja seperti:weather.
Bahasan tersebut coba diimplementasikan dalam Web aplikasi profil
8
Gambar 2. 1Diagram Ishikawa (fishbone)
(Gambar : http://fishbonediagram.org/example-5-shorted-motor-coils/
Diagram Ishikawa terlihat seperti Gambar 2.1 dimana tedapat beberapa pilihan penyebab dari penelitian yang dipilih terbaik untuk menunjang, dan hasil yang dicapai.
2.2 WebGL
WebGL (Web Graphics Library) adalah API JavaScript untuk rendering
grafis 3D dan grafis 2D secara interaktif padabrowser webyang kompatibel tanpa menggunakan plugin. WebGL terintegrasi sepenuhnya ke semua browser web
standar yang memungkinkan penggunaan GPU untuk perhitungan fisika, pengolahan Gambar dan efek sebagai bagian dari halaman kanvas web. Elemen
WebGL dapat dicampur dengan elemen HTML lain dan dikombinasikan dengan bagian lain dari halaman atau halaman latar belakang. Program WebGLterdiri dari kode kontrol yang ditulis dalamJavaScriptdan kodeshaderyang dieksekusi pada sebuah komputer Graphics Processing Unit (GPU). WebGL dirancang dan dikelola oleh organisasi non-profit KhronosGroup(Tony, 2012).
9
beberapa kelebihan yang digunakan untuk membuat dunia tiga dimensi seperti bahasa mudah untuk dipahami, cepat dalam proses penerapa, fleksibel, dinamis, dan interaktif.
2.2.1 Rancangan dan Sejarah
WebGLdidasarkan padaOpenGLES 2.0 dan menyediakanwebAPI untuk grafis 3D untuk alasan keamanan, dibutuhkan GL_ARB_robustness (OpenGL 3.x) atau GL_EXT_robustness (OpenGL ES). Semua menggunakan elemen kanvas HTML5 dan diakses dengan menggunakan antar muka Document Object Model. Manajemen memori otomatis disediakan sebagai bagian dari bahasa
JavaScript (Tony, 2012).
WebGL berkembang dari eksperimen kanvas 3D yang diawali oleh
Vladimir Vukićević di Mozilla. Vukićević pertama menunjukkan prototipe 3D kanvas pada tahun 2006. Akhir tahun 2007, perusahaan Mozilla dan Opera telah mengimplementasika sendiri (Tony, 2012).
Awal 2009, konsorsium teknologi non-profit Khronos Group memulai kelompok kerja WebGL, dengan partisipasi awal dari Apple, Google, Mozilla, Opera, dan lain. Versi 1.0 dari spesifikasi WebGLdirilis Maret 2011. Pada Maret 2012, kelompok kerja tersebut dipimpin oleh Ken Russell. Aplikasi awal terkemuka WebGL termasukGoogle MapsdanZygote Body(Tony, 2012).
2.2.2 Definisi TeknisWebGL
WebGL dikembangkan dan dikelola oleh perusahaan Khronos Group, yang dimana merupakan badan yang mengatur OpenGLdan CALLADA.WebGL
menggunakan bahasa OpenGL shading, GLSL ES dan dapat dikombinasikan dengan bahasa web lain. WebGL berada dibawah konten 3D, hal tersebut cocok untuk web aplikasi yang dinamis ditambah dengan Bahasa Pemrograman
Javascriptdan terintergrasi dalam web browserterkemuka (Tony, 2012). Definisi
10
1. WebGLMerupakan API
WebGL diakses secara eksklusif melalui satu set antarmuka pemrograman
JavaScript, tidak ada tag yang menyertai seperti pada pemrograman HTML.
Rendering 3D di WebGL analog dengan Gambar 2D yang dimana berada pada elemen Canvas, semua dilakukan melalui panggilan API JavaScript. Akses ke
WebGL tersedia dengan menggunakan elemen Canvas yang ada dan memperoleh konteks spesialdrawingkhusus untukWebGL.
2. WebGLDidasarkan padaOpenGL ES 2.0
OpenGL ES merupakan adaptasi dari 3D render standar OpenGL. ES adalah singkatan dari "embedded system," yang berarti bahwa telah disesuaikan untuk digunakan dalam perangkat komputasi kecil, terutama ponsel dan tablet.
OpenGL ES adalah API yang berkekuatan grafis 3D untuk iPhone, iPad, dan ponsel Android dan tablet. Desainer WebGL merasa bahwa, dengan mendasarkan pada APIOpenGL ES skala kecil, memberikan pengalamancross-platform, lintas
browser3DwebAPI untukWeblebih tercapai.
3. WebGLTergabung dengan KontenWebLainnya
Lapisan WebGL berada di atas atau di bawah konten halaman lainnya. Kanvas 3D dapat mengambil hanya sebagian dari halaman, atau seluruh halaman. Haltersebutdapat diatur dalam pemrograman html dan css seperti tag<div>atau
z-index. Konten web dalam seperti mengembangkan grafis 3D dalam WebGL, tetapi semua elemen lain dibangun menggunakan bahasa HTMLseperti biasanya. Komposit browser (combines) dimana semua gambar pada halaman dapat memberikan pengalaman berbeda dalam melakukanbrowsingpadaweb.
4. WebGLBebas Royalti
Spesifikasiweb terbuka,WebGL bebas untuk digunakan. Tak seorang pun akan meminta untuk membayar royalti untuk mendapatkan hak istimewa. Pembuat Browser Chrome, Firefox, Safari, dan Opera telah berkomitmen pada sumber daya yang signifikan untuk mengembangkan dan mendukung WebGL
dalam menjelajah, dan para insinyur juga kunci dari kelompok kerja yang mengembangkan spesifikasi di WebGL. Proses spesifikasi WebGL tersebut
11
2.3 Three.jsJavascript3DEngine
WebGL adalah teknologi yang dirancang untuk bekerja secara langsung dengan GPU, hal tersebutsulit untuk menulis kode dibandingkan dengan standar
web yang lebih mudah diakses lainnya, itu sebabnya banyak pustaka javascript telah muncul untuk memecahkan masalah tersebut diantaranya: C3DL, CopperLicht, Curve3D, CubicVR, EnergizeGL, GammaJS, GLGE, GTW, JS3D, Kuda, O3D, OSG.JS, PhiloGL, Pre3D, SceneJS, SpiderGL, TDL, Three.js, X3DOM. Diantara pustaka di atas, per Juni 2013 Three.js adalah yang paling populer dalam hal jumlah pengguna. Library three.jsringan dan memiliki tingkat kompleksitas rendah dibandingkan dengan spesifikasi WebGL yang asli (Microsoft, 2015).
Library yang digunakan adalah Three.js. Three.js dikreasikan oleh Mr.doob dan a.k.a Ricardo Cabello Muguel, mereka adalah programmer yang berasal dari Barcelona Spanyol. Three.js dapat memberikan kemudahan untuk set intuitif objek yang biasanya ditemukan dalam grafis 3D. Three.js sangat cepat, mampu dimuat dengan perangkat grafis yang kecil dengan hasil yang besar, sangat kuat, dan dengan beberapabuilt-in jenis objek dan utilitas berguna Three.js
open source, host di GitHub, dan terawat dengan baik, dengan beberapa peneliti membantu Mr.doob dalam mengembangkan dan mempromosikannya.
2.3.1 Fitur There.js
Library Three.js memiliki fitur yang lebih untuk mendukung dalam pemrograman WebGL, berikut adalah beberapa fitur yang ditawarkan (Tony, 2012):
1. Three.jsTidak Memperlihatkan Proses Render 3D
Three.js memberikan output yang abstrak secara detail dari WebGL API, mampu mepresentasikan 3D scene seperti material, shading dan pencahayaan (biaya seorang programmer grafis bekerja dengan ini).
2. Three.jsadalah Orientasi Objek
12
3. Three.jsKaya Fitur
Lebih dari sekedar WebGL baku, Three.js mengandung banyak prebuilt object yang berguna untuk mengembangankan permainan, animasi, presentasi model resolusi tinggi dan efek khusus.
4. Three.jsCepat
Three.js memperkerjakan grafis 3D terbaik untuk mempertahankan hasil kinerja yang tinggi tanpa mengorbankan kegunaan.
5. Three.jsMendukung Interaksi Manusia dengan Komputer (IMK)
WebGL tidak memberikan dukungan untuk melakukan pendeteksian
mouse saat melintas kearah objek. Three.js memiliki dukungan terserbut sehingga mudah untuk menambahkan interaktivitas kewebaplikasi.
6. Three.jsDapat Melakukan Perhitungan Matematika
Three.js mendukung dan gampang digunakan objek untuk 3D matematika seperti matriks, proyeksi, danvector.
7. Three.jsMendukung Format File
Three.js dapat memuatfiledalam format teks yang diexportolehsoftware
pemodelan 3D dan juga Three.js lebih spesifik ke JSON dan binary
format.
8. Three.js Extensible
Three.js sangat mudah untuk menambahkan fitur dan kostumisasi, jika tidak ada tipe data yang dibutuhkan cukup dengan jangan ditulis atau dimasukkan ke program yang dibuat.
9. Three.jsBekerja dengan HTML5 dan 2DCanvas
Sepopulernya WebGL masih belum bisa berjalan dimana-mana. There.js
13
2.3.2 Simple Page
Berikut adalah kode program sederhana dalam penerapan There.js pada sebuah halamanweb. var renderer = new THREE.WebGLRenderer();
renderer.setSize(container.offsetWidth, container.offsetHeight); container.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45,
container.offsetWidth / container.offsetHeight, 1, 4000 ); camera.position.set( 0, 0, 3.3333 );
scene.add( camera );
var geometry = new THREE.PlaneGeometry(1, 1); var mesh = new THREE.Mesh( geometry,
new THREE.MeshBasicMaterial( ) );
Kode Program 2. 1Contoh Penerapan Three.js
(sumber: Tony, 2012 )
14
Gambar 2. 2Hasil Render Penerepan Sederhana Three.js
(sumber: Tony, 2012 )
Hasil render pada penerapan sederhana three.js terlihat pada Gambar 2.2 dimana canvas pad web sudah terbentuk dengan pembuatan model sederhana berupa kotak dan diberi background berwarna hitam. Hasil percobaan lain penerapakan three.js terlihat pada Gambar 2.3 yang dimana merupakan hasil
renderdenganLibraryyang sama dan konsep yang berbeda.
Gambar 2. 3Objek 3D Sederhana
(sumber: Tony, 2012 )
15 renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize(container.offsetWidth, container.offsetHeight); container.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45,
container.offsetWidth / container.offsetHeight, 1, 4000 ); camera.position.set( 0, 0, 3 );
var light = new THREE.DirectionalLight( 0xffffff, 1.5); light.position.set(0, 0, 1);
scene.add( light );
var mapUrl = "Gambar.jpeg";
var map = THREE.ImageUtils.loadTexture(mapUrl);
var material = new THREE.MeshPhongMaterial({ map: map }); var geometry = new THREE.CubeGeometry(1, 1, 1);
cube = new THREE.Mesh(geometry, material); cube.rotation.x = Math.PI / 5;
16 Click to animate the cube
</div> </body> </html>
Kode Program 2. 2Objek 3D Sederhana
(sumber: Tony, 2012 )
Bahasa pemrograman yang digunakan adalah javascript dan html, Kode Program 2.2 merupakan sebuah script yang akan menampilkan seperti Gambar 2.3. Kode program three.js dapat dibalut dengan bahasa pemrograman web lain, seperti contoh bahasa html atau php.
2.4 Interaksi
Media online, WebGL adalah tripod yang berdiri diatas tiga kaki seperti grafis, animasi dan interaksi. Interaksi tersebut adalah memberikan sebuah kontrol untuk mengatur objek pada halamanwebuntuk mengubah perilaku dalam adegan
WebGL. Perilaku lainnya juga bisa ditambah sebagai contoh dengan melakukan penarikan pada sebuah objek (drag and drop), menavigasi, dan memanipulasi
camera dan juga bisa diberikan interaksi lainnya dalam hal ini animasi untuk memperkaya interaktivitas dan merasa lebihorganic.
Cara yang dilakukan untuk interaksi dalam hal tersebut adalah mouse
dengan mendaftarkan mouse ke event handler untuk element document object model (DOM)dancontrol.
2.4.1 Dekteksi Hit,Picking, dan Proyeksi
17
digunakan pula untuk basis fisik, tumbukan, berikut medan dan lainnya. Session
tersebut akan dilakukan penelitian yang memilih untuk menerapkan deteksi benturan. Terjemahan 3D dalamWebGLadalah operasi 2D yang melukiskanpixel
dalam wilayah layar 2D. Pixel tersebut dihasilkan oleh shader, yang mana membawa input 2D dan 3D termasuk matriks proyeksi yang mengkonversi angka dalam ruang 3D ke ruang 2D, kemudian memproyeksikan Gambar 3D ke 2D
viewport(elemen DOM di jendelabrowser) seperti pada Gambar 2.4.
Gambar 2. 4Kamera,Viewportdan Proyeksi
(sumber: Tony, 2012)
Pendeteksi benturan dari objek 3D dalam adegan membalikkan proses memproyeksikan Gambar 3D ke permukaan 2D. Pertama, koordinat mouse
18
2.5 Integrasi
3D Grafis telah ada sejak waktu yang lama, bahkan 3D grafis dalam
browser web telah ada beberapa waktu yang lalu. Percobaan awal denganVirtual Reality Modeling language (VRML) dengan kerjasama antara perusahaan ditemukan solusi baru bebasis plugin, seperti disatukan dengan player dan adobe flash 3D. Teknologi tersebut secara tradisional menderita dan terjebak dalam persegi panjang tetap disuatu tempat didalam halaman, tanpa harapan melintasi batas itu, denganWebGLpembatasan itu tidak ada lagi.
2.5.1 Kombinasi DinamisHTMLdanWebGL
Browsermemperlakukan kanvasWebGLseperti elemen lain pada halaman
web browser. Membangun canvas 2D yang berdiri diatas produk berbasisWebGL
interaktif, tidak ada masalah hanya denganpop up DIV. Cara menanamkan sebuah objek 3D animasi diatas teks pada halamanweb browser, dapat dilakukan dengan menaruh kanvas WebGL yang transparan, teks yang dimasukkan akan muncul pada belakang kanvas dengan kata lain menggunakan HTML dinamis dengan
WebGLsemudah menggunakan elemen halaman.
2.5.2 Anotasi Layar 3D Menggunakan Posisi Layar 2D
Pembuatan tampilanheads upuntuk aplikasi 3D, sering digunakan elemen 2D overlay untuk menghubungkan dengan objek 3D yang disajikan dengan baik secara langsung, atau dekat dengan panah atau grafis yang lain. Kode Program 2.3 menunjukkan Shipster.getObjectScreenPosition(). Metode tersebut digunakan untuk menentukan mana objek 3D muncul di jendela 2D.
Shipster.prototype.getObjectScreenPosition = function(object) {
var mat = object.object3D.matrixWorld; var pos = new THREE.Vector3();
pos = mat.multiplyVector3(pos); projected = pos.clone();
this.projector.projectVector(projected, this.camera);
19
eltx += offset.left; elty += offset.top;
return { x : eltx, y : elty }; }
Kode Program 2.3Anotasi Layar 3D Menggunakan Posisi Layar 2D
(sumber: Tony, 2012 )
2.6 Perangkat Lunak yang Digunakan
Selain bahasa pemrograman yang digunakan, terdapat juga perangkat lunak sebagai front-end dari web aplikasi salah satunya sebagai UX-Design dan 3DCanvas. Berikut adalah perangkat lunak yang digunakan.
2.6.1 Autodesk Maya 2016 Student Version
AutoDesk Maya adalah sebuah perangkat lunak grafik komputer 3D dibuat olehAlias Systems Corporation(Diakuisisi oleh Autodesk, Inc. pada tahun 2006). Maya digunakan dalam industri film dan TV, dan juga untuk permainan video
komputer. Maya digunakan dalam pembuatan animasi Upin Ipin. Kelebihan dari program tersebut adalah proses pembuatan Animasi yang relatif lebih mudah dibandingkan perangkat 3D yang lain.
Gambar 2. 5Autodesk Maya 2016 Student Version
20
Autodesk Maya adalah software 3D yang populer dan terbaik pada masa kini, baik untuk modeling maupun animasi khususnya character modeling dan
character animation. Kepopuleran software Maya dapat membuat kalangan desainer 3D bahkan Holywood menggunakannya dalam membuat karya, baik untuk pembuatan video clip, film animasi seperti Finding Nemo, film pendek hingga karya besar berupa film kolosal semacam Lord Of The Ring. Alias Wavefront, pengembang software Maya, menerima penghargaan berupa piala Oscar untuk film tersebut. Banyak kalangan yang mengakui bahwa Gambar model yang dihasilkan begitu halus dan nyata serta animasinya sangat halus.
Maya sudah pasti memiliki keunggulan dibandingkan dengan software
