Added dynamic terrain example.

examples/js/ShaderTerrain.js

@@ -0,0 +1,308 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ *
+ */
+
+THREE.ShaderTerrain = {
+
+	/* -------------------------------------------------------------------------
+	//	Dynamic terrain shader
+	//		- Blinn-Phong
+	//		- height + normal + diffuse1 + diffuse2 + specular + detail maps
+	//		- point and directional lights (use with "lights: true" material option)
+	 ------------------------------------------------------------------------- */
+
+	'terrain' : {
+
+		uniforms: THREE.UniformsUtils.merge( [
+
+			THREE.UniformsLib[ "fog" ],
+			THREE.UniformsLib[ "lights" ],
+
+			{
+
+			"enableDiffuse1"  : { type: "i", value: 0 },
+			"enableDiffuse2"  : { type: "i", value: 0 },
+			"enableSpecular"  : { type: "i", value: 0 },
+			"enableReflection": { type: "i", value: 0 },
+
+			"tDiffuse1"	   : { type: "t", value: 0, texture: null },
+			"tDiffuse2"	   : { type: "t", value: 1, texture: null },
+			"tDetail"	   : { type: "t", value: 2, texture: null },
+			"tNormal"	   : { type: "t", value: 3, texture: null },
+			"tSpecular"	   : { type: "t", value: 4, texture: null },
+			"tDisplacement": { type: "t", value: 5, texture: null },
+
+			"uNormalScale": { type: "f", value: 1.0 },
+
+			"uDisplacementBias": { type: "f", value: 0.0 },
+			"uDisplacementScale": { type: "f", value: 1.0 },
+
+			"uDiffuseColor": { type: "c", value: new THREE.Color( 0xeeeeee ) },
+			"uSpecularColor": { type: "c", value: new THREE.Color( 0x111111 ) },
+			"uAmbientColor": { type: "c", value: new THREE.Color( 0x050505 ) },
+			"uShininess": { type: "f", value: 30 },
+			"uOpacity": { type: "f", value: 1 },
+
+			"uRepeatBase"    : { type: "v2", value: new THREE.Vector2( 1, 1 ) },
+			"uRepeatOverlay" : { type: "v2", value: new THREE.Vector2( 1, 1 ) },
+
+			"uOffset" : { type: "v2", value: new THREE.Vector2( 0, 0 ) }
+
+			}
+
+		] ),
+
+		fragmentShader: [
+
+			"uniform vec3 uAmbientColor;",
+			"uniform vec3 uDiffuseColor;",
+			"uniform vec3 uSpecularColor;",
+			"uniform float uShininess;",
+			"uniform float uOpacity;",
+
+			"uniform bool enableDiffuse1;",
+			"uniform bool enableDiffuse2;",
+			"uniform bool enableSpecular;",
+
+			"uniform sampler2D tDiffuse1;",
+			"uniform sampler2D tDiffuse2;",
+			"uniform sampler2D tDetail;",
+			"uniform sampler2D tNormal;",
+			"uniform sampler2D tSpecular;",
+			"uniform sampler2D tDisplacement;",
+
+			"uniform float uNormalScale;",
+
+			"uniform vec2 uRepeatOverlay;",
+			"uniform vec2 uRepeatBase;",
+
+			"uniform vec2 uOffset;",
+
+			"varying vec3 vTangent;",
+			"varying vec3 vBinormal;",
+			"varying vec3 vNormal;",
+			"varying vec2 vUv;",
+
+			"uniform vec3 ambientLightColor;",
+
+			"#if MAX_DIR_LIGHTS > 0",
+				"uniform vec3 directionalLightColor[ MAX_DIR_LIGHTS ];",
+				"uniform vec3 directionalLightDirection[ MAX_DIR_LIGHTS ];",
+			"#endif",
+
+			"#if MAX_POINT_LIGHTS > 0",
+				"uniform vec3 pointLightColor[ MAX_POINT_LIGHTS ];",
+				"uniform vec3 pointLightPosition[ MAX_POINT_LIGHTS ];",
+				"uniform float pointLightDistance[ MAX_POINT_LIGHTS ];",
+			"#endif",
+
+			"varying vec3 vViewPosition;",
+
+			THREE.ShaderChunk[ "fog_pars_fragment" ],
+
+			"void main() {",
+
+				"gl_FragColor = vec4( vec3( 1.0 ), uOpacity );",
+
+				"vec3 specularTex = vec3( 1.0 );",
+
+				"vec2 uvOverlay = uRepeatOverlay * vUv + uOffset;",
+				"vec2 uvBase = uRepeatBase * vUv;",
+
+				"vec3 normalTex = texture2D( tDetail, uvOverlay ).xyz * 2.0 - 1.0;",
+				"normalTex.xy *= uNormalScale;",
+				"normalTex = normalize( normalTex );",
+
+				"if( enableDiffuse1 && enableDiffuse2 ) {",
+
+					"vec4 colDiffuse1 = texture2D( tDiffuse1, uvOverlay );",
+					"vec4 colDiffuse2 = texture2D( tDiffuse2, uvOverlay );",
+
+					"#ifdef GAMMA_INPUT",
+
+						"colDiffuse1.xyz *= colDiffuse1.xyz;",
+						"colDiffuse2.xyz *= colDiffuse2.xyz;",
+
+					"#endif",
+
+					"gl_FragColor = gl_FragColor * mix ( colDiffuse1, colDiffuse2, 1.0 - texture2D( tDisplacement, uvBase ) );",
+
+				" } else if( enableDiffuse1 ) {",
+
+					"gl_FragColor = gl_FragColor * texture2D( tDiffuse1, uvOverlay );",
+
+				"} else if( enableDiffuse2 ) {",
+
+					"gl_FragColor = gl_FragColor * texture2D( tDiffuse2, uvOverlay );",
+
+				"}",
+
+				"if( enableSpecular )",
+					"specularTex = texture2D( tSpecular, uvOverlay ).xyz;",
+
+				"mat3 tsb = mat3( vTangent, vBinormal, vNormal );",
+				"vec3 finalNormal = tsb * normalTex;",
+
+				"vec3 normal = normalize( finalNormal );",
+				"vec3 viewPosition = normalize( vViewPosition );",
+
+				// point lights
+
+				"#if MAX_POINT_LIGHTS > 0",
+
+					"vec3 pointDiffuse = vec3( 0.0 );",
+					"vec3 pointSpecular = vec3( 0.0 );",
+
+					"for ( int i = 0; i < MAX_POINT_LIGHTS; i ++ ) {",
+
+						"vec4 lPosition = viewMatrix * vec4( pointLightPosition[ i ], 1.0 );",
+
+						"vec3 lVector = lPosition.xyz + vViewPosition.xyz;",
+
+						"float lDistance = 1.0;",
+
+						"if ( pointLightDistance[ i ] > 0.0 )",
+							"lDistance = 1.0 - min( ( length( lVector ) / pointLightDistance[ i ] ), 1.0 );",
+
+						"lVector = normalize( lVector );",
+
+						"vec3 pointHalfVector = normalize( lVector + viewPosition );",
+						"float pointDistance = lDistance;",
+
+						"float pointDotNormalHalf = max( dot( normal, pointHalfVector ), 0.0 );",
+						"float pointDiffuseWeight = max( dot( normal, lVector ), 0.0 );",
+
+						"float pointSpecularWeight = specularTex.r * pow( pointDotNormalHalf, uShininess );",
+
+						"pointDiffuse += pointDistance * pointLightColor[ i ] * uDiffuseColor * pointDiffuseWeight;",
+						"pointSpecular += pointDistance * pointLightColor[ i ] * uSpecularColor * pointSpecularWeight * pointDiffuseWeight;",
+
+					"}",
+
+				"#endif",
+
+				// directional lights
+
+				"#if MAX_DIR_LIGHTS > 0",
+
+					"vec3 dirDiffuse = vec3( 0.0 );",
+					"vec3 dirSpecular = vec3( 0.0 );",
+
+					"for( int i = 0; i < MAX_DIR_LIGHTS; i++ ) {",
+
+						"vec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );",
+
+						"vec3 dirVector = normalize( lDirection.xyz );",
+						"vec3 dirHalfVector = normalize( lDirection.xyz + viewPosition );",
+
+						"float dirDotNormalHalf = max( dot( normal, dirHalfVector ), 0.0 );",
+						"float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );",
+
+						"float dirSpecularWeight = specularTex.r * pow( dirDotNormalHalf, uShininess );",
+
+						"dirDiffuse += directionalLightColor[ i ] * uDiffuseColor * dirDiffuseWeight;",
+						"dirSpecular += directionalLightColor[ i ] * uSpecularColor * dirSpecularWeight * dirDiffuseWeight;",
+
+					"}",
+
+				"#endif",
+
+				// all lights contribution summation
+
+				"vec3 totalDiffuse = vec3( 0.0 );",
+				"vec3 totalSpecular = vec3( 0.0 );",
+
+				"#if MAX_DIR_LIGHTS > 0",
+
+					"totalDiffuse += dirDiffuse;",
+					"totalSpecular += dirSpecular;",
+
+				"#endif",
+
+				"#if MAX_POINT_LIGHTS > 0",
+
+					"totalDiffuse += pointDiffuse;",
+					"totalSpecular += pointSpecular;",
+
+				"#endif",
+
+				//"gl_FragColor.xyz = gl_FragColor.xyz * ( totalDiffuse + ambientLightColor * uAmbientColor) + totalSpecular;",
+				"gl_FragColor.xyz = gl_FragColor.xyz * ( totalDiffuse + ambientLightColor * uAmbientColor + totalSpecular );",
+
+				THREE.ShaderChunk[ "linear_to_gamma_fragment" ],
+				THREE.ShaderChunk[ "fog_fragment" ],
+
+			"}"
+
+		].join("\n"),
+
+		vertexShader: [
+
+			"attribute vec4 tangent;",
+
+			"uniform vec2 uRepeatBase;",
+
+			"uniform sampler2D tNormal;",
+
+			"#ifdef VERTEX_TEXTURES",
+
+				"uniform sampler2D tDisplacement;",
+				"uniform float uDisplacementScale;",
+				"uniform float uDisplacementBias;",
+
+			"#endif",
+
+			"varying vec3 vTangent;",
+			"varying vec3 vBinormal;",
+			"varying vec3 vNormal;",
+			"varying vec2 vUv;",
+
+			"varying vec3 vViewPosition;",
+
+			"void main() {",
+
+				"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
+
+				"vViewPosition = -mvPosition.xyz;",
+
+				"vNormal = normalize( normalMatrix * normal );",
+
+				// tangent and binormal vectors
+
+				"vTangent = normalize( normalMatrix * tangent.xyz );",
+
+				"vBinormal = cross( vNormal, vTangent ) * tangent.w;",
+				"vBinormal = normalize( vBinormal );",
+
+				// texture coordinates
+
+				"vUv = uv;",
+
+				"vec2 uvBase = uv * uRepeatBase;",
+
+				// displacement mapping
+
+				"#ifdef VERTEX_TEXTURES",
+
+					"vec3 dv = texture2D( tDisplacement, uvBase ).xyz;",
+					"float df = uDisplacementScale * dv.x + uDisplacementBias;",
+					"vec4 displacedPosition = vec4( vNormal.xyz * df, 0.0 ) + mvPosition;",
+					"gl_Position = projectionMatrix * displacedPosition;",
+
+				"#else",
+
+					"gl_Position = projectionMatrix * mvPosition;",
+
+				"#endif",
+
+				"vec3 normalTex = texture2D( tNormal, uvBase ).xyz * 2.0 - 1.0;",
+				"vNormal = normalMatrix * normalTex;",
+
+			"}"
+
+		].join("\n")
+
+	}
+
+};

examples/textures/terrain/readme.txt

@@ -0,0 +1,9 @@
+Textures from http://opengameart.org/
+
+http://opengameart.org/content/dark-grass
+http://opengameart.org/content/backgrounds-topdown-games
+
+Slightly modified to have more GPU friendly sizes.
+
+Licensed under a Creative Commons Attribution 3.0 Unported License:
+http://creativecommons.org/licenses/by/3.0/

examples/webgl_terrain_dynamic.html

@@ -0,0 +1,762 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js webgl - dynamic procedural terrain</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background: #000;
+				color: #999;
+				padding: 0;
+				margin: 0;
+				overflow: hidden;
+				font-family: georgia;
+				font-size:1em;
+				text-align: center;
+			}
+
+			#info { margin-top: 2em	}
+
+			a { color: #fb0; }
+
+			#footer { width: 100%; margin: 2em auto; text-align: center; position: absolute; bottom: 0 }
+			.h { color: #fb0 }
+			.c { display: inline; margin-left: 1em }
+
+			#loading { width: 100%; margin: 2em auto; text-align: center; position: absolute; top: 25em  }
+
+			#oldie a { color:#da0 }
+		</style>
+	</head>
+
+	<body>
+		<div id="container"></div>
+
+		<div id="info">
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - dynamic procedural terrain using
+			<a href="https://github.com/ashima/webgl-noise" target="_blank">3d simplex noise</a><br/>
+			birds by <a href="http://mirada.com/">mirada</a> from <a href="http://ro.me">ro.me</a> -
+			textures by <a href="http://opengameart.org/content/dark-grass">qubodup</a> and
+			<a href="http://opengameart.org/content/backgrounds-topdown-games">davis123</a> -
+			music by <a href="http://incompetech.com/m/c/royalty-free/index.html?keywords=00875">Kevin MacLeod</a>
+		</div>
+
+		<div id="loading">Loading...</div>
+
+		<div id="footer">
+			<div class="c">
+			day / night: <span class="h">n</span>
+			</div>
+
+			<div class="c">
+			animate terrain: <span class="h">m</span>
+			</div>
+
+			<div class="c">
+			toggle soundtrack: <span class="h">b</span>
+			</div>
+		</div>
+<!--
+		<audio id="soundtrack" autoplay loop style="display:none">
+			<source src="sounds/Five_Armies.mp3" type='audio/mp3'>
+			<source src="sounds/Five_Armies.ogg" type='audio/ogg'>
+		</audio>
+-->
+		<script src="../build/Three.js"></script>
+
+		<script src="js/Detector.js"></script>
+		<script src="js/RequestAnimationFrame.js"></script>
+		<script src="js/Stats.js"></script>
+
+		<script src="js/ShaderTerrain.js"></script>
+		<script src="js/ShaderExtras.js"></script>
+
+		<script src="js/postprocessing/EffectComposer.js"></script>
+		<script src="js/postprocessing/RenderPass.js"></script>
+		<script src="js/postprocessing/BloomPass.js"></script>
+		<script src="js/postprocessing/ShaderPass.js"></script>
+		<script src="js/postprocessing/MaskPass.js"></script>
+		<script src="js/postprocessing/SavePass.js"></script>
+
+		<script id="fragmentShaderNormal" type="x-shader/x-fragment">
+
+			uniform float height;
+			uniform vec2 resolution;
+			uniform sampler2D heightMap;
+
+			varying vec2 vUv;
+
+			void main( void ) {
+
+				float val = texture2D( heightMap, vUv ).x;
+
+				float valU = texture2D( heightMap, vUv + vec2( 1.0 / resolution.x, 0.0 ) ).x;
+				float valV = texture2D( heightMap, vUv + vec2( 0.0, 1.0 / resolution.y ) ).x;
+
+				gl_FragColor = vec4( ( 0.5 * normalize( vec3( val - valU, val - valV, height  ) ) + 0.5 ), 1.0 );
+
+			}
+
+		</script>
+
+		<script id="fragmentShaderNoise" type="x-shader/x-fragment">
+
+			//
+			// Description : Array and textureless GLSL 3D simplex noise function.
+			//      Author : Ian McEwan, Ashima Arts.
+			//  Maintainer : ijm
+			//     Lastmod : 20110409 (stegu)
+			//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+			//               Distributed under the MIT License. See LICENSE file.
+			//
+
+			uniform float time;
+			varying vec2 vUv;
+
+			vec4 permute( vec4 x ) {
+
+				return mod( ( ( x * 34.0 ) + 1.0 ) * x, 289.0 );
+
+			}
+
+			vec4 taylorInvSqrt( vec4 r ) {
+
+				return 1.79284291400159 - 0.85373472095314 * r;
+
+			}
+
+			float snoise( vec3 v ) {
+
+				const vec2 C = vec2( 1.0 / 6.0, 1.0 / 3.0 );
+				const vec4 D = vec4( 0.0, 0.5, 1.0, 2.0 );
+
+				// First corner
+
+				vec3 i  = floor( v + dot( v, C.yyy ) );
+				vec3 x0 = v - i + dot( i, C.xxx );
+
+				// Other corners
+
+				vec3 g = step( x0.yzx, x0.xyz );
+				vec3 l = 1.0 - g;
+				vec3 i1 = min( g.xyz, l.zxy );
+				vec3 i2 = max( g.xyz, l.zxy );
+
+				vec3 x1 = x0 - i1 + 1.0 * C.xxx;
+				vec3 x2 = x0 - i2 + 2.0 * C.xxx;
+				vec3 x3 = x0 - 1. + 3.0 * C.xxx;
+
+				// Permutations
+
+				i = mod( i, 289.0 );
+				vec4 p = permute( permute( permute(
+						 i.z + vec4( 0.0, i1.z, i2.z, 1.0 ) )
+					   + i.y + vec4( 0.0, i1.y, i2.y, 1.0 ) )
+					   + i.x + vec4( 0.0, i1.x, i2.x, 1.0 ) );
+
+				// Gradients
+				// ( N*N points uniformly over a square, mapped onto an octahedron.)
+
+				float n_ = 1.0 / 7.0; // N=7
+
+				vec3 ns = n_ * D.wyz - D.xzx;
+
+				vec4 j = p - 49.0 * floor( p * ns.z *ns.z );  //  mod(p,N*N)
+
+				vec4 x_ = floor( j * ns.z );
+				vec4 y_ = floor( j - 7.0 * x_ );    // mod(j,N)
+
+				vec4 x = x_ *ns.x + ns.yyyy;
+				vec4 y = y_ *ns.x + ns.yyyy;
+				vec4 h = 1.0 - abs( x ) - abs( y );
+
+				vec4 b0 = vec4( x.xy, y.xy );
+				vec4 b1 = vec4( x.zw, y.zw );
+
+
+				vec4 s0 = floor( b0 ) * 2.0 + 1.0;
+				vec4 s1 = floor( b1 ) * 2.0 + 1.0;
+				vec4 sh = -step( h, vec4( 0.0 ) );
+
+				vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+				vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+				vec3 p0 = vec3( a0.xy, h.x );
+				vec3 p1 = vec3( a0.zw, h.y );
+				vec3 p2 = vec3( a1.xy, h.z );
+				vec3 p3 = vec3( a1.zw, h.w );
+
+				// Normalise gradients
+
+				vec4 norm = taylorInvSqrt( vec4( dot( p0, p0 ), dot( p1, p1 ), dot( p2, p2 ), dot( p3, p3 ) ) );
+				p0 *= norm.x;
+				p1 *= norm.y;
+				p2 *= norm.z;
+				p3 *= norm.w;
+
+				// Mix final noise value
+
+				vec4 m = max( 0.6 - vec4( dot( x0, x0 ), dot( x1, x1 ), dot( x2, x2 ), dot( x3, x3 ) ), 0.0 );
+				m = m * m;
+				return 42.0 * dot( m*m, vec4( dot( p0, x0 ), dot( p1, x1 ),
+											  dot( p2, x2 ), dot( p3, x3 ) ) );
+
+			}
+
+			float surface3( vec3 coord ) {
+
+				float n = 0.0;
+
+				n += 1.0 * abs( snoise( coord ) );
+				n += 0.5 * abs( snoise( coord * 2.0 ) );
+				n += 0.25 * abs( snoise( coord * 4.0 ) );
+				n += 0.125 * abs( snoise( coord * 8.0 ) );
+
+				return n;
+
+			}
+
+			void main( void ) {
+
+				vec3 coord = vec3( vUv, -time );
+				float n = surface3( coord );
+
+				gl_FragColor = vec4( vec3( n, n, n ), 1.0 );
+
+			}
+
+		</script>
+
+		<script id="vertexShader" type="x-shader/x-vertex">
+
+			varying vec2 vUv;
+			uniform vec2 scale;
+			uniform vec2 offset;
+
+			void main( void ) {
+
+				vUv = uv * scale + offset;
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+			}
+
+		</script>
+
+		<script id="vertexShaderFlip" type="x-shader/x-vertex">
+
+			varying vec2 vUv;
+			uniform vec2 scale;
+
+			void main( void ) {
+
+				vUv = vec2( uv.x, 1.0 - uv.y ) * scale;
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+			}
+
+		</script>
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var MARGIN = 100;
+
+			var SCREEN_WIDTH = window.innerWidth;
+			var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
+
+			var renderer, container, stats;
+
+			var camera, scene;
+			var cameraOrtho, sceneRenderTarget;
+
+			var uniformsNoise, uniformsNormal,
+				heightMap, normalMap,
+				quadTarget;
+
+			var spotLight, pointLight;
+
+			var terrain;
+
+			var textureCounter = 0;
+
+			var animDelta = 0, animDeltaDir = -1;
+			var lightVal = 0, lightDir = 1;
+			var soundVal = 0, oldSoundVal = 0, soundDir = 1;
+
+			var clock = new THREE.Clock();
+
+			var morph, morphs = [];
+
+			var updateNoise = true;
+
+			var animateTerrain = false;
+
+			var textMesh1;
+
+			var mlib = {};
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.getElementById( 'container' );
+
+				soundtrack = document.getElementById( "soundtrack" );
+
+				// SCENE (RENDER TARGET)
+
+				sceneRenderTarget = new THREE.Scene();
+
+				cameraOrtho = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
+				cameraOrtho.position.z = 100;
+
+				sceneRenderTarget.add( cameraOrtho );
+
+				// SCENE (FINAL)
+
+				scene = new THREE.Scene();
+
+				scene.fog = new THREE.Fog( 0x050505, 2000, 4000 );
+				scene.fog.color.setHSV( 0.102, 0.9, 0.825 );
+
+				camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 2, 4000 );
+				camera.position.set( -1200, 800, 1200 );
+
+				scene.add( camera );
+
+				controls = new THREE.TrackballControls( camera );
+				controls.target.set( 0, 0, 0 );
+
+				controls.rotateSpeed = 1.0;
+				controls.zoomSpeed = 1.2;
+				controls.panSpeed = 0.8;
+
+				controls.noZoom = false;
+				controls.noPan = false;
+
+				controls.staticMoving = false;
+				controls.dynamicDampingFactor = 0.15;
+
+				controls.keys = [ 65, 83, 68 ];
+
+				// LIGHTS
+
+				scene.add( new THREE.AmbientLight( 0x111111 ) );
+
+				spotLight = new THREE.SpotLight( 0xffffff, 1.15 );
+				spotLight.position.set( 500, 2000, 0 );
+				spotLight.castShadow = true;
+				scene.add( spotLight );
+
+				pointLight = new THREE.PointLight( 0xff4400, 1.5 );
+				pointLight.position.set( 0, 0, 0 );
+				scene.add( pointLight );
+
+
+				// HEIGHT + NORMAL MAPS
+
+				var rx = 256, ry = 256;
+				var pars = { minFilter: THREE.LinearMipmapLinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
+
+				heightMap  = new THREE.WebGLRenderTarget( rx, ry, pars );
+				normalMap = new THREE.WebGLRenderTarget( rx, ry, pars );
+
+				uniformsNoise = {
+
+					time:   { type: "f", value: 1.0 },
+					scale:  { type: "v2", value: new THREE.Vector2( 1.5, 1.5 ) },
+					offset: { type: "v2", value: new THREE.Vector2( 0, 0 ) }
+
+				};
+
+				uniformsNormal = {
+
+					height:  	{ type: "f",  value: 0.05 },
+					resolution: { type: "v2", value: new THREE.Vector2( rx, ry ) },
+					scale: 		{ type: "v2", value: new THREE.Vector2( 1, 1 ) },
+					heightMap:  { type: "t",  value: 1, texture: heightMap }
+
+				};
+
+				var vertexShader = document.getElementById( 'vertexShader' ).textContent;
+				var vertexShaderFlip = document.getElementById( 'vertexShaderFlip' ).textContent;
+
+				var normalShader = THREE.ShaderTerrain[ "terrain" ];
+
+				uniformsNormalMap = THREE.UniformsUtils.clone( normalShader.uniforms );
+
+				uniformsNormalMap[ "tNormal" ].texture = normalMap;
+				uniformsNormalMap[ "uNormalScale" ].value = 3.5;
+
+				uniformsNormalMap[ "tDisplacement" ].texture = heightMap;
+
+				uniformsNormalMap[ "tDiffuse1" ].texture = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big.jpg", null, loadTextures );
+				uniformsNormalMap[ "tDiffuse2" ].texture = THREE.ImageUtils.loadTexture( "textures/terrain/backgrounddetailed6.jpg", null, loadTextures );
+				uniformsNormalMap[ "tSpecular" ].texture = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big-specular.jpg", null, loadTextures );
+				uniformsNormalMap[ "tDetail" ].texture = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big-nm.jpg", null, loadTextures );
+
+				uniformsNormalMap[ "enableDiffuse1" ].value = true;
+				uniformsNormalMap[ "enableDiffuse2" ].value = true;
+				uniformsNormalMap[ "enableSpecular" ].value = true;
+
+				uniformsNormalMap[ "uDiffuseColor" ].value.setHex( 0xffffff );
+				uniformsNormalMap[ "uSpecularColor" ].value.setHex( 0xffffff );
+				uniformsNormalMap[ "uAmbientColor" ].value.setHex( 0x111111 );
+
+				uniformsNormalMap[ "uShininess" ].value = 30;
+
+				uniformsNormalMap[ "uDisplacementScale" ].value = 375;
+
+				uniformsNormalMap[ "tDiffuse1" ].texture.wrapS = uniformsNormalMap[ "tDiffuse1" ].texture.wrapT = THREE.RepeatWrapping;
+				uniformsNormalMap[ "tDiffuse2" ].texture.wrapS = uniformsNormalMap[ "tDiffuse2" ].texture.wrapT = THREE.RepeatWrapping;
+				uniformsNormalMap[ "tDetail" ].texture.wrapS = uniformsNormalMap[ "tDetail" ].texture.wrapT = THREE.RepeatWrapping;
+				uniformsNormalMap[ "tSpecular" ].texture.wrapS = uniformsNormalMap[ "tDetail" ].texture.wrapT = THREE.RepeatWrapping;
+				uniformsNormalMap[ "uRepeatOverlay" ].value.set( 6, 6 );
+
+				var params = [
+								[ 'heightmap', 	document.getElementById( 'fragmentShaderNoise' ).textContent, 	vertexShader, uniformsNoise, false ],
+								[ 'normal', 	document.getElementById( 'fragmentShaderNormal' ).textContent,  vertexShaderFlip, uniformsNormal, false ],
+								[ 'terrain', 	normalShader.fragmentShader, normalShader.vertexShader, uniformsNormalMap, true ]
+							 ];
+
+				for( var i = 0; i < params.length; i ++ ) {
+
+					material = new THREE.ShaderMaterial( {
+
+						uniforms: 		params[ i ][ 3 ],
+						vertexShader: 	params[ i ][ 2 ],
+						fragmentShader: params[ i ][ 1 ],
+						lights: 		params[ i ][ 4 ],
+						fog: 			true
+						} );
+
+					mlib[ params[ i ][ 0 ] ] = material;
+
+				}
+
+
+				var plane = new THREE.PlaneGeometry( SCREEN_WIDTH, SCREEN_HEIGHT );
+
+				quadTarget = new THREE.Mesh( plane, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );
+				quadTarget.position.z = -500;
+				sceneRenderTarget.addObject( quadTarget );
+
+				// TERRAIN MESH
+
+				var geometryTerrain = new THREE.PlaneGeometry( 6000, 6000, 256, 256 );
+				geometryTerrain.computeFaceNormals();
+				geometryTerrain.computeVertexNormals();
+				geometryTerrain.computeTangents();
+
+				terrain = new THREE.Mesh( geometryTerrain, mlib[ "terrain" ] );
+				terrain.rotation.set( -Math.PI/2, 0, 0 );
+				terrain.position.set( 0, -125, 0 );
+				terrain.visible = false;
+				scene.add( terrain );
+
+				// RENDERER
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setClearColor( scene.fog.color, 1 );
+
+				renderer.domElement.style.position = "absolute";
+				renderer.domElement.style.top = MARGIN + "px";
+				renderer.domElement.style.left = "0px";
+
+				container.appendChild( renderer.domElement );
+
+				//
+
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+
+
+				// STATS
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
+
+				stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
+				stats.domElement.children[ 0 ].style.background = "transparent";
+				stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
+
+				// EVENTS
+
+				onWindowResize();
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				document.addEventListener( 'keydown', onKeyDown, false );
+				document.addEventListener( 'keyup', onKeyUp, false );
+
+				// COMPOSER
+
+				renderer.autoClear = false;
+
+				renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBufer: false };
+				renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );
+
+				effectBloom = new THREE.BloomPass( 0.6 );
+				var effectBleach = new THREE.ShaderPass( THREE.ShaderExtras[ "bleachbypass" ] );
+
+				hblur = new THREE.ShaderPass( THREE.ShaderExtras[ "horizontalTiltShift" ] );
+				vblur = new THREE.ShaderPass( THREE.ShaderExtras[ "verticalTiltShift" ] );
+
+				var bluriness = 6;
+
+				hblur.uniforms[ 'h' ].value = bluriness / SCREEN_WIDTH;
+				vblur.uniforms[ 'v' ].value = bluriness / SCREEN_HEIGHT;
+
+				hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = 0.5;
+
+				effectBleach.uniforms[ 'opacity' ].value = 0.65;
+
+				composer = new THREE.EffectComposer( renderer, renderTarget );
+
+				var renderModel = new THREE.RenderPass( scene, camera );
+
+				vblur.renderToScreen = true;
+
+				composer = new THREE.EffectComposer( renderer, renderTarget );
+
+				composer.addPass( renderModel );
+
+				composer.addPass( effectBloom );
+				//composer.addPass( effectBleach );
+
+				composer.addPass( hblur );
+				composer.addPass( vblur );
+
+				// MORPHS
+
+				function addMorph( geometry, speed, duration, x, y, z ) {
+
+					var material = new THREE.MeshLambertMaterial( { color: 0xffaa55, morphTargets: true, vertexColors: THREE.FaceColors } );
+
+					var meshAnim = new THREE.MorphAnimMesh( geometry, material );
+
+					meshAnim.speed = speed;
+					meshAnim.duration = duration;
+					meshAnim.time = 600 * Math.random();
+
+					meshAnim.position.set( x, y, z );
+					meshAnim.rotation.y = Math.PI/2;
+
+					meshAnim.castShadow = true;
+					meshAnim.receiveShadow = false;
+
+					scene.add( meshAnim );
+
+					morphs.push( meshAnim );
+
+					renderer.initWebGLObjects( scene );
+					renderer.initMaterial( material, scene.lights, scene.fog, meshAnim );
+
+				}
+
+				function morphColorsToFaceColors( geometry ) {
+
+					if ( geometry.morphColors && geometry.morphColors.length ) {
+
+						var colorMap = geometry.morphColors[ 0 ];
+
+						for ( var i = 0; i < colorMap.colors.length; i ++ ) {
+
+							geometry.faces[ i ].color = colorMap.colors[ i ];
+
+						}
+
+					}
+
+				}
+
+				var loader = new THREE.JSONLoader();
+
+				var startX = -3000;
+
+				loader.load( "models/animated/parrot.js", function( geometry ) {
+
+					morphColorsToFaceColors( geometry );
+					addMorph( geometry, 250, 500, startX -500, 500, 700 );
+					addMorph( geometry, 250, 500, startX - Math.random() * 500, 500, -200 );
+					addMorph( geometry, 250, 500, startX - Math.random() * 500, 500, 200 );
+					addMorph( geometry, 250, 500, startX - Math.random() * 500, 500, 1000 );
+
+				} );
+
+				loader.load( "models/animated/flamingo.js", function( geometry ) {
+
+					morphColorsToFaceColors( geometry );
+					addMorph( geometry, 500, 1000, startX - Math.random() * 500, 350, 40 );
+
+				} );
+
+				loader.load( "models/animated/stork.js", function( geometry ) {
+
+					morphColorsToFaceColors( geometry );
+					addMorph( geometry, 350, 1000, startX - Math.random() * 500, 350, 340 );
+
+				} );
+
+				// PRE-INIT
+
+				renderer.initWebGLObjects( scene );
+				renderer.initMaterial( mlib[ "terrain" ], scene.lights, scene.fog, terrain );
+
+			}
+
+			//
+
+			function onWindowResize( event ) {
+
+				SCREEN_WIDTH = window.innerWidth;
+				SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
+
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+
+				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+				camera.updateProjectionMatrix();
+
+			}
+
+			//
+
+			function onKeyDown ( event ) {
+
+				switch( event.keyCode ) {
+
+					case 78: /*N*/  lightDir *= -1; break;
+					case 77: /*M*/  animDeltaDir *= -1; break;
+					case 66: /*B*/  soundDir *= -1; break;
+
+				}
+
+			};
+
+			function onKeyUp ( event ) {
+
+				switch( event.keyCode ) {
+
+				}
+
+			};
+
+			//
+
+			function loadTextures() {
+
+				textureCounter += 1;
+
+				if ( textureCounter == 4 )	{
+
+					terrain.visible = true;
+
+					document.getElementById( "loading" ).style.display = "none";
+
+				}
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var delta = clock.getDelta();
+
+				soundVal = THREE.Math.clamp( soundVal + delta * soundDir, 0, 1 );
+
+				if ( soundVal !== oldSoundVal ) {
+
+					if ( soundtrack ) {
+
+						soundtrack.volume = soundVal;
+						oldSoundVal = soundVal;
+
+					}
+
+				}
+
+				if ( terrain.visible ) {
+
+					controls.update();
+
+					var time = Date.now() * 0.001;
+
+					var fLow = 0.4, fHigh = 0.825;
+
+					lightVal = THREE.Math.clamp( lightVal + 0.5 * delta * lightDir, fLow, fHigh );
+
+					var valNorm = ( lightVal - fLow ) / ( fHigh - fLow );
+
+					var sat = THREE.Math.mapLinear( valNorm, 0, 1, 0.95, 0.25 );
+					scene.fog.color.setHSV( 0.1, sat, lightVal );
+
+					renderer.setClearColor( scene.fog.color, 1 );
+
+					spotLight.intensity = THREE.Math.mapLinear( valNorm, 0, 1, 0.1, 1.15 );
+					pointLight.intensity = THREE.Math.mapLinear( valNorm, 0, 1, 0.9, 1.5 );
+
+					uniformsNormalMap[ "uNormalScale" ].value = THREE.Math.mapLinear( valNorm, 0, 1, 0.6, 3.5 );
+
+					if ( updateNoise ) {
+
+						animDelta = THREE.Math.clamp( animDelta + 0.00075 * animDeltaDir, 0, 0.05 );
+						uniformsNoise.time.value += delta * animDelta;
+
+						uniformsNoise.offset.value.x += delta * 0.05;
+
+						uniformsNormalMap.uOffset.value.x = 4 * uniformsNoise.offset.value.x;
+
+						quadTarget.material = mlib[ "heightmap" ];
+						renderer.render( sceneRenderTarget, cameraOrtho, heightMap, true );
+
+						quadTarget.material = mlib[ "normal" ];
+						renderer.render( sceneRenderTarget, cameraOrtho, normalMap, true );
+
+						//updateNoise = false;
+
+					}
+
+
+					for ( var i = 0; i < morphs.length; i ++ ) {
+
+						morph = morphs[ i ];
+
+						morph.updateAnimation( 1000 * delta );
+
+						morph.position.x += morph.speed * delta;
+
+						if ( morph.position.x  > 2000 )  {
+
+							morph.position.x = -1500 - Math.random() * 500;
+
+						}
+
+
+					}
+
+					//renderer.render( scene, camera );
+					composer.render( 0.1 );
+
+				}
+
+			}
+
+		</script>
+
+	</body>
+</html>