zhangyupeng
/
Babylon.js


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
							<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Shaders Library</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
	<script src="../Tools/DevLoader/BabylonLoader.js"></script>

	<style>
		html,
		body {
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
			overflow: hidden;
		}
		
		#renderCanvas {
			width: 100%;
			height: 100%;
		}
		
		#fps {
			position: absolute;
			background-color: black;
			border: 2px solid red;
			text-align: center;
			font-size: 16px;
			color: white;
			top: 15px;
			left: 10px;
			width: 60px;
			height: 20px;
		}
	</style>
</head>

<body>
	<div id="fps">0</div>
	<canvas id="renderCanvas"></canvas>

	<script>
	BABYLONDEVTOOLS.Loader.load(function() {
		if (BABYLON.Engine.isSupported()) {
			var canvas = document.getElementById("renderCanvas");
			var engine = new BABYLON.Engine(canvas, true);					
			BABYLONDEVTOOLS.Loader.debugShortcut(engine);	
			var divFps = document.getElementById("fps");

			var scene = new BABYLON.Scene(engine);

			var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 6, 50, BABYLON.Vector3.Zero(), scene);
			camera.attachControl(canvas, true);
			camera.minZ = 0.1;

			// Lights
			var hemisphericLight = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
			
			// Create meshes
			var sphere = BABYLON.Mesh.CreateSphere("sphere", 48, 30.0, scene);

			var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);
			var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
			skyboxMaterial.backFaceCulling = false;
			skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("/Playground/textures/TropicalSunnyDay", scene);
			skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
			skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
			skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
			skyboxMaterial.disableLighting = true;
			skybox.material = skyboxMaterial;
			skybox.setEnabled(false);
			
			// Materials
			sphere.material = new BABYLON.StandardMaterial("std", scene);
			sphere.material.diffuseTexture = new BABYLON.Texture("/Playground/textures/amiga.jpg", scene);
			sphere.material.diffuseTexture.uScale = 5;
			sphere.material.diffuseTexture.vScale = 5;

			// Register a render loop to repeatedly render the scene
			engine.runRenderLoop(function () {
				scene.render();
				divFps.innerHTML = engine.getFps().toFixed() + " fps";
			});

			// Resize
			window.addEventListener("resize", function () {
				engine.resize();
			});

			// Post-processes
			var aaPostProcess = new BABYLON.AsciiArtPostProcess("AsciiArt", camera);
			var drPostProcess = new BABYLON.DigitalRainPostProcess("AsciiArt", camera);
			
			//camera.detachPostProcess(aaPostProcess);
			camera.detachPostProcess(drPostProcess);

			var gui = new dat.GUI();
			var options = {
				postProcess: "asciiArt"
			}

			gui.add(options, 'postProcess', ['asciiArt', 'digitalRain']).onFinishChange(function () {
				camera.detachPostProcess(aaPostProcess);
				camera.detachPostProcess(drPostProcess);

				skybox.setEnabled(false);

				switch (options.postProcess) {
					case "asciiArt":
						camera.attachPostProcess(aaPostProcess);
						break;
					case "digitalRain":
						camera.attachPostProcess(drPostProcess);
						break;
				}
			});
		}
	});

	</script>
</body>

</html>