BabylonJS-표준 렌더링 파이프 라인

StandardRenderingPipeline은 실제 세계와 관련된 일련의 후 처리 효과를 제공합니다. 조명 효과 및 조명 효과와 같은 다양한 후 처리 효과가 있습니다.

아래 주어진 예에서 렌즈 효과, 조명의 포스트 프로세스 효과 등과 같은 다양한 효과를 볼 수 있습니다.

HDR 큐브 텍스처를 사용하며 텍스처는 .hdr이어야합니다. 이 텍스처는 카메라를 회전하는 동안 볼 수있는 파노라마 효과를 제공합니다.

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

표준 렌더링 파이프 라인 클래스는 다음 코드 줄로 효과를 얻기 위해 호출됩니다.

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

아래의 데모에서는 cubetexture 환경을 생성합니다. 그라운드 메시를 동일하게 사용하고 전체 씬에 표준 렌더링 파이프 라인을 적용합니다.

이미지 인 lensTexture를 사용하여 텍스처가 주어지며 장면을 이동하면 동일한 텍스처를 볼 수 있습니다.

데모

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

이미지 폴더를 만들고 .hdr 파일을 저장합니다. 우리는 www.hdrlabs.com의 images / GravelPlaza_REF.hdr을 사용 했습니다 .

원하는 .hdr 유형 파일을 다운로드하여 데모 링크에서 사용할 수 있습니다.

산출

위의 코드 줄은 다음 출력을 생성합니다.

이 데모에서는 이미지를 사용했습니다. images/GravelPlaza_REF.hdr, images/reflectivity.png, images/albedo.png, images/lensdirt.jpg. 이미지는 로컬로 images / 폴더에 저장되며 참조를 위해 아래에 붙여 넣습니다. 원하는 이미지를 다운로드하여 데모 링크에서 사용할 수 있습니다. .hdr 파일은 크기가 매우 커서 여기에 붙여 넣기가 어렵습니다.