samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgpu - procedural terrain</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<meta property="og:title" content="three.js webgpu - procedural terrain">
		<meta property="og:type" content="website">
		<meta property="og:url" content="https://threejs.org/examples/webgpu_tsl_procedural_terrain.html">
		<meta property="og:image" content="https://threejs.org/examples/screenshots/webgpu_tsl_procedural_terrain.jpg">
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<div id="info">
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<div class="title-wrapper">
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Procedural Terrain</span>
			</div>

			<small>
				Based on <a href="https://threejs-journey.com/lessons/procedural-terrain-shader" target="_blank" rel="noopener">Three.js Journey</a> lessons.
			</small>
		</div>

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

		<script type="module">

			import * as THREE from 'three/webgpu';
			import { mx_noise_float, color, cross, dot, float, transformNormalToView, positionLocal, sign, step, Fn, uniform, varying, vec2, vec3, Loop } from 'three/tsl';

			import { Inspector } from 'three/addons/inspector/Inspector.js';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';

			let camera, scene, renderer, controls, drag;

			init();

			function init() {

				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 100 );
				camera.position.set( - 10, 8, - 2.2 );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x201919 );

				// environment

				const hdrLoader = new HDRLoader();
				hdrLoader.load( './textures/equirectangular/pedestrian_overpass_1k.hdr', ( environmentMap ) => {

					environmentMap.mapping = THREE.EquirectangularReflectionMapping;

					scene.background = environmentMap;
					scene.backgroundBlurriness = 0.5;
					scene.environment = environmentMap;
			
				} );

				// lights
			
				const directionalLight = new THREE.DirectionalLight( '#ffffff', 2 );
				directionalLight.position.set( 6.25, 3, 4 );
				directionalLight.castShadow = true;
				directionalLight.shadow.mapSize.set( 1024, 1024 );
				directionalLight.shadow.camera.near = 0.1;
				directionalLight.shadow.camera.far = 30;
				directionalLight.shadow.camera.top = 8;
				directionalLight.shadow.camera.right = 8;
				directionalLight.shadow.camera.bottom = - 8;
				directionalLight.shadow.camera.left = - 8;
				directionalLight.shadow.normalBias = 0.05;
				scene.add( directionalLight );

				// terrain

				const material = new THREE.MeshStandardNodeMaterial( {
					metalness: 0,
					roughness: 0.5,
					color: '#85d534'
				} );

				const noiseIterations = uniform( 3 );
				const positionFrequency = uniform( 0.175 );
				const warpFrequency = uniform( 6 );
				const warpStrength = uniform( 1 );
				const strength = uniform( 10 );
				const offset = uniform( vec2( 0, 0 ) );
				const normalLookUpShift = uniform( 0.01 );
				const colorSand = uniform( color( '#ffe894' ) );
				const colorGrass = uniform( color( '#85d534' ) );
				const colorSnow = uniform( color( '#ffffff' ) );
				const colorRock = uniform( color( '#bfbd8d' ) );

				const vNormal = varying( vec3() );
				const vPosition = varying( vec3() );

				const terrainElevation = Fn( ( [ position ] ) => {

					const warpedPosition = position.add( offset ).toVar();
					warpedPosition.addAssign( mx_noise_float( warpedPosition.mul( positionFrequency ).mul( warpFrequency ), 1, 0 ).mul( warpStrength ) );
			
					const elevation = float( 0 ).toVar();
					Loop( { type: 'float', start: float( 1 ), end: noiseIterations.toFloat(), condition: '<=' }, ( { i } ) => {

						const noiseInput = warpedPosition.mul( positionFrequency ).mul( i.mul( 2 ) ).add( i.mul( 987 ) );
						const noise = mx_noise_float( noiseInput, 1, 0 ).div( i.add( 1 ).mul( 2 ) );
						elevation.addAssign( noise );
			
					} );

					const elevationSign = sign( elevation );
					elevation.assign( elevation.abs().pow( 2 ).mul( elevationSign ).mul( strength ) );

					return elevation;
			
				} );

				material.positionNode = Fn( () => {

					// neighbours positions

					const neighbourA = positionLocal.xyz.add( vec3( normalLookUpShift, 0.0, 0.0 ) ).toVar();
					const neighbourB = positionLocal.xyz.add( vec3( 0.0, 0.0, normalLookUpShift.negate() ) ).toVar();

					// elevations

					const position = positionLocal.xyz.toVar();
					const elevation = terrainElevation( positionLocal.xz );
					position.y.addAssign( elevation );
			
					neighbourA.y.addAssign( terrainElevation( neighbourA.xz ) );
					neighbourB.y.addAssign( terrainElevation( neighbourB.xz ) );

					// compute normal

					const toA = neighbourA.sub( position ).normalize();
					const toB = neighbourB.sub( position ).normalize();
					vNormal.assign( cross( toA, toB ) );

					// varyings

					vPosition.assign( position.add( vec3( offset.x, 0, offset.y ) ) );

					return position;
			
				} )();

				material.normalNode = transformNormalToView( vNormal );

				material.colorNode = Fn( () => {

					const finalColor = colorSand.toVar();

					// grass

					const grassMix = step( - 0.06, vPosition.y );
					finalColor.assign( grassMix.mix( finalColor, colorGrass ) );

					// rock

					const rockMix = step( 0.5, dot( vNormal, vec3( 0, 1, 0 ) ) ).oneMinus().mul( step( - 0.06, vPosition.y ) );
					finalColor.assign( rockMix.mix( finalColor, colorRock ) );

					// snow

					const snowThreshold = mx_noise_float( vPosition.xz.mul( 25 ), 1, 0 ).mul( 0.1 ).add( 0.45 );
					const snowMix = step( snowThreshold, vPosition.y );
					finalColor.assign( snowMix.mix( finalColor, colorSnow ) );

					return finalColor;
			
				} )();

				const geometry = new THREE.PlaneGeometry( 10, 10, 500, 500 );
				geometry.deleteAttribute( 'uv' );
				geometry.deleteAttribute( 'normal' );
				geometry.rotateX( - Math.PI * 0.5 );

				const terrain = new THREE.Mesh( geometry, material );
				terrain.receiveShadow = true;
				terrain.castShadow = true;
				scene.add( terrain );

				// water
			
				const water = new THREE.Mesh(
					new THREE.PlaneGeometry( 10, 10, 1, 1 ),
					new THREE.MeshPhysicalMaterial( {
						transmission: 1,
						roughness: 0.5,
						ior: 1.333,
						color: '#4db2ff'
					} )
				);
				water.rotation.x = - Math.PI * 0.5;
				water.position.y = - 0.1;
				scene.add( water );

				// drag

				drag = {};
				drag.screenCoords = new THREE.Vector2();
				drag.prevWorldCoords = new THREE.Vector3();
				drag.worldCoords = new THREE.Vector3();
				drag.raycaster = new THREE.Raycaster();
				drag.down = false;
				drag.hover = false;

				drag.object = new THREE.Mesh( new THREE.PlaneGeometry( 10, 10, 1, 1 ), new THREE.MeshBasicMaterial() );
				drag.object.rotation.x = - Math.PI * 0.5;
				drag.object.visible = false;
				scene.add( drag.object );

				drag.getIntersect = () => {

					drag.raycaster.setFromCamera( drag.screenCoords, camera );
					const intersects = drag.raycaster.intersectObject( drag.object );
					if ( intersects.length )
						return intersects[ 0 ];

					return null;

				};

				drag.update = () => {

					const intersect = drag.getIntersect();

					if ( intersect ) {

						drag.hover = true;

						if ( ! drag.down )
							renderer.domElement.style.cursor = 'grab';

					} else {

						drag.hover = false;
						renderer.domElement.style.cursor = 'default';

					}

					if ( drag.hover && drag.down ) {

						drag.worldCoords.copy( intersect.point );
						const delta = drag.prevWorldCoords.sub( drag.worldCoords );

						offset.value.x += delta.x;
						offset.value.y += delta.z;

					}

					drag.prevWorldCoords.copy( drag.worldCoords );

				};

				// renderer

				renderer = new THREE.WebGPURenderer( { antialias: true } );
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.shadowMap.enabled = true;
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setAnimationLoop( animate );
				document.body.appendChild( renderer.domElement );

				// inspector

				renderer.inspector = new Inspector();
				document.body.appendChild( renderer.inspector.domElement );

				// controls

				controls = new OrbitControls( camera, renderer.domElement );
				controls.maxPolarAngle = Math.PI * 0.45;
				controls.target.y = - 0.5;
				controls.enableDamping = true;
				controls.minDistance = 0.1;
				controls.maxDistance = 50;

				// debug

				const gui = renderer.inspector.createParameters( 'Parameters' );

				const terrainGui = gui.addFolder( '🏔️ terrain' );

				terrainGui.add( noiseIterations, 'value', 0, 10, 1 ).name( 'noiseIterations' );
				terrainGui.add( positionFrequency, 'value', 0, 1, 0.001 ).name( 'positionFrequency' );
				terrainGui.add( strength, 'value', 0, 20, 0.001 ).name( 'strength' );
				terrainGui.add( warpFrequency, 'value', 0, 20, 0.001 ).name( 'warpFrequency' );
				terrainGui.add( warpStrength, 'value', 0, 2, 0.001 ).name( 'warpStrength' );

				terrainGui.addColor( { color: colorSand.value }, 'color' ).name( 'colorSand' );
				terrainGui.addColor( { color: colorGrass.value }, 'color' ).name( 'colorGrass' );
				terrainGui.addColor( { color: colorSnow.value }, 'color' ).name( 'colorSnow' );
				terrainGui.addColor( { color: colorRock.value }, 'color' ).name( 'colorRock' );

				const waterGui = gui.addFolder( '💧 water' );

				waterGui.add( water.material, 'roughness', 0, 1, 0.01 );
				waterGui.add( water.material, 'ior', 1, 2, 0.001 );
				waterGui.addColor( { color: water.material.color }, 'color' ).name( 'color' );

				// events

				window.addEventListener( 'pointermove', ( event ) => {

					drag.screenCoords.x = ( event.clientX / window.innerWidth - 0.5 ) * 2;
					drag.screenCoords.y = - ( event.clientY / window.innerHeight - 0.5 ) * 2;

				} );

				renderer.domElement.addEventListener( 'pointerdown', () => {

					if ( drag.hover ) {

						renderer.domElement.style.cursor = 'grabbing';
						controls.enabled = false;
						drag.down = true;
						drag.object.scale.setScalar( 10 );

						const intersect = drag.getIntersect();
						drag.prevWorldCoords.copy( intersect.point );
						drag.worldCoords.copy( intersect.point );
			
					}

				} );

				window.addEventListener( 'pointerup', () => {

					drag.down = false;
					controls.enabled = true;
					drag.object.scale.setScalar( 1 );
			
				} );

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

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

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

			}

			async function animate() {

				controls.update();

				drag.update();

				renderer.render( scene, camera );

			}

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