BabylonJS-メッシュLODおよびインスタンス

LODは距離の線を表します。この機能を使用すると、ビューアの距離に基づいてメッシュを指定できます。ビューアーからオブジェクトまでの距離が長くなると、LODを使用してメッシュの詳細レベルが明確に表示されます。

ブラウザで以下に示すデモを表示し、メッシュがどのようにレンダリングされるか、カメラから遠く離れた視認性を確認してください-

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("Camera", Math.PI/2, Math.PI/2, 50, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

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

            var count = 3;
            var scale = 4;

            var knot00 = BABYLON.Mesh.CreateTorusKnot("knot0", 0.5, 0.2, 128, 64, 2, 3, scene);
            var knot01 = BABYLON.Mesh.CreateBox("box", '1', scene);
            var knot02 = BABYLON.Mesh.CreateTorusKnot("knot2", 0.5, 0.2, 24, 12, 2, 3, scene);
            var knot03 = BABYLON.Mesh.CreateSphere("origin", 15, 2.0, scene);

            var materialforsphere = new BABYLON.StandardMaterial("texture1", scene);
            materialforsphere.diffuseTexture = new BABYLON.Texture("images/rainbow.png", scene);

            var material1 = new BABYLON.StandardMaterial("colo1", scene);
            material1.diffuseColor = new BABYLON.Color3(0.49, 0.25, 0);

            var material2 = material1.clone("colo2");
            material2.diffuseColor = new BABYLON.Color3(1.0, 0.5, 0.7);

            var material3 = material1.clone("colo3");
            material3.diffuseColor = new BABYLON.Color3(0.8, 1.0, 0.7);

            knot00.material = material1;
            knot01.material = material2;
            knot02.material = material3;
            knot03.material = materialforsphere;

            knot00.setEnabled(false);

            knot00.addLODLevel(15, knot01);
            knot00.addLODLevel(30, knot02);
            knot00.addLODLevel(45, knot03);
            knot00.addLODLevel(55, null);

            for (var x = -count; x <= count; x++) {
               for (var y = -count; y <= count; y++) {
                  for (var z = 5; z < 10; z++) {
                     var knot = knot00.createInstance("knotI");
                     knot.position = new BABYLON.Vector3(x *scale, y* scale, z * scale);
                  }
               }
            }
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

上記のコード行は、次の出力を生成します-

メッシュLODおよびインスタンス

説明

LODは次のように追加されます-

knot00.addLODLevel(15, knot01);
knot00.addLODLevel(30, knot02);
knot00.addLODLevel(45, knot03);
knot00.addLODLevel(55, null);

addLODLevelの最初のパラメーターは、カメラまでの距離を示します。この距離を超えると、指定されたレベルが使用されます。 nullを指定すると、指定された距離のカメラから見たときにメッシュのレンダリングが無効になります。

Babylonjs-mesh-lod-and-instances

目次

BabylonJS-メッシュLODおよびインスタンス

Demo

出力

説明