فهرست منبع

WebGPURenderer: Move TextureRenderer to RenderTarget approach. (#26142)

sunag 2 سال پیش
والد
کامیت
30fae4a843
3فایلهای تغییر یافته به همراه18 افزوده شده و 52 حذف شده
  1. 0 38
      examples/jsm/renderers/common/TextureRenderer.js
  2. 9 7
      examples/webgpu_depth_texture.html
  3. 9 7
      examples/webgpu_rtt.html

+ 0 - 38
examples/jsm/renderers/common/TextureRenderer.js

@@ -1,38 +0,0 @@
-import RenderTarget from './RenderTarget.js';
-
-class TextureRenderer {
-
-	constructor( renderer, options = {} ) {
-
-		this.renderer = renderer;
-
-		this.renderTarget = new RenderTarget( 1, 1, options );
-
-	}
-
-	get texture() {
-
-		return this.renderTarget.texture;
-
-	}
-
-	setSize( width, height ) {
-
-		this.renderTarget.setSize( width, height );
-
-	}
-
-	render( scene, camera ) {
-
-		const renderer = this.renderer;
-		const renderTarget = this.renderTarget;
-
-		renderer.setRenderTarget( renderTarget );
-		renderer.render( scene, camera );
-		renderer.setRenderTarget( null );
-
-	}
-
-}
-
-export default TextureRenderer;

+ 9 - 7
examples/webgpu_depth_texture.html

@@ -30,13 +30,13 @@
 
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import TextureRenderer from 'three/addons/renderers/common/TextureRenderer.js';
+			import RenderTarget from 'three/addons/renderers/common/RenderTarget.js';
 
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 
 			let camera, scene, controls, renderer;
 			let camera, scene, controls, renderer;
 
 
-			let cameraFX, sceneFX, textureRenderer;
+			let cameraFX, sceneFX, renderTarget;
 
 
 			const dpr = window.devicePixelRatio;
 			const dpr = window.devicePixelRatio;
 
 
@@ -94,9 +94,8 @@
 				const depthTexture = new THREE.DepthTexture();
 				const depthTexture = new THREE.DepthTexture();
 				depthTexture.type = THREE.FloatType;
 				depthTexture.type = THREE.FloatType;
 
 
-				textureRenderer = new TextureRenderer( renderer );
-				textureRenderer.renderTarget.depthTexture = depthTexture;
-				textureRenderer.setSize( window.innerWidth * dpr, window.innerHeight * dpr );
+				renderTarget = new RenderTarget( window.innerWidth * dpr, window.innerHeight * dpr );
+				renderTarget.depthTexture = depthTexture;
 
 
 				window.addEventListener( 'resize', onWindowResize );
 				window.addEventListener( 'resize', onWindowResize );
 
 
@@ -128,13 +127,16 @@
 				camera.updateProjectionMatrix();
 				camera.updateProjectionMatrix();
 
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				textureRenderer.setSize( window.innerWidth * dpr, window.innerHeight * dpr );
+				renderTarget.setSize( window.innerWidth * dpr, window.innerHeight * dpr );
 
 
 			}
 			}
 
 
 			function animate() {
 			function animate() {
 
 
-				textureRenderer.render( scene, camera );
+				renderer.setRenderTarget( renderTarget );
+				renderer.render( scene, camera );
+
+				renderer.setRenderTarget( null );
 				renderer.render( sceneFX, cameraFX );
 				renderer.render( sceneFX, cameraFX );
 
 
 			}
 			}

+ 9 - 7
examples/webgpu_rtt.html

@@ -30,12 +30,12 @@
 
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import TextureRenderer from 'three/addons/renderers/common/TextureRenderer.js';
+			import RenderTarget from 'three/addons/renderers/common/RenderTarget.js';
 
 
 			let camera, scene, renderer;
 			let camera, scene, renderer;
 			const mouse = new THREE.Vector2();
 			const mouse = new THREE.Vector2();
 
 
-			let cameraFX, sceneFX, textureRenderer;
+			let cameraFX, sceneFX, renderTarget;
 
 
 			let box;
 			let box;
 
 
@@ -81,8 +81,7 @@
 				renderer.setAnimationLoop( animate );
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 				document.body.appendChild( renderer.domElement );
 
 
-				textureRenderer = new TextureRenderer( renderer );
-				textureRenderer.setSize( window.innerWidth * dpr, window.innerHeight * dpr );
+				renderTarget = new RenderTarget( window.innerWidth * dpr, window.innerHeight * dpr );
 
 
 				window.addEventListener( 'mousemove', onWindowMouseMove );
 				window.addEventListener( 'mousemove', onWindowMouseMove );
 				window.addEventListener( 'resize', onWindowResize );
 				window.addEventListener( 'resize', onWindowResize );
@@ -99,7 +98,7 @@
 				const screenFXNode = uniform( mouse ).add( vec2( 0.5, 0.5 ) );
 				const screenFXNode = uniform( mouse ).add( vec2( 0.5, 0.5 ) );
 
 
 				const materialFX = new MeshBasicNodeMaterial();
 				const materialFX = new MeshBasicNodeMaterial();
-				materialFX.colorNode = texture( textureRenderer.texture ).mul( screenFXNode );
+				materialFX.colorNode = texture( renderTarget.texture ).mul( screenFXNode );
 
 
 				const quad = new THREE.Mesh( geometryFX, materialFX );
 				const quad = new THREE.Mesh( geometryFX, materialFX );
 				sceneFX.add( quad );
 				sceneFX.add( quad );
@@ -119,7 +118,7 @@
 				camera.updateProjectionMatrix();
 				camera.updateProjectionMatrix();
 
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				textureRenderer.setSize( window.innerWidth * dpr, window.innerHeight * dpr );
+				renderTarget.setSize( window.innerWidth * dpr, window.innerHeight * dpr );
 
 
 			}
 			}
 
 
@@ -128,7 +127,10 @@
 				box.rotation.x += 0.01;
 				box.rotation.x += 0.01;
 				box.rotation.y += 0.02;
 				box.rotation.y += 0.02;
 
 
-				textureRenderer.render( scene, camera );
+				renderer.setRenderTarget( renderTarget );
+				renderer.render( scene, camera );
+
+				renderer.setRenderTarget( null );
 				renderer.render( sceneFX, cameraFX );
 				renderer.render( sceneFX, cameraFX );
 
 
 			}
 			}