Skip to content

Commit

Permalink
fix renderTarget issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmhhelgeson
cmhhelgeson committed Jul 7, 2024
1 parent 0d26ee3 commit 79c0c49
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 29 deletions.
28 changes: 12 additions & 16 deletions examples/webgpu_postprocessing_pixel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused imports normalPass, pass, pixelation.

let camera, scene, renderer, composer, crystalMesh, clock;
let gui, params;

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused variable params.
Expand Down Expand Up @@ -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 );
Expand Down Expand Up @@ -101,8 +101,8 @@
specular: 0xffffff
} )
);
crystalMesh.receiveShadow = true;
crystalMesh.castShadow = true;
crystalMesh.receiveShadow = false;
crystalMesh.castShadow = false;
scene.add( crystalMesh );

// lights
Expand All @@ -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 );

Expand All @@ -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)
}

Check notice

Code scanning / CodeQL

Semicolon insertion Note

Avoid automated semicolon insertion (98% of all statements in
the enclosing function
Loading
have an explicit semicolon).

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 );
Expand All @@ -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' );

Expand Down
8 changes: 3 additions & 5 deletions src/nodes/display/PixelationNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 );

}
Expand Down Expand Up @@ -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 );

Expand Down
10 changes: 2 additions & 8 deletions src/nodes/display/PixelationPassNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 );

Expand All @@ -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 );

}
Expand Down

0 comments on commit 79c0c49

Please sign in to comment.