Examples: Explicitly set clear color in WebGPU demos (#33452)

gkjohnson · web-flow · commit 42aa39adf982 · 2026-04-25T18:46:58.000+09:00
diff --git a/examples/misc_controls_fly.html b/examples/misc_controls_fly.html
@@ -197,6 +197,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
diff --git a/examples/misc_raycaster_helper.html b/examples/misc_raycaster_helper.html
@@ -41,6 +41,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
diff --git a/examples/webgpu_camera_logarithmicdepthbuffer.html b/examples/webgpu_camera_logarithmicdepthbuffer.html
@@ -157,6 +157,7 @@
 				const renderer = new THREE.WebGPURenderer( { antialias: true, logarithmicDepthBuffer: logDepthBuf } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH / 2, SCREEN_HEIGHT );
+				renderer.setClearColor( 0x000000 );
 				renderer.domElement.style.position = 'relative';
 				renderer.domElement.id = 'renderer_' + name;
 				renderer.inspector = new Inspector();
diff --git a/examples/webgpu_compute_particles.html b/examples/webgpu_compute_particles.html
@@ -156,6 +156,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
diff --git a/examples/webgpu_compute_particles_rain.html b/examples/webgpu_compute_particles_rain.html
@@ -275,6 +275,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
diff --git a/examples/webgpu_compute_particles_snow.html b/examples/webgpu_compute_particles_snow.html
@@ -271,6 +271,7 @@
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
diff --git a/examples/webgpu_instance_points.html b/examples/webgpu_instance_points.html
@@ -150,6 +150,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
diff --git a/examples/webgpu_lights_custom.html b/examples/webgpu_lights_custom.html
@@ -120,6 +120,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
diff --git a/examples/webgpu_lights_pointlights.html b/examples/webgpu_lights_pointlights.html
@@ -91,6 +91,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
diff --git a/examples/webgpu_lines_fat.html b/examples/webgpu_lines_fat.html
@@ -53,7 +53,7 @@
 
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setClearColor( 0x000000, 0.0 );
+				renderer.setClearColor( 0x000000 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
@@ -164,7 +164,7 @@
 
 				// main scene
 
-				renderer.setClearColor( 0x000000, 0 );
+				renderer.setClearColor( 0x000000 );
 
 				renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
 
diff --git a/examples/webgpu_lines_fat_raycasting.html b/examples/webgpu_lines_fat_raycasting.html
@@ -110,7 +110,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true, alpha: true, trackTimestamp: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setClearColor( 0x000000, 0.0 );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
diff --git a/examples/webgpu_lines_fat_wireframe.html b/examples/webgpu_lines_fat_wireframe.html
@@ -61,7 +61,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setClearColor( 0x000000, 0.0 );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
diff --git a/examples/webgpu_materials.html b/examples/webgpu_materials.html
@@ -270,6 +270,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				container.appendChild( renderer.domElement );
diff --git a/examples/webgpu_materials_alphahash.html b/examples/webgpu_materials_alphahash.html
@@ -93,6 +93,7 @@
 				renderer = new THREE.WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
diff --git a/examples/webgpu_mirror.html b/examples/webgpu_mirror.html
@@ -183,6 +183,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
diff --git a/examples/webgpu_postprocessing.html b/examples/webgpu_postprocessing.html
@@ -47,6 +47,7 @@
 				renderer = new THREE.WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
diff --git a/examples/webgpu_postprocessing_3dlut.html b/examples/webgpu_postprocessing_3dlut.html
@@ -201,6 +201,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
diff --git a/examples/webgpu_postprocessing_afterimage.html b/examples/webgpu_postprocessing_afterimage.html
@@ -57,6 +57,7 @@
 				renderer = new THREE.WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
diff --git a/examples/webgpu_postprocessing_sobel.html b/examples/webgpu_postprocessing_sobel.html
@@ -70,6 +70,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				renderer.toneMapping = THREE.LinearToneMapping;
diff --git a/examples/webgpu_sprites.html b/examples/webgpu_sprites.html
@@ -105,6 +105,7 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( render );
 				document.body.appendChild( renderer.domElement );
 
diff --git a/examples/webgpu_tsl_earth.html b/examples/webgpu_tsl_earth.html
@@ -148,6 +148,7 @@
 				renderer = new THREE.WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x000000 );
 				renderer.setAnimationLoop( animate );
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
