Главная Обзор Помощь
Регистрация Вход
samien
/
three.js
зеркало из https://github.com/mrdoob/three.js.git
1
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

Examples: Add SSGI Ball Pool demo. (#33258)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
mrdoob 2 недель назад
Родитель
e348bf707a
Сommit
82b371fb82
5 измененных файлов с 515 добавлено и 0 удалено
Единый вид Показать статистику Diff
  1. 1 0
      examples/files.json
  2. BIN
      examples/screenshots/webgpu_postprocessing_ssgi_ballpool.jpg
  3. 1 0
      examples/tags.json
  4. 512 0
      examples/webgpu_postprocessing_ssgi_ballpool.html
  5. 1 0
      test/e2e/puppeteer.js

+ 1 - 0
examples/files.json
Просмотреть файл 

@@ -437,6 +437,7 @@
 
 		"webgpu_postprocessing_sobel",
 
 		"webgpu_postprocessing_sobel",
 
 		"webgpu_postprocessing_ssaa",
 
 		"webgpu_postprocessing_ssaa",
 
 		"webgpu_postprocessing_ssgi",
 
 		"webgpu_postprocessing_ssgi",
 
+		"webgpu_postprocessing_ssgi_ballpool",
 
 		"webgpu_postprocessing_ssr",
 
 		"webgpu_postprocessing_ssr",
 
 		"webgpu_postprocessing_sss",
 
 		"webgpu_postprocessing_sss",
 
 		"webgpu_postprocessing_traa",
 
 		"webgpu_postprocessing_traa",

BIN
examples/screenshots/webgpu_postprocessing_ssgi_ballpool.jpg
Просмотреть файл


+ 1 - 0
examples/tags.json
Просмотреть файл 

@@ -161,6 +161,7 @@
 
 	"webgpu_postprocessing_sobel": [ "filter", "edge detection" ],
 
 	"webgpu_postprocessing_sobel": [ "filter", "edge detection" ],
 
 	"webgpu_postprocessing_ssaa": [ "msaa", "multisampled" ],
 
 	"webgpu_postprocessing_ssaa": [ "msaa", "multisampled" ],
 
 	"webgpu_postprocessing_ssgi": [ "global illumination", "indirect diffuse" ],
 
 	"webgpu_postprocessing_ssgi": [ "global illumination", "indirect diffuse" ],
 
+	"webgpu_postprocessing_ssgi_ballpool": [ "community", "physics" ],
 
 	"webgpu_postprocessing_sss": [ "shadow" ],
 
 	"webgpu_postprocessing_sss": [ "shadow" ],
 
 	"webgpu_refraction": [ "water" ],
 
 	"webgpu_refraction": [ "water" ],
 
 	"webgpu_rtt": [ "renderTarget", "texture" ],
 
 	"webgpu_rtt": [ "renderTarget", "texture" ],

+ 512 - 0
examples/webgpu_postprocessing_ssgi_ballpool.html
Просмотреть файл 

@@ -0,0 +1,512 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgpu - SSGI Ball Pool</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="example.css">
 
+		<style>
 
+			canvas {
 
+				touch-action: none;
 
+			}
 
+		</style>
 
+	</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>SSGI Ball Pool</span>
 
+			</div>
 
+
 
+			<small>Real-time indirect illumination with interactive physics ball pool.</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/",
 
+					"monomorph": "https://cdn.jsdelivr.net/npm/monomorph@2.3.1/build/monomorph.js",
 
+					"@perplexdotgg/bounce": "https://cdn.jsdelivr.net/npm/@perplexdotgg/bounce@1.8.0/build/bounce.js"
 
+				}
 
+			}
 
+		</script>
 
+
 
+		<script type="module">
 
+
 
+			import * as THREE from 'three/webgpu';
 
+			import { pass, mrt, output, normalView, diffuseColor, velocity, add, vec4, directionToColor, colorToDirection, sample } from 'three/tsl';
 
+			import { ssgi } from 'three/addons/tsl/display/SSGINode.js';
 
+			import { traa } from 'three/addons/tsl/display/TRAANode.js';
 
+			import { World } from '@perplexdotgg/bounce';
 
+
 
+			const BALL_RADIUS = 0.4;
 
+			const FILL_RATIO = 0.4;
 
+			const PACKING = 0.6;
 
+			const BOX_HEIGHT = 6;
 
+			const BOX_DEPTH = 8;
 
+			const WALL_THICKNESS = 0.5;
 
+			const CAM_FOV = 45;
 
+			const EASE_SPEED = 8;
 
+
 
+			let camera, scene, renderer, renderPipeline;
 
+			let raycaster, pointer;
 
+			let mouseLight;
 
+
 
+			let world;
 
+			let ballCount = 0;
 
+			let bodies = [];
 
+			let ballsMesh = null;
 
+			let wallMeshes = [];
 
+			const boxSize = { w: 8, h: BOX_HEIGHT, d: BOX_DEPTH };
 
+
 
+			let mouseRayOrigin = new THREE.Vector3();
 
+			let mouseRayDir = new THREE.Vector3();
 
+			let mouseMoving = false;
 
+			let mouseStopTimer = 0;
 
+			let pointerDown = false;
 
+			const activePointers = new Set();
 
+			const mouseLightTarget = new THREE.Vector3( 0, BOX_HEIGHT / 2, BOX_DEPTH / 2 );
 
+			const mouseRayOriginTarget = new THREE.Vector3();
 
+			const mouseRayDirTarget = new THREE.Vector3();
 
+
 
+			init();
 
+
 
+			async function init() {
 
+
 
+				camera = new THREE.PerspectiveCamera( CAM_FOV, window.innerWidth / window.innerHeight, 0.1, 100 );
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				renderer = new THREE.WebGPURenderer( { antialias: false } );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setAnimationLoop( animate );
 
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
+				renderer.toneMappingExposure = 0.5;
 
+				renderer.shadowMap.enabled = true;
 
+				document.body.appendChild( renderer.domElement );
 
+
 
+				//
 
+
 
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
+
 
+				const scenePass = pass( scene, camera );
 
+				scenePass.setMRT( mrt( {
 
+					output: output,
 
+					diffuseColor: diffuseColor,
 
+					normal: directionToColor( normalView ),
 
+					velocity: velocity
 
+				} ) );
 
+
 
+				const scenePassColor = scenePass.getTextureNode( 'output' );
 
+				const scenePassDiffuse = scenePass.getTextureNode( 'diffuseColor' );
 
+				const scenePassDepth = scenePass.getTextureNode( 'depth' );
 
+				const scenePassNormal = scenePass.getTextureNode( 'normal' );
 
+				const scenePassVelocity = scenePass.getTextureNode( 'velocity' );
 
+
 
+				// bandwidth optimization
 
+
 
+				const diffuseTexture = scenePass.getTexture( 'diffuseColor' );
 
+				diffuseTexture.type = THREE.UnsignedByteType;
 
+
 
+				const normalTexture = scenePass.getTexture( 'normal' );
 
+				normalTexture.type = THREE.UnsignedByteType;
 
+
 
+				const sceneNormal = sample( ( uv ) => {
 
+
 
+					return colorToDirection( scenePassNormal.sample( uv ) );
 
+
 
+				} );
 
+
 
+				// gi
 
+
 
+				const giPass = ssgi( scenePassColor, scenePassDepth, sceneNormal, camera );
 
+				giPass.sliceCount.value = 2;
 
+				giPass.stepCount.value = 8;
 
+
 
+				// composite
 
+
 
+				const gi = giPass.rgb;
 
+				const ao = giPass.a;
 
+
 
+				const compositePass = vec4(
 
+					add( scenePassColor.rgb.mul( ao ), scenePassDiffuse.rgb.mul( gi ) ),
 
+					scenePassColor.a
 
+				);
 
+
 
+				// traa
 
+
 
+				const traaPass = traa( compositePass, scenePassDepth, scenePassVelocity, camera );
 
+				renderPipeline.outputNode = traaPass;
 
+
 
+				// light
 
+
 
+				mouseLight = new THREE.PointLight( 0xffffff, 80 );
 
+				mouseLight.position.set( 0, BOX_HEIGHT / 2, BOX_DEPTH / 2 );
 
+				mouseLight.castShadow = true;
 
+				mouseLight.shadow.mapSize.set( 1024, 1024 );
 
+				mouseLight.shadow.radius = 20;
 
+				scene.add( mouseLight );
 
+
 
+				//
 
+
 
+				raycaster = new THREE.Raycaster();
 
+				pointer = new THREE.Vector2();
 
+
 
+				rebuildScene();
 
+
 
+				//
 
+
 
+				renderer.domElement.addEventListener( 'pointerdown', onPointerDown );
 
+				renderer.domElement.addEventListener( 'pointermove', onPointerMove );
 
+				renderer.domElement.addEventListener( 'pointerup', onPointerUp );
 
+				renderer.domElement.addEventListener( 'pointercancel', onPointerUp );
 
+				window.addEventListener( 'resize', onWindowResize );
 
+
 
+			}
 
+
 
+			function getBoxWidth() {
 
+
 
+				const aspect = window.innerWidth / window.innerHeight;
 
+				const vFov = THREE.MathUtils.degToRad( CAM_FOV / 2 );
 
+				const dist = ( BOX_HEIGHT / 2 ) / Math.tan( vFov );
 
+				return Math.tan( vFov ) * aspect * dist * 2;
 
+
 
+			}
 
+
 
+			function getBallCount() {
 
+
 
+				const roomVolume = boxSize.w * boxSize.h * boxSize.d;
 
+				const ballVolume = ( 4 / 3 ) * Math.PI * Math.pow( BALL_RADIUS, 3 );
 
+				return Math.floor( roomVolume * FILL_RATIO * PACKING / ballVolume );
 
+
 
+			}
 
+
 
+			function rebuildScene() {
 
+
 
+				for ( const mesh of wallMeshes ) {
 
+
 
+					scene.remove( mesh );
 
+					mesh.geometry.dispose();
 
+
 
+				}
 
+
 
+				wallMeshes = [];
 
+
 
+				if ( ballsMesh ) {
 
+
 
+					scene.remove( ballsMesh );
 
+					ballsMesh.dispose();
 
+					ballsMesh = null;
 
+
 
+				}
 
+
 
+				bodies = [];
 
+
 
+				boxSize.w = getBoxWidth();
 
+				ballCount = getBallCount();
 
+
 
+				world = new World( {
 
+					gravity: [ 0, - 9.81, 0 ],
 
+					solveVelocityIterations: 6,
 
+					solvePositionIterations: 2,
 
+					linearDamping: 0.1,
 
+					angularDamping: 0.1,
 
+					restitution: 0.4,
 
+					friction: 0.5
 
+				} );
 
+
 
+				fitCameraToBox();
 
+				createBox();
 
+				createBalls();
 
+
 
+			}
 
+
 
+			function createBox() {
 
+
 
+				const hw = boxSize.w / 2;
 
+				const hh = boxSize.h / 2;
 
+				const hd = boxSize.d / 2;
 
+				const t = WALL_THICKNESS;
 
+
 
+				const whiteMaterial = new THREE.MeshPhysicalMaterial( {
 
+					color: 0xeeeeee,
 
+					roughness: 0.7,
 
+					metalness: 0.0
 
+				} );
 
+
 
+				const redMaterial = new THREE.MeshPhysicalMaterial( {
 
+					color: 0xff2222,
 
+					roughness: 0.7,
 
+					metalness: 0.0
 
+				} );
 
+
 
+				const greenMaterial = new THREE.MeshPhysicalMaterial( {
 
+					color: 0x22ff22,
 
+					roughness: 0.7,
 
+					metalness: 0.0
 
+				} );
 
+
 
+				const walls = [
 
+					{ size: [ boxSize.w, t, boxSize.d ], pos: [ 0, - t / 2, 0 ], mat: whiteMaterial },
 
+					{ size: [ boxSize.w, t, boxSize.d ], pos: [ 0, boxSize.h + t / 2, 0 ], mat: whiteMaterial },
 
+					{ size: [ boxSize.w, boxSize.h, t ], pos: [ 0, hh, - hd - t / 2 ], mat: whiteMaterial },
 
+					{ size: [ boxSize.w, boxSize.h, t ], pos: [ 0, hh, hd + t / 2 ], noMesh: true },
 
+					{ size: [ t, boxSize.h, boxSize.d ], pos: [ - hw - t / 2, hh, 0 ], mat: redMaterial },
 
+					{ size: [ t, boxSize.h, boxSize.d ], pos: [ hw + t / 2, hh, 0 ], mat: greenMaterial }
 
+				];
 
+
 
+				for ( const w of walls ) {
 
+
 
+					const shape = world.createBox( { width: w.size[ 0 ], height: w.size[ 1 ], depth: w.size[ 2 ] } );
 
+					world.createStaticBody( { shape, position: w.pos } );
 
+
 
+					if ( ! w.noMesh ) {
 
+
 
+						const geo = new THREE.BoxGeometry( w.size[ 0 ], w.size[ 1 ], w.size[ 2 ] );
 
+						const mesh = new THREE.Mesh( geo, w.mat );
 
+						mesh.position.set( ...w.pos );
 
+						mesh.receiveShadow = true;
 
+						scene.add( mesh );
 
+						wallMeshes.push( mesh );
 
+
 
+					}
 
+
 
+				}
 
+
 
+			}
 
+
 
+			function createBalls() {
 
+
 
+				const sphereGeo = new THREE.SphereGeometry( BALL_RADIUS, 32, 16 );
 
+				const sphereShape = world.createSphere( { radius: BALL_RADIUS } );
 
+
 
+				const material = new THREE.MeshPhysicalMaterial( {
 
+					roughness: 0.3,
 
+					metalness: 0.1
 
+				} );
 
+
 
+				ballsMesh = new THREE.InstancedMesh( sphereGeo, material, ballCount );
 
+				ballsMesh.castShadow = true;
 
+				ballsMesh.receiveShadow = true;
 
+				scene.add( ballsMesh );
 
+
 
+				const colors = [
 
+					0xff4444, 0x44ff44, 0x4488ff, 0xffaa00, 0xff44ff,
 
+					0x44ffff, 0xffff44, 0xff8844, 0x8844ff, 0x44ff88
 
+				];
 
+
 
+				const color = new THREE.Color();
 
+				const hw = boxSize.w / 2 - BALL_RADIUS - 0.1;
 
+				const hd = boxSize.d / 2 - BALL_RADIUS - 0.1;
 
+
 
+				for ( let i = 0; i < ballCount; i ++ ) {
 
+
 
+					color.set( colors[ i % colors.length ] );
 
+					ballsMesh.setColorAt( i, color );
 
+
 
+					const x = ( Math.random() - 0.5 ) * 2 * hw;
 
+					const y = BALL_RADIUS + Math.random() * ( boxSize.h - BALL_RADIUS * 2 );
 
+					const z = ( Math.random() - 0.5 ) * 2 * hd;
 
+
 
+					const body = world.createDynamicBody( {
 
+						shape: sphereShape,
 
+						position: [ x, y, z ],
 
+						mass: 1,
 
+						restitution: 0.5,
 
+						friction: 0.4
 
+					} );
 
+
 
+					bodies.push( body );
 
+
 
+				}
 
+
 
+			}
 
+
 
+			function onPointerDown( event ) {
 
+
 
+				activePointers.add( event.pointerId );
 
+
 
+				if ( event.pointerType === 'touch' ) {
 
+
 
+					pointerDown = activePointers.size >= 2;
 
+
 
+				} else {
 
+
 
+					pointerDown = true;
 
+
 
+				}
 
+
 
+			}
 
+
 
+			function onPointerUp( event ) {
 
+
 
+				activePointers.delete( event.pointerId );
 
+
 
+				if ( event.pointerType === 'touch' ) {
 
+
 
+					pointerDown = activePointers.size >= 2;
 
+
 
+				} else {
 
+
 
+					pointerDown = false;
 
+
 
+				}
 
+
 
+			}
 
+
 
+			function onPointerMove( event ) {
 
+
 
+				pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
 
+				pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
+
 
+				raycaster.setFromCamera( pointer, camera );
 
+
 
+				mouseRayOriginTarget.copy( raycaster.ray.origin );
 
+				mouseRayDirTarget.copy( raycaster.ray.direction );
 
+				mouseMoving = true;
 
+				clearTimeout( mouseStopTimer );
 
+				mouseStopTimer = setTimeout( () => mouseMoving = false, 50 );
 
+
 
+				const frontPlane = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), - boxSize.d / 2 );
 
+				const hit = new THREE.Vector3();
 
+				if ( raycaster.ray.intersectPlane( frontPlane, hit ) ) {
 
+
 
+					mouseLightTarget.copy( hit );
 
+
 
+				}
 
+
 
+			}
 
+
 
+			function respawnBalls() {
 
+
 
+				const hw = boxSize.w / 2 - BALL_RADIUS - 0.1;
 
+				const hd = boxSize.d / 2 - BALL_RADIUS - 0.1;
 
+				const count = 5;
 
+
 
+				for ( let i = 0; i < count; i ++ ) {
 
+
 
+					const body = bodies[ Math.floor( Math.random() * bodies.length ) ];
 
+
 
+					body.position.set( [
 
+						( Math.random() - 0.5 ) * 2 * hw,
 
+						boxSize.h - BALL_RADIUS - Math.random() * 1,
 
+						( Math.random() - 0.5 ) * 2 * hd
 
+					] );
 
+					body.linearVelocity.set( [ 0, 0, 0 ] );
 
+					body.angularVelocity.set( [ 0, 0, 0 ] );
 
+					body.commitChanges();
 
+
 
+				}
 
+
 
+			}
 
+
 
+			function fitCameraToBox() {
 
+
 
+				const vFov = THREE.MathUtils.degToRad( CAM_FOV / 2 );
 
+				const dist = ( boxSize.h / 2 ) / Math.tan( vFov );
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.position.set( 0, boxSize.h / 2, dist + boxSize.d / 2 );
 
+				camera.lookAt( 0, boxSize.h / 2, 0 );
 
+				camera.updateProjectionMatrix();
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				rebuildScene();
 
+
 
+			}
 
+
 
+			const timer = new THREE.Timer();
 
+			const _dummy = new THREE.Object3D();
 
+
 
+			function animate() {
 
+
 
+				timer.update();
 
+				const dt = Math.min( timer.getDelta(), 1 / 30 );
 
+
 
+				const easeFactor = 1 - Math.exp( - EASE_SPEED * dt );
 
+				mouseRayOrigin.lerp( mouseRayOriginTarget, easeFactor );
 
+				mouseRayDir.lerp( mouseRayDirTarget, easeFactor );
 
+				mouseLight.position.lerp( mouseLightTarget, easeFactor );
 
+
 
+				if ( pointerDown ) {
 
+
 
+					respawnBalls();
 
+
 
+				}
 
+
 
+				if ( mouseMoving ) {
 
+
 
+					const pushRadius = 1.5;
 
+					const pushStrength = 15;
 
+					const _closest = new THREE.Vector3();
 
+					const _ballPos = new THREE.Vector3();
 
+					const _pushDir = new THREE.Vector3();
 
+
 
+					for ( const body of bodies ) {
 
+
 
+						const bp = body.position;
 
+						_ballPos.set( bp.x, bp.y, bp.z );
 
+
 
+						const ray = new THREE.Ray( mouseRayOrigin, mouseRayDir );
 
+						ray.closestPointToPoint( _ballPos, _closest );
 
+
 
+						const dist = _closest.distanceTo( _ballPos );
 
+
 
+						if ( dist < pushRadius ) {
 
+
 
+							_pushDir.subVectors( _ballPos, _closest );
 
+							if ( _pushDir.lengthSq() < 0.001 ) _pushDir.set( 0, 1, 0 );
 
+							_pushDir.normalize();
 
+
 
+							const strength = pushStrength * ( 1 - dist / pushRadius );
 
+							body.applyLinearImpulse( {
 
+								x: _pushDir.x * strength,
 
+								y: _pushDir.y * strength,
 
+								z: _pushDir.z * strength
 
+							} );
 
+
 
+						}
 
+
 
+					}
 
+
 
+				}
 
+
 
+				if ( world ) {
 
+
 
+					world.advanceTime( 1 / 60, dt );
 
+
 
+				}
 
+
 
+				for ( let i = 0; i < bodies.length; i ++ ) {
 
+
 
+					const body = bodies[ i ];
 
+					const p = body.position;
 
+					const q = body.orientation;
 
+
 
+					_dummy.position.set( p.x, p.y, p.z );
 
+					_dummy.quaternion.set( q.x, q.y, q.z, q.w );
 
+					_dummy.updateMatrix();
 
+
 
+					ballsMesh.setMatrixAt( i, _dummy.matrix );
 
+
 
+				}
 
+
 
+				ballsMesh.instanceMatrix.needsUpdate = true;
 
+
 
+				renderPipeline.render();
 
+
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 1 - 0
test/e2e/puppeteer.js
Просмотреть файл 

@@ -31,6 +31,7 @@ const exceptionList = [
 
 	'webgpu_postprocessing_ao',
 
 	'webgpu_postprocessing_ao',
 
 	'webgpu_postprocessing_dof',
 
 	'webgpu_postprocessing_dof',
 
 	'webgpu_postprocessing_ssgi',
 
 	'webgpu_postprocessing_ssgi',
 
+	'webgpu_postprocessing_ssgi_ballpool',
 
 	'webgpu_postprocessing_sss',
 
 	'webgpu_postprocessing_sss',
 
 	'webgpu_postprocessing_traa',
 
 	'webgpu_postprocessing_traa',
 
 	'webgpu_volume_lighting_traa',
 
 	'webgpu_volume_lighting_traa',

粤ICP备19079148号