Improved compute texture examples.

mrdoob · Sep 28, 2023 · d6c8dd0 · d6c8dd0
1 parent f886330
commit d6c8dd0
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git 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
@@ -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() );