Examples: Add webgpu_camera_array. (#30296)

mrdoob · Jan 9, 2025 · 4e91f68 · 4e91f68
1 parent ee4bdac
commit 4e91f68
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 0 deletions.
diff --git a/examples/files.json b/examples/files.json
@@ -300,6 +300,7 @@
 		"webgpu_backdrop_area",
 		"webgpu_backdrop_water",
 		"webgpu_camera",
+		"webgpu_camera_array",
 		"webgpu_camera_logarithmicdepthbuffer",
 		"webgpu_clearcoat",
 		"webgpu_clipping",

diff --git a/examples/screenshots/webgpu_camera_array.jpg b/examples/screenshots/webgpu_camera_array.jpg
diff --git a/examples/webgpu_camera_array.html b/examples/webgpu_camera_array.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgpu - arraycamera</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>
+		<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';
+
+			let camera, scene, renderer;
+			let mesh;
+			const AMOUNT = 6;
+
+			init();
+
+			function init() {
+
+				const ASPECT_RATIO = window.innerWidth / window.innerHeight;
+
+				const WIDTH = ( window.innerWidth / AMOUNT );
+				const HEIGHT = ( window.innerHeight / AMOUNT );
+
+				const cameras = [];
+
+				for ( let y = 0; y < AMOUNT; y ++ ) {
+
+					for ( let x = 0; x < AMOUNT; x ++ ) {
+
+						const subcamera = new THREE.PerspectiveCamera( 40, ASPECT_RATIO, 0.1, 10 );
+						subcamera.viewport = new THREE.Vector4( Math.floor( x * WIDTH ), Math.floor( y * HEIGHT ), Math.ceil( WIDTH ), Math.ceil( HEIGHT ) );
+						subcamera.position.x = ( x / AMOUNT ) - 0.5;
+						subcamera.position.y = 0.5 - ( y / AMOUNT );
+						subcamera.position.z = 1.5;
+						subcamera.position.multiplyScalar( 2 );
+						subcamera.lookAt( 0, 0, 0 );
+						subcamera.updateMatrixWorld();
+						cameras.push( subcamera );
+
+					}
+
+				}
+
+				camera = new THREE.ArrayCamera( cameras );
+				camera.position.z = 3;
+
+				scene = new THREE.Scene();
+
+				scene.add( new THREE.AmbientLight( 0x999999 ) );
+
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
+				light.position.set( 0.5, 0.5, 1 );
+				light.castShadow = true;
+				light.shadow.camera.zoom = 4; // tighter shadow map
+				scene.add( light );
+
+				const geometryBackground = new THREE.PlaneGeometry( 100, 100 );
+				const materialBackground = new THREE.MeshPhongMaterial( { color: 0x000066 } );
+
+				const background = new THREE.Mesh( geometryBackground, materialBackground );
+				background.receiveShadow = true;
+				background.position.set( 0, 0, - 1 );
+				scene.add( background );
+
+				const geometryCylinder = new THREE.CylinderGeometry( 0.5, 0.5, 1, 32 );
+				const materialCylinder = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
+
+				mesh = new THREE.Mesh( geometryCylinder, materialCylinder );
+				mesh.castShadow = true;
+				mesh.receiveShadow = true;
+				scene.add( mesh );
+
+				renderer = new THREE.WebGPURenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				renderer.shadowMap.enabled = true;
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				const ASPECT_RATIO = window.innerWidth / window.innerHeight;
+				const WIDTH = ( window.innerWidth / AMOUNT );
+				const HEIGHT = ( window.innerHeight / AMOUNT );
+
+				camera.aspect = ASPECT_RATIO;
+				camera.updateProjectionMatrix();
+
+				for ( let y = 0; y < AMOUNT; y ++ ) {
+
+					for ( let x = 0; x < AMOUNT; x ++ ) {
+
+						const subcamera = camera.cameras[ AMOUNT * y + x ];
+
+						subcamera.viewport.set(
+							Math.floor( x * WIDTH ),
+							Math.floor( y * HEIGHT ),
+							Math.ceil( WIDTH ),
+							Math.ceil( HEIGHT ) );
+
+						subcamera.aspect = ASPECT_RATIO;
+						subcamera.updateProjectionMatrix();
+
+					}
+
+				}
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				mesh.rotation.x += 0.005;
+				mesh.rotation.z += 0.01;
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/test/e2e/puppeteer.js b/test/e2e/puppeteer.js
@@ -131,6 +131,7 @@ const exceptionList = [
 
 	// WebGPURenderer: Unknown problem
 	'webgpu_backdrop_water',
+	'webgpu_camera_array',
 	'webgpu_camera_logarithmicdepthbuffer',
 	'webgpu_clipping',
 	'webgpu_lightprobe_cubecamera',