diff --git a/examples/webgpu_postprocessing_pixel.html b/examples/webgpu_postprocessing_pixel.html index 103c41f0eff659..48d57bae7031bf 100644 --- a/examples/webgpu_postprocessing_pixel.html +++ b/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,10 +120,10 @@ 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 ); @@ -131,19 +131,15 @@ 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' ); diff --git a/src/nodes/display/PixelationNode.js b/src/nodes/display/PixelationNode.js index 636407e2d575ab..a79fb37ff77167 100644 --- a/src/nodes/display/PixelationNode.js +++ b/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 ); diff --git a/src/nodes/display/PixelationPassNode.js b/src/nodes/display/PixelationPassNode.js index 2d922fe73c4ebd..0dfb8148385265 100644 --- a/src/nodes/display/PixelationPassNode.js +++ b/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,7 +33,7 @@ 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(); @@ -44,7 +41,6 @@ class PixelationPassNode extends PassNode { 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 ); }