网格体积光散射后期处理

上一个
下一个

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

语法

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 文件，包含要为网格绘制的所有位置的详细信息。

输出

以上代码行将生成以下输出：

Volumemetric Light Scattering
babylonjs_mesh.htm
打印页面
上一个
下一个
广告