BabylonJS - Malzemeler

Malzemeler nesneler için kıyafet gibidir. Renk, doku ekleyebilir ve ağlarınızı onunla sarabilirsiniz. Birçok ağı örtmek için aynı malzemeyi kullanabilirsiniz. Ağlar, önceki bölümde gördüğümüz örnekte gördüğümüz sahne olabilir - gökyüzünden geçen uçak.

Bu bölümde, bu bölümde ağlara nasıl renk, doku ve yansıma ekleneceğini öğreneceğiz.

Önceden oluşturulmuş sahneye malzeme ekleyeceğiz. Oluşturduğumuz tüm şekillere malzeme ekleyerek ilerleyeceğiz.

Materyal eklemenin nasıl çalıştığını görmek için birkaç örnek ele alalım.

Sözdizimi

var materialforshapes = new BABYLON.StandardMaterial("texture1", scene);

Yukarıdaki materyal, varsayılan olduğu için hiçbir şeyi değiştirmeyecektir. Nesnelerin daha çekici görünmesi için mevcut özellikleri kullanacağız.

Mevcut özellikler aşağıdaki gibidir -

Transparency
Diffuse
Emissive
Ambient
Specular
Arka Yüz İtlafı
WireFrame

Malzemeye uygulanan bu özelliklerin ağın görünümünü ve hissini nasıl değiştirdiğine bir göz atın.

Temel Malzeme Özelliği - FresnelParameters

Fresnel, BabylonJS tarafından standardmaterial. Şekiller üzerine uygulanan rengi değiştirmeye izin verir. Basit Fresnel kullanarak cam gibi yansıma elde edebilirsiniz. Fresnel, tamamen merkezde değil, kenarlarda daha fazla yansımaya sahip olmanıza izin verecektir.

Fresnel için aşağıdaki özellikler mevcuttur

StandardMaterial.diffuseFresnelParameters
StandardMaterial.opacityFresnelParameters
StandardMaterial.reflectionFresnelParameters
StandardMaterial.emissiveFresnelParameters
StandardMaterial.refractionFresnelParameters

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);

            var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 10, BABYLON.Vector3.Zero(), scene);

            camera.setPosition(new BABYLON.Vector3(0, 5, -10));

            camera.attachControl(canvas);
            camera.upperBetaLimit = Math.PI / 2;
            camera.lowerRadiusLimit = 4;

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;

            var knot = BABYLON.Mesh.CreateTorusKnot("knot", 1, 0.4, 128, 64, 2, 3, scene);	
            var yellowSphere = BABYLON.Mesh.CreateSphere("yellowSphere", 16, 1.5, scene);
            yellowSphere.setPivotMatrix(BABYLON.Matrix.Translation(3, 0, 0));
            var yellowMaterial = new BABYLON.StandardMaterial("yellowMaterial", scene);
            yellowMaterial.diffuseColor = BABYLON.Color3.Yellow();
            yellowSphere.material = yellowMaterial;    

            // Ground
            var ground = BABYLON.Mesh.CreateBox("Mirror", 1.0, scene);
            ground.scaling = new BABYLON.Vector3(100.0, 0.01, 100.0);
            ground.material = new BABYLON.StandardMaterial("ground", scene);
            ground.material.diffuseTexture = new BABYLON.Texture("images/rainbow.png", scene);
            ground.material.diffuseTexture.uScale = 10;
            ground.material.diffuseTexture.vScale = 10;
            ground.position = new BABYLON.Vector3(0, -2, 0);

            // Main material	
            var mainMaterial = new BABYLON.StandardMaterial("main", scene);
            knot.material = mainMaterial;

            var probe = new BABYLON.ReflectionProbe("main", 512, scene);
            probe.renderList.push(yellowSphere);
            probe.renderList.push(ground);
            mainMaterial.diffuseColor = new BABYLON.Color3(1, 0.5, 0.5);
            mainMaterial.refractionTexture = probe.cubeTexture;
            mainMaterial.refractionFresnel<h3>Parameters</h3> = new BABYLON.Fresnel<h3>Parameters</h3>();
            mainMaterial.refractionFresnel<h3>Parameters</h3>.bias = 0.5;
            mainMaterial.refractionFresnel<h3>Parameters</h3>.power = 16;
            mainMaterial.refractionFresnel<h3>Parameters</h3>.leftColor = BABYLON.Color3.Black();
            mainMaterial.refractionFresnel<h3>Parameters</h3>.rightColor = BABYLON.Color3.White();
            mainMaterial.indexOfRefraction = 1.05;

            // Fog
            scene.fogMode = BABYLON.Scene.FOGMODE_LINEAR;
            scene.fogColor = scene.clearColor;
            scene.fogStart = 20.0;
            scene.fogEnd = 50.0;

            // Animations
            scene.registerBeforeRender(function () {
               yellowSphere.rotation.y += 0.01;
               //  greenSphere.rotation.y += 0.01;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Çıktı

Yukarıdaki kod satırı aşağıdaki çıktıyı üretir -

Açıklama

Aşağıdaki kod Fresnel etkisini uygular. Sol ve sağ renkler, ağların kenarlarına uygulanır.

mainMaterial.refractionFresnelParameters = new BABYLON.FresnelParameters();
mainMaterial.refractionFresnelParameters.bias = 0.5;
mainMaterial.refractionFresnelParameters.power = 16;
mainMaterial.refractionFresnelParameters.leftColor = BABYLON.Color3.Black();
mainMaterial.refractionFresnelParameters.rightColor = BABYLON.Color3.White();

Önyargı ve güç özelliği, yüzeydeki Fresnel etkisini kontrol eder.

Bu demoda, rainbow.png adlı bir resim kullandık. Görüntüler yerel olarak görüntülerde / klasörlerde saklanır. İstediğiniz herhangi bir görseli indirebilir ve demo bağlantısında kullanabilirsiniz.