Examples: Add WebGPU RTT demo.

mrdoob · Sep 16, 2020 · cd3003f · cd3003f
1 parent e97c302
commit cd3003f
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 1 deletion.
diff --git a/examples/files.js b/examples/files.js
@@ -322,7 +322,8 @@ var files = {
 		"webgl2_volume_perlin"
 	],
 	"webgpu": [
-		"webgpu_sandbox"
+		"webgpu_sandbox",
+		"webgpu_rtt"
 	],
 	"webaudio": [
 		"webaudio_orientation",

diff --git a/examples/webgpu_rtt.html b/examples/webgpu_rtt.html
@@ -0,0 +1,119 @@
+<html lang="en">
+	<head>
+		<title>WebGPU RTT</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> WebGPU - RTT<br/>(Chrome Canary with flag: --enable-unsafe-webgpu)
+		</div>
+
+		<script type="module">
+
+			import * as THREE from '../build/three.module.js';
+
+			import WebGPURenderer from './jsm/renderers/webgpu/WebGPURenderer.js';
+			import WebGPU from './jsm/renderers/webgpu/WebGPU.js';
+
+			let camera, scene, renderer;
+
+			let cameraFX, sceneFX, renderTarget;
+
+			let box;
+
+			init().then( animate ).catch( error );
+
+			async function init() {
+
+				if ( WebGPU.isAvailable() === false ) {
+
+					document.body.appendChild( WebGPU.getErrorMessage() );
+
+					throw 'No WebGPU support';
+
+				}
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
+				camera.position.z = 4;
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x222222 );
+
+				cameraFX = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+				sceneFX = new THREE.Scene();
+
+				// textured mesh
+
+				const loader = new THREE.TextureLoader();
+				const texture = loader.load( './textures/uv_grid_opengl.jpg' );
+
+				const geometryBox = new THREE.BoxBufferGeometry();
+				const materialBox = new THREE.MeshBasicMaterial( { map: texture } );
+
+				box = new THREE.Mesh( geometryBox, materialBox );
+				scene.add( box );
+
+				//
+
+				const dpr = window.devicePixelRatio;
+
+				renderer = new WebGPURenderer();
+				renderer.setPixelRatio( dpr );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				renderTarget = new THREE.WebGLRenderTarget( window.innerWidth * dpr, window.innerHeight * dpr );
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				// FX
+
+				// @TODO Until NodeMaterial is available just copy the beauty pass to screen
+
+				var geometryFX = new THREE.PlaneBufferGeometry( 2, 2 );
+				var materialFX = new THREE.MeshBasicMaterial( { map: renderTarget.texture } );
+
+				const quad = new THREE.Mesh( geometryFX, materialFX );
+				sceneFX.add( quad );
+
+				return renderer.init();
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				// @TODO Resize render target, implement respective .dispose()
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				box.rotation.x += 0.01;
+				box.rotation.y += 0.02;
+
+				renderer.setRenderTarget( renderTarget );
+				renderer.render( scene, camera );
+
+				renderer.setRenderTarget( null );
+				renderer.render( sceneFX, cameraFX );
+
+			}
+
+			function error( error ) {
+
+				console.error( error );
+
+			}
+
+		</script>
+	</body>
+</html>