Browse Source

Examples: Some revision of webgpu examples (#28011)

* webgpu_compute_texture_pingpong: use .computeAsync()

* webgpu_postprocessing_anamorphic: use .loadCubemapAsync()

* webgpu_shadowmap: use `scene.backgroundNode`
sunag 1 year ago
parent
commit
5eea9d79e4

+ 1 - 4
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() {

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

+ 2 - 2
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