網格體積光散射後期處理

此過程散射光線，如下面的輸出所示。在瀏覽器中測試相同的程式碼，您將看到光線如何穿過網格散射。

語法

var vls = new BABYLON.VolumetricLightScatteringPostProcess(
   'vls', 1.0, camera, lightSourceMesh, samplesNum, 
   BABYLON.Texture.BILINEAR_SAMPLINGMODE, 
   engine, false, scene);

引數

考慮以下與網格體積光散射後期處理相關的引數：

名稱 - 給光源命名的名稱。
比率 - 後期處理的大小（0.5 表示您的後期處理將具有寬度 = canvas.width * 0.5 和高度 = canvas.height * 0.5）。
相機 - 場景中使用的相機。
光源網格 - 用於建立光散射效果的網格。
樣本數 - 後期處理質量，預設值為 100。
取樣模式 - 後期處理過濾模式 {number}。
引擎 - babylonjs 引擎。
可重用 - 後期處理是否可重用
場景 - 應用效果的場景。

演示

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

            //Adding a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);

            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            // The first parameter can be used to specify which mesh to import. Here we import all meshes
            BABYLON.SceneLoader.ImportMesh(
               "", "scenes/", "skull.babylon", scene, function (newMeshes) {
            
               // Set the target of the camera to the first imported mesh
               camera.target = newMeshes[0];

               var vrays = new BABYLON.VolumetricLightScatteringPostProcess(
                  'godrays', 0.9, camera, newMeshes[0], 50,
                  BABYLON.Texture.BILINEAR_SAMPLINGMODE, engine, true
               );
               vrays.exposure = 0.15;
               newMeshes[0].material = new BABYLON.StandardMaterial(null, scene);
               newMeshes[0].material.diffuseTexture = new BABYLON.Texture("textures/grass.jpg", scene);
            });

            // Move the light with the camera
            scene.registerBeforeRender(function () {
               light.position = camera.position;
            });	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

在上面的演示連結中，我們使用了 skull.babylon 網格。您可以從此處下載 skull.babylon 的 json 檔案：

skull.babylon

將檔案儲存在 scenes 資料夾中以獲得如下所示的輸出。skull.babylon 是一個 json 檔案，包含要為網格繪製的所有位置的詳細資訊。

輸出

以上程式碼行將生成以下輸出：

babylonjs_mesh.htm

列印頁面

上一個

下一個