149 lines
		
	
	
		
			3.4 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
		
		
			
		
	
	
			149 lines
		
	
	
		
			3.4 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
|  | import TempNode from '../core/TempNode.js'; | ||
|  | import { nodeObject, addNodeElement, tslFn, float, vec4 } from '../shadernode/ShaderNode.js'; | ||
|  | import { NodeUpdateType } from '../core/constants.js'; | ||
|  | import { uv } from '../accessors/UVNode.js'; | ||
|  | import { texture } from '../accessors/TextureNode.js'; | ||
|  | import { texturePass } from './PassNode.js'; | ||
|  | import { uniform } from '../core/UniformNode.js'; | ||
|  | import { RenderTarget } from 'three'; | ||
|  | import { sign, max } from '../math/MathNode.js'; | ||
|  | import QuadMesh from '../../objects/QuadMesh.js'; | ||
|  | 
 | ||
|  | const quadMeshComp = new QuadMesh(); | ||
|  | 
 | ||
|  | class AfterImageNode extends TempNode { | ||
|  | 
 | ||
|  | 	constructor( textureNode, damp = 0.96 ) { | ||
|  | 
 | ||
|  | 		super( textureNode ); | ||
|  | 
 | ||
|  | 		this.textureNode = textureNode; | ||
|  | 		this.textureNodeOld = texture(); | ||
|  | 		this.damp = uniform( damp ); | ||
|  | 
 | ||
|  | 		this._compRT = new RenderTarget(); | ||
|  | 		this._compRT.texture.name = 'AfterImageNode.comp'; | ||
|  | 
 | ||
|  | 		this._oldRT = new RenderTarget(); | ||
|  | 		this._oldRT.texture.name = 'AfterImageNode.old'; | ||
|  | 
 | ||
|  | 		this._textureNode = texturePass( this, this._compRT.texture ); | ||
|  | 
 | ||
|  | 		this.updateBeforeType = NodeUpdateType.RENDER; | ||
|  | 
 | ||
|  | 	} | ||
|  | 
 | ||
|  | 	getTextureNode() { | ||
|  | 
 | ||
|  | 		return this._textureNode; | ||
|  | 
 | ||
|  | 	} | ||
|  | 
 | ||
|  | 	setSize( width, height ) { | ||
|  | 
 | ||
|  | 		this._compRT.setSize( width, height ); | ||
|  | 		this._oldRT.setSize( width, height ); | ||
|  | 
 | ||
|  | 	} | ||
|  | 
 | ||
|  | 	updateBefore( frame ) { | ||
|  | 
 | ||
|  | 		const { renderer } = frame; | ||
|  | 
 | ||
|  | 		const textureNode = this.textureNode; | ||
|  | 		const map = textureNode.value; | ||
|  | 
 | ||
|  | 		const textureType = map.type; | ||
|  | 
 | ||
|  | 		this._compRT.texture.type = textureType; | ||
|  | 		this._oldRT.texture.type = textureType; | ||
|  | 
 | ||
|  | 		const currentRenderTarget = renderer.getRenderTarget(); | ||
|  | 		const currentTexture = textureNode.value; | ||
|  | 
 | ||
|  | 		this.textureNodeOld.value = this._oldRT.texture; | ||
|  | 
 | ||
|  | 		// comp
 | ||
|  | 		renderer.setRenderTarget( this._compRT ); | ||
|  | 		quadMeshComp.render( renderer ); | ||
|  | 
 | ||
|  | 		// Swap the textures
 | ||
|  | 		const temp = this._oldRT; | ||
|  | 		this._oldRT = this._compRT; | ||
|  | 		this._compRT = temp; | ||
|  | 
 | ||
|  | 		// set size before swapping fails
 | ||
|  | 		this.setSize( map.image.width, map.image.height ); | ||
|  | 
 | ||
|  | 		renderer.setRenderTarget( currentRenderTarget ); | ||
|  | 		textureNode.value = currentTexture; | ||
|  | 
 | ||
|  | 	} | ||
|  | 
 | ||
|  | 	setup( builder ) { | ||
|  | 
 | ||
|  | 		const textureNode = this.textureNode; | ||
|  | 		const textureNodeOld = this.textureNodeOld; | ||
|  | 
 | ||
|  | 		if ( textureNode.isTextureNode !== true ) { | ||
|  | 
 | ||
|  | 			console.error( 'AfterImageNode requires a TextureNode.' ); | ||
|  | 
 | ||
|  | 			return vec4(); | ||
|  | 
 | ||
|  | 		} | ||
|  | 
 | ||
|  | 		//
 | ||
|  | 
 | ||
|  | 		const uvNode = textureNode.uvNode || uv(); | ||
|  | 
 | ||
|  | 		textureNodeOld.uvNode = uvNode; | ||
|  | 
 | ||
|  | 		const sampleTexture = ( uv ) => textureNode.cache().context( { getUV: () => uv, forceUVContext: true } ); | ||
|  | 
 | ||
|  | 		const when_gt = tslFn( ( [ x_immutable, y_immutable ] ) => { | ||
|  | 
 | ||
|  | 			const y = float( y_immutable ).toVar(); | ||
|  | 			const x = vec4( x_immutable ).toVar(); | ||
|  | 
 | ||
|  | 			return max( sign( x.sub( y ) ), 0.0 ); | ||
|  | 
 | ||
|  | 		} ); | ||
|  | 
 | ||
|  | 		const afterImg = tslFn( () => { | ||
|  | 
 | ||
|  | 			const texelOld = vec4( textureNodeOld ); | ||
|  | 			const texelNew = vec4( sampleTexture( uvNode ) ); | ||
|  | 
 | ||
|  | 			texelOld.mulAssign( this.damp.mul( when_gt( texelOld, 0.1 ) ) ); | ||
|  | 			return max( texelNew, texelOld ); | ||
|  | 
 | ||
|  | 		} ); | ||
|  | 
 | ||
|  | 		//
 | ||
|  | 
 | ||
|  | 		const materialComposed = this._materialComposed || ( this._materialComposed = builder.createNodeMaterial() ); | ||
|  | 		materialComposed.fragmentNode = afterImg(); | ||
|  | 
 | ||
|  | 		quadMeshComp.material = materialComposed; | ||
|  | 
 | ||
|  | 		//
 | ||
|  | 
 | ||
|  | 		const properties = builder.getNodeProperties( this ); | ||
|  | 		properties.textureNode = textureNode; | ||
|  | 
 | ||
|  | 		//
 | ||
|  | 
 | ||
|  | 		return this._textureNode; | ||
|  | 
 | ||
|  | 	} | ||
|  | 
 | ||
|  | } | ||
|  | 
 | ||
|  | export const afterImage = ( node, damp ) => nodeObject( new AfterImageNode( nodeObject( node ), damp ) ); | ||
|  | 
 | ||
|  | addNodeElement( 'afterImage', afterImage ); | ||
|  | 
 | ||
|  | export default AfterImageNode; | ||
|  | 
 |