96 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
		
		
			
		
	
	
			96 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| 
								 | 
							
								const WaterRefractionShader = {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									name: 'WaterRefractionShader',
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									uniforms: {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										'color': {
							 | 
						||
| 
								 | 
							
											value: null
							 | 
						||
| 
								 | 
							
										},
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										'time': {
							 | 
						||
| 
								 | 
							
											value: 0
							 | 
						||
| 
								 | 
							
										},
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										'tDiffuse': {
							 | 
						||
| 
								 | 
							
											value: null
							 | 
						||
| 
								 | 
							
										},
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										'tDudv': {
							 | 
						||
| 
								 | 
							
											value: null
							 | 
						||
| 
								 | 
							
										},
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										'textureMatrix': {
							 | 
						||
| 
								 | 
							
											value: null
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									},
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									vertexShader: /* glsl */`
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										uniform mat4 textureMatrix;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										varying vec2 vUv;
							 | 
						||
| 
								 | 
							
										varying vec4 vUvRefraction;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										void main() {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											vUv = uv;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											vUvRefraction = textureMatrix * vec4( position, 1.0 );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										}`,
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
									fragmentShader: /* glsl */`
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										uniform vec3 color;
							 | 
						||
| 
								 | 
							
										uniform float time;
							 | 
						||
| 
								 | 
							
										uniform sampler2D tDiffuse;
							 | 
						||
| 
								 | 
							
										uniform sampler2D tDudv;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										varying vec2 vUv;
							 | 
						||
| 
								 | 
							
										varying vec4 vUvRefraction;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										float blendOverlay( float base, float blend ) {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										vec3 blendOverlay( vec3 base, vec3 blend ) {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ),blendOverlay( base.b, blend.b ) );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										void main() {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										 float waveStrength = 0.5;
							 | 
						||
| 
								 | 
							
										 float waveSpeed = 0.03;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											// simple distortion (ripple) via dudv map (see https://www.youtube.com/watch?v=6B7IF6GOu7s)
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											vec2 distortedUv = texture2D( tDudv, vec2( vUv.x + time * waveSpeed, vUv.y ) ).rg * waveStrength;
							 | 
						||
| 
								 | 
							
											distortedUv = vUv.xy + vec2( distortedUv.x, distortedUv.y + time * waveSpeed );
							 | 
						||
| 
								 | 
							
											vec2 distortion = ( texture2D( tDudv, distortedUv ).rg * 2.0 - 1.0 ) * waveStrength;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											// new uv coords
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											vec4 uv = vec4( vUvRefraction );
							 | 
						||
| 
								 | 
							
											uv.xy += distortion;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											vec4 base = texture2DProj( tDiffuse, uv );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
											#include <tonemapping_fragment>
							 | 
						||
| 
								 | 
							
											#include <colorspace_fragment>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
										}`
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								export { WaterRefractionShader };
							 |