Menggambar Grafik 3D pada Aplikasi Tizen Menggunakan Library BabylonJS
Toni Haryanto 16 Agustus 2016
HTML5 dengan WebGLnya digadang-gadang akan menjadi masa depan bagi teknologi game 3D. Tidak hanya game, semua aplikasi berbasis 3D dapat kita buat dengan memanfaatkan WebGL API ini. WebGL memungkinkan kita untuk merender model 3D pada browser hingga membuat animasi, texturing, dan operasi berat lainnya terkait pencitraan 3D.
Namun bagi pemula memang WebGL API cukup sulit untuk dipelajari karena berbagai konfigurasi yang tidak sederhana. Oleh karena itu muncullah vendor dan developer yang membangun library JavaScript untuk memudahkan proses penulisan program yang memanfaatkan API WebGL ini, diantaranya adalah ThreeJS dan BabylonJS. Pada tutorial ini akan dibahas gambaran penggunaan library BabylonJS untuk membuat beberapa model 3D. Tutorial ini juga akan menunjukkan kehandalan Tizen OS yang mendukung penuh pembangunan aplikasi berbasis web. Beberapa poin yang akan dibahas diantaranya membuat scene, menggambar beberapa model 3D sederhana, dan menampilkannya pada emulator Tizen.
Persiapan
Buka Tizen IDE dan buat project baru dengan mengklik menu File > New > Tizen Web Project. Pada tab Template, pilih tipe Basic.Buka file index.html dan hapus semua elemen yang ada di dalam tag <body>, kemudian masukkan kode html berikut:
<canvas id="renderCanvas"></canvas>
Tag canvas di atas adalah tempat kita merender objek 3D kita pada aplikasi.
Buka file css/style.css, ganti semua css yang ada di dalam file tersebut dengan css berikut:
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
CSS di atas digunakan agar canvas kita memenuhi halaman layar aplikasi.
Kemudian tambahkan script berikut sebelum pemanggilan main.js di dalam tag <head>:
<script src="http://cdn.babylonjs.com/2-4/babylon.js"></script>
File script di atas adalah library Babylon. Kita dapat menyimpan source tersebut ke dalam folder js dan memanggilnya sebagai resource lokal aplikasi sehingga tidak perlu terkoneksi internet untuk menjalankan aplikasi.
Kode JavaScript Dasar
Sekarang jika Kamu menemukan script main.js disimpan di dalam tag <head>, pindahkan sehingga ia ada sebelum tag tutup </body>. Kemudian tambahkan kode berikut di dalam file main.js tersebut:var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
Variabel canvas adalah elemen canvas yang ada di dalam body. Variabel engine adalah inisiasi dari objek engine Babylon 3D.
Tambahkan lagi kode berikut pada file main.js:
var createScene = function () {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI,
Math.PI / 4, 10, BABYLON.Vector3.Zero(), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, false);
var light = new BABYLON.HemisphericLight("light1",
new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = .5;
var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
sphere.position.y = 1;
var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
return scene;
};
var scene = createScene();
Pada kode di atas, kita membuat sebuah fungsi untuk membuat objek scene pada canvas, membuat objek camera, sebuah model 3D berbentuk bola dan sebidang petak di bagian dasar model. Sampai sini kita belum dapat menampilkan objek 3D tersebut di layar. Kita harus terlebih dahulu merender objek tersebut. Untuk itu tambahkan kode berikut:
engine.runRenderLoop(function () {
scene.render();
});
Sekarang jalankan aplikasi Tizen kita pada Web Simulator, mestinya pada Simulator akan muncul objek seperti pada gambar berikut:
Menggambar Objek-objek Bentuk Dasar
BabylonJS sudah menyediakan API untuk membuat model-model 3d dasar seperti bola, kubus, dan lain sebagainya. Pada contoh persiapan di step sebelumnya, kita lihat BabylonJS merender model 3D berbentuk bola dengan API BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);. Parameter pertama adalah nama elemen, parameter kedua jumlah segmen, parameter ketiga ukuran model, dan parameter keempat dalah scene tempat elemen tersebut akan dirender. Selain itu ada lagi 2 buah parameter opsional yakni updatable dan side orientation.Membuat Model Kubus
Untuk membuat model kubus, kita gunakan API CreateBox(). Method ini menerima 5 parameter, dengan dua parameter terakhir bersifat opsional seperti pada API CreateSphere. Adapun tiga parameter pertama secara berurutan adalah nama elemen, panjang sisi kubus, dan scene.Untuk melihat hasilnya, mari buka lagi file main.js dan ganti baris kode untuk membuat sphere menjadi seperti berikut:Simpan perubahan file lalu jalankan aplikasi di web simulator. Hasilnya akan seperti gambar berikut:var box = BABYLON.Mesh.CreateBox("box", 6.0, scene); box.position.y = 1;
Membuat Model Bidang Datar
Adakalanya kita perlu membuat dinding-dinding sendiri menggunakan objek bidang datar. BabylonJS menyediakan API CreatePlane() untuk membuat bidang datar persegi. Parameter yang dibutuhkan pada method ini sama persis seperti parameter untuk API CreateBox().Edit file main.js pada bagian membuat objek box sebelumnya menjadi seperti berikut:
var plane = BABYLON.Mesh.CreatePlane("plane", 3.0, scene);
plane.position.y = 1;
Hasil dari API tersebut akan nampak seperti gambar berikut:
Jika pada CreatePlane() kita hanya dapat membuat bidang persegi, dengan method CreateDisc() kita dapat membuat bidang datar lain sesuai dengan jumlah sudutnya. Method ini menerima 6 parameter dengan 4 parameter pertama yang wajib diisi, meliputi nama elemen, panjang radius, tessellation dan scene. Tessellation adalah jumlah sudut bidang, seperti 3 untuk segitiga, 3 untuk segiempat, 5 untuk segilima, dan seterusnya.
Update file main.js dan ganti kode untuk membuat objek yang sebelumnya dengan kode berikut:
var disc = BABYLON.Mesh.CreateDisc("disc", 2, 3, scene);
disc.position.y = 2;
Jalankan aplikasi. Kamu dapat bereksperimen dengan mengganti panjang jari-jari di parameter kedua dan jumlah sudut di parameter ketiga untuk melihat perbedaannya. Pada gambar berikut, kita melihat hasil dari pemanggilan method dengan parameter ketiga bernilai 3, 4, 5 dan 30:
Membuat Model Silinder
Silinder yang dimaksud oleh method ini tidak mesti berbentuk tabung dengan dasar berbentuk lingkaran, tapi juga mencakup pembuatan limas dan prisma. Method yang digunakan adalah CreateCylinder() dengan 9 buah parameter. 7 parameter pertama yang wajib diisi berturut-turut adalah nama elemen, tinggi elemen, diameter atas, diameter bawah, tessellation, tinggi subdiv dan scene.Cobakan kode berikut pada main.js seperti cara sebelumnya:
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 4, 3, 3, 4, 1, scene);
cylinder.position.y = 1;
Coba mainkan parameter ke-3, 4 dan 5, untuk memanipulasi luas permukaan bidang atas, bawah dan jumlah sudut bidang atas-bawah.
Membuat Model Torus/Donat
Kita dapat membuat objek berbentuk seperti donat atau ban, dengan menggunakan method CreateTorus(). Method ini memiliki 5 parameter wajib, berturut-turut nama elemen, diameter, ketebalan, tessellation dan scene.Gunakan kode berikut untuk melihat hasil dari method CreateTorus():
var torus = BABYLON.Mesh.CreateTorus("torus", 3, 1, 10, scene);
torus.position.y = 2;
Hasil dari kode di atas nampak pada gambar berikut:
Untuk membuat permukaan torus agar lebih halus, kita tinggal mengubah parameter tessellation ke nilai yang lebih tinggi. Pada gambar berikut, kita lihat hasil dari mengubah nilai tessellation menjadi 30:
Memberi Tekstur pada Objek
Setiap objek 3D yang kita buat dapat kita pasangkan gambar sehingga objek tersebut memiliki kesan bentuk tertentu. Kita akan mencoba memasangkan gambar pada objek bola. Pertama-tama buat terlebih dahulu objek bola seperti pada langkah pertama tutorial.var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
sphere.position.y = 1;
Kemudian tambahkan kode berikut di bawahnya:
var materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
sphere.material = materialSphere1;
Pada kode di atas, kita membuat sebuah objek material. Objek tersebut kemudian kita gunakan sebagai material pada objek sphere. Sampai sini kita tidak akan melihat perubahan apapun, karena kita belum memanipulasi objek materialnya.
Sekarang coba tambahkan kode berikut:
materialSphere1.alpha = 0.5;
Kode tersebut akan membuat objek sphere kita menjadi transparan, seperti pada gambar berikut:
Kita juga dapat memberikan warna pada objek dengan menggunakan kode berikut:
materialSphere1.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.7);
Method BABYLON.Color3 menerima 3 parameter, yakni nilai dari warna red, green dan blue (RGB) dengan rentang nilai 0 – 1.
Dalam implementasi sebenarnya kita akan sangat sering berurusan dengan tekstur yang mirip dengan lingkungan sesungguhnya, seperti tekstur tembok, rumput, dan sebagainya. Untuk menerapkan hal tersebut kita dapat menggunakan API BABYLON.Texture().
Tambahkan kode berikut di bagian bawah kode inisiasi tekstur:
materialSphere1.diffuseTexture = new BABYLON.Texture("images/Earth2.JPG", scene);
Kemudian unduh gambar peta dunia berikut dan simpan di dalam folder images/ pada project: https://textures.forrest.cz/textures/library/maps/Earth2.JPG. Objek sphere sekarang akan tampak seperti gambar berikut:
Kita lihat bahwa objek sphere kita sekarang diselubungi oleh gambar peta dunia. Hanya saja gambarnya masih terbalik dan warnanya lebih gelap. Untuk memperbaiki ini, kita dapat me-rotate gambar menggunakan image editor. Untuk pencahayaan, kita dapat mengubah posisi cahaya datang dan mengubah intensitas cahaya yang sudah kita set di dalam fungsi createScene, dari 0.5 menjadi 0.8:
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 1), scene);
light.intensity = .8;
dan agar bolanya lebih besar, kita dapat mengubah nilai radius dari bola tersebut. Hasil dari modifikasi akan tampak seperti berikut:
Kamu dapat berkreasi dengan bentuk objek dan tekstur lainnya.