[pull] dev from mrdoob:dev

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 );
 

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 );
 
 				//
 

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 ) );
 

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 );

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 );

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 );

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 );
 

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 );
 

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 );

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 );

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 );

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();

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 );

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' );
 

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;

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 );
 

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 );

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;