/** * @author Mugen87 / https://github.com/Mugen87 * * References: * http://www.valvesoftware.com/publications/2010/siggraph2010_vlachos_waterflow.pdf * http://graphicsrunner.blogspot.de/2010/08/water-using-flow-maps.html * */ THREE.Water = function ( width, height, options ) { THREE.Mesh.call( this, new THREE.PlaneBufferGeometry( width, height ) ); this.type = 'Water'; var scope = this; options = options || {}; var color = ( options.color !== undefined ) ? new THREE.Color( options.color ) : new THREE.Color( 0x7F7F7F ); var textureWidth = options.textureWidth || 512; var textureHeight = options.textureHeight || 512; var clipBias = options.clipBias || 0; var flowDirection = options.flowDirection || new THREE.Vector2( 1, 0 ); var flowSpeed = options.flowSpeed || 0.03; // water flow speed var reflectivity = options.reflectivity || 0.02; // water reflectivity var scale = options.scale || 1; var shader = options.shader || THREE.Water.WaterShader; var textureLoader = new THREE.TextureLoader(); var flowMap = options.flowMap || undefined; var normalMap0 = options.normalMap0 || textureLoader.load( 'textures/water/Water_1_M_Normal.jpg' ); var normalMap1 = options.normalMap1 || textureLoader.load( 'textures/water/Water_2_M_Normal.jpg' ); var cycle = 0.15; // a cycle of a flow map phase var halfCycle = cycle * 0.5; var textureMatrix = new THREE.Matrix4(); var clock = new THREE.Clock(); // internal components var mirror = new THREE.Mirror( width, height, { textureWidth: textureWidth, textureHeight: textureHeight, clipBias: clipBias } ); var refractor = new THREE.Refractor( width, height, { textureWidth: textureWidth, textureHeight: textureHeight, clipBias: clipBias } ); mirror.matrixAutoUpdate = false; refractor.matrixAutoUpdate = false; // material this.material = new THREE.ShaderMaterial( { uniforms: THREE.UniformsUtils.clone( shader.uniforms ), vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, transparent: true } ); if ( flowMap !== undefined ) { this.material.defines.USE_FLOWMAP = ''; this.material.uniforms.tFlowMap = { type: 't', value: flowMap }; } else { this.material.uniforms.flowDirection = { type: 'v2', value: flowDirection }; } // maps normalMap0.wrapS = normalMap0.wrapT = THREE.RepeatWrapping; normalMap1.wrapS = normalMap1.wrapT = THREE.RepeatWrapping; this.material.uniforms.tReflectionMap.value = mirror.getRenderTarget().texture; this.material.uniforms.tRefractionMap.value = refractor.getRenderTarget().texture; this.material.uniforms.tNormalMap0.value = normalMap0; this.material.uniforms.tNormalMap1.value = normalMap1; // water this.material.uniforms.color.value = color; this.material.uniforms.reflectivity.value = reflectivity; this.material.uniforms.textureMatrix.value = textureMatrix; // inital values this.material.uniforms.config.value.x = 0; // flowMapOffset0 this.material.uniforms.config.value.y = halfCycle; // flowMapOffset1 this.material.uniforms.config.value.z = halfCycle; // halfCycle this.material.uniforms.config.value.w = scale; // scale // functions function updateTextureMatrix( camera ) { textureMatrix.set( 0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0 ); textureMatrix.multiply( camera.projectionMatrix ); textureMatrix.multiply( camera.matrixWorldInverse ); textureMatrix.multiply( scope.matrixWorld ); } function updateFlow( delta ) { var config = scope.material.uniforms.config; config.value.x += flowSpeed * delta; // flowMapOffset0 config.value.y += flowSpeed * delta; // flowMapOffset1 // reset properties if necessary if ( config.value.x >= cycle ) { config.value.x = 0; // avoid 'reset' effect when both offset are set to zero if ( config.value.y >= cycle ) { config.value.y = halfCycle; return; } } if ( config.value.y >= cycle ) { config.value.y = 0; } } // this.onBeforeRender = function ( renderer, scene, camera ) { var delta = clock.getDelta(); updateTextureMatrix( camera ); updateFlow( delta ); scope.visible = false; mirror.matrixWorld.copy( scope.matrixWorld ); refractor.matrixWorld.copy( scope.matrixWorld ); mirror.onBeforeRender( renderer, scene, camera ); refractor.onBeforeRender( renderer, scene, camera ); scope.visible = true; }; }; THREE.Water.prototype = Object.create( THREE.Mesh.prototype ); THREE.Water.prototype.constructor = THREE.Water; THREE.Water.WaterShader = { uniforms: { 'color': { type: 'c', value: null }, 'reflectivity': { type: 'f', value: 0 }, 'tReflectionMap': { type: 't', value: null }, 'tRefractionMap': { type: 't', value: null }, 'tNormalMap0': { type: 't', value: null }, 'tNormalMap1': { type: 't', value: null }, 'config': { type: 'v4', value: new THREE.Vector4() }, 'textureMatrix': { type: 'm4', value: null } }, vertexShader: [ 'uniform mat4 textureMatrix;', 'varying vec4 vCoord;', 'varying vec2 vUv;', 'varying vec3 vToEye;', 'void main() {', ' vUv = uv;', ' vCoord = textureMatrix * vec4( position, 1.0 );', ' vec4 worldPosition = modelMatrix * vec4( position, 1.0 );', ' vToEye = cameraPosition - worldPosition.xyz;', ' gl_Position = projectionMatrix * viewMatrix * worldPosition;', '}' ].join( '\n' ), fragmentShader: [ 'uniform sampler2D tReflectionMap;', 'uniform sampler2D tRefractionMap;', 'uniform sampler2D tNormalMap0;', 'uniform sampler2D tNormalMap1;', '#ifdef USE_FLOWMAP', ' uniform sampler2D tFlowMap;', '#else', ' uniform vec2 flowDirection;', '#endif', 'uniform vec3 color;', 'uniform float reflectivity;', 'uniform vec4 config;', 'varying vec4 vCoord;', 'varying vec2 vUv;', 'varying vec3 vToEye;', 'void main() {', ' float flowMapOffset0 = config.x;', ' float flowMapOffset1 = config.y;', ' float halfCycle = config.z;', ' float scale = config.w;', ' vec3 toEye = normalize( vToEye );', // determine flow direction ' vec2 flow;', ' #ifdef USE_FLOWMAP', ' flow = texture2D( tFlowMap, vUv ).rg * 2.0 - 1.0;', ' #else', ' flow = flowDirection;', ' #endif', ' flow.x *= - 1.0;', // sample normal maps ' vec4 normalColor0 = texture2D( tNormalMap0, ( vUv * scale ) + flow * flowMapOffset0 );', ' vec4 normalColor1 = texture2D( tNormalMap1, ( vUv * scale ) + flow * flowMapOffset1 );', // linear interpolate to get the final normal color ' float flowLerp = abs( halfCycle - flowMapOffset0 ) / halfCycle;', ' vec4 normalColor = mix( normalColor0, normalColor1, flowLerp );', // calculate normal vector ' vec3 normal = normalize( vec3( normalColor.r * 2.0 - 1.0, normalColor.b, normalColor.g * 2.0 - 1.0 ) );', // fresnel effect ' float theta = max( dot( toEye, normal ), 0.0 );', ' float reflectance = reflectivity + ( 1.0 - reflectivity ) * pow( ( 1.0 - theta ), 5.0 );', // sample textures ' vec3 coord = vCoord.xyz / vCoord.w;', ' vec2 uv = coord.xy + coord.z * normal.xz * 0.05;', ' vec4 reflectColor = texture2D( tReflectionMap, uv );', ' vec4 refractColor = texture2D( tRefractionMap, uv );', // multiply water color with the mix of both textures. then add lighting ' gl_FragColor = vec4( color, 1.0 ) * mix( refractColor, reflectColor, reflectance );', '}' ].join( '\n' ) };