diff --git a/examples/misc_controls_fly.html b/examples/misc_controls_fly.html
index 6ee47cef45e7bb..d9688a752bc0a7 100644
--- a/examples/misc_controls_fly.html
+++ b/examples/misc_controls_fly.html
@@ -80,6 +80,7 @@
camera.position.z = radius * 5;
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 );
dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
@@ -197,7 +198,6 @@
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
index 23aa2183b561de..32ff65bae8601a 100644
--- a/examples/misc_raycaster_helper.html
+++ b/examples/misc_raycaster_helper.html
@@ -41,7 +41,6 @@
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 );
@@ -51,6 +50,7 @@
camera.position.z = 10;
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
//
diff --git a/examples/webgpu_camera_logarithmicdepthbuffer.html b/examples/webgpu_camera_logarithmicdepthbuffer.html
index 322ff796817d98..a1824dc71d3443 100644
--- a/examples/webgpu_camera_logarithmicdepthbuffer.html
+++ b/examples/webgpu_camera_logarithmicdepthbuffer.html
@@ -157,7 +157,6 @@
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();
@@ -172,6 +171,7 @@
function initScene( font ) {
const scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
scene.add( new THREE.AmbientLight( 0x777777 ) );
diff --git a/examples/webgpu_compute_particles.html b/examples/webgpu_compute_particles.html
index fbd52c5dacad16..e37b67797a1b9a 100644
--- a/examples/webgpu_compute_particles.html
+++ b/examples/webgpu_compute_particles.html
@@ -63,6 +63,7 @@
camera.position.set( 0, 5, 20 );
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
//
@@ -156,7 +157,6 @@
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
index b0173348386a56..2f8e47a0232583 100644
--- a/examples/webgpu_compute_particles_rain.html
+++ b/examples/webgpu_compute_particles_rain.html
@@ -62,6 +62,7 @@
camera.lookAt( 0, 0, 0 );
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
const dirLight = new THREE.DirectionalLight( 0xffffff, .5 );
dirLight.position.set( 3, 17, 17 );
@@ -275,7 +276,6 @@
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_instance_points.html b/examples/webgpu_instance_points.html
index 45881b78e0717a..dcd39ad844a795 100644
--- a/examples/webgpu_instance_points.html
+++ b/examples/webgpu_instance_points.html
@@ -58,6 +58,7 @@
async function init() {
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( - 40, 0, 60 );
@@ -150,7 +151,6 @@
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
index f817dcb36875e2..39fa242338f0e8 100644
--- a/examples/webgpu_lights_custom.html
+++ b/examples/webgpu_lights_custom.html
@@ -59,6 +59,7 @@
camera.position.z = 1.5;
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
// lights
@@ -120,7 +121,6 @@
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
index a8b8ea91535818..f36a6a33485953 100644
--- a/examples/webgpu_lights_pointlights.html
+++ b/examples/webgpu_lights_pointlights.html
@@ -53,6 +53,7 @@
camera.position.z = 100;
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
timer = new THREE.Timer();
timer.connect( document );
@@ -91,7 +92,6 @@
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_materials.html b/examples/webgpu_materials.html
index df37b4179d8dcb..9b5f337ea62bfe 100644
--- a/examples/webgpu_materials.html
+++ b/examples/webgpu_materials.html
@@ -65,6 +65,7 @@
camera.position.set( 0, 200, 800 );
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
// Grid
@@ -270,7 +271,6 @@
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
index c46969b973bb8e..ed40b601ab51a5 100644
--- a/examples/webgpu_materials_alphahash.html
+++ b/examples/webgpu_materials_alphahash.html
@@ -51,6 +51,7 @@
camera.lookAt( 0, 0, 0 );
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
const geometry = new THREE.IcosahedronGeometry( 0.5, 3 );
@@ -93,7 +94,6 @@
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
index 828d5e7d42cc31..2dfd936f6855f3 100644
--- a/examples/webgpu_mirror.html
+++ b/examples/webgpu_mirror.html
@@ -50,6 +50,7 @@
// scene
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
// camera
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
@@ -183,7 +184,6 @@
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
index ab1db6d4cb33b0..65ef2a87374d41 100644
--- a/examples/webgpu_postprocessing.html
+++ b/examples/webgpu_postprocessing.html
@@ -47,7 +47,6 @@
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 );
@@ -58,6 +57,7 @@
camera.position.z = 400;
const scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
scene.fog = new THREE.Fog( 0x000000, 1, 1000 );
object = new THREE.Object3D();
diff --git a/examples/webgpu_postprocessing_3dlut.html b/examples/webgpu_postprocessing_3dlut.html
index f898a82da90e55..320614f365e040 100644
--- a/examples/webgpu_postprocessing_3dlut.html
+++ b/examples/webgpu_postprocessing_3dlut.html
@@ -73,6 +73,7 @@
camera.position.set( 8, 10, 12 );
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
// Loaders
@@ -201,7 +202,6 @@
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
index b3b2fb700eb3ab..8c020291d14758 100644
--- a/examples/webgpu_postprocessing_afterimage.html
+++ b/examples/webgpu_postprocessing_afterimage.html
@@ -57,7 +57,6 @@
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 );
@@ -66,6 +65,7 @@
camera.position.z = 1000;
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
const sprite = new THREE.TextureLoader().load( 'textures/sprites/circle.png' );
diff --git a/examples/webgpu_postprocessing_sobel.html b/examples/webgpu_postprocessing_sobel.html
index ba45d5260ee9c9..a572313597ae86 100644
--- a/examples/webgpu_postprocessing_sobel.html
+++ b/examples/webgpu_postprocessing_sobel.html
@@ -52,6 +52,7 @@
async function init() {
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.set( 0, 1, 3 );
@@ -70,7 +71,6 @@
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
index 3bb305ce613799..d104736db19045 100644
--- a/examples/webgpu_sprites.html
+++ b/examples/webgpu_sprites.html
@@ -54,6 +54,7 @@
camera.position.z = 1500;
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
scene.fogNode = fog( color( 0x0000ff ), rangeFogFactor( 1500, 2100 ) );
// create sprites
@@ -105,7 +106,6 @@
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
index 43fcf3f0de876a..272c6dcacf60b8 100644
--- a/examples/webgpu_tsl_earth.html
+++ b/examples/webgpu_tsl_earth.html
@@ -55,6 +55,7 @@
camera.position.set( 4.5, 2, 3 );
scene = new THREE.Scene();
+ scene.background = new THREE.Color( 0x000000 );
// sun
@@ -148,7 +149,6 @@
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/src/renderers/webgpu/utils/WebGPUPipelineUtils.js b/src/renderers/webgpu/utils/WebGPUPipelineUtils.js
index 75a947b416e45d..edb20ab034a354 100644
--- a/src/renderers/webgpu/utils/WebGPUPipelineUtils.js
+++ b/src/renderers/webgpu/utils/WebGPUPipelineUtils.js
@@ -1,7 +1,7 @@
import { BlendColorFactor, OneMinusBlendColorFactor, } from '../../common/Constants.js';
import {
- GPUFrontFace, GPUCullMode, GPUColorWriteFlags, GPUCompareFunction, GPUBlendFactor, GPUBlendOperation, GPUIndexFormat, GPUStencilOperation
+ GPUFrontFace, GPUCullMode, GPUColorWriteFlags, GPUCompareFunction, GPUBlendFactor, GPUBlendOperation, GPUIndexFormat, GPUStencilOperation, GPUPrimitiveTopology
} from './WebGPUConstants.js';
import {
@@ -256,7 +256,7 @@ class WebGPUPipelineUtils {
}
- if ( material.polygonOffset === true ) {
+ if ( material.polygonOffset === true && ( primitiveState.topology === GPUPrimitiveTopology.TriangleList ) ) {
depthStencil.depthBias = material.polygonOffsetUnits;
depthStencil.depthBiasSlopeScale = material.polygonOffsetFactor;