Examples: Some revision of webgpu examples (mrdoob#28011)

sunag · web-flow · commit 5eea9d79e40c · 2024-03-27T04:06:29.000-03:00
* webgpu_compute_texture_pingpong: use .computeAsync()

* webgpu_postprocessing_anamorphic: use .loadCubemapAsync()

* webgpu_shadowmap: use `scene.backgroundNode`
diff --git a/examples/webgpu_compute_texture_pingpong.html b/examples/webgpu_compute_texture_pingpong.html
@@ -40,7 +40,6 @@
 			const seed = uniform( new THREE.Vector2() );
 
 			init();
-			render();
 
 			function init() {
 
@@ -163,7 +162,7 @@
 
 				// compute init
 
-				renderer.compute( computeInitNode );
+				renderer.computeAsync( computeInitNode );
 
 			}
 
@@ -180,8 +179,6 @@
 
 				camera.updateProjectionMatrix();
 
-				render();
-
 			}
 
 			function render() {
diff --git a/examples/webgpu_postprocessing_anamorphic.html b/examples/webgpu_postprocessing_anamorphic.html
@@ -48,7 +48,7 @@
 
 			init();
 
-			function init() {
+			async function init() {
 
 				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
 
@@ -67,10 +67,10 @@
 				scene = new THREE.Scene();
 
 				const rgbmUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
-				const cube1Texture = new RGBMLoader()
+				const cube1Texture = await new RGBMLoader()
 					.setMaxRange( 16 )
 					.setPath( './textures/cube/pisaRGBM16/' )
-					.loadCubemap( rgbmUrls );
+					.loadCubemapAsync( rgbmUrls );
 
 				scene.environment = cube1Texture;
 				scene.backgroundNode = cubeTexture( cube1Texture ).mul( viewportTopLeft.distance( .5 ).oneMinus().remapClamp( .1, 4 ) ).saturation( 0 );
diff --git a/examples/webgpu_shadowmap.html b/examples/webgpu_shadowmap.html
@@ -31,7 +31,7 @@
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { vec4, tslFn, vertexIndex, MeshPhongNodeMaterial } from 'three/nodes';
+			import { vec4, tslFn, color, vertexIndex, MeshPhongNodeMaterial } from 'three/nodes';
 			let camera, scene, renderer, clock;
 			let dirLight, spotLight;
 			let torusKnot, dirGroup;
@@ -52,7 +52,7 @@
 				camera.position.set( 0, 10, 20 );
 
 				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x222244 );
+				scene.backgroundNode = color( 0x222244 );
 				scene.fog = new THREE.Fog( 0x222244, 50, 100 );
 
 				// lights

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,6 @@`
`40`	`40`	`const seed = uniform( new THREE.Vector2() );`
`41`	`41`
`42`	`42`	`init();`
`43`		`- render();`
`44`	`43`
`45`	`44`	`function init() {`
`46`	`45`
`@@ -163,7 +162,7 @@`
`163`	`162`
`164`	`163`	`// compute init`
`165`	`164`
`166`		`- renderer.compute( computeInitNode );`
	`165`	`+ renderer.computeAsync( computeInitNode );`
`167`	`166`
`168`	`167`	`}`
`169`	`168`
`@@ -180,8 +179,6 @@`
`180`	`179`
`181`	`180`	`camera.updateProjectionMatrix();`
`182`	`181`
`183`		`- render();`
`184`		`-`
`185`	`182`	`}`
`186`	`183`
`187`	`184`	`function render() {`