examples/webgl_gpgpu_water.html

 <!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - gpgpu - water</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - <span id="waterSize"></span> webgl gpgpu water<br/>
			Click and Move mouse to disturb water.
		</div>


		<!-- This is just a smoothing 'compute shader' for using manually: -->
		<script id="smoothFragmentShader" type="x-shader/x-fragment">

			uniform sampler2D smoothTexture;

			void main()	{

				vec2 cellSize = 1.0 / resolution.xy;

				vec2 uv = gl_FragCoord.xy * cellSize;

				// Computes the mean of texel and 4 neighbours
				vec4 textureValue = texture2D( smoothTexture, uv );
				textureValue += texture2D( smoothTexture, uv + vec2( 0.0, cellSize.y ) );
				textureValue += texture2D( smoothTexture, uv + vec2( 0.0, - cellSize.y ) );
				textureValue += texture2D( smoothTexture, uv + vec2( cellSize.x, 0.0 ) );
				textureValue += texture2D( smoothTexture, uv + vec2( - cellSize.x, 0.0 ) );

				textureValue /= 5.0;

				gl_FragColor = textureValue;

			}

		</script>

		<!-- This is a 'compute shader' to read the current level and normal of water at a point -->
		<!-- It is used with a variable of size 1x1 -->
		<script id="readWaterLevelFragmentShader" type="x-shader/x-fragment">

			uniform vec2 point1;

			uniform sampler2D levelTexture;

			// Integer to float conversion from https://stackoverflow.com/questions/17981163/webgl-read-pixels-from-floating-point-render-target

			float shift_right( float v, float amt ) {

				v = floor( v ) + 0.5;
				return floor( v / exp2( amt ) );

			}

			float shift_left( float v, float amt ) {

				return floor( v * exp2( amt ) + 0.5 );

			}

			float mask_last( float v, float bits ) {

				return mod( v, shift_left( 1.0, bits ) );

			}

			float extract_bits( float num, float from, float to ) {

				from = floor( from + 0.5 ); to = floor( to + 0.5 );
				return mask_last( shift_right( num, from ), to - from );

			}

			vec4 encode_float( float val ) {
				if ( val == 0.0 ) return vec4( 0, 0, 0, 0 );
				float sign = val > 0.0 ? 0.0 : 1.0;
				val = abs( val );
				float exponent = floor( log2( val ) );
				float biased_exponent = exponent + 127.0;
				float fraction = ( ( val / exp2( exponent ) ) - 1.0 ) * 8388608.0;
				float t = biased_exponent / 2.0;
				float last_bit_of_biased_exponent = fract( t ) * 2.0;
				float remaining_bits_of_biased_exponent = floor( t );
				float byte4 = extract_bits( fraction, 0.0, 8.0 ) / 255.0;
				float byte3 = extract_bits( fraction, 8.0, 16.0 ) / 255.0;
				float byte2 = ( last_bit_of_biased_exponent * 128.0 + extract_bits( fraction, 16.0, 23.0 ) ) / 255.0;
				float byte1 = ( sign * 128.0 + remaining_bits_of_biased_exponent ) / 255.0;
				return vec4( byte4, byte3, byte2, byte1 );
			}

			void main()	{

				vec2 cellSize = 1.0 / resolution.xy;
				float waterLevel = texture2D( levelTexture, point1 ).x;

				vec2 normal = vec2(
					( texture2D( levelTexture, point1 + vec2( - cellSize.x, 0 ) ).x - texture2D( levelTexture, point1 + vec2( cellSize.x, 0 ) ).x ) * WIDTH / BOUNDS,
					( texture2D( levelTexture, point1 + vec2( 0, - cellSize.y ) ).x - texture2D( levelTexture, point1 + vec2( 0, cellSize.y ) ).x ) * WIDTH / BOUNDS );
			

				if ( gl_FragCoord.x < 1.5 ) {

					gl_FragColor = encode_float( waterLevel );

				} else if ( gl_FragCoord.x < 2.5 ) {

					gl_FragColor = encode_float( normal.x );

				} else if ( gl_FragCoord.x < 3.5 ) {

					gl_FragColor = encode_float( normal.y );

				} else {

					gl_FragColor = encode_float( 0.0 );

				}

			}

		</script>


		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import Stats from 'three/addons/libs/stats.module.js';
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js';
			import { SimplexNoise } from 'three/addons/math/SimplexNoise.js';
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

			// Texture width for simulation
			const WIDTH = 128;

			// Water size in system units
			const BOUNDS = 6;
			const BOUNDS_HALF = BOUNDS * 0.5;

			let tmpHeightmap = null;
			const tmpQuat = new THREE.Quaternion();
			const tmpQuatX = new THREE.Quaternion();
			const tmpQuatZ = new THREE.Quaternion();
			let duckModel = null;

			let container, stats;
			let camera, scene, renderer, controls;
			let mousedown = false;
			const mouseCoords = new THREE.Vector2();
			const raycaster = new THREE.Raycaster();

			let sun;
			let waterMesh;
			let poolBorder;
			let meshRay;
			let gpuCompute;
			let heightmapVariable;
			let smoothShader;
			let readWaterLevelShader;
			let readWaterLevelRenderTarget;
			let readWaterLevelImage;
			const waterNormal = new THREE.Vector3();

			const NUM_DUCK = 12;
			const ducks = [];
			let ducksEnabled = true;

			const simplex = new SimplexNoise();

			let frame = 0;

			const effectController = {
				mouseSize: 0.2,
				mouseDeep: 0.01,
				viscosity: 0.93,
				speed: 5,
				ducksEnabled: ducksEnabled,
				wireframe: false,
				shadow: false,
			};

			init();
			

			async function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
				camera.position.set( 0, 2.00, 4 );
				camera.lookAt( 0, 0, 0 );

				scene = new THREE.Scene();

				sun = new THREE.DirectionalLight( 0xFFFFFF, 4.0 );
				sun.position.set( - 1, 2.6, 1.4 );
				scene.add( sun );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.toneMappingExposure = 0.5;
				container.appendChild( renderer.domElement );

				controls = new OrbitControls( camera, container );

				stats = new Stats();
				container.appendChild( stats.dom );

				container.style.touchAction = 'none';
				container.addEventListener( 'pointermove', onPointerMove );
				container.addEventListener( 'pointerdown', onPointerDown );
				container.addEventListener( 'pointerup', onPointerUp );

				window.addEventListener( 'resize', onWindowResize );


				const rgbeLoader = new RGBELoader().setPath( './textures/equirectangular/' );
				const glbloader = new GLTFLoader().setPath( 'models/gltf/' );
				glbloader.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) );
			
				const [ env, model ] = await Promise.all( [ rgbeLoader.loadAsync( 'blouberg_sunrise_2_1k.hdr' ), glbloader.loadAsync( 'duck.glb' ) ] );
				env.mapping = THREE.EquirectangularReflectionMapping;
				scene.environment = env;
				scene.background = env;
				scene.backgroundBlurriness = 0.3;
				scene.environmentIntensity = 1.25;

				duckModel = model.scene.children[ 0 ];
				duckModel.receiveShadow = true;
				duckModel.castShadow = true;


				const gui = new GUI();
				gui.domElement.style.right = '0px';

				const valuesChanger = function () {

					heightmapVariable.material.uniforms[ 'mouseSize' ].value = effectController.mouseSize;
					heightmapVariable.material.uniforms[ 'deep' ].value = effectController.mouseDeep;
					heightmapVariable.material.uniforms[ 'viscosity' ].value = effectController.viscosity;
					ducksEnabled = effectController.ducksEnabled;

					let i = NUM_DUCK;
					while ( i -- ) {

						if ( ducks[ i ] ) ducks[ i ].visible = ducksEnabled;

					}
			
				};

				gui.add( effectController, 'mouseSize', 0.1, 1.0, 0.1 ).onChange( valuesChanger );
				gui.add( effectController, 'mouseDeep', 0.01, 1.0, 0.01 ).onChange( valuesChanger );
				gui.add( effectController, 'viscosity', 0.9, 0.999, 0.001 ).onChange( valuesChanger );
				gui.add( effectController, 'speed', 1, 6, 1 );
				gui.add( effectController, 'ducksEnabled' ).onChange( valuesChanger );
				gui.add( effectController, 'wireframe' ).onChange( ( v )=>{

					waterMesh.material.wireframe = v;
					poolBorder.material.wireframe = v;
			
				} );
				gui.add( effectController, 'shadow' ).onChange( addShadow );
			
				//const buttonSmooth = { smoothWater: function () {smoothWater();} };
				//gui.add( buttonSmooth, 'smoothWater' );
			

				initWater();

				createducks();

				valuesChanger();

				renderer.setAnimationLoop( animate );

			}


			function initWater() {

				const geometry = new THREE.PlaneGeometry( BOUNDS, BOUNDS, WIDTH - 1, WIDTH - 1 );

				const material = new WaterMaterial( {
					color: 0x9bd2ec,
					metalness: 0.9,
					roughness: 0,
					transparent: true,
					opacity: 0.8,
					side: THREE.DoubleSide
				} );

				waterMesh = new THREE.Mesh( geometry, material );
				waterMesh.rotation.x = - Math.PI * 0.5;
				waterMesh.matrixAutoUpdate = false;
				waterMesh.updateMatrix();

				waterMesh.receiveShadow = true;
				waterMesh.castShadow = true;

				scene.add( waterMesh );

				// pool border
				const borderGeom = new THREE.TorusGeometry( 4.2, 0.1, 12, 4 );
				borderGeom.rotateX( Math.PI * 0.5 );
				borderGeom.rotateY( Math.PI * 0.25 );
				poolBorder = new THREE.Mesh( borderGeom, new THREE.MeshStandardMaterial( { color: 0x908877, roughness: 0.2 } ) );
				scene.add( poolBorder );
				borderGeom.receiveShadow = true;
				borderGeom.castShadow = true;

				// THREE.Mesh just for mouse raycasting
				const geometryRay = new THREE.PlaneGeometry( BOUNDS, BOUNDS, 1, 1 );
				meshRay = new THREE.Mesh( geometryRay, new THREE.MeshBasicMaterial( { color: 0xFFFFFF, visible: false } ) );
				meshRay.rotation.x = - Math.PI / 2;
				meshRay.matrixAutoUpdate = false;
				meshRay.updateMatrix();
				scene.add( meshRay );


				// Creates the gpu computation class and sets it up

				gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );

				const heightmap0 = gpuCompute.createTexture();

				fillTexture( heightmap0 );

				heightmapVariable = gpuCompute.addVariable( 'heightmap', shaderChange.heightmap_frag, heightmap0 );

				gpuCompute.setVariableDependencies( heightmapVariable, [ heightmapVariable ] );

				heightmapVariable.material.uniforms[ 'mousePos' ] = { value: new THREE.Vector2( 10000, 10000 ) };
				heightmapVariable.material.uniforms[ 'mouseSize' ] = { value: 0.2 };
				heightmapVariable.material.uniforms[ 'viscosity' ] = { value: 0.93 };
				heightmapVariable.material.uniforms[ 'deep' ] = { value: 0.01 };
				heightmapVariable.material.defines.BOUNDS = BOUNDS.toFixed( 1 );

				const error = gpuCompute.init();
				if ( error !== null ) console.error( error );

				// Create compute shader to smooth the water surface and velocity
				smoothShader = gpuCompute.createShaderMaterial( document.getElementById( 'smoothFragmentShader' ).textContent, { smoothTexture: { value: null } } );

				// Create compute shader to read water level
				readWaterLevelShader = gpuCompute.createShaderMaterial( document.getElementById( 'readWaterLevelFragmentShader' ).textContent, {
					point1: { value: new THREE.Vector2() },
					levelTexture: { value: null }
				} );
				readWaterLevelShader.defines.WIDTH = WIDTH.toFixed( 1 );
				readWaterLevelShader.defines.BOUNDS = BOUNDS.toFixed( 1 );

				// Create a 4x1 pixel image and a render target (Uint8, 4 channels, 1 byte per channel) to read water height and orientation
				readWaterLevelImage = new Uint8Array( 4 * 1 * 4 );

				readWaterLevelRenderTarget = new THREE.WebGLRenderTarget( 4, 1, {
					wrapS: THREE.ClampToEdgeWrapping,
					wrapT: THREE.ClampToEdgeWrapping,
					minFilter: THREE.NearestFilter,
					magFilter: THREE.NearestFilter,
					format: THREE.RGBAFormat,
					type: THREE.UnsignedByteType,
					depthBuffer: false
				} );

			}

			function fillTexture( texture ) {

				const waterMaxHeight = 0.1;

				function noise( x, y ) {

					let multR = waterMaxHeight;
					let mult = 0.025;
					let r = 0;
					for ( let i = 0; i < 15; i ++ ) {

						r += multR * simplex.noise( x * mult, y * mult );
						multR *= 0.53 + 0.025 * i;
						mult *= 1.25;

					}

					return r;

				}

				const pixels = texture.image.data;

				let p = 0;
				for ( let j = 0; j < WIDTH; j ++ ) {

					for ( let i = 0; i < WIDTH; i ++ ) {

						const x = i * 128 / WIDTH;
						const y = j * 128 / WIDTH;

						pixels[ p + 0 ] = noise( x, y );
						pixels[ p + 1 ] = pixels[ p + 0 ];
						pixels[ p + 2 ] = 0;
						pixels[ p + 3 ] = 1;

						p += 4;

					}

				}

			}

			function addShadow( v ) {

				renderer.shadowMap.enabled = v;
				sun.castShadow = v;

				if ( v ) {

					renderer.shadowMap.type = THREE.VSMShadowMap;
					const shadow = sun.shadow;
					shadow.mapSize.width = shadow.mapSize.height = 2048;
					shadow.radius = 2;
					shadow.bias = - 0.0005;
					const shadowCam = shadow.camera, s = 5;
					shadowCam.near = 0.1;
					shadowCam.far = 6;
					shadowCam.right = shadowCam.top	= s;
					shadowCam.left = shadowCam.bottom = - s;

				} else {

					if ( sun.shadow ) sun.shadow.dispose();
			
				}

				// debug shadow
				//scene.add(  new THREE.CameraHelper(shadowCam) );

			}

			function smoothWater() {

				const currentRenderTarget = gpuCompute.getCurrentRenderTarget( heightmapVariable );
				const alternateRenderTarget = gpuCompute.getAlternateRenderTarget( heightmapVariable );

				for ( let i = 0; i < 10; i ++ ) {

					smoothShader.uniforms[ 'smoothTexture' ].value = currentRenderTarget.texture;
					gpuCompute.doRenderTarget( smoothShader, alternateRenderTarget );

					smoothShader.uniforms[ 'smoothTexture' ].value = alternateRenderTarget.texture;
					gpuCompute.doRenderTarget( smoothShader, currentRenderTarget );

				}

			}

			function createducks() {

				for ( let i = 0; i < NUM_DUCK; i ++ ) {

					let sphere = duckModel;
					if ( i < NUM_DUCK - 1 ) {

						sphere = duckModel.clone();

					}

					sphere.position.x = ( Math.random() - 0.5 ) * BOUNDS * 0.7;
					sphere.position.z = ( Math.random() - 0.5 ) * BOUNDS * 0.7;

					sphere.userData.velocity = new THREE.Vector3();

					scene.add( sphere );

					ducks[ i ] = sphere;

				}

			}

			function duckDynamics() {

				readWaterLevelShader.uniforms[ 'levelTexture' ].value = tmpHeightmap;

				for ( let i = 0; i < NUM_DUCK; i ++ ) {

					const sphere = ducks[ i ];

					if ( sphere ) {

						// Read water level and orientation
						const u = 0.5 * sphere.position.x / BOUNDS_HALF + 0.5;
						const v = 1 - ( 0.5 * sphere.position.z / BOUNDS_HALF + 0.5 );
						readWaterLevelShader.uniforms[ 'point1' ].value.set( u, v );
						gpuCompute.doRenderTarget( readWaterLevelShader, readWaterLevelRenderTarget );

						renderer.readRenderTargetPixels( readWaterLevelRenderTarget, 0, 0, 4, 1, readWaterLevelImage );
						const pixels = new Float32Array( readWaterLevelImage.buffer );

						// Get orientation
						waterNormal.set( pixels[ 1 ], 0, - pixels[ 2 ] );

						const pos = sphere.position;

						const startPos = pos.clone();

						// Set height
						pos.y = pixels[ 0 ];

						// Move sphere
						waterNormal.multiplyScalar( 0.01 );
						sphere.userData.velocity.add( waterNormal );
						sphere.userData.velocity.multiplyScalar( 0.998 );
						pos.add( sphere.userData.velocity );

			
						const decal = 0.001;
						const limit = BOUNDS_HALF - 0.2;

						if ( pos.x < - limit ) {

							pos.x = - limit + decal;
							sphere.userData.velocity.x *= - 0.3;

						} else if ( pos.x > limit ) {

							pos.x = limit - decal;
							sphere.userData.velocity.x *= - 0.3;

						}

						if ( pos.z < - limit ) {

							pos.z = - limit + decal;
							sphere.userData.velocity.z *= - 0.3;

						} else if ( pos.z > limit ) {

							pos.z = limit - decal;
							sphere.userData.velocity.z *= - 0.3;

						}

						// duck orientation test

						const startNormal = new THREE.Vector3( pixels[ 1 ], 1, - pixels[ 2 ] ).normalize();
			
						const dir = startPos.sub( pos );
						dir.y = 0;
						dir.normalize();

						const yAxis = new THREE.Vector3( 0, 1, 0 );
						const zAxis = new THREE.Vector3( 0, 0, - 1 );
						tmpQuatX.setFromUnitVectors( zAxis, dir );
						tmpQuatZ.setFromUnitVectors( yAxis, startNormal );
						tmpQuat.multiplyQuaternions( tmpQuatZ, tmpQuatX );
						sphere.quaternion.slerp( tmpQuat, 0.017 );

					}

				}

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function onPointerDown() {

				mousedown = true;

			}

			function onPointerUp() {

				mousedown = false;
				controls.enabled = true;
			
			}

			function onPointerMove( event ) {

				const dom = renderer.domElement;
				mouseCoords.set( ( event.clientX / dom.clientWidth ) * 2 - 1, - ( event.clientY / dom.clientHeight ) * 2 + 1 );

			}

			function raycast() {

				// Set uniforms: mouse interaction
				const uniforms = heightmapVariable.material.uniforms;
				if ( mousedown ) {

					raycaster.setFromCamera( mouseCoords, camera );

					const intersects = raycaster.intersectObject( meshRay );

					if ( intersects.length > 0 ) {

						const point = intersects[ 0 ].point;
						uniforms[ 'mousePos' ].value.set( point.x, point.z );
						if ( controls.enabled ) controls.enabled = false;

					} else {

						uniforms[ 'mousePos' ].value.set( 10000, 10000 );

					}

				} else {

					uniforms[ 'mousePos' ].value.set( 10000, 10000 );

				}

			}

			function animate() {

				render();
				stats.update();

			}

			function render() {

				raycast();

				frame ++;

				if ( frame >= 7 - effectController.speed ) {

					// Do the gpu computation
					gpuCompute.compute();
					tmpHeightmap = gpuCompute.getCurrentRenderTarget( heightmapVariable ).texture;

					if ( ducksEnabled ) duckDynamics();

					// Get compute output in custom uniform
					if ( waterMesh ) waterMesh.material.heightmap = tmpHeightmap;

					frame = 0;

				}

				// Render
				renderer.render( scene, camera );

			}


			//----------------------

			class WaterMaterial extends THREE.MeshStandardMaterial {

				constructor( parameters ) {

					super();

					this.defines = {

						'STANDARD': '',
						'USE_UV': '',
						'WIDTH': WIDTH.toFixed( 1 ),
						'BOUNDS': BOUNDS.toFixed( 1 ),

					};

					this.extra = {};

					this.addParametre( 'heightmap', null );
			
					this.setValues( parameters );

				}

				addParametre( name, value ) {

					this.extra[ name ] = value;
					Object.defineProperty( this, name, {
						get: () => ( this.extra[ name ] ),
						set: ( v ) => {

							this.extra[ name ] = v;
							if ( this.userData.shader ) this.userData.shader.uniforms[ name ].value = this.extra[ name ];
			
						}
					} );
			
				}

				onBeforeCompile( shader ) {

					for ( const name in this.extra ) {

						shader.uniforms[ name ] = { value: this.extra[ name ] };
			
					}

					shader.vertexShader = shader.vertexShader.replace( '#include <common>', shaderChange.common );
					//shader.vertexShader = 'uniform sampler2D heightmap;\n' + shader.vertexShader;
					shader.vertexShader = shader.vertexShader.replace( '#include <beginnormal_vertex>', shaderChange.beginnormal_vertex );
					shader.vertexShader = shader.vertexShader.replace( '#include <begin_vertex>', shaderChange.begin_vertex );

					this.userData.shader = shader;

				}

			}


			const shaderChange = {

				heightmap_frag: /* glsl */`
				#include <common>

				uniform vec2 mousePos;
				uniform float mouseSize;
				uniform float viscosity;
				uniform float deep;

				void main()	{

					vec2 cellSize = 1.0 / resolution.xy;

					vec2 uv = gl_FragCoord.xy * cellSize;

					// heightmapValue.x == height from previous frame
					// heightmapValue.y == height from penultimate frame
					// heightmapValue.z, heightmapValue.w not used
					vec4 heightmapValue = texture2D( heightmap, uv );

					// Get neighbours
					vec4 north = texture2D( heightmap, uv + vec2( 0.0, cellSize.y ) );
					vec4 south = texture2D( heightmap, uv + vec2( 0.0, - cellSize.y ) );
					vec4 east = texture2D( heightmap, uv + vec2( cellSize.x, 0.0 ) );
					vec4 west = texture2D( heightmap, uv + vec2( - cellSize.x, 0.0 ) );

					//float newHeight = ( ( north.x + south.x + east.x + west.x ) * 0.5 - heightmapValue.y ) * viscosity;
					float newHeight = ( ( north.x + south.x + east.x + west.x ) * 0.5 - (heightmapValue.y) ) * viscosity;


					// Mouse influence
					float mousePhase = clamp( length( ( uv - vec2( 0.5 ) ) * BOUNDS - vec2( mousePos.x, - mousePos.y ) ) * PI / mouseSize, 0.0, PI );
					//newHeight += ( cos( mousePhase ) + 1.0 ) * 0.28 * 10.0;
					newHeight -= ( cos( mousePhase ) + 1.0 ) * deep;

					heightmapValue.y = heightmapValue.x;
					heightmapValue.x = newHeight;

					gl_FragColor = heightmapValue;

				}
				`,
				// FOR MATERIAL
				common: /* glsl */`
				#include <common>
				uniform sampler2D heightmap;
				`,
				beginnormal_vertex: /* glsl */`
				vec2 cellSize = vec2( 1.0 / WIDTH, 1.0 / WIDTH );
				vec3 objectNormal = vec3(
				( texture2D( heightmap, uv + vec2( - cellSize.x, 0 ) ).x - texture2D( heightmap, uv + vec2( cellSize.x, 0 ) ).x ) * WIDTH / BOUNDS,
				( texture2D( heightmap, uv + vec2( 0, - cellSize.y ) ).x - texture2D( heightmap, uv + vec2( 0, cellSize.y ) ).x ) * WIDTH / BOUNDS,
				1.0 );
				#ifdef USE_TANGENT
					vec3 objectTangent = vec3( tangent.xyz );
				#endif
				`,
				begin_vertex: /* glsl */`
				float heightValue = texture2D( heightmap, uv ).x;
				vec3 transformed = vec3( position.x, position.y, heightValue );
				#ifdef USE_ALPHAHASH
					vPosition = vec3( position );
				#endif
				`,
			};

		</script>
	</body>
</html>