fix renderTarget issue

Author: cmhhelgeson

examples/webgpu_postprocessing_pixel.html

@@ -33,7 +33,7 @@
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-		import { pass, normalPass, uniform, pixelation } from 'three/tsl';
+		import { pass, normalPass, uniform, pixelation, pixelationPass } from 'three/tsl';
 
 		let camera, scene, renderer, composer, crystalMesh, clock;
 		let gui, params;
@@ -68,8 +68,8 @@
 			function addBox( boxSideLength, x, z, rotation ) {
 
 				const mesh = new THREE.Mesh( new THREE.BoxGeometry( boxSideLength, boxSideLength, boxSideLength ), boxMaterial );
-				mesh.castShadow = true;
-				mesh.receiveShadow = true;
+				mesh.castShadow = false;
+				mesh.receiveShadow = false;
 				mesh.rotation.y = rotation;
 				mesh.position.y = boxSideLength / 2;
 				mesh.position.set( x, boxSideLength / 2 + .0001, z );
@@ -101,8 +101,8 @@
 					specular: 0xffffff
 				} )
 			);
-			crystalMesh.receiveShadow = true;
-			crystalMesh.castShadow = true;
+			crystalMesh.receiveShadow = false;
+			crystalMesh.castShadow = false;
 			scene.add( crystalMesh );
 
 			// lights
@@ -111,7 +111,7 @@
 
 			const directionalLight = new THREE.DirectionalLight( 0xfffecd, 1.5 );
 			directionalLight.position.set( 100, 100, 100 );
-			directionalLight.castShadow = true;
+			directionalLight.castShadow = false;
 			directionalLight.shadow.mapSize.set( 2048, 2048 );
 			scene.add( directionalLight );
 
@@ -120,30 +120,26 @@
 			const target = spotLight.target;
 			scene.add( target );
 			target.position.set( 0, 0, 0 );
-			spotLight.castShadow = true;
+			spotLight.castShadow = false;
 			scene.add( spotLight );
 
-			renderer = new THREE.WebGPURenderer();
+			renderer = new THREE.WebGPURenderer({ antialias: false });
 			renderer.shadowMap.enabled = true;
 			//renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setAnimationLoop( animate );
 			document.body.appendChild( renderer.domElement );
 
 			const effectController = {
-				pixelSize: 14,
+				pixelSize: uniform(14),
 				normalEdgeStrength: uniform(0.3),
 				depthEdgeStrength: uniform(0.4)
 			}
 
 			composer = new THREE.PostProcessing( renderer );
 
-			const scenePass = normalPass( scene, camera );
-			const scenePassColor = scenePass.getTextureNode();
-			const scenePassDepth = scenePass.getTextureDepthNode();
-			const scenePassNormal = scenePass.getTextureNormalNode();
-			const pixelationPass = scenePassColor.pixelation( scenePassDepth, scenePassNormal, 4, effectController.normalEdgeStrength, effectController.depthEdgeStrength);
-			composer.outputNode = pixelationPass;
+			const scenePass = pixelationPass( scene, camera, effectController.pixelSize, effectController.normalEdgeStrength, effectController.depthEdgeStrength );
+			composer.outputNode = scenePass;
 			window.addEventListener( 'resize', onWindowResize );
 
 			const controls = new OrbitControls( camera, renderer.domElement );
@@ -152,7 +148,7 @@
 			// gui
 
 			gui = new GUI();
-			gui.add( pixelationPass.pixelSizeNode, 'value', 0, 14, 1).name( 'Pixel Size' );
+			gui.add( effectController.pixelSize, 'value', 0, 14, 1).name( 'Pixel Size' );
 			gui.add( effectController.normalEdgeStrength, 'value', 0, 2, 0.05 ).name( 'Normal Edge Strength' );
 			gui.add( effectController.depthEdgeStrength, 'value', 0, 1, 0.05 ).name( 'Depth Edge Strength' );
 

src/nodes/display/PixelationNode.js

@@ -6,7 +6,6 @@ import { uniform } from '../core/UniformNode.js';
 import { dot, clamp, smoothstep, sign, step, floor } from '../math/MathNode.js';
 import { float, If } from '../shadernode/ShaderNode.js';
 import { Vector4 } from '../../math/Vector4.js';
-import { temp } from '../Nodes.js';
 import { property } from '../core/PropertyNode.js';
 
 class PixelationNode extends TempNode {
@@ -32,9 +31,8 @@ class PixelationNode extends TempNode {
 	updateBefore() {
 
 		const map = this.textureNode.value;
-		const width = map.image.width / this.pixelSizeNode.value;
-		const height = map.image.height / this.pixelSizeNode.value;
-
+		const width = map.image.width;
+		const height = map.image.height;
 		this._resolution.value.set( width, height, 1 / width, 1 / height );
 
 	}
@@ -141,7 +139,7 @@ class PixelationNode extends TempNode {
 
 }
 
-export const pixelation = ( node, depthNode, normalNode, pixelSize = 4, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) => nodeObject( new PixelationNode( nodeObject( node ).toTexture(), nodeObject( depthNode ).toTexture(), nodeObject( normalNode ).toTexture(), pixelSize, normalEdgeStrength, depthEdgeStrength ) );
+export const pixelation = ( node, depthNode, normalNode, pixelSize = 14, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) => nodeObject( new PixelationNode( nodeObject( node ).toTexture(), nodeObject( depthNode ).toTexture(), nodeObject( normalNode ).toTexture(), nodeObject(pixelSize), nodeObject(normalEdgeStrength), nodeObject(depthEdgeStrength) ) );
 
 addNodeElement( 'pixelation', pixelation );
 

src/nodes/display/PixelationPassNode.js

@@ -2,9 +2,6 @@ import { nodeObject } from '../shadernode/ShaderNode.js';
 import { addNodeClass } from '../core/Node.js';
 import { NodeUpdateType } from '../core/constants.js';
 import PassNode from './PassNode.js';
-import { RenderTarget } from '../../core/RenderTarget.js';
-import { HalfFloatType/*, FloatType*/ } from '../../constants.js';
-import { PassTextureNode } from './PassNode.js';
 import { Vector2 } from '../../math/Vector2.js';
 import { MeshNormalNodeMaterial } from '../Nodes.js';
 
@@ -36,15 +33,14 @@ class PixelationPassNode extends PassNode {
 		const size = renderer.getSize( _size );
 		const pixelSize = this.pixelSize.value ? this.pixelSize.value : this.pixelSize;
 
-		this.setSize( pixelSize >= 1 ? size.width / pixelSize : size.width, pixelSize >= 1 ? size.height / pixelSize : size.height );
+		this.setSize( pixelSize >= 1 ? (size.width / pixelSize) | 0 : size.width, pixelSize >= 1 ? (size.height / pixelSize) | 0 : size.height );
 
 		const currentRenderTarget = renderer.getRenderTarget();
 
 		this._cameraNear.value = camera.near;
 		this._cameraFar.value = camera.far;
 
 		renderer.setRenderTarget( this.renderTarget );
-		console.log(this.renderTarget)
 
 		renderer.render( scene, camera );
 
@@ -61,14 +57,12 @@ class PixelationPassNode extends PassNode {
 	setSize( width, height ) {
 
 		super.setSize( width, height );
-		this.normalRenderTarget.setSize( width * this._pixelRatio, height * this._pixelRatio );
 
 	}
 
 	setup() {
 
-		const pass = super.getTextureDepthNode();
-		console.log( this.normalEdgeStrength )
+		const pass = super.getTextureNode();
 		return pass.pixelation( this._depthTextureNode, this._normalTextureNode, this.pixelSize, this.normalEdgeStrength, this.depthEdgeStrength );
 
 	}