BabylonJS - Materiały

Materiały są jak ubrania dla przedmiotów. Możesz dodać kolor, teksturę i owinąć nią swoje oczka. Możesz użyć tego samego materiału do pokrycia wielu oczek. Siatki mogą być sceną, którą właśnie widzieliśmy w przykładzie w poprzednim rozdziale - samolot przelatujący po niebie.

W tym rozdziale nauczymy się, jak dodać kolor, teksturę i odbicie do siatek w tym rozdziale.

Dodamy materiał do już utworzonej sceny. Będziemy postępować, dodając materiał do wszystkich stworzonych przez nas kształtów.

Rozważmy kilka przykładów, aby zobaczyć, jak działa dodanie materiału.

Składnia

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

Powyższy materiał nic nie zmieni, ponieważ jest domyślny. Wykorzystamy dostępne właściwości, aby obiekty wyglądały bardziej atrakcyjnie.

Dostępne właściwości są następujące -

Transparency
Diffuse
Emissive
Ambient
Specular
Zabijanie tylnej części twarzy
WireFrame

Zobacz, jak te właściwości zastosowane na materiale zmieniają wygląd i dotyk siatki.

Podstawowa właściwość materiału - FresnelParameters

Fresnel to nowa rzecz dodana przez BabylonJS na standardmaterial. Pozwala na zmianę koloru naniesionego na kształty. Możesz uzyskać szklane odbicie, używając prostego Fresnela. Fresnel pozwoli Ci lepiej odbić na krawędziach, a nie na środku.

Następujące właściwości są dostępne dla Fresnela

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

Próbny

<!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>

Wynik

Powyższy wiersz kodu generuje następujące dane wyjściowe -

Wyjaśnienie

Poniższy kod stosuje efekt Fresnela. Kolory lewy i prawy są stosowane do krawędzi siatek.

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

Odchylenie i moc kontrolują efekt Fresnela na powierzchni.

W tym demo użyliśmy obrazu o nazwie rainbow.png. Obrazy są przechowywane lokalnie w folderach images / folder. Możesz pobrać dowolny wybrany obraz i użyć go w linku demonstracyjnym.