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