BabylonJS - 标准渲染管道

BabylonJS标准渲染管道 - 从简单和简单的步骤学习BabylonJS，从基本到高级概念，包括简介，环境设置，概述，基本元素，材料，动画，相机，灯光，参数形状，网格，矢量位置和旋转，贴花，曲线3，动态纹理，视差映射，镜头光晕，创建ScreenShot，反射探测器，标准渲染管道，ShaderMaterial，骨骼和骨架，物理引擎，播放声音和音乐。

StandardRenderingPipeline提供了一组与现实世界相关的后处理效果.有不同的后期处理效果，如光效和照明效果.

在下面给出的例子中，你会看到各种效果，如镜头效果，灯光的后期处理效果等.

它使用HDR立方体纹理，纹理必须是.hdr.这种纹理给出了旋转相机时可以看到的全景效果.

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

使用以下代码行调用标准渲染管道类来获得效果 :

 //创建渲染管道 var pipeline = new BABYLON.StandardRenderingPipeline("standard"，scene，1.0/devicePixelRatio，null，[camera]);  pipeline.lensTexture = new BABYLON.Texture("images/lensdirt.jpg"，scene)

在下面的演示中，我们将创建cubetexture环境.我们将使用地面网格物体，并将标准渲染管道应用于整个场景.

使用lensTexture给它纹理，这是一个图像，你可以看到与你相同的纹理移动场景.

演示

               BabylonJs - Basic Element-Creating Scene                                          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();         });

创建图像文件夹并将.hdr文件存储在其中.我们使用了 www.hdrlabs.com 上的images/GravelPlaza_REF.hdr.

您可以下载您选择的.hdr类型文件并在演示链接中使用.

输出

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

标准渲染管道

在本演示中，我们使用了图像 images/GravelPlaza_REF.hdr，images/reflectivity.png，images/albedo.png，images/lensdirt.jpg .图像存储在本地的图像/文件夹中，也粘贴在下面以供参考.您可以下载您选择的任何图像，并在演示链接中使用.请注意，很难粘贴.hdr文件，因为它的大小非常大.

Images/reflectivity.png

Reflectivity

Images/albedo.png

Albedo

Images/lensdirt.png

Lens Dirt