<!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 { position: absolute; top: 10px; width: 100%; }
a { color: #fb0; }
#footer { position: absolute; bottom: 10px; width: 100%; }
.h { color: #fb0 }
.c { display: inline; margin-left: 1em }
#oldie a { color:#da0 }
#stats { position: absolute; top:0; left: 0 }
#stats #fps { background: transparent !important }
#stats #fps #fpsText { color: #aaa !important }
#stats #fps #fpsGraph { display: none }
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" 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="footer">
<div class="c">
day / night: <span class="h">n</span>
</div>
<div class="c">
animate terrain: <span class="h">m</span>
</div>
</div>
<script src="../build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/shaders/BleachBypassShader.js"></script>
<script src="js/shaders/ConvolutionShader.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/HorizontalTiltShiftShader.js"></script>
<script src="js/shaders/LuminosityShader.js"></script>
<script src="js/shaders/NormalMapShader.js"></script>
<script src="js/shaders/VerticalTiltShiftShader.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 src="js/ShaderTerrain.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></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>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var renderer, container, stats;
var camera, scene;
var cameraOrtho, sceneRenderTarget;
var uniformsNoise, uniformsNormal,
heightMap, normalMap,
quadTarget;
var directionalLight, pointLight;
var terrain;
var textureCounter = 0;
var animDelta = 0, animDeltaDir = -1;
var lightVal = 0, lightDir = 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' );
// 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 );
// CAMERA
camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 2, 4000 );
camera.position.set( -1200, 800, 1200 );
controls = new THREE.OrbitControls( 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.keys = [ 65, 83, 68 ];
// SCENE (FINAL)
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x050505, 2000, 4000 );
// LIGHTS
scene.add( new THREE.AmbientLight( 0x111111 ) );
directionalLight = new THREE.DirectionalLight( 0xffffff, 1.15 );
directionalLight.position.set( 500, 2000, 0 );
scene.add( directionalLight );
pointLight = new THREE.PointLight( 0xff4400, 1.5 );
pointLight.position.set( 0, 0, 0 );
scene.add( pointLight );
// HEIGHT + NORMAL MAPS
var normalShader = THREE.NormalMapShader;
var rx = 256, ry = 256;
var pars = { minFilter: THREE.LinearMipmapLinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
heightMap = new THREE.WebGLRenderTarget( rx, ry, pars );
heightMap.generateMipmaps = false;
normalMap = new THREE.WebGLRenderTarget( rx, ry, pars );
normalMap.generateMipmaps = false;
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 = THREE.UniformsUtils.clone( normalShader.uniforms );
uniformsNormal.height.value = 0.05;
uniformsNormal.resolution.value.set( rx, ry );
uniformsNormal.heightMap.value = heightMap;
var vertexShader = document.getElementById( 'vertexShader' ).textContent;
// TEXTURES
var specularMap = new THREE.WebGLRenderTarget( 2048, 2048, pars );
specularMap.generateMipmaps = false;
var diffuseTexture1 = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big.jpg", null, function () {
loadTextures();
applyShader( THREE.LuminosityShader, diffuseTexture1, specularMap );
} );
var diffuseTexture2 = THREE.ImageUtils.loadTexture( "textures/terrain/backgrounddetailed6.jpg", null, loadTextures );
var detailTexture = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big-nm.jpg", null, loadTextures );
diffuseTexture1.wrapS = diffuseTexture1.wrapT = THREE.RepeatWrapping;
diffuseTexture2.wrapS = diffuseTexture2.wrapT = THREE.RepeatWrapping;
detailTexture.wrapS = detailTexture.wrapT = THREE.RepeatWrapping;
specularMap.wrapS = specularMap.wrapT = THREE.RepeatWrapping;
// TERRAIN SHADER
var terrainShader = THREE.ShaderTerrain[ "terrain" ];
uniformsTerrain = THREE.UniformsUtils.clone( terrainShader.uniforms );
uniformsTerrain[ "tNormal" ].value = normalMap;
uniformsTerrain[ "uNormalScale" ].value = 3.5;
uniformsTerrain[ "tDisplacement" ].value = heightMap;
uniformsTerrain[ "tDiffuse1" ].value = diffuseTexture1;
uniformsTerrain[ "tDiffuse2" ].value = diffuseTexture2;
uniformsTerrain[ "tSpecular" ].value = specularMap;
uniformsTerrain[ "tDetail" ].value = detailTexture;
uniformsTerrain[ "enableDiffuse1" ].value = true;
uniformsTerrain[ "enableDiffuse2" ].value = true;
uniformsTerrain[ "enableSpecular" ].value = true;
uniformsTerrain[ "diffuse" ].value.setHex( 0xffffff );
uniformsTerrain[ "specular" ].value.setHex( 0xffffff );
uniformsTerrain[ "shininess" ].value = 30;
uniformsTerrain[ "uDisplacementScale" ].value = 375;
uniformsTerrain[ "uRepeatOverlay" ].value.set( 6, 6 );
var params = [
[ 'heightmap', document.getElementById( 'fragmentShaderNoise' ).textContent, vertexShader, uniformsNoise, false ],
[ 'normal', normalShader.fragmentShader, normalShader.vertexShader, uniformsNormal, false ],
[ 'terrain', terrainShader.fragmentShader, terrainShader.vertexShader, uniformsTerrain, 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.PlaneBufferGeometry( SCREEN_WIDTH, SCREEN_HEIGHT );
quadTarget = new THREE.Mesh( plane, new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
quadTarget.position.z = -500;
sceneRenderTarget.add( quadTarget );
// TERRAIN MESH
var geometryTerrain = new THREE.PlaneBufferGeometry( 6000, 6000, 256, 256 );
geometryTerrain.computeTangents();
terrain = new THREE.Mesh( geometryTerrain, mlib[ "terrain" ] );
terrain.position.set( 0, -125, 0 );
terrain.rotation.x = -Math.PI / 2;
terrain.visible = false;
scene.add( terrain );
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
//
renderer.gammaInput = true;
renderer.gammaOutput = true;
// STATS
stats = new Stats();
container.appendChild( stats.domElement );
// EVENTS
onWindowResize();
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'keydown', onKeyDown, false );
// COMPOSER
renderer.autoClear = false;
renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );
renderTarget.generateMipmaps = false;
effectBloom = new THREE.BloomPass( 0.6 );
var effectBleach = new THREE.ShaderPass( THREE.BleachBypassShader );
hblur = new THREE.ShaderPass( THREE.HorizontalTiltShiftShader );
vblur = new THREE.ShaderPass( THREE.VerticalTiltShiftShader );
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 );
}
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 );
} );
}
//
function onWindowResize( event ) {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
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;
}
};
//
function applyShader( shader, texture, target ) {
var shaderMaterial = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: THREE.UniformsUtils.clone( shader.uniforms )
} );
shaderMaterial.uniforms[ "tDiffuse" ].value = texture;
var sceneTmp = new THREE.Scene();
var meshTmp = new THREE.Mesh( new THREE.PlaneBufferGeometry( SCREEN_WIDTH, SCREEN_HEIGHT ), shaderMaterial );
meshTmp.position.z = -500;
sceneTmp.add( meshTmp );
renderer.render( sceneTmp, cameraOrtho, target, true );
};
//
function loadTextures() {
textureCounter += 1;
if ( textureCounter == 3 ) {
terrain.visible = true;
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var delta = clock.getDelta();
if ( terrain.visible ) {
controls.update();
var time = Date.now() * 0.001;
var fLow = 0.1, fHigh = 0.8;
lightVal = THREE.Math.clamp( lightVal + 0.5 * delta * lightDir, fLow, fHigh );
var valNorm = ( lightVal - fLow ) / ( fHigh - fLow );
scene.fog.color.setHSL( 0.1, 0.5, lightVal );
renderer.setClearColor( scene.fog.color );
directionalLight.intensity = THREE.Math.mapLinear( valNorm, 0, 1, 0.1, 1.15 );
pointLight.intensity = THREE.Math.mapLinear( valNorm, 0, 1, 0.9, 1.5 );
uniformsTerrain[ "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;
uniformsTerrain[ "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>