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.
<h3>Persiapan</h3>
Buka Tizen IDE dan buat project baru dengan mengklik menu <strong>File &gt; New &gt; Tizen Web Project</strong>. Pada tab <strong>Template</strong>, pilih tipe <strong>Basic</strong>.

Buka file index.html dan hapus semua elemen yang ada di dalam tag &lt;body&gt;, kemudian masukkan kode html berikut:
<pre>&lt;canvas id="renderCanvas"&gt;&lt;/canvas&gt;</pre>
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:
<pre>html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#renderCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}</pre>
CSS di atas digunakan agar canvas kita memenuhi halaman layar aplikasi.

Kemudian tambahkan script berikut sebelum pemanggilan main.js di dalam tag &lt;head&gt;:
<pre>&lt;script src="http://cdn.babylonjs.com/2-4/babylon.js"&gt;&lt;/script&gt;</pre>
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.
<h3>Kode JavaScript Dasar</h3>
Sekarang jika Kamu menemukan script main.js disimpan di dalam tag &lt;head&gt;, pindahkan sehingga ia ada sebelum tag tutup &lt;/body&gt;. Kemudian tambahkan kode berikut di dalam file main.js tersebut:
<pre>var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);</pre>
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:
<pre>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();</pre>
<pre>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();
});</pre>
Sekarang jalankan aplikasi Tizen kita pada Web Simulator, mestinya pada Simulator akan muncul objek seperti pada gambar berikut:

<img class="alignnone size-full wp-image-12071" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/1-1.png" alt="1" width="527" height="515" />
<h2>Menggambar Objek-objek Bentuk Dasar</h2>
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.
<h3>Membuat Model Kubus</h3>
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.
<pre>Untuk melihat hasilnya, mari buka lagi file main.js dan ganti baris kode untuk membuat sphere menjadi seperti berikut:

var box = BABYLON.Mesh.CreateBox("box", 6.0, scene);
box.position.y = 1;</pre>
Simpan perubahan file lalu jalankan aplikasi di web simulator. Hasilnya akan seperti gambar berikut:

<img class="alignnone size-full wp-image-12072" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/2-1.png" alt="2" width="488" height="410" />
<h3>Membuat Model Bidang Datar</h3>
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:
<pre>var plane = BABYLON.Mesh.CreatePlane("plane", 3.0, scene);
plane.position.y = 1;</pre>
Hasil dari API tersebut akan nampak seperti gambar berikut:

<img class="alignnone size-full wp-image-12073" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/3-1.png" alt="3" width="501" height="425" />

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, <em>tessellation</em> 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:
<pre>var disc = BABYLON.Mesh.CreateDisc("disc", 2, 3, scene);
disc.position.y = 2;</pre>
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:

<img class="alignnone size-full wp-image-12074" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/4-1.png" alt="4" width="677" height="291" />
<h3>Membuat Model Silinder</h3>
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:
<pre>var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 4, 3, 3, 4, 1, scene);
cylinder.position.y = 1;</pre>
Coba mainkan parameter ke-3, 4 dan 5, untuk memanipulasi luas permukaan bidang atas, bawah dan jumlah sudut bidang atas-bawah.

<img class="alignnone size-full wp-image-12075" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/5-1.png" alt="5" width="683" height="234" />
<h3>Membuat Model Torus/Donat</h3>
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():
<pre>var torus = BABYLON.Mesh.CreateTorus("torus", 3, 1, 10, scene);
torus.position.y = 2;</pre>
Hasil dari kode di atas nampak pada gambar berikut:

<img class="alignnone size-full wp-image-12076" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/6-1.png" alt="6" width="536" height="455" />

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:

<img class="alignnone size-full wp-image-12077" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/7-1.png" alt="7" width="525" height="456" />
<h2>Memberi Tekstur pada Objek</h2>
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.
<pre>var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
sphere.position.y = 1;</pre>
Kemudian tambahkan kode berikut di bawahnya:
<pre>var materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
sphere.material = materialSphere1;</pre>
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:
<pre>materialSphere1.alpha = 0.5;</pre>
Kode tersebut akan membuat objek sphere kita menjadi transparan, seperti pada gambar berikut:

<img class="alignnone size-full wp-image-12078" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/8-1.png" alt="8" width="529" height="431" />

Kita juga dapat memberikan warna pada objek dengan menggunakan kode berikut:
<pre>materialSphere1.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.7);</pre>
Method BABYLON.Color3 menerima 3 parameter, yakni nilai dari warna red, green dan blue (RGB) dengan rentang nilai 0 – 1.

<img class="alignnone size-full wp-image-12079" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/10-1.png" alt="10" width="528" height="390" />

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:
<pre>materialSphere1.diffuseTexture = new BABYLON.Texture("images/Earth2.JPG", scene);</pre>
Kemudian unduh gambar peta dunia berikut dan simpan di dalam folder images/ pada project: <a href="https://textures.forrest.cz/textures/library/maps/Earth2.JPG" target="_blank">https://textures.forrest.cz/textures/library/maps/Earth2.JPG</a>. Objek sphere sekarang akan tampak seperti gambar berikut:

<img class="alignnone size-full wp-image-12080" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/9-1.png" alt="9" width="528" height="436" />

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:
<pre>var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 1), scene);

light.intensity = .8;</pre>
dan agar bolanya lebih besar, kita dapat mengubah nilai radius dari bola tersebut. Hasil dari modifikasi akan tampak seperti berikut:

<img class="alignnone size-full wp-image-12081" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/11-1.png" alt="11" width="529" height="403" />

Kamu dapat berkreasi dengan bentuk objek dan tekstur lainnya.
<h2>Penutup</h2>
Demikian sekelumit dasar implementasi BabylonJS yang memanfaatkan API WebGL untuk dapat diterapkan pada Tizen web app. Kamu dapat mempelajari lebih lanjut tentang BabylonJS di halaman dokumentasi pada webnya di <a href="http://doc.babylonjs.com/tutorials" target="_blank">http://doc.babylonjs.com/tutorials</a>. Kamu juga dapat mencoba-coba langsung contoh-contoh teknik penerapan API BabylonJS dan melihat hasilnya langsung di halaman <a href="http://www.babylonjs-playground.com" target="_blank">http://www.babylonjs-playground.com</a>.

Menggambar Grafik 3D pada Aplikasi Tizen Menggunakan Library BabylonJS

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Menggambar Grafik 3D pada Aplikasi Tizen Menggunakan Library BabylonJS

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Micro Python, Bahasa Python untuk Pemrograman Mikrokontroller

CodeIgniter PHP Framework Sekarang Punya Rumah Baru

Ikuti Giveaway dari CoderTalk dan Menangkan 6 Hadiah Menarik

Membuat Website Statis Gratis dengan Memanfaatkan Github Pages

Cara Install Node.js

Digital Input Output pada Arduino