Teknologi WebGL HTML5 Penelitian Terdahulu

11

2.6. Relevansi Steepest Ascent Hill Climbing Algorithm Pada Pola Penyusunan

Barang Algoritma Steepest Ascent Hill Climbing digunakan untuk menyelesaikan permasalahan tata letak penyusunan barang pada ruang tiga dimensi dengan tujuan mendapatkan pola penyusunan barang yang terbaik. Parameter optimal atau tidaknya penyusunan barang pada gudang diukur berdasarkan sisa ruang kosong yang tersisa ketika masih terdapat barang yang tidak dapat lagi dimuatdimasukkan dalam ruangan tersebut. Semakin sedikit ruang kosong yang terdapat pada suatu pola penyusunan barang maka pola penyusunan tersebut merupakan solusi terbaik. Pada proses penyusunan barang pada gudang 3D tiga dimensi, salah satu parameter yang menentukan pola penyusunan barang adalah berat barang. Barang yang memiliki berat paling besar akan disusun pertama, kemudian diikuti dengan barang yang memiliki berat lebih kecil dari barang sebelumnya tersebut.

2.7. Teknologi WebGL

Beberapa teknologi selain WebGL yang dapat membangun objek 3D tiga dimensi, yaitu: Unity 3D, Flash Stage 3D, Silverlight 3D, Direct 3D, OpenGL dan OpenGL ES Boesch, F. 2013. Kelebihan dari WebGL yaitu WebGL dapat berjalan di banyak browser, seperti: Chrome, Firefox, Safari dan Opera. Selain itu untuk dapat membangun sebuah objek 3D tiga dimensi pada WebGL, user tidak perlu menginstal plug-in terlebih dahulu. Teknologi WebGL berawal dari pengembangan OpenGL ES 2.0. Beberapa contoh pengembangan OpenGL antara lain berbasis web, real-time rendering yang memungkinkan pembuatan tiga dimensi 3D di web, visualisasi scientific dan medical imaging. Pembuatan rendering grafik komputer pada WebGL dapat dibuat dengan hanya menggunakan javascript, web browser, serta HTML5 canvas. WebGL merupakan library grafis yang merupakan standar untuk grafik tiga dimensi 3D di web browser yang memungkinkan browser untuk membuat adegan tiga dimensi 3D. Elemen yang menyusun bagian dari adegan tiga dimensi 3D didownload dari server, akan tetapi semua proses untuk mendapatkan gambar dilakukan secara lokal menggunakan hardware grafis client. Beberapa komponen aplikasi WebGL yaitu Wicaksono, 2012: Universitas Sumatera Utara 12 - Canvas : tempat komponen objek yang akan diletakkan dan merupakan elemen standar HTML5 yang dapat diakses menggunakan Document Object Model DOM melalui JavaScript. - Object : entitas 3D yang membentuk bagian dari adegan itu. - Lights : pencahayaan dalam 3D. - Camera : berfungsi sebagai viewport untuk melihat dan mengeksplorasi adegan 3D dalam canvas Menurut Demeuse, J. 2013, dalam WebGL terdapat : mesh, camera, dan lighting.

2.8. HTML5

HTML5 adalah iterasi dari HTMLHyperText Markup Language. HTML pertama kali distandarisasi tahun 1993 dan digunakan pada World Wide Web. HTML digunakan untuk menentukan isi dari suatu halaman web dengan menggunakan tag “ ”. HTML5 Canvas adalah sebuah area bitmap pada layar yang dapat dimanipulasi menggunakan JavaScript dengan cara me-render pixel pada canvas di layar. Dasar HTML5 Canvas API Application Program Interface mencakup konteks 2D dua dimensi yang memungkinkan programmer menggambar berbagai bentuk, text render, dan menampilkan gambar langsung ke area tertentu dari jendela browser serta dapat menerapkan warna, rotasi, transparansi alpha, manipulasi pixel dan berbagai jenis garis, kurva, dan kotak untuk mendapatkan bentuk, teks dan gambar yang ditempatkan ke canvas Fulton, S Fulton, J. 2011.

2.9. JavaScript

JavaScript pertama kali muncul pada tahun 1995. Tujuan utamanya adalah untuk menangani beberapa validasi input yang sebelumnya pernah diserahkan kepada bahasa server-side seperti Pearl. Pada saat itu sebuah round-trip ke server diperlukan untuk menentukan apakah sebuah field yang diperlukan memang berisi kosong atau nilai yang dimasukkan ke dalam field tidak valid. Netscape Navigator berusaha untuk mengubahnya dengan pengenalan JavaSript. Kemampuan untuk mengatasi beberapa validasi dasar pada client merupakan fitur baru yang menarik pada saat penggunaan modem telepon telah meluas. Sejak saat itu JavaScript berkembang menjadi sebuah fitur yang penting dari setiap web browser di market. Tidak hanya terikat untuk Universitas Sumatera Utara 13 validasi data sederhana, JavaScript saat ini telah berinteraksi dengan hampir semua window browser dan isinya Zakas, N.C. 2012.

2.9.1. Library

Beberapa library yang dapat digunakan pada WebGL yaitu : O3D, GLGE, Three.js, Curve3D, CubicVR, CopperLicht, Kuda, OSGJS, PhiloGL, SceneJS, SpiderGL dan TDL Diggins, C. 2011. Dari antara beberapa library tersebut, penulis memilih untuk menggunakan Three.js. Three.js adalah sebuah library JavaScript API Application Program Interface yang digunakan untuk membuat dan menampilkan animasi komputer grafis tiga dimensi 3D pada sebuah web browser. Skrip Three.js dapat digunakan bersama dengan HTML5 canvas, SVG atau WebGL.

2.10. Penelitian Terdahulu

Beberapa penelitian terdahulu tentang penyusunan barang, yaitu dapat dilihat pada tabel 2.1. Tabel 2.1. Penelitian Terdahulu Peneliti Tahun Judul Penelitian Keterangan Gunadi, K., Julistiono, I.K. Hariyanto, B. 2003 Optimasi Pola Penyusunan Barang dalam Ruang Tiga Dimensi menggunakan Metode Genetic Algorithms  bertujuan untuk mendapatkan solusi yang optimal pada pola penyusunan barang dalam kontainer dengan input spesifikasi ruang dan barang serta probabilitas ketiga operator algoritma genetik operator reproduksi, pindah silang dan mutasi.  Dalam penelitian ini suatu pola dikatakan optimal ketika semakin sedikit ruang kosong yang tersisa. Universitas Sumatera Utara 14 Tabel 2.1. Penelitian Terdahulu lanjutan Peneliti Tahun Judul Penelitian Keterangan Putmawa, F. Santosa, B. 2011 Pengembangan Algoritma Bee Swarm Optimization untuk Penyelesaian Container Stowage Problem  menyelesaikan masalah penyusunan kontainer dalam kapal dengan aturan penyusunan: kontainer yang berat diletakkan di bawah kontainer yang ringan dan penyusunan kontainer harus sesuai sama tipe dan ukurannnya dengan mempertimbangkan keseimbangan kapal.  penelitian ini menghasilkan waktu pembongkaran penyusunan ulang barang yang lebih minimum. Angga, C. Munir, R. 2012 Pengembangan Algoritma Greedy untuk Optimalisasi Penataan Peti Kemas pada Kapal Pengangkut  membantu pembuatan stowage plan atau penataan peti kemas pada suatu kapal pengangkut didasari algoritma greedy agar proses bongkar muat dapat dilakukan dengan efisien serta tidak mengganggu stabilitas kapal pengangkut. Data yang digunakan merupakan berat dan ukuran standard peti kemas sesuai dengan stardard ISO International Organization for Standarization.  output dari aplikasi ini akan menampilkan tabel data letak barang serta tujuan barang yang akan dikirim. Universitas Sumatera Utara 15 Tabel 2.1. Penelitian Terdahulu lanjutan Peneliti Tahun Judul Penelitian Keterangan Hambali, A. 2011 Sistem Alokasi Penyimpanan Barang Pada Gudang  membuat sebuah sistem yang dapat mengalokasikan urutan barang yang masuk ke dalam gudang secara optimal sehingga dapat menghemat ruang dengan menggunakan algoritma semut.  menggunakan parameter panjang, lebar, tinggi serta panjang line gudang. Hasil dari penelitian tersebut berupa blok diagram dengan nilai β = 2 performa hasil yang terbaik dan nilai β = 0,5 performa hasil paling buruk. Lim, R., Gunadi, K Gang, O.W. 2004 Optimasi Pengambilan dan Penataan Ulang Barang di Gudang dengan Penerapan Stack menggunakan Metode Genetic Algorithm  membuat aplikasi untuk menampilkan tata letak barang yang disimpan dalam palet-palet pada rak di gudang secara 2 dimensi dan 3 dimensi dengan menggunakan OpenGL serta algoritma genetik.  parameter yang digunakan yaitu batas minimum dan maksimum ukuran gudang, ukuran dan jumlah rak, ukuran dan jumlah palet serta ukuran barang. Hasil uji penelitian tersebut menunjukkan nilai rata-rata fitness cost diatas 90. Universitas Sumatera Utara 16 Tabel 2.1. Penelitian Terdahulu lanjutan Peneliti Tahun Judul Penelitian Keterangan Henry 2011 Penerapan Teknologi WebGL pada Virtual Aquarium Berbasis Tiga Dimensi 3D  membuat web penjualan ikan yang dibuat dalam objek 3D dengan memanfaatkan animasi.  dalam pembuatan aplikasi ini penulis menggunaan HTML5 dan WebGL. Hasil dari penelitian ini yaitu menampilkan gambar serta bentuk ikan 3D serta dapat menampilkan format audio dan video pada halaman web tanpa menggunakan plug-in. Suhardi, D., et al 2012 Pembuatan Simulasi Pergerakan Objek 3D Tiga Dimensi Menggunakan OpenGL.  membuat sebuah simulasi pergerakan objek 3D tiga dimensi menggunakan OpenGL yang di compile menggunakan C++.  hasil dari aplikasi ini berupa simulasi pesawat terbang. Universitas Sumatera Utara

BAB 3 ANALISIS DAN PERANCANGAN SISTEM

3.1. Perancangan Objek 3D Tiga Dimensi

Pada perancangan objek 3D tiga dimensi dengan WebGL, library Three.js menggunakan sistem koordinat tangan kanan. Gambar 3.1. Sistem Koordinat Pada gambar 3.1, layar komputer bertepatan dengan bidang xy dan berpusat di titik asal 0, 0, 0. Sumbu z merupakan poin positif dari layar terhadap mata pengamat. Universitas Sumatera Utara