From d6c8dd0b50a2994c05f94687ed0dfa44ae61ee4c Mon Sep 17 00:00:00 2001
From: "Mr.doob" <info@mrdoob.com>
Date: Thu, 28 Sep 2023 22:53:05 +0900
Subject: [PATCH] Improved compute texture examples.

---
 examples/webgpu_compute_texture.html          | 21 ++++++++++++-------
 examples/webgpu_compute_texture_pingpong.html | 13 +++++++-----
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/examples/webgpu_compute_texture.html b/examples/webgpu_compute_texture.html
index 68392a1a3e2d4c..928c14c3651e9d 100644
--- a/examples/webgpu_compute_texture.html
+++ b/examples/webgpu_compute_texture.html
@@ -9,7 +9,6 @@
 
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Compute Texture
-			<br>Texture generated using GPU Compute.
 		</div>
 
 		<script type="importmap">
@@ -66,17 +65,25 @@
 						let posX = index % ${ width };
 						let posY = index / ${ width };
 						let indexUV = vec2u( posX, posY );
-						let uv = getUV( posX, posY );
 
-						textureStore( storageTex, indexUV, vec4f( uv, 0, 1 ) );
+						// https://www.shadertoy.com/view/Xst3zN
 
-					}
+						let x = f32( posX ) / 50.0;
+						let y = f32( posY ) / 50.0;
+
+						let v1 = sin( x );
+						let v2 = sin( y );
+						let v3 = sin( x + y );
+						let v4 = sin( sqrt( x * x + y * y ) + 5.0 );
+						let v = v1 + v2 + v3 + v4;
 
-					fn getUV( posX: u32, posY: u32 ) -> vec2f {
+						let PI = 3.14159265359;
 
-						let uv = vec2f( f32( posX ) / ${ width }.0, f32( posY ) / ${ height }.0 );
+						let r = sin( v );
+						let g = sin( v + PI );
+						let b = sin( v + PI - 0.5 );
 
-						return uv;
+						textureStore( storageTex, indexUV, vec4f( r, g, b, 1 ) );
 
 					}
 				` );
diff --git a/examples/webgpu_compute_texture_pingpong.html b/examples/webgpu_compute_texture_pingpong.html
index 07b88fc008d451..b0026f5f4c4fdc 100644
--- a/examples/webgpu_compute_texture_pingpong.html
+++ b/examples/webgpu_compute_texture_pingpong.html
@@ -9,7 +9,6 @@
 
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Compute Ping/Pong Texture
-			<br>Texture generated using GPU Compute.
 		</div>
 
 		<script type="importmap">
@@ -113,7 +112,11 @@
 						let indexUV = vec2u( posX, posY );
 						let uv = getUV( posX, posY );
 
-						textureStore( writeTex, indexUV, vec4f( vec3f( rand2( uv + seed ) ), 1 ) );
+						let r = rand2( uv + seed * 100 ) - rand2( uv + seed * 300 );
+						let g = rand2( uv + seed * 200 ) - rand2( uv + seed * 300 );
+						let b = rand2( uv + seed * 200 ) - rand2( uv + seed * 100 );
+
+						textureStore( writeTex, indexUV, vec4( r, g, b, 1 ) );
 
 					}
 				`, [ rand2 ] );
@@ -131,7 +134,7 @@
 
 						let color = blur( readTex, indexUV ).rgb;
 
-						textureStore( writeTex, indexUV, vec4f( color, 1 ) );
+						textureStore( writeTex, indexUV, vec4f( color * 1.05, 1 ) );
 
 					}
 				`, [ rand2 ] );
@@ -181,9 +184,9 @@
 
 			function render() {
 
-				// reset every 50 frames
+				// reset every 200 frames
 
-				if ( renderer.info.render.frame % 50 === 0 ) {
+				if ( renderer.info.render.frame % 200 === 0 ) {
 
 					seed.value.set( Math.random(), Math.random() );