Babylonjs-standard-rendering-pipeline
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を使用して与えられ、シーンを移動すると同じテクスチャを見ることができます。
Demo
<!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>imagesフォルダーを作成し、その中に.hdrファイルを保存します。 www.hdrlabs.comのimages/GravelPlaza_REF.hdrを使用しました。
選択した.hdrタイプのファイルをダウンロードして、デモリンクで使用できます。
出力
上記のコード行は、次の出力を生成します-
このデモでは、画像 images/GravelPlaza_REF.hdr、images/reflectivity.png、images/albedo.png、images/lensdirt.jpg を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 任意の画像をダウンロードして、デモリンクで使用できます。 .hdrファイルのサイズは非常に大きいため、ここに貼り付けることは困難です。
