[pull] dev from mrdoob:dev

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Git checkout
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
       - name: Install Node
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
         with:
@@ -50,7 +50,7 @@ jobs:
       CI: ${{ matrix.CI }}
     steps:
       - name: Git checkout
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
       - name: Install Node
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
         with:

.github/workflows/codeql-code-scanning.yml

@@ -26,20 +26,20 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
+      uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4
+      uses: github/codeql-action/init@45cbd0c69e560cd9e7cd7f8c32362050c9b7ded2 # v4
       with:
         languages: ${{ matrix.language }}
         config-file: ./.github/codeql-config.yml
         queries: security-and-quality
 
     - name: Autobuild
-      uses: github/codeql-action/autobuild@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4
+      uses: github/codeql-action/autobuild@45cbd0c69e560cd9e7cd7f8c32362050c9b7ded2 # v4
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4
+      uses: github/codeql-action/analyze@45cbd0c69e560cd9e7cd7f8c32362050c9b7ded2 # v4
       with:
         category: "/language:${{matrix.language}}"

.github/workflows/read-size.yml

@@ -20,7 +20,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Git checkout
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
       - name: Install Node
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
         with:

.github/workflows/report-size.yml

@@ -56,7 +56,7 @@ jobs:
 
       # This runs on the base branch of the PR, meaning "dev"
       - name: Git checkout
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
       - name: Install Node
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
         with:

examples/index.html

@@ -103,6 +103,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 				if ( validRedirects.has( file ) === true ) {
 
 					selectFile( file );
+					links[ file ].scrollIntoView( { block: 'center' } );
 					viewer.src = validRedirects.get( file );
 					viewer.style.display = 'unset';
 
@@ -269,7 +270,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 		function updateFilter( files, tags ) {
 
 			let v = filterInput.value.trim();
-			v = v.replace( /\s+/gi, ' ' ); // replace multiple whitespaces with a single one
+			v = v.replace( /[\s_]+/gi, ' ' ); // replace multiple whitespaces or underscores with a single one
 
 			if ( v !== '' ) {
 

examples/webgpu_cubemap_adjustments.html

@@ -17,7 +17,8 @@
 
 			<small>
 				Adjust/modify the scene's background and environment.<br/>
-				Battle Damaged Sci-fi Helmet by <a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a>
+				Battle Damaged Sci-fi Helmet by <a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a>.<br/>
+				HDR by <a href="https://polyhaven.com/" target="_blank" rel="noopener">Poly Haven</a> and <a href="https://hdri-skies.com/free-hdris/" target="_blank" rel="noopener">HDRI Skies</a>.
 			</small>
 		</div>
 
@@ -37,7 +38,7 @@
 			import * as THREE from 'three/webgpu';
 			import { uniform, mix, pmremTexture, reference, positionLocal, hue, saturation, positionWorld, normalWorld, positionWorldDirection, reflectVector } from 'three/tsl';
 
-			import { HDRCubeTextureLoader } from 'three/addons/loaders/HDRCubeTextureLoader.js';
+			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
@@ -60,23 +61,21 @@
 
 				scene = new THREE.Scene();
 
-				// cube textures
+				// HDR textures
 
-				const hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
-				const cube1Texture = await new HDRCubeTextureLoader()
-					.setPath( './textures/cube/pisaHDR/' )
-					.loadAsync( hdrUrls );
+				const hdr1Texture = await new HDRLoader()
+					.loadAsync( './textures/equirectangular/pedestrian_overpass_1k.hdr' );
 
-				cube1Texture.generateMipmaps = true;
-				cube1Texture.minFilter = THREE.LinearMipmapLinearFilter;
+				hdr1Texture.mapping = THREE.EquirectangularReflectionMapping;
+				hdr1Texture.generateMipmaps = true;
+				hdr1Texture.minFilter = THREE.LinearMipmapLinearFilter;
 
-				const cube2Urls = [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ];
-				const cube2Texture = await new THREE.CubeTextureLoader()
-					.setPath( './textures/cube/Park2/' )
-					.loadAsync( cube2Urls );
+				const hdr2Texture = await new HDRLoader()
+					.loadAsync( './textures/equirectangular/752-hdri-skies-com_1k.hdr' );
 
-				cube2Texture.generateMipmaps = true;
-				cube2Texture.minFilter = THREE.LinearMipmapLinearFilter;
+				hdr2Texture.mapping = THREE.EquirectangularReflectionMapping;
+				hdr2Texture.generateMipmaps = true;
+				hdr2Texture.minFilter = THREE.LinearMipmapLinearFilter;
 
 				// nodes and environment
 
@@ -101,7 +100,7 @@
 
 					const custom1UV = reflectNode.xyz.mul( uniform( rotateY1Matrix ) );
 					const custom2UV = reflectNode.xyz.mul( uniform( rotateY2Matrix ) );
-					const mixCubeMaps = mix( pmremTexture( cube1Texture, custom1UV ), pmremTexture( cube2Texture, custom2UV ), positionNode.y.add( mixNode ).clamp() );
+					const mixCubeMaps = mix( pmremTexture( hdr1Texture, custom1UV ), pmremTexture( hdr2Texture, custom2UV ), positionNode.y.add( mixNode ).clamp() );
 
 					const proceduralEnv = mix( mixCubeMaps, normalWorld, proceduralNode );
 
@@ -156,23 +155,22 @@
 				// gui
 
 				const gui = renderer.inspector.createParameters( 'Settings' );
-
+				gui.add( adjustments, 'mix', - 1, 2, 0.01 );
 				gui.add( { blurBackground: blurNode.value }, 'blurBackground', 0, 1, 0.01 ).onChange( value => {
 
 					blurNode.value = value;
 
 				} );
-				gui.add( { offsetCube1: 0 }, 'offsetCube1', 0, Math.PI * 2, 0.01 ).onChange( value => {
+				gui.add( { offsetHDR1: 0 }, 'offsetHDR1', 0, Math.PI * 2, 0.01 ).onChange( value => {
 
 					rotateY1Matrix.makeRotationY( value );
 
 				} );
-				gui.add( { offsetCube2: 0 }, 'offsetCube2', 0, Math.PI * 2, 0.01 ).onChange( value => {
+				gui.add( { offsetHDR2: 0 }, 'offsetHDR2', 0, Math.PI * 2, 0.01 ).onChange( value => {
 
 					rotateY2Matrix.makeRotationY( value );
 
 				} );
-				gui.add( adjustments, 'mix', - 1, 2, 0.01 );
 				gui.add( adjustments, 'procedural', 0, 1, 0.01 );
 				gui.add( adjustments, 'intensity', 0, 5, 0.01 );
 				gui.add( adjustments, 'hue', 0, Math.PI * 2, 0.01 );

examples/webgpu_parallax_uv.html

@@ -17,6 +17,7 @@
 
 			<small>
 				Textures by <a href="https://ambientcg.com/view?id=Ice002" target="_blank" rel="noopener">ambientCG</a>.
+				HDR by <a href="https://hdri-skies.com/free-hdris/" target="_blank" rel="noopener">HDRI Skies</a>.
 			</small>
 		</div>
 
@@ -34,9 +35,12 @@
 		<script type="module">
 
 			import * as THREE from 'three/webgpu';
-			import { texture, parallaxUV, blendOverlay, uv } from 'three/tsl';
+			import { texture, parallaxUV, blendOverlay, uv, normalMap, uniform } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
+
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer;
 
@@ -52,34 +56,44 @@
 
 				// camera
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, .1, 50 );
-				camera.position.set( 10, 14, 10 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, .1, 100 );
+				camera.position.set( 15, 7, 15 );
 
 				// environment
 
-				const environmentTexture = await new THREE.CubeTextureLoader()
-					.setPath( './textures/cube/Park2/' )
-					.loadAsync( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
+				const environmentTexture = await new HDRLoader()
+					.loadAsync( './textures/equirectangular/752-hdri-skies-com_1k.hdr' );
+
+				environmentTexture.mapping = THREE.EquirectangularReflectionMapping;
 
 
 				scene.environment = environmentTexture;
 				scene.background = environmentTexture;
+				scene.backgroundBlurriness = 0.4;
 
 				// textures
 
 				const loader = new THREE.TextureLoader();
 
 				const topTexture = await loader.loadAsync( 'textures/ambientcg/Ice002_1K-JPG_Color.jpg' );
 				topTexture.colorSpace = THREE.SRGBColorSpace;
+				topTexture.wrapS = THREE.RepeatWrapping;
+				topTexture.wrapT = THREE.RepeatWrapping;
 
 				const roughnessTexture = await loader.loadAsync( 'textures/ambientcg/Ice002_1K-JPG_Roughness.jpg' );
 				roughnessTexture.colorSpace = THREE.NoColorSpace;
+				roughnessTexture.wrapS = THREE.RepeatWrapping;
+				roughnessTexture.wrapT = THREE.RepeatWrapping;
 
 				const normalTexture = await loader.loadAsync( 'textures/ambientcg/Ice002_1K-JPG_NormalGL.jpg' );
 				normalTexture.colorSpace = THREE.NoColorSpace;
+				normalTexture.wrapS = THREE.RepeatWrapping;
+				normalTexture.wrapT = THREE.RepeatWrapping;
 
 				const displaceTexture = await loader.loadAsync( 'textures/ambientcg/Ice002_1K-JPG_Displacement.jpg' );
 				displaceTexture.colorSpace = THREE.NoColorSpace;
+				displaceTexture.wrapS = THREE.RepeatWrapping;
+				displaceTexture.wrapT = THREE.RepeatWrapping;
 
 				//
 
@@ -90,23 +104,26 @@
 
 				// parallax effect
 
-				const parallaxScale = .3;
-				const offsetUV = texture( displaceTexture ).mul( parallaxScale );
+				const scaleUV = uniform( 3 );
+				const scaledUV = uv().mul( scaleUV );
+
+				const parallaxScale = uniform( 0.5 ); // parallax scale
+				const offsetUV = texture( displaceTexture, scaledUV ).mul( parallaxScale );
 
-				const parallaxUVOffset = parallaxUV( uv(), offsetUV );
+				const parallaxUVOffset = parallaxUV( scaledUV, offsetUV );
 				const parallaxResult = texture( bottomTexture, parallaxUVOffset );
 
-				const iceNode = blendOverlay( texture( topTexture ), parallaxResult );
+				const iceNode = blendOverlay( texture( topTexture, scaledUV ), parallaxResult );
 
 				// material
 
 				const material = new THREE.MeshStandardNodeMaterial();
 				material.colorNode = iceNode.mul( 5 ); // increase the color intensity to 5 ( contrast )
-				material.roughnessNode = texture( roughnessTexture );
-				material.normalMap = normalTexture;
+				material.roughnessNode = texture( roughnessTexture, scaledUV );
+				material.normalNode = normalMap( texture( normalTexture, scaledUV ) );
 				material.metalness = 0;
 
-				const geometry = new THREE.BoxGeometry( 10, 10, 10 );
+				const geometry = new THREE.CircleGeometry( 25, 64 );
 
 				const ground = new THREE.Mesh( geometry, material );
 				ground.rotateX( - Math.PI / 2 );
@@ -120,8 +137,16 @@
 				renderer.setAnimationLoop( animate );
 				renderer.toneMapping = THREE.ReinhardToneMapping;
 				renderer.toneMappingExposure = 6;
+				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
+				// gui
+
+				const gui = renderer.inspector.createParameters( 'Scene' );
+				gui.add( scene, 'backgroundBlurriness', 0, 1 ).name( 'Background Blurriness' );
+				gui.add( parallaxScale, 'value', .2, .5 ).name( 'Parallax Scale' );
+				gui.add( scaleUV, 'value', 1, 5 ).name( 'UV Scale' );
+
 				// controls
 
 				controls = new OrbitControls( camera, renderer.domElement );