Skip to content

Examples: Explicitly set clear color in WebGPU demos #33452

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gkjohnson merged 2 commits into from
Apr 25, 2026
Merged

Examples: Explicitly set clear color in WebGPU demos #33452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0324e9
Update backgrounds
gkjohnson Apr 23, 2026
de9370c
Remove alpha component
gkjohnson Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/misc_controls_fly.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,7 @@
renderer = new THREE.WebGPURenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.setClearColor( 0x000000 );
Copy link
Copy Markdown
Collaborator

@Mugen87 Mugen87 Apr 23, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of using setClearColor() do you mind using Scene.background instead?

Copy link
Copy Markdown
Collaborator Author

@gkjohnson gkjohnson Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's wrong with setClearColor? Many webgpu examples already use it.

Copy link
Copy Markdown
Collaborator

@Mugen87 Mugen87 Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scene.background should be the first choice of users for defining the background of a scene.

The more technical setClearColor() is mainly intended for transparent clears and if you can't use Scene.background for whatever reasons (e.g. if you directly render a mesh).

Copy link
Copy Markdown
Collaborator Author

@gkjohnson gkjohnson Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you feel this is a principal that should be followed you should make a PR to adjust all the relevant examples but otherwise this seems like an arbitrary personal preference that isn't documented or adhered to elsewhere in the project. SetClearColor is valid to use with no downsides. These kinds of changes are very tedious to make so I'd prefer not to spend my time with these kinds of superficial changes when they're already aligned with other examples in the project.

Copy link
Copy Markdown
Collaborator

@Mugen87 Mugen87 Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I recall correctly, @mrdoob and I have discussed this aspect in the past. Instead of manually defining clear colors or skyboxes, the examples should guide users towards Scene.background so they have a more uniform way for defining the scene's background.

These kinds of changes are very tedious to make

TBH, no developer should do such changes manually anymore. This kind of tasks are perfect for AI tools which make the update within a minute. If you don't want to update the PR, I hope you don't mind if I clean this up after the merge.

Copy link
Copy Markdown
Collaborator Author

@gkjohnson gkjohnson Apr 25, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you don't want to update the PR, I hope you don't mind if I clean this up after the merge.

Sorry I think I was reading too quickly yesterday - while I don't agree, if you think there is an important distinction please feel free to adjust the examples in a follow up PR. But if there are policies like this in place then they should be more clear in the future, imo.

I'll go ahead and merge this, then.

renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

Expand Down
1 change: 1 addition & 0 deletions examples/misc_raycaster_helper.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_camera_logarithmicdepthbuffer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_compute_particles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_compute_particles_rain.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_compute_particles_snow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_instance_points.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_lights_custom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_lights_pointlights.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

Expand Down
4 changes: 2 additions & 2 deletions examples/webgpu_lines_fat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -164,7 +164,7 @@

// main scene

renderer.setClearColor( 0x000000, 0 );
renderer.setClearColor( 0x000000 );

renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );

Expand Down
2 changes: 1 addition & 1 deletion examples/webgpu_lines_fat_raycasting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
2 changes: 1 addition & 1 deletion examples/webgpu_lines_fat_wireframe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_materials.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_materials_alphahash.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_mirror.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_postprocessing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_postprocessing_3dlut.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_postprocessing_afterimage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_postprocessing_sobel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_sprites.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

Expand Down
1 change: 1 addition & 0 deletions examples/webgpu_tsl_earth.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
Loading