BabylonJS - Lampu

Dalam bab ini, kita akan belajar tentang lampu yang digunakan untuk BabylonJS. Kami akan mulai dengan melihat berbagai jenis lampu yang tersedia dengan babylonjs.

Lampu dimaksudkan untuk menghasilkan warna difus dan spekular yang diterima oleh setiap piksel. Kemudian digunakan pada material untuk mendapatkan warna akhir dari setiap piksel.

Ada 4 jenis lampu yang tersedia dengan babylonjs.

Titik Cahaya
Cahaya Arah
Spot Light
Cahaya Belahan

BabylonJS - Titik Cahaya

Contoh klasik titik cahaya adalah Matahari, yang sinarnya menyebar ke segala arah. Titik cahaya memiliki titik unik dalam ruang tempat ia menyebarkan cahaya ke segala arah. Warna cahaya dapat dikontrol menggunakan properti specular dan diffuse.

Sintaksis

Berikut ini adalah sintaks untuk Point Light -

var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 1), scene);

Ada tiga parameter berbeda untuk lampu titik -

Parameter pertama adalah nama lampu.
Parameter ke-2 adalah posisi di mana titik cahaya ditempatkan.
Parameter ke-3 adalah adegan di mana lampu perlu dipasang.

Properti berikut digunakan untuk menambahkan warna pada objek yang dibuat di atas -

light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);

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( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(1, 20, 1), scene);
            pl.diffuse = new BABYLON.Color3(0, 1, 0);
            pl.specular = new BABYLON.Color3(1, 0, 0);
            
            var ground = BABYLON.Mesh.CreateGround("ground", 150, 6, 2, scene);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Keluaran

BabylonJS - The Directional Light

Dalam cahaya terarah, cahaya ditentukan oleh arah dan dipancarkan ke segala arah berdasarkan tempat Anda meletakkannya.

var light0 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -1, 0), scene);

Ada tiga parameter berbeda untuk lampu titik -

1 ^st param adalah nama dari cahaya.
^{Parameter ke-} 2 adalah posisi. Saat ini, itu ditempatkan dengan negatif -1 di sumbu Y.
^{Parameter ke-} 3 adalah adegan yang akan dilampirkan.

Di sini, Anda dapat menambahkan warna dengan properti specular dan diffuse.

light0.diffuse = new BABYLON.Color3(0, 1, 0);
light0.specular = new BABYLON.Color3(1,0, 0);

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( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var pl = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -10, 0), scene);
            pl.diffuse = new BABYLON.Color3(0, 1, 0);
            pl.specular = new BABYLON.Color3(1, 0, 0);
            
            var ground = BABYLON.Mesh.CreateGround("ground", 150, 6, 2, scene);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Keluaran

Baris kode di atas menghasilkan output berikut -

BabylonJS - The Spot Light

Spot light seperti cahaya yang jatuh dalam bentuk kerucut.

Sintaksis

Berikut ini adalah sintaks untuk Spot Light -

var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);

Ada lima parameter berbeda untuk lampu titik -

1 ^st Param adalah nama lampu.
^{Parameter ke-} 2 adalah posisi.
^Parameter ketiga adalah arah.
Parameter ^ke- 4 adalah sudut.
Parameter ^ke- 5 adalah eksponen.

Nilai-nilai ini menentukan kerucut cahaya mulai dari posisi, memancarkan ke arah. Specular dan diffuse digunakan untuk mengontrol warna cahaya.

light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);

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( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);
            light0.diffuse = new BABYLON.Color3(0, 1, 0);
            light0.specular = new BABYLON.Color3(1, 0, 0);
            
            var ground = BABYLON.Mesh.CreateGround("ground", 80,80, 2, scene);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Keluaran

Baris kode di atas menghasilkan output berikut -

BabylonJS - Cahaya Belahan

Cahaya hemispheric lebih dari mendapatkan cahaya lingkungan. Arah cahayanya mengarah ke langit. 3 warna diberikan untuk cahaya; satu untuk langit, satu untuk tanah dan yang terakhir untuk specular.

Sintaksis

Berikut ini adalah sintaks untuk Hemispheric Light -

var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);

Untuk warna

light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(0, 1, 0);
light0.groundColor = new BABYLON.Color3(0, 0, 0);

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( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);
            light0.diffuse = new BABYLON.Color3(1, 0, 0);
            light0.specular = new BABYLON.Color3(0, 1, 0);
            light0.groundColor = new BABYLON.Color3(0, 0, 0);
            
            var ground = BABYLON.Mesh.CreateGround("ground", 100,100, 2, scene);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Keluaran

Baris kode di atas menghasilkan output berikut -