Skip to content

Commit

Permalink
Improved compute texture examples.
Browse files Browse the repository at this point in the history
  • Loading branch information
mrdoob committed Sep 28, 2023
1 parent f886330 commit d6c8dd0
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 12 deletions.
21 changes: 14 additions & 7 deletions examples/webgpu_compute_texture.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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 ) );
}
` );
Expand Down
13 changes: 8 additions & 5 deletions examples/webgpu_compute_texture_pingpong.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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 ] );
Expand All @@ -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 ] );
Expand Down Expand Up @@ -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() );

Expand Down

0 comments on commit d6c8dd0

Please sign in to comment.