flushpot1125/Babylonjs-postprocess-example.html

## Babylonjs-postprocess-example.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>

        <!-- Babylon.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
        <script src="https://assets.babylonjs.com/generated/Assets.js"></script>
        <script src="https://preview.babylonjs.com/ammo.js"></script>
        <script src="https://preview.babylonjs.com/cannon.js"></script>
        <script src="https://preview.babylonjs.com/Oimo.js"></script>
        <script src="https://preview.babylonjs.com/earcut.min.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");

        var startRenderLoop = function (engine, canvas) {
            engine.runRenderLoop(function () {
                if (sceneToRender && sceneToRender.activeCamera) {
                    sceneToRender.render();
                }
            });
        }

        var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
        var createScene = function () {
            // Create basic scene
            var scene = new BABYLON.Scene(engine);
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
            camera.setPosition(new BABYLON.Vector3(-3, 1, -5));
            camera.wheelPrecision = 50
            camera.attachControl(canvas, true);

            var hdrTexture = new BABYLON.CubeTexture("/textures/environment.dds", scene);
            scene.createDefaultSkybox(hdrTexture, false, 100);


            // GUI initialization and helper functions
            var bgCamera = new BABYLON.ArcRotateCamera("BGCamera", Math.PI / 2 + Math.PI / 7, Math.PI / 2, 100,
                new BABYLON.Vector3(0, 20, 0),
                scene);
            bgCamera.layerMask = 0x10000000;


            // Create default pipeline
            var defaultPipeline = new BABYLON.DefaultRenderingPipeline("default", true, scene, [camera]);
            var curve = new BABYLON.ColorCurves();
            curve.globalHue = 200;
            curve.globalDensity =80;
            curve.globalSaturation = 80;
            curve.highlightsHue = 20;
            curve.highlightsDensity = 80;
            curve.highlightsSaturation = -80;
            curve.shadowsHue = 2;
            curve.shadowsDensity = 80;
            curve.shadowsSaturation = 40;
            defaultPipeline.imageProcessing.colorCurves = curve;
            defaultPipeline.depthOfField.focalLength = 150;

            //"Multisample Anti-Aliasing"
            defaultPipeline.samples = 4;

            //"Fast Approximate Anti-Aliasing" : true/false
            defaultPipeline.fxaaEnabled = true;

            //"Tone Mapping"
            defaultPipeline.imageProcessing.toneMappingEnabled = true;


            //"camera contrast": 0-4
            defaultPipeline.imageProcessing.contrast = 1.2;

            //"camera exposure":0-4
            defaultPipeline.imageProcessing.exposure = 3.2;

            //"Color curves" : true/false
            //これをtrueにすると全体の色が濃くなる
            defaultPipeline.imageProcessing.colorCurvesEnabled=false;

            //"Bloom":true/false
            defaultPipeline.bloomEnabled = true;

            //"Bloom kernel": 1-500
            defaultPipeline.bloomKernel = 320;

            //"Bloom weight": 0-1
            defaultPipeline.bloomWeight = 0.8;

            //"Bloom threshold": 0-1
            defaultPipeline.bloomThreshold=0.2;

            //"Bloom scale": 0-1
            defaultPipeline.bloomScale=0.2;


            //"Depth Of Field (blur)": ture/false
            defaultPipeline.depthOfFieldEnabled = true;

            //Blur level : BABYLON.DepthOfFieldEffectBlurLevel.Low,BABYLON.DepthOfFieldEffectBlurLevel.Medium,BABYLON.DepthOfFieldEffectBlurLevel.High
            defaultPipeline.depthOfFieldBlurLevel = BABYLON.DepthOfFieldEffectBlurLevel.Low;

            //Blur focus distance:1-50000
            defaultPipeline.depthOfField.focusDistance=20000;

            //Blur F-Stop : 1-10
            defaultPipeline.depthOfField.fStop=0.2;

            //Blur Focal Length : 1-300
            defaultPipeline.depthOfField.focalLength=10;

            //"Vignette" : true/false
            defaultPipeline.imageProcessing.vignetteEnabled =true;

            //"Vignette Multiply" : BABYLON.ImageProcessingPostProcess.VIGNETTEMODE_MULTIPLY or BABYLON.ImageProcessingPostProcess.VIGNETTEMODE_OPAQUE
            defaultPipeline.imageProcessing.vignetteBlendMode =BABYLON.ImageProcessingPostProcess.VIGNETTEMODE_MULTIPLY;


            //"Vignette color" : color picker value
            //defaultPipeline.imageProcessing.vignetteColor =new Color3(0,0,0);

            //"Vignette weight : 0-10
            //defaultPipeline.imageProcessing.vignetteWeight=3;

            scene.activeCameras = [camera, bgCamera];

            // Import model
            //BABYLON.SceneLoader.ImportMesh("", "https://www.babylonjs.com/Assets/DamagedHelmet/glTF/", "DamagedHelmet.gltf", scene, function (newMeshes) {
            BABYLON.SceneLoader.ImportMesh("", "./models/", "room_photoreal_v6.glb", scene, function (newMeshes) {

                camera.target = newMeshes[0]
              //e  var e = scene.createDefaultEnvironment();
                // Creating default environment enables tone mapping so disable for demo
                defaultPipeline.imageProcessing.toneMappingEnabled = false;
            });

            return scene;
        }
                window.initFunction = async function() {


                    var asyncEngineCreation = async function() {
                        try {
                        return createDefaultEngine();
                        } catch(e) {
                        console.log("the available createEngine function failed. Creating the default engine instead");
                        return createDefaultEngine();
                        }
                    }

                    window.engine = await asyncEngineCreation();
        if (!engine) throw 'engine should not be null.';
        startRenderLoop(engine, canvas);
        window.scene = createScene();};
        initFunction().then(() => {sceneToRender = scene
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Babylon.js sample code</title>

	<!-- Babylon.js -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
	<script src="https://assets.babylonjs.com/generated/Assets.js"></script>
	<script src="https://preview.babylonjs.com/ammo.js"></script>
	<script src="https://preview.babylonjs.com/cannon.js"></script>
	<script src="https://preview.babylonjs.com/Oimo.js"></script>
	<script src="https://preview.babylonjs.com/earcut.min.js"></script>
	<script src="https://preview.babylonjs.com/babylon.js"></script>
	<script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
	<script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
	<script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
	<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
	<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
	<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
	<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

	<style>
	html, body {
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	#renderCanvas {
	width: 100%;
	height: 100%;
	touch-action: none;
	}
	</style>
	</head>
	<body>
	<canvas id="renderCanvas"></canvas>
	<script>
	var canvas = document.getElementById("renderCanvas");

	var startRenderLoop = function (engine, canvas) {
	engine.runRenderLoop(function () {
	if (sceneToRender && sceneToRender.activeCamera) {
	sceneToRender.render();
	}
	});
	}

	var engine = null;
	var scene = null;
	var sceneToRender = null;
	var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false}); };
	var createScene = function () {
	// Create basic scene
	var scene = new BABYLON.Scene(engine);
	var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
	camera.setPosition(new BABYLON.Vector3(-3, 1, -5));
	camera.wheelPrecision = 50
	camera.attachControl(canvas, true);

	var hdrTexture = new BABYLON.CubeTexture("/textures/environment.dds", scene);
	scene.createDefaultSkybox(hdrTexture, false, 100);


	// GUI initialization and helper functions
	var bgCamera = new BABYLON.ArcRotateCamera("BGCamera", Math.PI / 2 + Math.PI / 7, Math.PI / 2, 100,
	new BABYLON.Vector3(0, 20, 0),
	scene);
	bgCamera.layerMask = 0x10000000;


	// Create default pipeline
	var defaultPipeline = new BABYLON.DefaultRenderingPipeline("default", true, scene, [camera]);
	var curve = new BABYLON.ColorCurves();
	curve.globalHue = 200;
	curve.globalDensity =80;
	curve.globalSaturation = 80;
	curve.highlightsHue = 20;
	curve.highlightsDensity = 80;
	curve.highlightsSaturation = -80;
	curve.shadowsHue = 2;
	curve.shadowsDensity = 80;
	curve.shadowsSaturation = 40;
	defaultPipeline.imageProcessing.colorCurves = curve;
	defaultPipeline.depthOfField.focalLength = 150;

	//"Multisample Anti-Aliasing"
	defaultPipeline.samples = 4;

	//"Fast Approximate Anti-Aliasing" : true/false
	defaultPipeline.fxaaEnabled = true;

	//"Tone Mapping"
	defaultPipeline.imageProcessing.toneMappingEnabled = true;


	//"camera contrast": 0-4
	defaultPipeline.imageProcessing.contrast = 1.2;

	//"camera exposure":0-4
	defaultPipeline.imageProcessing.exposure = 3.2;

	//"Color curves" : true/false
	//これをtrueにすると全体の色が濃くなる
	defaultPipeline.imageProcessing.colorCurvesEnabled=false;

	//"Bloom":true/false
	defaultPipeline.bloomEnabled = true;

	//"Bloom kernel": 1-500
	defaultPipeline.bloomKernel = 320;

	//"Bloom weight": 0-1
	defaultPipeline.bloomWeight = 0.8;

	//"Bloom threshold": 0-1
	defaultPipeline.bloomThreshold=0.2;

	//"Bloom scale": 0-1
	defaultPipeline.bloomScale=0.2;


	//"Depth Of Field (blur)": ture/false
	defaultPipeline.depthOfFieldEnabled = true;

	//Blur level : BABYLON.DepthOfFieldEffectBlurLevel.Low,BABYLON.DepthOfFieldEffectBlurLevel.Medium,BABYLON.DepthOfFieldEffectBlurLevel.High
	defaultPipeline.depthOfFieldBlurLevel = BABYLON.DepthOfFieldEffectBlurLevel.Low;

	//Blur focus distance:1-50000
	defaultPipeline.depthOfField.focusDistance=20000;

	//Blur F-Stop : 1-10
	defaultPipeline.depthOfField.fStop=0.2;

	//Blur Focal Length : 1-300
	defaultPipeline.depthOfField.focalLength=10;

	//"Vignette" : true/false
	defaultPipeline.imageProcessing.vignetteEnabled =true;

	//"Vignette Multiply" : BABYLON.ImageProcessingPostProcess.VIGNETTEMODE_MULTIPLY or BABYLON.ImageProcessingPostProcess.VIGNETTEMODE_OPAQUE
	defaultPipeline.imageProcessing.vignetteBlendMode =BABYLON.ImageProcessingPostProcess.VIGNETTEMODE_MULTIPLY;


	//"Vignette color" : color picker value
	//defaultPipeline.imageProcessing.vignetteColor =new Color3(0,0,0);

	//"Vignette weight : 0-10
	//defaultPipeline.imageProcessing.vignetteWeight=3;

	scene.activeCameras = [camera, bgCamera];

	// Import model
	//BABYLON.SceneLoader.ImportMesh("", "https://www.babylonjs.com/Assets/DamagedHelmet/glTF/", "DamagedHelmet.gltf", scene, function (newMeshes) {
	BABYLON.SceneLoader.ImportMesh("", "./models/", "room_photoreal_v6.glb", scene, function (newMeshes) {

	camera.target = newMeshes[0]
	//e var e = scene.createDefaultEnvironment();
	// Creating default environment enables tone mapping so disable for demo
	defaultPipeline.imageProcessing.toneMappingEnabled = false;
	});

	return scene;
	}
	window.initFunction = async function() {


	var asyncEngineCreation = async function() {
	try {
	return createDefaultEngine();
	} catch(e) {
	console.log("the available createEngine function failed. Creating the default engine instead");
	return createDefaultEngine();
	}
	}

	window.engine = await asyncEngineCreation();
	if (!engine) throw 'engine should not be null.';
	startRenderLoop(engine, canvas);
	window.scene = createScene();};
	initFunction().then(() => {sceneToRender = scene
	});

	// Resize
	window.addEventListener("resize", function () {
	engine.resize();
	});
	</script>
	</body>
	</html>