From 85b2ee4b0f5b7fd45387ab01df4c4ae8f5e6fa83 Mon Sep 17 00:00:00 2001
From: Makio64 <davronai@gmail.com>
Date: Wed, 5 Feb 2025 10:47:49 +0900
Subject: [PATCH] Enhance WebGPU texture example with GUI controls for random
 size and render target support

---
 examples/webgpu_textures_partialupdate.html | 40 ++++++++++++++++++---
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/examples/webgpu_textures_partialupdate.html b/examples/webgpu_textures_partialupdate.html
index af480cc5ab119f..2219229cdc3cc1 100644
--- a/examples/webgpu_textures_partialupdate.html
+++ b/examples/webgpu_textures_partialupdate.html
@@ -27,8 +27,12 @@
 		<script type="module">
 
 			import * as THREE from 'three';
+			import { FullScreenQuad } from 'three/addons/postprocessing/Pass.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, clock, dataTexture, diffuseMap;
+			let rt, rtQuad, rtScene, rtCamera;
+			let gui, params;
 
 			let last = 0;
 			const position = new THREE.Vector2();
@@ -36,8 +40,12 @@
 
 			init();
 
-			function init() {
+			async function init() {
 
+				params = { randomSize: false };
+				gui = new GUI();
+				gui.add( params, 'randomSize' ).name( 'Random Size' );
+			
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
 				camera.position.z = 2;
 
@@ -65,11 +73,18 @@
 				const data = new Uint8Array( width * height * 4 );
 				dataTexture = new THREE.DataTexture( data, width, height );
 
+				rt = new THREE.RenderTarget( 16, 16, { depth: false, stencil: false } );
+				rtQuad = new FullScreenQuad( new THREE.MeshBasicMaterial( { map: dataTexture } ) );
+				rtScene = new THREE.Scene();
+				rtScene.add( rtQuad._mesh );
+				rtCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+
 				//
 
 				renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: false } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				await renderer.init();
 
 				document.body.appendChild( renderer.domElement );
 
@@ -102,20 +117,35 @@
 
 					last = elapsedTime;
 
-					position.x = ( 32 * THREE.MathUtils.randInt( 1, 16 ) ) - 32;
-					position.y = ( 32 * THREE.MathUtils.randInt( 1, 16 ) ) - 32;
-
 					// generate new color data
 					updateDataTexture( dataTexture );
 
 					// perform copy from src to dest texture to a random position
 
-					renderer.copyTextureToTexture( dataTexture, diffuseMap, null, position );
+					const size = Math.pow( 2, params.randomSize ? THREE.MathUtils.randInt( 2, 7 ) : 4 );
+					position.x = ( size * THREE.MathUtils.randInt( 1, 16 * 32 / size ) ) - size;
+					position.y = ( size * THREE.MathUtils.randInt( 1, 16 * 32 / size ) ) - size;
+
+					if ( params.randomSize ) {
 
+						rt.setSize( size, size );
+						renderer.setRenderTarget( rt );
+						renderer.render( rtScene, rtCamera );
+						renderer.setRenderTarget( null );
+
+						renderer.copyTextureToTexture( rt.texture, diffuseMap, null, position );
+			
+					} else {
+
+						renderer.copyTextureToTexture( dataTexture, diffuseMap, null, position );
+			
+					}
+			
 				}
 
 			}
 
+
 			function updateDataTexture( texture ) {
 
 				const size = texture.image.width * texture.image.height;