Examples: Update `webgpu_parallax_uv`, and `webgpu_cubemap_adjustments` examples using `.hdr` file (#32976)

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,18 +56,20 @@
 
 				// 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
 
@@ -71,15 +77,23 @@
 
 				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 );