You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
363 lines
15 KiB
363 lines
15 KiB
THREE.Ocean = function ( renderer, camera, scene, options ) {
|
|
|
|
// flag used to trigger parameter changes
|
|
this.changed = true;
|
|
this.initial = true;
|
|
|
|
// Assign required parameters as object properties
|
|
this.oceanCamera = new THREE.OrthographicCamera(); //camera.clone();
|
|
this.oceanCamera.position.z = 1;
|
|
this.renderer = renderer;
|
|
this.renderer.clearColor( 0xffffff );
|
|
|
|
this.scene = new THREE.Scene();
|
|
|
|
// Enable necessary extensions
|
|
this.renderer.context.getExtension( 'OES_texture_float' );
|
|
this.renderer.context.getExtension( 'OES_texture_float_linear' );
|
|
|
|
// Assign optional parameters as variables and object properties
|
|
function optionalParameter( value, defaultValue ) {
|
|
|
|
return value !== undefined ? value : defaultValue;
|
|
|
|
}
|
|
options = options || {};
|
|
this.clearColor = optionalParameter( options.CLEAR_COLOR, [ 1.0, 1.0, 1.0, 0.0 ] );
|
|
this.geometryOrigin = optionalParameter( options.GEOMETRY_ORIGIN, [ - 1000.0, - 1000.0 ] );
|
|
this.sunDirectionX = optionalParameter( options.SUN_DIRECTION[ 0 ], - 1.0 );
|
|
this.sunDirectionY = optionalParameter( options.SUN_DIRECTION[ 1 ], 1.0 );
|
|
this.sunDirectionZ = optionalParameter( options.SUN_DIRECTION[ 2 ], 1.0 );
|
|
this.oceanColor = optionalParameter( options.OCEAN_COLOR, new THREE.Vector3( 0.004, 0.016, 0.047 ) );
|
|
this.skyColor = optionalParameter( options.SKY_COLOR, new THREE.Vector3( 3.2, 9.6, 12.8 ) );
|
|
this.exposure = optionalParameter( options.EXPOSURE, 0.35 );
|
|
this.geometryResolution = optionalParameter( options.GEOMETRY_RESOLUTION, 32 );
|
|
this.geometrySize = optionalParameter( options.GEOMETRY_SIZE, 2000 );
|
|
this.resolution = optionalParameter( options.RESOLUTION, 64 );
|
|
this.floatSize = optionalParameter( options.SIZE_OF_FLOAT, 4 );
|
|
this.windX = optionalParameter( options.INITIAL_WIND[ 0 ], 10.0 ),
|
|
this.windY = optionalParameter( options.INITIAL_WIND[ 1 ], 10.0 ),
|
|
this.size = optionalParameter( options.INITIAL_SIZE, 250.0 ),
|
|
this.choppiness = optionalParameter( options.INITIAL_CHOPPINESS, 1.5 );
|
|
|
|
//
|
|
this.matrixNeedsUpdate = false;
|
|
|
|
// Setup framebuffer pipeline
|
|
var renderTargetType = optionalParameter( options.USE_HALF_FLOAT, false ) ? THREE.HalfFloatType : THREE.FloatType;
|
|
var LinearClampParams = {
|
|
minFilter: THREE.LinearFilter,
|
|
magFilter: THREE.LinearFilter,
|
|
wrapS: THREE.ClampToEdgeWrapping,
|
|
wrapT: THREE.ClampToEdgeWrapping,
|
|
format: THREE.RGBAFormat,
|
|
stencilBuffer: false,
|
|
depthBuffer: false,
|
|
premultiplyAlpha: false,
|
|
type: renderTargetType
|
|
};
|
|
var NearestClampParams = {
|
|
minFilter: THREE.NearestFilter,
|
|
magFilter: THREE.NearestFilter,
|
|
wrapS: THREE.ClampToEdgeWrapping,
|
|
wrapT: THREE.ClampToEdgeWrapping,
|
|
format: THREE.RGBAFormat,
|
|
stencilBuffer: false,
|
|
depthBuffer: false,
|
|
premultiplyAlpha: false,
|
|
type: renderTargetType
|
|
};
|
|
var NearestRepeatParams = {
|
|
minFilter: THREE.NearestFilter,
|
|
magFilter: THREE.NearestFilter,
|
|
wrapS: THREE.RepeatWrapping,
|
|
wrapT: THREE.RepeatWrapping,
|
|
format: THREE.RGBAFormat,
|
|
stencilBuffer: false,
|
|
depthBuffer: false,
|
|
premultiplyAlpha: false,
|
|
type: renderTargetType
|
|
};
|
|
this.initialSpectrumFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, NearestRepeatParams );
|
|
this.spectrumFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, NearestClampParams );
|
|
this.pingPhaseFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, NearestClampParams );
|
|
this.pongPhaseFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, NearestClampParams );
|
|
this.pingTransformFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, NearestClampParams );
|
|
this.pongTransformFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, NearestClampParams );
|
|
this.displacementMapFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, LinearClampParams );
|
|
this.normalMapFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, LinearClampParams );
|
|
|
|
// Define shaders and constant uniforms
|
|
////////////////////////////////////////
|
|
|
|
// 0 - The vertex shader used in all of the simulation steps
|
|
var fullscreeenVertexShader = THREE.ShaderLib[ "ocean_sim_vertex" ];
|
|
|
|
// 1 - Horizontal wave vertices used for FFT
|
|
var oceanHorizontalShader = THREE.ShaderLib[ "ocean_subtransform" ];
|
|
var oceanHorizontalUniforms = THREE.UniformsUtils.clone( oceanHorizontalShader.uniforms );
|
|
this.materialOceanHorizontal = new THREE.ShaderMaterial( {
|
|
uniforms: oceanHorizontalUniforms,
|
|
vertexShader: fullscreeenVertexShader.vertexShader,
|
|
fragmentShader: "#define HORIZONTAL \n" + oceanHorizontalShader.fragmentShader
|
|
} );
|
|
this.materialOceanHorizontal.uniforms.u_transformSize = { type: "f", value: this.resolution };
|
|
this.materialOceanHorizontal.uniforms.u_subtransformSize = { type: "f", value: null };
|
|
this.materialOceanHorizontal.uniforms.u_input = { type: "t", value: null };
|
|
this.materialOceanHorizontal.depthTest = false;
|
|
|
|
// 2 - Vertical wave vertices used for FFT
|
|
var oceanVerticalShader = THREE.ShaderLib[ "ocean_subtransform" ];
|
|
var oceanVerticalUniforms = THREE.UniformsUtils.clone( oceanVerticalShader.uniforms );
|
|
this.materialOceanVertical = new THREE.ShaderMaterial( {
|
|
uniforms: oceanVerticalUniforms,
|
|
vertexShader: fullscreeenVertexShader.vertexShader,
|
|
fragmentShader: oceanVerticalShader.fragmentShader
|
|
} );
|
|
this.materialOceanVertical.uniforms.u_transformSize = { type: "f", value: this.resolution };
|
|
this.materialOceanVertical.uniforms.u_subtransformSize = { type: "f", value: null };
|
|
this.materialOceanVertical.uniforms.u_input = { type: "t", value: null };
|
|
this.materialOceanVertical.depthTest = false;
|
|
|
|
// 3 - Initial spectrum used to generate height map
|
|
var initialSpectrumShader = THREE.ShaderLib[ "ocean_initial_spectrum" ];
|
|
var initialSpectrumUniforms = THREE.UniformsUtils.clone( initialSpectrumShader.uniforms );
|
|
this.materialInitialSpectrum = new THREE.ShaderMaterial( {
|
|
uniforms: initialSpectrumUniforms,
|
|
vertexShader: fullscreeenVertexShader.vertexShader,
|
|
fragmentShader: initialSpectrumShader.fragmentShader
|
|
} );
|
|
this.materialInitialSpectrum.uniforms.u_wind = { type: "v2", value: new THREE.Vector2() };
|
|
this.materialInitialSpectrum.uniforms.u_resolution = { type: "f", value: this.resolution };
|
|
this.materialInitialSpectrum.depthTest = false;
|
|
|
|
// 4 - Phases used to animate heightmap
|
|
var phaseShader = THREE.ShaderLib[ "ocean_phase" ];
|
|
var phaseUniforms = THREE.UniformsUtils.clone( phaseShader.uniforms );
|
|
this.materialPhase = new THREE.ShaderMaterial( {
|
|
uniforms: phaseUniforms,
|
|
vertexShader: fullscreeenVertexShader.vertexShader,
|
|
fragmentShader: phaseShader.fragmentShader
|
|
} );
|
|
this.materialPhase.uniforms.u_resolution = { type: "f", value: this.resolution };
|
|
this.materialPhase.depthTest = false;
|
|
|
|
// 5 - Shader used to update spectrum
|
|
var spectrumShader = THREE.ShaderLib[ "ocean_spectrum" ];
|
|
var spectrumUniforms = THREE.UniformsUtils.clone( spectrumShader.uniforms );
|
|
this.materialSpectrum = new THREE.ShaderMaterial( {
|
|
uniforms: spectrumUniforms,
|
|
vertexShader: fullscreeenVertexShader.vertexShader,
|
|
fragmentShader: spectrumShader.fragmentShader
|
|
} );
|
|
this.materialSpectrum.uniforms.u_initialSpectrum = { type: "t", value: null };
|
|
this.materialSpectrum.uniforms.u_resolution = { type: "f", value: this.resolution };
|
|
this.materialSpectrum.depthTest = false;
|
|
|
|
// 6 - Shader used to update spectrum normals
|
|
var normalShader = THREE.ShaderLib[ "ocean_normals" ];
|
|
var normalUniforms = THREE.UniformsUtils.clone( normalShader.uniforms );
|
|
this.materialNormal = new THREE.ShaderMaterial( {
|
|
uniforms: normalUniforms,
|
|
vertexShader: fullscreeenVertexShader.vertexShader,
|
|
fragmentShader: normalShader.fragmentShader
|
|
} );
|
|
this.materialNormal.uniforms.u_displacementMap = { type: "t", value: null };
|
|
this.materialNormal.uniforms.u_resolution = { type: "f", value: this.resolution };
|
|
this.materialNormal.depthTest = false;
|
|
|
|
// 7 - Shader used to update normals
|
|
var oceanShader = THREE.ShaderLib[ "ocean_main" ];
|
|
var oceanUniforms = THREE.UniformsUtils.clone( oceanShader.uniforms );
|
|
this.materialOcean = new THREE.ShaderMaterial( {
|
|
uniforms: oceanUniforms,
|
|
vertexShader: oceanShader.vertexShader,
|
|
fragmentShader: oceanShader.fragmentShader
|
|
} );
|
|
// this.materialOcean.wireframe = true;
|
|
this.materialOcean.uniforms.u_geometrySize = { type: "f", value: this.resolution };
|
|
this.materialOcean.uniforms.u_displacementMap = { type: "t", value: this.displacementMapFramebuffer };
|
|
this.materialOcean.uniforms.u_normalMap = { type: "t", value: this.normalMapFramebuffer };
|
|
this.materialOcean.uniforms.u_oceanColor = { type: "v3", value: this.oceanColor };
|
|
this.materialOcean.uniforms.u_skyColor = { type: "v3", value: this.skyColor };
|
|
this.materialOcean.uniforms.u_sunDirection = { type: "v3", value: new THREE.Vector3( this.sunDirectionX, this.sunDirectionY, this.sunDirectionZ ) };
|
|
this.materialOcean.uniforms.u_exposure = { type: "f", value: this.exposure };
|
|
|
|
// Disable blending to prevent default premultiplied alpha values
|
|
this.materialOceanHorizontal.blending = 0;
|
|
this.materialOceanVertical.blending = 0;
|
|
this.materialInitialSpectrum.blending = 0;
|
|
this.materialPhase.blending = 0;
|
|
this.materialSpectrum.blending = 0;
|
|
this.materialNormal.blending = 0;
|
|
this.materialOcean.blending = 0;
|
|
|
|
// Create the simulation plane
|
|
this.screenQuad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ) );
|
|
this.scene.add( this.screenQuad );
|
|
|
|
// Initialise spectrum data
|
|
this.generateSeedPhaseTexture();
|
|
|
|
// Generate the ocean mesh
|
|
this.generateMesh();
|
|
|
|
};
|
|
|
|
THREE.Ocean.prototype.generateMesh = function () {
|
|
|
|
var geometry = new THREE.PlaneBufferGeometry( this.geometrySize, this.geometrySize, this.geometryResolution, this.geometryResolution );
|
|
|
|
geometry.rotateX( - Math.PI / 2 );
|
|
|
|
this.oceanMesh = new THREE.Mesh( geometry, this.materialOcean );
|
|
|
|
};
|
|
|
|
THREE.Ocean.prototype.render = function () {
|
|
|
|
this.scene.overrideMaterial = null;
|
|
|
|
if ( this.changed )
|
|
this.renderInitialSpectrum();
|
|
|
|
this.renderWavePhase();
|
|
this.renderSpectrum();
|
|
this.renderSpectrumFFT();
|
|
this.renderNormalMap();
|
|
this.scene.overrideMaterial = null;
|
|
|
|
};
|
|
|
|
THREE.Ocean.prototype.generateSeedPhaseTexture = function() {
|
|
|
|
// Setup the seed texture
|
|
this.pingPhase = true;
|
|
var phaseArray = new window.Float32Array( this.resolution * this.resolution * 4 );
|
|
for ( var i = 0; i < this.resolution; i ++ ) {
|
|
|
|
for ( var j = 0; j < this.resolution; j ++ ) {
|
|
|
|
phaseArray[ i * this.resolution * 4 + j * 4 ] = Math.random() * 2.0 * Math.PI;
|
|
phaseArray[ i * this.resolution * 4 + j * 4 + 1 ] = 0.0;
|
|
phaseArray[ i * this.resolution * 4 + j * 4 + 2 ] = 0.0;
|
|
phaseArray[ i * this.resolution * 4 + j * 4 + 3 ] = 0.0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.pingPhaseTexture = new THREE.DataTexture( phaseArray, this.resolution, this.resolution, THREE.RGBAFormat );
|
|
this.pingPhaseTexture.wrapS = THREE.ClampToEdgeWrapping;
|
|
this.pingPhaseTexture.wrapT = THREE.ClampToEdgeWrapping;
|
|
this.pingPhaseTexture.type = THREE.FloatType;
|
|
this.pingPhaseTexture.needsUpdate = true;
|
|
|
|
};
|
|
|
|
THREE.Ocean.prototype.renderInitialSpectrum = function () {
|
|
|
|
this.scene.overrideMaterial = this.materialInitialSpectrum;
|
|
this.materialInitialSpectrum.uniforms.u_wind.value.set( this.windX, this.windY );
|
|
this.materialInitialSpectrum.uniforms.u_size.value = this.size;
|
|
this.renderer.render( this.scene, this.oceanCamera, this.initialSpectrumFramebuffer, true );
|
|
|
|
};
|
|
|
|
THREE.Ocean.prototype.renderWavePhase = function () {
|
|
|
|
this.scene.overrideMaterial = this.materialPhase;
|
|
this.screenQuad.material = this.materialPhase;
|
|
if ( this.initial ) {
|
|
|
|
this.materialPhase.uniforms.u_phases.value = this.pingPhaseTexture;
|
|
this.initial = false;
|
|
|
|
}else {
|
|
|
|
this.materialPhase.uniforms.u_phases.value = this.pingPhase ? this.pingPhaseFramebuffer : this.pongPhaseFramebuffer;
|
|
|
|
}
|
|
this.materialPhase.uniforms.u_deltaTime.value = this.deltaTime;
|
|
this.materialPhase.uniforms.u_size.value = this.size;
|
|
this.renderer.render( this.scene, this.oceanCamera, this.pingPhase ? this.pongPhaseFramebuffer : this.pingPhaseFramebuffer );
|
|
this.pingPhase = ! this.pingPhase;
|
|
|
|
};
|
|
|
|
THREE.Ocean.prototype.renderSpectrum = function () {
|
|
|
|
this.scene.overrideMaterial = this.materialSpectrum;
|
|
this.materialSpectrum.uniforms.u_initialSpectrum.value = this.initialSpectrumFramebuffer;
|
|
this.materialSpectrum.uniforms.u_phases.value = this.pingPhase ? this.pingPhaseFramebuffer : this.pongPhaseFramebuffer;
|
|
this.materialSpectrum.uniforms.u_choppiness.value = this.choppiness ;
|
|
this.materialSpectrum.uniforms.u_size.value = this.size ;
|
|
this.renderer.render( this.scene, this.oceanCamera, this.spectrumFramebuffer );
|
|
|
|
};
|
|
|
|
THREE.Ocean.prototype.renderSpectrumFFT = function() {
|
|
|
|
// GPU FFT using Stockham formulation
|
|
var iterations = Math.log( this.resolution ) / Math.log( 2 ); // log2
|
|
|
|
this.scene.overrideMaterial = this.materialOceanHorizontal;
|
|
|
|
for ( var i = 0; i < iterations; i ++ ) {
|
|
|
|
if ( i === 0 ) {
|
|
|
|
this.materialOceanHorizontal.uniforms.u_input.value = this.spectrumFramebuffer;
|
|
this.materialOceanHorizontal.uniforms.u_subtransformSize.value = Math.pow( 2, ( i % ( iterations ) ) + 1 );
|
|
this.renderer.render( this.scene, this.oceanCamera, this.pingTransformFramebuffer );
|
|
|
|
} else if ( i % 2 === 1 ) {
|
|
|
|
this.materialOceanHorizontal.uniforms.u_input.value = this.pingTransformFramebuffer;
|
|
this.materialOceanHorizontal.uniforms.u_subtransformSize.value = Math.pow( 2, ( i % ( iterations ) ) + 1 );
|
|
this.renderer.render( this.scene, this.oceanCamera, this.pongTransformFramebuffer );
|
|
|
|
} else {
|
|
|
|
this.materialOceanHorizontal.uniforms.u_input.value = this.pongTransformFramebuffer;
|
|
this.materialOceanHorizontal.uniforms.u_subtransformSize.value = Math.pow( 2, ( i % ( iterations ) ) + 1 );
|
|
this.renderer.render( this.scene, this.oceanCamera, this.pingTransformFramebuffer );
|
|
|
|
}
|
|
|
|
}
|
|
this.scene.overrideMaterial = this.materialOceanVertical;
|
|
for ( var i = iterations; i < iterations * 2; i ++ ) {
|
|
|
|
if ( i === iterations * 2 - 1 ) {
|
|
|
|
this.materialOceanVertical.uniforms.u_input.value = ( iterations % 2 === 0 ) ? this.pingTransformFramebuffer : this.pongTransformFramebuffer;
|
|
this.materialOceanVertical.uniforms.u_subtransformSize.value = Math.pow( 2, ( i % ( iterations ) ) + 1 );
|
|
this.renderer.render( this.scene, this.oceanCamera, this.displacementMapFramebuffer );
|
|
|
|
} else if ( i % 2 === 1 ) {
|
|
|
|
this.materialOceanVertical.uniforms.u_input.value = this.pingTransformFramebuffer;
|
|
this.materialOceanVertical.uniforms.u_subtransformSize.value = Math.pow( 2, ( i % ( iterations ) ) + 1 );
|
|
this.renderer.render( this.scene, this.oceanCamera, this.pongTransformFramebuffer );
|
|
|
|
} else {
|
|
|
|
this.materialOceanVertical.uniforms.u_input.value = this.pongTransformFramebuffer;
|
|
this.materialOceanVertical.uniforms.u_subtransformSize.value = Math.pow( 2, ( i % ( iterations ) ) + 1 );
|
|
this.renderer.render( this.scene, this.oceanCamera, this.pingTransformFramebuffer );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
THREE.Ocean.prototype.renderNormalMap = function () {
|
|
|
|
this.scene.overrideMaterial = this.materialNormal;
|
|
if ( this.changed ) this.materialNormal.uniforms.u_size.value = this.size;
|
|
this.materialNormal.uniforms.u_displacementMap.value = this.displacementMapFramebuffer;
|
|
this.renderer.render( this.scene, this.oceanCamera, this.normalMapFramebuffer, true );
|
|
|
|
};
|