REAL-TIME WEB 3D MAKET PERUMAHAN BERBASIS TEKNOLOGI WEBGL

B24

Seminar Nasional Teknologi Informasi 2012

REAL-TIME WEB 3D MAKET PERUMAHAN BERBASIS TEKNOLOGI WEBGL Fajar Antariksa Perdana 1) Bentar Priyopradono 2) Hendry 3) 1)

Teknik Informatika, Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Jl. Diponegoro 52-60, Salatiga 50711 Jawa Tengah - Indonesia email : [email protected] 2)

Magister Sistem Informasi, Universitas Kristen Satya Wacana Jl. Diponegoro 52-60, Salatiga 50711 Jawa Tengah - Indonesia email : [email protected]

3)

Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Jl. Diponegoro 52-60, Salatiga 50711 Jawa Tengah - Indonesia email : [email protected]

dibangun terlihat secara keseluruhan, dengan penggunaan maket, konsumen bisa melihat dan merasakan bentuk dan desain maket tersebut, selain itu kita juga bisa melihat bahan dan material yang nantinya bisa digunakan dalam pembuatan bangunan/rumah, dalam dunia arsitektur maket/miniatur merupakan refleksi dan model 3 dimensi dari sebuah rancangan baik itu rumah, gedung, dan bangunan yang dibuat dengan skala tertentu (1:100, 1:200, 1:400…) untuk menggambarkan bentuk dan ruang yang telah di rancang sebelumnya, maket bisa berupa maket rumah, maket gedung, maket bandara, maket stasiun, dan bahkan bentuk yang lebih detail seperti pohon, orang, mobil dan lainya, bagi para konsumen dengan adanya maket/miniature ini, lebih muda membayangkan hasil rancangan bangunan sehingga dapat menilai secara visualisasi dari perwujudan dan rancang bangun dari perumahan tersebut. Berkembangnya teknologi Web 3D kususnya perkembangan teknologi WebGL dapat memberikan solusi terbaik yang dapat diadopsi oleh para pengembang perumahan dalam membangun maket perumahan bebasis WebGL. Teknologi WebGL (Webbased Graphics Library) merupakan Platform Application Programming Interfaces (APIs) library grafis 3D yang memungkinkan browser internet untuk membuat adegan 3D, memiliki pendekatan client-based rendering dimana unsur-unsur yang membuat bagian dari adegan (scene) 3D biasanya download dari server, namun semua proses yang diperlukan untuk mendapatkan gambar dilakukan secara lokal menggunakan hardware grafis klien[5]. Pengembang perumahan dapat mengadopsi menggunakan teknologi ini, bertujuan mengenalkan produk mereka sehingga konsumen (user) dapat melihat maket perumahan yang disajikan

ABSTRACT Development of 3D Web technology, specially the development of the WebGL technology can provide the best solution that can be adopted by developers to build residential housing maket based on WebGL. Technology WebGL (Web-based Graphics Library) is a Platform Application Programming Interfaces (APIs) 3D graphics library that allows Internet browsers to create 3D scenes. House developers can adopt these technologies, aims to introduce their products to consumers (users). Consumer can view the housing maket presented in 3D in real-time via a web browser. Consumers are permitted to access the information, and stimulates curiosity and interest of consumers.

Key words Web 3D, Interfaces(APIs)

WebGL,

Application

Programming

1. Pendahuluan Kebutuhan akan tempat tinggal atau perumahan semakin meningkat setiap tahunnya, saat ini pemasaran perumahan yang dilakukan oleh pengembang perumahan masih sebatas menggunakan media cetak, media elektronik dan penggunaan maket sebagai sarana untuk mempromosikan perumahan yang akan dipasarkan. Penggunaan maket/miniatur cukup popular di kalangan pengembang perumahan atau dunia arsitektur, maket saat ini merupakan cara yang efektif untuk mengenalkan kepada konsumen gambaran rumah/bangunan yang akan

171

B24


dalam bentuk 3D secara real-time melalui web browser, konsumen lebih dimudahkan untuk mengakses informasi, lebih muda membayangkan hasil rancangan bangunan sehingga dapat menilai secara visualisasi bangunan yang ditawarkan serta menstimulasi rasa keingintahuan dan ketertarikan konsumen (user).

dapat menambahkan animasi. Listing 1 adalah contoh penggunaan elemen canvas pada HTML5. HTML5 Canvas Demo <style type="text/css"> canvas { border: 2px dotted blue; }

2. HTML5 Canvas Konsep canvas awalnya diperkenalkan oleh Apple untuk digunakan di Mac OS X WebKit untuk membuat dashboard widgets, konsep canvas kemudian diadopsi oleh beberapa perusahaan dan distandarisasi oleh WHATWG (Web Hypertext Application Technology Working Group) dikembangkan untuk teknologi web generasi berikutnya[1]. Canvas pada dasarnya adalah sebuah bidang di dalam browser dengan lebar dan tinggi yang bisa digunakan sesuai kebutuhan, dapat diakses oleh Kode JavaScript (drawing functions) memungkinkan menghasilkan gambar grafis yang dinamis[4]. HTML5 Canvas API meliputi konteks 2D dan 3D yang memungkinkan programmer untuk menggambar berbagai bentuk seperti memberi warna, rotasi, transparansi alpha, garis, kurva, menambah bentuk render teks, dan gambar yang bisa ditempatkan (images) ke dalam canvas dan menampilkan gambar langsung ke area tertentu dari jendela browser[6], canvas juga dapat digunakan untuk rendering grafik seperti permainan grafis, atau gambar visual lainnya dengan cepat, bentuk geometris, membuat gradasi warna, dan menerapkan transformasi geometris[7]. Sebelum kehadiran elemen canvas, Application Programming Interfaces (API) dalam bentuk plug-in seperti Flash, Scalable Vector Graphics (SVG), Vector Markup Language (VML) biasa digunakan untuk menggambar atau menampilkan content 2D di web browser[1]. Hampir semua browser menyediakan dukungan untuk HTML5 canvas kecuali Internet Explorer, seperti yang ditunjukkan pada Tabel 1 HTML5 Canvas telah didukung banyak browser diantaranya[1].

Listing 1 Elemen Canvas

3. WebGL WebGL singkatan dari (Web-based Graphics Library) merupakan Platform Application Programming Interfaces (APIs) library grafis 3D yang memungkinkan browser internet untuk membuat adegan 3D dengan cara sederhana dan efisien[5]. WebGL pertama kali diperkenalkan oleh Vladimir Vukicevic seorang software engineer pada tahun 2007, dan pada tahun 2009 WebGL dijadikan standar web yang mulai dikembangkan oleh Khronos Group bersama Opera, dan mulai diikuti oleh Google (Chrome), Mozilla (Firefox), Apple (Safari), dan 3D developers lainnya[5]. WebGL memiliki pendekatan client-based rendering dimana unsur-unsur yang membuat bagian dari adegan (scene) 3D biasanya download dari server, namun semua proses yang diperlukan untuk mendapatkan gambar dilakukan secara lokal menggunakan hardware grafis klien. WebGL dikembangkan bertujuan untuk menjawab permasalahan sebagian besar aplikasi web 3D yang tersedia memerlukan dan memanfaatkan plug-in seperti flash, Silverlight, Java 3D atau software tambahan untuk dapat menjalankan content 3D pada web browsers, menjawab permasalahan tersebut teknologi WebGL menyediakan grafis untuk web browsers tanpa memerlukan plug-in. WebGL dirancang untuk web yang dikembangkan/berbasiskan dari OpenGL ES 2.0, dirancang sebagai konteks render pada elemen canvas HTML5[10]. Gambar 1 merupakan gambaran komponen dalam WebGL.

Tabel 1 Browser Yang Mendukung HTML5 Canvas

No 1 2 3 4 5

Browser Google Chrome Mozilla Firefox Internet Explorer Opera Safari

Keterangan Didukung mulai dari versi 1.0 keatas Didukung mulai dari versi 1.5 keatas Tidak didukung Didukung mulai dari versi 9.0 keatas Didukung mulai dari versi 1.3 keatas

Elemen canvas dapat ditambahkan dengan menggunakan listing dan dapat menggunakan JavaScript untuk memanipulasi canvas seperti menambahkan graphics, lines, text video bahkan

172

B24


keuntungan lain adalah adanya parser XML hampir disetiap bahasa pemrograman dan platform apapun dan membuat file (Collada) dengan mudah diakses untuk aplikasi apapun, maka pengembang dapat membuat alat yang powerfull dan memungkinkan kombinasi dari beberapa paket perangkat lunak dan menggunakan teknologi yang dikenal saat ini. Format collada memungkinkan transport data (perantara) dari satu aplikasi ke aplikasi lainya untuk pembuatan konten digital. Ada banyak aplikasi komersial yang mendukung penggunaan format ini diantaranya Maya (ColladaMaya), 3DsMax (ColladaMax), Poser (v.7.0), Lightwave 3D (v.9.5), Cinema 4D (Maxon) dan beberapa aplikasi open-source populer seperti Google SketchUp, Blender dan GLGE. Tujuan utama dari format ini adalah penyajian model 3D yang kompleks dengan cara memungkinkan komunikasi antara alat (tools) dan aplikasi serta beradaptasi dengan platform yang berbeda-beda, format file (Collada) biasanya diidentifikasi dengan ekstensi (.dae), Collada cocok untuk konten Web 3D interaktif atau aplikasi bisnis yang membutuhkan transfer data 3D secara real time, format collada[3] sangat kompatibel dengan Google Earth dan didukung dalam banyak aplikasi Web seperti iklan online, game komputer, dunia maya (virtual reality), jaringan sosial (social media), sistem informasi geografis (GIS) dan lainya.

Gambar 1 Komponen WebGL

Dibandingkan dengan beberapa teknologi seperti Flash, Silverlight, Java 3D dan Web Player Plug-in lainnya WebGL memiliki beberapa kelebihan diantaranya[5]: 1. WebGL diprogram dalam JavaScript-Programming, ini mudahkan untuk mengintegrasikan aplikasi WebGL dengan JavaScript library lainnya seperti JQuery dan teknologi HTML5 lainnya. 2. Tidak seperti OpenGL dan teknologi lainnya di mana ada operasi khusus untuk mengalokasikan dan deallocate memori secara manual, tidak seperti WebGL yang melakukan scoping variabel dalam JavaScript dan memori secara otomatis deallocated ketika tidak lagi diperlukan (automatic memory management), sehingga menyederhanakan pemrograman, mengurangi kode yang dibutuhkan dan mudah dimengerti. 3. WebGL dapat di implementasikan pada platform Android. 4. Kinerja aplikasi WebGL sebanding dengan aplikasi standalone yang setara karena kemampuan WebGL untuk mengakses hardware grafis lokal.

5. Copperlicht API CopperLicht merupakan library JavaScript / API untuk membuat game dan aplikasi 3D interaktif menggunakan WebGL yang dapat berjalan di web browser, tujuan library JavaScript / 3D engine ini untuk memudahkan mengembangkan konten 3D di web[8], membedakan Copperlicht berbeda dari library / 3D engine lainnya adalah copperlicht dikembangkan untuk digunakan dengan editor 3D CopperCube, meskipun copperlicht bebas digunakan namun Coppercube berada di bawah lisensi komersial yang dikembangkan oleh Ambiera, Ambiera adalah sebuah perusahaan pengembangan game independen yang menyediakan jasa pengembangan komersial dan alat (tools) untuk menyederhanakan pengembangan perangkat lunak multimedia dan game. CopperCube digunakan untuk mengkompilasi content 3D ke dalam sebuah file binary yang berukuran kecil, format file 3D yang didukung diantaranya 3ds, obj, x, lwo, b3d, csm, dae (collada), dmf, oct, irrmesh, ms3d, My3D, mesh, lmts, bsp, md2, dan stl. CopperCube dapat mempublikasikan since 3D atau content 3D menjadi file Flash atau WebGL yang siap dijalankan di web browser[9].

4. Collada Collada (Collaborative Design Activity) merupakan standar terbuka, format ini mendefinisikan skema XML yang memungkinkan presentasi data 3D, Collada dirancang dan dikembangkan oleh Kronos Group. Collada merupakan standar terbuka (royalty-free) berdasarkan pada teknologi XML standar, penggunaan format ini telah banyak diadopsi seperti Google Earth, web 3D engines seperti Papervision3D, Google O3D dan Google 3D warehouse[3]. Keuntungan dari format (Collada) ini berasal dari teknologi XML, karena XML menyediakan kerangka kerja yang jelas seperti karaketer set: ASCII, Unicode, Shift-JIS sudah dicakup dalam standar XML, jadi ketika pengguna membuat beberapa skema data menggunakan teknologi XML berdampak pada peningkatan interoperabilitas, contoh skema XML memungkinkan untuk teknologi yang cukup mudah dimengerti tanpa menggunakan dokumentasinya,

173

B24


Maket perumahana yang dikembangkan menggunakan pendekatan berbasis WebGL, dengan tujuan pengembang perumahan dapat menggunakan teknologi ini untuk mengenalkan produk mereka sehingga konsumen dapat melihat maket perumahan yang disajikan dalam bentuk web 3D secara real-time, konsumen lebih mudah untuk mengakses informasi seperti fasilitas yang ditawarkan oleh pengembang perumahan dengan mengeksplorasi dan berinteraksi dengan sistem hanya menggunakan alat masukan (input) berupa keyboard dan mouse, dengan pendekatan client-based rendering semua proses yang diperlukan untuk mendapatkan content 3D dilakukan secara lokal menggunakan hardware grafis dari sisi client ini memudahkan mengakses sistem maket perumahan secara real-time. Gambar 3 merupakan arsitektur dari sistem maket perumahan berbasis WebGL

7. Hasil dan Pembahasan 7.1 Integrasi WebGL Content 3D (objek maket perumahan) dibangun menggunakan tool 3ds Max yang kemudian di export menggunakan type file collada (.dae), file hasil export dari 3ds Max kemudian di import menggunakan tool CopperCube, agar content 3D dapat berjalan di webbrowser maka perlu di publish menggunakan CopperCube dengan type publish (.html), maka pada file content 3D yang telah berhasil di export akan memiliki type data (.ccbjs) dan secara otomatis ditambahkan dengan JavaScript Library (copperlich.js) yang merupakan Copperlicht API. Proses exports file content 3D dapat dilihat pada Gambar 2.

Gambar 2 Proses Export File Content 3D (Objek Maket Perumahan) Gambar 3 Integrasi Sistem Maket Perumahan Berbasis WebGL

Listing 2 merupakan hasil publish file content 3D (.html) yang dihasilkan dari coppercube yang dapat dilihat pada listing berikut.

7.2 Implementasi Maket Perumahan Sistem maket perumahan diimplementasikan menggunakan teknologi WebGL hasil rendering content 3D maket perumahan dapat diakses oleh konsumen menggunakan web browser, konsumen (user) dapat menggunakan keyboard dan mouse untuk merubah posisi view maket perumahan, dengan model pengembangan sistem maket perumahan berbasis WebGL, konsumen dapat dengan mudah memperoleh informasi seperti model, struktur dan desain interior dari rumah yang mereka butuhkan, sebelum konsumen benar-benar meilhat bangunan rumah secara fisik. Hasil visualisasi rendering maket perumahan dapat dilihat pada Gambar 4 5 6 7.

WebGL Rumah <script type="text/javascript" src="copperlichtdata/copperlicht.js">

<script type="text/javascript">

Listing 2 Hasil publish file Content 3D .html

174

B24


Gambar 4 Visualisasi Maket Rumah 3D Tampak Depan (MaketModel1)

Gambar 7 Visualisasi Maket Rumah 3D Tampak samping (MaketModel2)

Sistem maket perumahan tidak hanya sebatas model maket perumahan yang terlihat dari sisi luar bangunan rumah secara 3D, namun konsumen dapat mengakses informasi seperti fasilitas dan interior yang terdapat di dalam maket rumah seperti kursi, meja, ruang dapur, ruang tamu, kamar tidur dan fasilitas penunjang lainya sesuai dengan paket rumah/pangunan yang ditawarkan oleh pengembang perumahan.

Gambar 5 Visualisasi Maket Rumah 3D Tampak Samping (MaketModel1)

Gambar 8 Visualisasi Maket Rumah 3D Tampak Dari Dalam

10. Kesimpulan Teknologi WebGL dapat diadopsi oleh para pengembang perumahan dalam membangun maket perumahan bebasis WebGL, bertujuan untuk mengenalkan produk mereka sehingga konsumen (user) dapat melihat

Gambar 6 Visualisasi Maket Rumah 3D Tampak Depan (MaketModel2)

175

B24


Bentar Priyopradono, memperoleh gelar S.Kom dari Universitas Kristen Satya Wacana (UKSW) tahun 2009, saat ini menempuh pendidikan Magister Sistem Informasi (MSI) di Universitas Kristen Satya Wacana (UKSW), Salatiga - Jawa Tengah.

maket perumahan yang disajikan dalam bentuk 3D secara real-time melalui web browser, cara ini efektif untuk mengenalkan kepada konsumen gambaran rumah, bangunan atau gedung terlihat secara keseluruhan, dengan penggunaan sistem maket perumahan bebasis WebGL, konsumen bisa melihat dan merasakan bentuk dan desain maket tersebut secara visual 3D, selain itu konsumen juga bisa melihat bahan dan material yang nantinya bisa digunakan dalam pembuatan bangunan/rumah, konsumen dimudahkan untuk mengakses informasi, konsumen lebih mudah membayangkan hasil rancangan rumah/bangunan sehingga dapat menilai secara visualisasi bangunan yang ditawarkan serta menstimulasi rasa keingintahuan dan ketertarikan konsumen.

Hendry, memperoleh gelas S.Kom dari Sekolah Tinggi Teknik Surabaya (STTS) dan M.Kom dari Institut Teknologi Sepuluh Nopember (ITS) Surabaya. Saat ini sebagai Staf Pengajar Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana (UKSW), Salatiga - Jawa Tengah.

REFERENSI [1] Lubbers, Peter., Albers, Brian., Salim, Frank., 2010, “Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development”, Springer Science - Business Media USA. [2] Grupp, Jonathan., April 2012, “State of the Art: WebGL and other Technologies for hardware accelerated 3D in Browsers”. [3] Barnes, Mark., Finch, Ellen., Maret 2008, "COLLADA: Digital Asset Schema Release", Sony Computer Entertainment Inc. [4] Mansfield, Devine., 2010, “Divide And Conquer: The Threats Posed By Hybrid Apps And HTML5”, J Netw Security:4–6. [5] Cantor, Diego., Jones, Brandon., 2012, “WebGL Beginner's Guide:Become a master of 3D web programming in WebGL and JavaScript”,Birmingham-Mumbai, ISBN 978-1-84969172-7. [6] Fulton, Steve., and F, Jeff., Mei 2011, “HTML5 Canvas: Native Interactivity and Animation for the Web”, O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. [7] Bottaro, Antonio., Marino, Enrico., 2011, ”Visual Programming of Location-Based Services”, Springer-Verlag Berlin Heidelberg. [8] Hrachovy, David., 2012, "Faster Webgl Graphics", Faculty Of Informatics-Masaryk University. [9] Anttonen, Matti., Salminen, Arto., "Building 3D WebGL Applications", Tampere University of TechnologyDepartment of Software Systems,ISBN 978-952-15-2623-7. [10] Jorgensen N,Morten., Maret 2012, "WebGL based 3D Game Engine",IT University of Copenhagen, http://blog.nobeljoergensen.com/2012/03/30/webgl.

Fajar Antariksa Perdana, saat ini masih menempuh pendidikan pada Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana (UKSW), Salatiga Jawa Tengah.

176

REAL-TIME WEB 3D MAKET PERUMAHAN BERBASIS TEKNOLOGI WEBGL

Recommend Documents