BabylonJS - Elemen Dasar

Babylon.js adalah kerangka kerja populer untuk membantu membangun game 3D untuk pengembang. Ini memiliki fungsi built-in untuk mengimplementasikan fungsi 3D. Mari kita buat demo sederhana menggunakan Babylon.js dan pahami fungsi dasar yang diperlukan untuk memulai.

Kami pertama-tama akan membuat demo yang berisi elemen dasar Babylon.js. Selain itu, kita juga akan mempelajari berbagai fungsi Babylon.js.

Contoh Demo 1

Pada bagian ini kita akan belajar bagaimana membuat demo yang mengandung elemen dasar BabylonJS.

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo2</title>
      <script src = "babylon.js"></script>
      <style>
         canvas { width: 100%; height: 100%;}
      </style>
   </head>
   
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            scene.activeCamera.attachControl(canvas);
            
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
            
            var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
            
            var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
            
            var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
            box.position = new BABYLON.Vector3(-5, 0, 0); 
            
            var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
            
            cylinder.position = new BABYLON.Vector3(5, 0, 0);	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Untuk menjalankan BabylonJS, kami membutuhkan browser modern dengan dukungan WEBGL. Peramban terbaru -Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+, dll. Memiliki dukungan WEBGL dan demo dapat dijalankan pada platform yang sama untuk melihat hasilnya. Buat direktori untuk menyimpan file untuk babylonjs. Ambil file BabylonJSscripts terbaru dari situs BabylonJS. Semua tautan demo dalam tutorial ini diuji dengan babylonjs versi 3.3.

Langkah 1

Buat halaman html sederhana dan sertakan file Babylon.js.
Buat tag kanvas yang digunakan untuk membuat konten dengan BabylonJS di dalam tag tubuh seperti yang ditunjukkan di bawah ini.
Tambahkan css ke kanvas untuk menempati lebar dan tinggi penuh layar.

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "babylon.js"></script>
      
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>
   <body>
      <canvas id = "renderCanvas"></canvas>
   </body>
</html>

Langkah 2

Mari kita mulai dengan BabylonJScode untuk merender konten di kanvas.

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
      </script>
   </body>
</html>

Sekarang, tambahkan tag skrip ke struktur html dan simpan referensi kanvas di kanvas variabel.

Untuk memulai Babylon.js, buat instance mesin dan teruskan referensi kanvas untuk dirender di atasnya.

<script type = "text/javascript">
   var canvas = document.getElementById("renderCanvas");
   var engine = new BABYLON.Engine(canvas, true);
</script>

Objek global BABYLON berisi semua fungsi Babylon.js yang tersedia di mesin.

LANGKAH 3

Pada langkah ini, pertama kita akan membuat sebuah adegan.

Adegan adalah tempat semua konten akan ditampilkan. Kami akan membuat berbagai jenis objek dan menambahkan yang sama ke adegan untuk membuatnya terlihat di layar. Untuk membuat scene, tambahkan kode berikut ke struktur html yang sudah dibuat. Saat ini, kami akan menambahkan kode yang sudah dibuat sebagai kelanjutan dari struktur html di atas.

var createScene  = function() {
   var scene = new BABYLON.Scene(engine);
   scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
};
var scene = createScene();

File html terakhir akan terlihat seperti berikut -

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>
   
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
            return scene;
         };
         var scene = createScene();
      </script>
   </body>
</html>

Dalam contoh di atas, fungsi CreateScene didefinisikan dan var scene = createScene () memanggil fungsi tersebut.

Fungsi CreateScene memiliki pemandangan yang dibuat di dalamnya dan baris berikutnya menambahkan warna ke pemandangan, yang dilakukan dengan menggunakan BABYLON.Color3 (1, 0.8, 0.8) dan warna di sini adalah merah muda.

var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);

Menjalankan tautan demo di atas di browser tidak akan menampilkan apa pun sekarang di layar browser. Ada satu langkah lagi untuk ditambahkan ke kode yang disebut engine.runRenderLoop seperti pada langkah 4.

LANGKAH 4

Untuk membuat pemandangan benar-benar terlihat di layar, kita perlu merendernya menggunakan panggilan engine.runRenderLoop. Sekarang mari kita lihat bagaimana ini dilakukan.

Rendering Loop

engine.runRenderLoop(function() {
   scene.render();
});

Fungsi Engine.runRenderLoop memanggil scene.render, yang akan merender adegan dan membuatnya terlihat oleh pengguna. .Html terakhir akan terlihat sebagai berikut -

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>
   
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Simpan file di atas sebagai basicscene.html dan periksa hasilnya di browser. Layar yang ditampilkan berwarna pink seperti gambar di bawah ini -

LANGKAH 5

Sekarang kita memiliki pemandangannya, kita harus menambahkan kamera ke dalamnya.

Menambahkan Kamera dan Cahaya

Kode yang diberikan di bawah ini menambahkan kamera ke tempat kejadian. Ada banyak jenis kamera yang bisa digunakan di Babylon.

ArcRotateCameraadalah kamera yang berputar mengelilingi target. Itu dapat dikontrol dengan mouse, kursor atau peristiwa sentuh. Parameter yang dibutuhkan adalah name, alpha, beta, radius, target, dan scene. Mari kita bahas detail kamera di bagian selanjutnya.

var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);

Sekarang, kita perlu memahami cara menambahkan cahaya.

Lampu digunakan untuk menghasilkan warna difus dan spekular yang diterima oleh setiap piksel. Jenis lampu ada banyak macamnya. Kita akan belajar tentang berbagai jenis lampu di bagian lampu.

Di sini saya menggunakan PointLight di tempat kejadian. PointLight dipancarkan ke segala arah seperti matahari. Parameternya adalah nama, posisi, dan pemandangan yang akan digunakan.

Untuk menambahkan cahaya, jalankan kode berikut -

var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);

LANGKAH 6

Sekarang mari kita lihat bagaimana menambahkan bentuk.

Menambahkan bentuk

Demo yang dibagikan di atas memiliki 4 bentuk yang ditambahkan ke dalamnya.

Sphere
Torus
Box
Cylinder

Untuk menambahkan sphere, jalankan kode berikut -

var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);

Setelah sphere ditambahkan, kodenya terlihat sebagai berikut -

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "babylon.js"></script>
      <style>
         html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
      </style>
   </head>
   
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
            var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
            scene.activeCamera.attachControl(canvas);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Keluaran

Kode di atas menghasilkan output berikut -

Sekarang mari kita tambahkan bentuk lainnya - Torus dan Kotak. Jalankan kode berikut untuk menambahkan bentuk Torus.

var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);

Kami akan menambahkan posisi ke kotak. BABYLON.Vector3 (-5, 0, 0) mengambil arah x, y dan z.

Setelah dieksekusi, kode di atas menghasilkan keluaran berikut -

Sekarang mari kita tambahkan bentuk akhir yang ditunjukkan pada gambar di atas - silinder.

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);

Posisinya ditambahkan ke silinder yaitu x arah 5. Kode akhirnya seperti gambar dibawah ini -

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo2</title>
      <script src = "babylon.js"></script>
      <style>
         canvas { width: 100%; height: 100%;}
      </style>
   </head>
   
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            scene.activeCamera.attachControl(canvas);
            
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
            
            var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
            
            var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
            
            var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
            box.position = new BABYLON.Vector3(-5, 0, 0); 
            
            var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
            cylinder.position = new BABYLON.Vector3(5, 0, 0);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Keluaran

Setelah dieksekusi, kode di atas akan menghasilkan output berikut -

Bentuk akan bergerak sesuai arah Anda memindahkan kursor; hal yang sama dilakukan dengan menggunakan kontrol lampirkan kamera ke pemandangan.

scene.activeCamera.attachControl(canvas);

Sekarang mari kita bahas setiap bentuk secara rinci.

Berikut adalah ringkasan dari semua bentuk dan sintaksnya -


var box = BABYLON.Mesh.CreateBox(
   "box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
var sphere = BABYLON.Mesh.CreateSphere(
   "sphere", 10.0, 10.0, scene, 
   false, BABYLON.Mesh.DEFAULTSIDE);
var plane = BABYLON.Mesh.CreatePlane(
   "plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
var disc = BABYLON.Mesh.CreateDisc(
   "disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);
var cylinder = BABYLON.Mesh.CreateCylinder(
   "cylinder", 3, 3, 3, 6, 1, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var torus = BABYLON.Mesh.CreateTorus(
   "torus", 5, 1, 10, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var knot = BABYLON.Mesh.CreateTorusKnot(
   "knot", 2, 0.5, 128, 64, 2, 3, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var lines = BABYLON.Mesh.CreateLines("lines", [
   new BABYLON.Vector3(-10, 0, 0),
   new BABYLON.Vector3(10, 0, 0),
   new BABYLON.Vector3(0, 0, -10),
   new BABYLON.Vector3(0, 0, 10)
], scene);
var dashedlines = BABYLON.Mesh.CreateDashedLines(
   "dashedLines", [v1, v2, ... vn], 
   dashSize, gapSize, dashNb, scene);
var ribbon = BABYLON.Mesh.CreateRibbon(
   "ribbon", 
   [path1, path2, ..., pathn], 
   false, false, 0, 
   scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var tube = BABYLON.Mesh.CreateTube(
   "tube", 
   [V1, V2, ..., Vn], 
   radius, tesselation, 
   radiusFunction, 
   cap, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var ground = BABYLON.Mesh.CreateGround(
   "ground", 6, 6, 2, scene);
var ground = BABYLON.Mesh.CreateGroundFromHeightMap(
   "ground", "heightmap.jpg", 200, 200, 250, 0, 10, 
   scene, false, successCallback);
var precision = {"w" : 2, "h" : 2};
var subdivisions = {'h' : 8, 'w' : 8};
var tiledGround = BABYLON.Mesh.CreateTiledGround(
   "Tiled Ground", -3, -3, 3, 3, 
   subdivisions, precision, scene, false);

Sr Tidak	Bentuk	Sintaksis
1	Kotak	`var box = BABYLON.Mesh.CreateBox( "box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
2	Bola	`var sphere = BABYLON.Mesh.CreateSphere( "sphere", 10.0, 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
3	Pesawat	`var plane = BABYLON.Mesh.CreatePlane( "plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
4	Cakram	`var disc = BABYLON.Mesh.CreateDisc( "disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
5	Silinder	`var cylinder = BABYLON.Mesh.CreateCylinder( "cylinder", 3, 3, 3, 6, 1, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
6	Torus	`var torus = BABYLON.Mesh.CreateTorus( "torus", 5, 1, 10, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
7	Simpul	`var knot = BABYLON.Mesh.CreateTorusKnot( "knot", 2, 0.5, 128, 64, 2, 3, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
8	Jaring Garis	`var lines = BABYLON.Mesh.CreateLines("lines", [ new BABYLON.Vector3(-10, 0, 0), new BABYLON.Vector3(10, 0, 0), new BABYLON.Vector3(0, 0, -10), new BABYLON.Vector3(0, 0, 10) ], scene);`
9	Garis putus-putus	`var dashedlines = BABYLON.Mesh.CreateDashedLines( "dashedLines", [v1, v2, ... vn], dashSize, gapSize, dashNb, scene);`
10	Pita	`var ribbon = BABYLON.Mesh.CreateRibbon( "ribbon", [path1, path2, ..., pathn], false, false, 0, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
11	Tabung	`var tube = BABYLON.Mesh.CreateTube( "tube", [V1, V2, ..., Vn], radius, tesselation, radiusFunction, cap, scene, false, BABYLON.Mesh.DEFAULTSIDE);`
12	Tanah	`var ground = BABYLON.Mesh.CreateGround( "ground", 6, 6, 2, scene);`
13	Tanah Dari HeightMap	`var ground = BABYLON.Mesh.CreateGroundFromHeightMap( "ground", "heightmap.jpg", 200, 200, 250, 0, 10, scene, false, successCallback);`
14	Ubin Tanah	`var precision = {"w" : 2, "h" : 2}; var subdivisions = {'h' : 8, 'w' : 8}; var tiledGround = BABYLON.Mesh.CreateTiledGround( "Tiled Ground", -3, -3, 3, 3, subdivisions, precision, scene, false);`

Elemen Dasar - Posisi, Rotasi, dan Penskalaan

Pada bagian ini, kita akan belajar bagaimana memposisikan, memutar atau mengatur skala elemen yang telah kita tambahkan sejauh ini.

Kita telah membuat kotak, bola, silinder, simpul, dll. Sekarang, kita akan melihat bagaimana memposisikan, menskalakan dan memutar bentuk.

Sr.No.	Elemen & Deskripsi
1	Posisi Dengan perubahan posisi, mesh akan diubah dari satu posisi ke posisi lain.
2	Rotasi Dengan rotasi, jaring akan diputar mengelilingi jaring.
3	Penskalaan Penskalaan mesh dapat dilakukan dengan memperhatikan sumbu x, y atau z.

Elemen Dasar - Parenting

Dengan Parenting, kita akan membuat hubungan induk-anak antara mesh dan melihat bagaimana perilakunya. Jadi, apa pun transformasi yang Anda terapkan pada induk, hal yang sama juga akan diterapkan pada anak. Sekarang mari kita pahami hal yang sama dengan demo yang ditunjukkan di bawah ini.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
         
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            scene.activeCamera.attachControl(canvas);
         
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);

            var boxa = BABYLON.Mesh.CreateBox("BoxA", 1.0, scene);
            boxa.position = new BABYLON.Vector3(0,0.5,0);

            var boxb = BABYLON.Mesh.CreateBox("BoxB", 1.0, scene);
            boxb.position = new BABYLON.Vector3(3,0.5,0);		
            boxb.scaling = new BABYLON.Vector3(2,1,2);

            var boxc = BABYLON.Mesh.CreateBox("BoxC", 1.0, scene);
            boxc.parent = boxb;
            boxc.position.z = -3;
         
            var ground = BABYLON.Mesh.CreateGround("ground1", 10, 6, 2, scene);
            ground.position = new BABYLON.Vector3(0,0,0);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Keluaran

Penjelasan

Kami telah membuat 3 kotak di jaring di atas. Dalam demo, penskalaan boxb diterapkan dan ditetapkan sebagai induk untuk boxc yang juga berskala sejak induknya boxb dan yang sama diskalakan. Anda dapat bermain-main dengan demo untuk melihat cara kerja tautan orangtua-anak.

Untuk membuat mesh, Anda harus menggunakan induk dari mesh lain -

child.parent = parentmesh;

Elemen Dasar - Lingkungan

Sekarang mari kita bahas lingkungan adegan di bagian ini. Kami akan berbicara tentangscene background color, ambientcolor, skyboxes, fog mode, dll. di sebuah adegan.

Kami telah melihat scene background color is demos yang telah kami buat sejauh ini.

Warna latar pemandangan

Sekarang mari kita lihat bagaimana warna latar belakang pemandangan bekerja.

Sintaksis

Berikut ini adalah sintaks untuk warna latar belakang adegan -

scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);
or
scene.clearColor = BABYLON.Color3.Blue();

Properti di atas akan mengubah warna latar belakang pemandangan.

Warna Scene Ambient

Sekarang mari kita lihat bagaimana warna suasana pemandangan bekerja.

Sintaksis

Berikut ini adalah sintaks untuk warna ambient adegan -

scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);

AmbientColor digunakan bersama dengan StandardMaterialwarna dan tekstur ambien. Jika tidak ada ambientColor untuk adegan tersebutStandardMaterial.ambientColor dan StandardMaterial.ambientTexturetidak berpengaruh. StandardMaterial ambientColor / ambientTexture akan menjadi aktif setelah ambientColor untuk pemandangan diterapkan. Secara default, adegan diberikanscene.ambientColor dan diatur ke Color3 (0, 0, 0), yang berarti tidak ada warna ambient.

Mode Pemandangan Kabut

Kami sekarang akan memahami cara kerja Mode Kabut Pemandangan.

Sintaksis

Berikut ini adalah sintaks untuk Scene Fog Mode.

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;

Berikut daftar mode kabut yang tersedia -

BABYLON.Scene.FOGMODE_NONE - default satu, kabut dinonaktifkan.
BABYLON.Scene.FOGMODE_EXP - kerapatan kabut mengikuti fungsi eksponensial.
BABYLON.Scene.FOGMODE_EXP2 - sama seperti di atas tetapi lebih cepat.
BABYLON.Scene.FOGMODE_LINEAR - kerapatan kabut mengikuti fungsi linier.

Jika mode kabut EXP atau EXP2 ditentukan, Anda dapat menentukan kepadatannya sebagai berikut -

scene.fogDensity = 0.01;

Jika mode kabut LINEAR, maka Anda dapat menentukan di mana kabut dimulai dan berakhir sebagai berikut -

scene.fogStart = 20.0;
scene.fogEnd = 60.0;

Untuk memberi warna pada kabut, jalankan kode berikut -

scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);

Skybox

Skybox adalah salah satu cara untuk membuat background dalam game yang membuat pemandangan terlihat realistis. Ini lebih merupakan pembungkus di sekitar layar Anda yang menutupi tekstur yang digunakan untuk materi. Pilih gambar Anda dengan benar agar terlihat realistis untuk pemandangan yang ingin Anda buat. Untuk membuat skybox, Anda harus membuat kotak dan menerapkan material padanya. Kami akan membahas materi yang berbeda secara rinci di bab berikutnya.

Sekarang, kita akan melihat cara membuat skybox menggunakan box dan material.

var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);

Kami akan membuat kotak ukuran 100 sehingga menutupi seluruh pemandangan. Kami akan mulai dengan memberikan bahan ke kotak yang dilakukan sebagai berikut -

var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);

Untuk materi ini, kami akan menetapkan properti.

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);

Kita harus menggunakan tekstur refleksi yang pada dasarnya digunakan untuk membuat bahan seperti cermin. Properti tekstur refleksi menggunakan CubeTexture yang mengambil gambar sebagai input. Karena kubus memiliki 6 wajah, gambar yang dibutuhkan untuk skybox harus 6, yaitu, secara internal harus disimpan sebagai skybox_nx, skybox_ny, skybox_nz, skybox_px, skybox_py, skybox_pz. Gambar yang digunakan untuk skybox ditempel di bawah; mereka adalah wajah kubus di keenam sisinya. Saat Anda menerapkan tekstur ke bentuk, ini memberikan detail gambar yang digunakan dan membuat pemandangan terlihat realistis. Kami memanfaatkan mode koordinat sebagai SKYBOX_MODE seperti yang ditunjukkan di bawah ini -

skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

Ada properti lain yang digunakan untuk material seperti backfaceCulling, diffuseColor, specularColor, disableLighting, dll. Properti tersebut dijelaskan secara mendetail di bagian material.

Dalam demo, kami akan menunjukkan pemandangan lingkungan yang dibuat menggunakan skybox, bola berputar di tempat kejadian dan pesawat bergerak. Kabut diterapkan pada pemandangan, yang akan Anda perhatikan saat Anda memutar.

Demo Menampilkan Adegan Lingkungan

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo</title>
      <script src = "babylon.js"></script>
      <style>
         canvas { width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            var light = new BABYLON.PointLight("Omni", 
            new BABYLON.Vector3(10, 50, 50), scene);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);
            camera.attachControl(canvas, true);

            var material1 = new BABYLON.StandardMaterial("mat1", scene);
            material1.diffuseTexture = new BABYLON.Texture("images/tsphere.jpg", scene);

            var sphere = BABYLON.Mesh.CreateSphere("red", 32, 2, scene);
            sphere.setPivotMatrix(BABYLON.Matrix.Translation(2, 0, 0));
            sphere.material = material1;		

            // Fog
            scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
            scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
            scene.fogDensity = 0.01;

            //skybox		
            var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
            
            var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
            skyboxMaterial.backFaceCulling = false;
            
            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);
            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
            
            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
            
            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            
            skyboxMaterial.disableLighting = true;
            skybox.material = skyboxMaterial;


            var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/plane.png", 8, 1000, scene);
            
            var plane = new BABYLON.Sprite("plane", spriteManagerPlayer);
            plane.position.x = -2;
            plane.position.y = 2;	
            plane.position.z = 0;	


            var alpha = 0;
            var x = 2;
            var y = 0;
            scene.registerBeforeRender(function () {
               scene.fogDensity = Math.cos(alpha) / 10;
               alpha += 0.02;
               sphere.rotation.y += 0.01;
               y += 0.05; 
               if (x > 50) {
                  x = -2;
               }
               plane.position.x = -x;
               x += 0.02; 
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Keluaran

Penjelasan

Dalam contoh di atas, kami menggunakan kode berikut untuk kabut -

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
scene.fogDensity = 0.01;

scene.fogMode = BABYLON.Scene.FOGMODE_EXP - Di sini, kerapatan kabut mengikuti fungsi eksponensial.
scene.registerBeforeRender = Dengan ini, kerapatan kabut berubah sebagai berikut -

var alpha = 0;
scene.registerBeforeRender(function () {
   scene.fogDensity = Math.cos(alpha) / 10;
   alpha += 0.02;
});

Nilai alpha terus bertambah sebesar 0,02 seiring berjalannya loop seperti pada fungsi di atas.

Di sini, kami telah menambahkan gambar sprite pesawat dan mengubah posisinya dengan scene.registerBeforeRender berfungsi sebagai berikut -

var alpha = 0;
var x = 2;
var y = 0;
scene.registerBeforeRender(function () {
   scene.fogDensity = Math.cos(alpha) / 10;
   alpha += 0.02;
   sphere.rotation.y += 0.01;
   y += 0.05; 
   if (x > 50) {
      x = -2;
   }
   plane.position.x = -x;
   x += 0.02; 
});
return scene;
};s

Kami akan mengubah sumbu x pesawat dan mengatur ulang ketika mencapai lebih dari 50.

Juga, bola diputar sepanjang sumbu y. Ini ditunjukkan pada contoh di atas. Nilai diubah menggunakan sphere.rotation.y.

Tekstur yang digunakan untuk bola adalah - images/tshphere.jpg. Gambar disimpan dalam gambar / folder secara lokal dan juga ditempel di bawah untuk referensi. Anda dapat mengunduh gambar apa pun pilihan Anda dan menggunakannya di tautan demo.

Kami membutuhkan enam gambar untuk kubus. Gambar disimpan secara lokal dalam gambar / cubetexture / folder. Anda dapat mengunduh gambar apa pun pilihan Anda, tetapi ketika Anda menyimpannya sebagai nameoftheimage_nx, nameoftheimage_ny, nameoftheimage_nz, nameoftheimage_px, nameoftheimage_py, nameoftheimage_pz. Harap dicatat bahwa gambar yang dipilih harus berurutan sehingga latar belakang terlihat realistis seperti yang ditampilkan untuk skybox.

Gambar yang digunakan untuk membuat skybox adalah sebagai berikut - images/cubetexture/skybox

skybox_nx