BabylonJS - Đường ống kết xuất tiêu chuẩn

StandardRenderingPipeline đưa ra một tập hợp các hiệu ứng hậu xử lý có liên quan đến thế giới thực. Có các hiệu ứng xử lý bài khác nhau như hiệu ứng ánh sáng và hiệu ứng chiếu sáng.

Trong ví dụ dưới đây, bạn sẽ thấy các hiệu ứng khác nhau như hiệu ứng ống kính, hiệu ứng xử lý hậu của đèn, v.v.

Nó sử dụng kết cấu hình khối HDR và kết cấu phải là .hdr. Kết cấu này mang lại hiệu ứng panaromic có thể được nhìn thấy khi bạn xoay máy ảnh.

var hdrTexture = new BABYLON.HDRCubeTexture("images/GravelPlaza_REF.hdr", scene, 512);

Lớp đường ống kết xuất tiêu chuẩn được gọi để có được hiệu ứng với dòng mã sau:

// Create rendering pipeline
var pipeline = new BABYLON.StandardRenderingPipeline("standard", scene, 1.0 / devicePixelRatio, null, [camera]);
pipeline.lensTexture = new BABYLON.Texture("images/lensdirt.jpg", scene)

Trong bản demo bên dưới, chúng ta sẽ tạo môi trường cubetexture. Chúng tôi sẽ sử dụng lưới nối đất cho giống nhau và áp dụng đường ống kết xuất tiêu chuẩn cho toàn cảnh.

Kết cấu được cung cấp cho nó bằng cách sử dụng lensTexture là một hình ảnh và bạn có thể thấy kết cấu tương tự khi bạn di chuyển cảnh.

Bản giới thiệu

<!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 / 4, Math.PI / 2.5, 200, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);
            camera.minZ = 0.1;

            // Light
            new BABYLON.PointLight("point", new BABYLON.Vector3(0, 40, 0), scene);

            // Environment Texture
            var hdrTexture = new BABYLON.HDRCubeTexture("images/GravelPlaza_REF.hdr", scene, 512);

            // Skybox
            var hdrSkybox = BABYLON.Mesh.CreateBox("hdrSkyBox", 1000.0, scene);
            var hdrSkyboxMaterial = new BABYLON.PBRMaterial("skyBox", scene);
            hdrSkyboxMaterial.backFaceCulling = false;
            hdrSkyboxMaterial.reflectionTexture = hdrTexture.clone();
            hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
            hdrSkyboxMaterial.microSurface = 1.0;
            hdrSkyboxMaterial.cameraExposure = 0.6;
            hdrSkyboxMaterial.cameraContrast = 1.6;
            hdrSkyboxMaterial.disableLighting = true;
            hdrSkybox.material = hdrSkyboxMaterial;
            hdrSkybox.infiniteDistance = true;

            // Create mesh
            var woodbox = BABYLON.MeshBuilder.CreateBox("plane", { 
               width: 40, 
               height: 50, 
               depth: 65 
            }, scene);

            var wood = new BABYLON.PBRMaterial("wood", scene);
            wood.reflectionTexture = hdrTexture;
            wood.directIntensity = 1.5;
            wood.environmentIntensity = 0.5;
            wood.specularIntensity = 0.3;
            wood.cameraExposure = 0.9;
            wood.cameraContrast = 1.6;

            wood.reflectivityTexture = new BABYLON.Texture("images/reflectivity.png", scene);
            wood.useMicroSurfaceFromReflectivityMapAlpha = true;

            wood.albedoColor = BABYLON.Color3.White();
            wood.albedoTexture = new BABYLON.Texture("images/albedo.png", scene);
            woodbox.material = wood;

            // Create rendering pipeline
            var pipeline = new BABYLON.StandardRenderingPipeline("standard", scene, 1.0 / devicePixelRatio, null, [camera]);
            pipeline.lensTexture = new BABYLON.Texture("images/lensdirt.jpg", scene);

            // Return scene
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Tạo thư mục hình ảnh và lưu trữ tệp .hdr trong đó. Chúng tôi đã sử dụng hình ảnh / GravelPlaza_REF.hdr từ www.hdrlabs.com .

Bạn có thể tải xuống các tệp loại .hdr mà bạn chọn và sử dụng trong liên kết demo.

Đầu ra

Dòng mã trên sẽ tạo ra kết quả sau:

Trong bản demo này, chúng tôi đã sử dụng hình ảnh images/GravelPlaza_REF.hdr, images/reflectivity.png, images/albedo.png, images/lensdirt.jpg. Các hình ảnh được lưu trữ trong thư mục image / local và cũng được dán bên dưới để tham khảo. Bạn có thể tải xuống bất kỳ hình ảnh nào bạn chọn và sử dụng trong liên kết demo. Xin lưu ý rằng rất khó để dán các tệp .hdr vào đây vì kích thước của nó rất lớn.