网格体度量光散射后处理

更新于 2025/2/22 18:37:17

此过程散射光线，如以下输出所示。在浏览器中测试相同内容，您将看到光线如何散射穿过网格。

语法

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

参数

考虑与网格体度量光散射后处理相关的以下参数 −

Name −为灯光指定的名称。
Ratio − 后期处理的大小(0.5 表示后期处理的宽度 = canvas.width 0.5 和高度 = canvas.height 0.5)。
Camera − 场景中使用的相机。
Lightsourcemesh − 用于创建光散射效果的网格。
SamplesNum − 后期处理质量，默认为 100。
SamplingMode − 后期处理过滤模式 {number}。
Engine − babylonjs 引擎。
Reusable − 如果可重复使用则进行后期处理
scene − 应用效果的场景。

演示

<!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 light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);

            //添加弧形旋转相机
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            // 第一个参数可用于指定要导入哪个网格。这里我们导入所有网格
            BABYLON.SceneLoader.ImportMesh(
               "", "scenes/", "skull.babylon", scene, function (newMeshes) {
            
               // 将相机的目标设置为第一个导入的网格
               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);
            });

            // 用相机移动灯光
            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 文件，其中包含要为网格绘制的位置的所有详细信息