| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651 | import {	AddEquation,	Color,	NormalBlending,	DepthTexture,	SrcAlphaFactor,	OneMinusSrcAlphaFactor,	MeshNormalMaterial,	MeshBasicMaterial,	NearestFilter,	NoBlending,	RGBAFormat,	ShaderMaterial,	UniformsUtils,	UnsignedShortType,	WebGLRenderTarget,	HalfFloatType,} from '../../../build/three.module.js';import { Pass, FullScreenQuad } from './Pass.js';import { SSRShader } from '../shaders/SSRShader.js';import { SSRBlurShader } from '../shaders/SSRShader.js';import { SSRDepthShader } from '../shaders/SSRShader.js';import { CopyShader } from '../shaders/CopyShader.js';class SSRPass extends Pass {	constructor( { renderer, scene, camera, width, height, selects, bouncing = false, groundReflector } ) {		super();		this.width = ( width !== undefined ) ? width : 512;		this.height = ( height !== undefined ) ? height : 512;		this.clear = true;		this.renderer = renderer;		this.scene = scene;		this.camera = camera;		this.groundReflector = groundReflector;		this.opacity = SSRShader.uniforms.opacity.value;		this.output = 0;		this.maxDistance = SSRShader.uniforms.maxDistance.value;		this.thickness = SSRShader.uniforms.thickness.value;		this.tempColor = new Color();		this._selects = selects;		this.selective = Array.isArray( this._selects );		Object.defineProperty( this, 'selects', {			get() {				return this._selects;			},			set( val ) {				if ( this._selects === val ) return;				this._selects = val;				if ( Array.isArray( val ) ) {					this.selective = true;					this.ssrMaterial.defines.SELECTIVE = true;					this.ssrMaterial.needsUpdate = true;				} else {					this.selective = false;					this.ssrMaterial.defines.SELECTIVE = false;					this.ssrMaterial.needsUpdate = true;				}			}		} );		this._bouncing = bouncing;		Object.defineProperty( this, 'bouncing', {			get() {				return this._bouncing;			},			set( val ) {				if ( this._bouncing === val ) return;				this._bouncing = val;				if ( val ) {					this.ssrMaterial.uniforms[ 'tDiffuse' ].value = this.prevRenderTarget.texture;				} else {					this.ssrMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;				}			}		} );		this.blur = true;		this._distanceAttenuation = SSRShader.defines.DISTANCE_ATTENUATION;		Object.defineProperty( this, 'distanceAttenuation', {			get() {				return this._distanceAttenuation;			},			set( val ) {				if ( this._distanceAttenuation === val ) return;				this._distanceAttenuation = val;				this.ssrMaterial.defines.DISTANCE_ATTENUATION = val;				this.ssrMaterial.needsUpdate = true;			}		} );		this._fresnel = SSRShader.defines.FRESNEL;		Object.defineProperty( this, 'fresnel', {			get() {				return this._fresnel;			},			set( val ) {				if ( this._fresnel === val ) return;				this._fresnel = val;				this.ssrMaterial.defines.FRESNEL = val;				this.ssrMaterial.needsUpdate = true;			}		} );		this._infiniteThick = SSRShader.defines.INFINITE_THICK;		Object.defineProperty( this, 'infiniteThick', {			get() {				return this._infiniteThick;			},			set( val ) {				if ( this._infiniteThick === val ) return;				this._infiniteThick = val;				this.ssrMaterial.defines.INFINITE_THICK = val;				this.ssrMaterial.needsUpdate = true;			}		} );		// beauty render target with depth buffer		const depthTexture = new DepthTexture();		depthTexture.type = UnsignedShortType;		depthTexture.minFilter = NearestFilter;		depthTexture.magFilter = NearestFilter;		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height, {			minFilter: NearestFilter,			magFilter: NearestFilter,			format: RGBAFormat,			depthTexture: depthTexture,			depthBuffer: true		} );		//for bouncing		this.prevRenderTarget = new WebGLRenderTarget( this.width, this.height, {			minFilter: NearestFilter,			magFilter: NearestFilter,			format: RGBAFormat,		} );		// normal render target		this.normalRenderTarget = new WebGLRenderTarget( this.width, this.height, {			minFilter: NearestFilter,			magFilter: NearestFilter,			format: RGBAFormat,			type: HalfFloatType,		} );		// metalness render target		this.metalnessRenderTarget = new WebGLRenderTarget( this.width, this.height, {			minFilter: NearestFilter,			magFilter: NearestFilter,			format: RGBAFormat		} );		// ssr render target		this.ssrRenderTarget = new WebGLRenderTarget( this.width, this.height, {			minFilter: NearestFilter,			magFilter: NearestFilter,			format: RGBAFormat		} );		this.blurRenderTarget = this.ssrRenderTarget.clone();		this.blurRenderTarget2 = this.ssrRenderTarget.clone();		// this.blurRenderTarget3 = this.ssrRenderTarget.clone();		// ssr material		if ( SSRShader === undefined ) {			console.error( 'THREE.SSRPass: The pass relies on SSRShader.' );		}		this.ssrMaterial = new ShaderMaterial( {			defines: Object.assign( {}, SSRShader.defines, {				MAX_STEP: Math.sqrt( this.width * this.width + this.height * this.height )			} ),			uniforms: UniformsUtils.clone( SSRShader.uniforms ),			vertexShader: SSRShader.vertexShader,			fragmentShader: SSRShader.fragmentShader,			blending: NoBlending		} );		this.ssrMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;		this.ssrMaterial.uniforms[ 'tNormal' ].value = this.normalRenderTarget.texture;		this.ssrMaterial.defines.SELECTIVE = this.selective;		this.ssrMaterial.needsUpdate = true;		this.ssrMaterial.uniforms[ 'tMetalness' ].value = this.metalnessRenderTarget.texture;		this.ssrMaterial.uniforms[ 'tDepth' ].value = this.beautyRenderTarget.depthTexture;		this.ssrMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;		this.ssrMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;		this.ssrMaterial.uniforms[ 'thickness' ].value = this.thickness;		this.ssrMaterial.uniforms[ 'resolution' ].value.set( this.width, this.height );		this.ssrMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );		this.ssrMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );		// normal material		this.normalMaterial = new MeshNormalMaterial();		this.normalMaterial.blending = NoBlending;		// metalnessOn material		this.metalnessOnMaterial = new MeshBasicMaterial( {			color: 'white'		} );		// metalnessOff material		this.metalnessOffMaterial = new MeshBasicMaterial( {			color: 'black'		} );		// blur material		this.blurMaterial = new ShaderMaterial( {			defines: Object.assign( {}, SSRBlurShader.defines ),			uniforms: UniformsUtils.clone( SSRBlurShader.uniforms ),			vertexShader: SSRBlurShader.vertexShader,			fragmentShader: SSRBlurShader.fragmentShader		} );		this.blurMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;		this.blurMaterial.uniforms[ 'resolution' ].value.set( this.width, this.height );		// blur material 2		this.blurMaterial2 = new ShaderMaterial( {			defines: Object.assign( {}, SSRBlurShader.defines ),			uniforms: UniformsUtils.clone( SSRBlurShader.uniforms ),			vertexShader: SSRBlurShader.vertexShader,			fragmentShader: SSRBlurShader.fragmentShader		} );		this.blurMaterial2.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget.texture;		this.blurMaterial2.uniforms[ 'resolution' ].value.set( this.width, this.height );		// // blur material 3		// this.blurMaterial3 = new ShaderMaterial({		//   defines: Object.assign({}, SSRBlurShader.defines),		//   uniforms: UniformsUtils.clone(SSRBlurShader.uniforms),		//   vertexShader: SSRBlurShader.vertexShader,		//   fragmentShader: SSRBlurShader.fragmentShader		// });		// this.blurMaterial3.uniforms['tDiffuse'].value = this.blurRenderTarget2.texture;		// this.blurMaterial3.uniforms['resolution'].value.set(this.width, this.height);		// material for rendering the depth		this.depthRenderMaterial = new ShaderMaterial( {			defines: Object.assign( {}, SSRDepthShader.defines ),			uniforms: UniformsUtils.clone( SSRDepthShader.uniforms ),			vertexShader: SSRDepthShader.vertexShader,			fragmentShader: SSRDepthShader.fragmentShader,			blending: NoBlending		} );		this.depthRenderMaterial.uniforms[ 'tDepth' ].value = this.beautyRenderTarget.depthTexture;		this.depthRenderMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;		this.depthRenderMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;		// material for rendering the content of a render target		this.copyMaterial = new ShaderMaterial( {			uniforms: UniformsUtils.clone( CopyShader.uniforms ),			vertexShader: CopyShader.vertexShader,			fragmentShader: CopyShader.fragmentShader,			transparent: true,			depthTest: false,			depthWrite: false,			blendSrc: SrcAlphaFactor,			blendDst: OneMinusSrcAlphaFactor,			blendEquation: AddEquation,			blendSrcAlpha: SrcAlphaFactor,			blendDstAlpha: OneMinusSrcAlphaFactor,			blendEquationAlpha: AddEquation,			// premultipliedAlpha:true,		} );		this.fsQuad = new FullScreenQuad( null );		this.originalClearColor = new Color();	}	dispose() {		// dispose render targets		this.beautyRenderTarget.dispose();		this.prevRenderTarget.dispose();		this.normalRenderTarget.dispose();		this.metalnessRenderTarget.dispose();		this.ssrRenderTarget.dispose();		this.blurRenderTarget.dispose();		this.blurRenderTarget2.dispose();		// this.blurRenderTarget3.dispose();		// dispose materials		this.normalMaterial.dispose();		this.metalnessOnMaterial.dispose();		this.metalnessOffMaterial.dispose();		this.blurMaterial.dispose();		this.blurMaterial2.dispose();		this.copyMaterial.dispose();		this.depthRenderMaterial.dispose();		// dipsose full screen quad		this.fsQuad.dispose();	}	render( renderer, writeBuffer /*, readBuffer, deltaTime, maskActive */ ) {		// render beauty and depth		renderer.setRenderTarget( this.beautyRenderTarget );		renderer.clear();		if ( this.groundReflector ) {			this.groundReflector.visible = false;			this.groundReflector.doRender( this.renderer, this.scene, this.camera );			this.groundReflector.visible = true;		}		renderer.render( this.scene, this.camera );		if ( this.groundReflector ) this.groundReflector.visible = false;		// render normals		this.renderOverride( renderer, this.normalMaterial, this.normalRenderTarget, 0, 0 );		// render metalnesses		if ( this.selective ) {			this.renderMetalness( renderer, this.metalnessOnMaterial, this.metalnessRenderTarget, 0, 0 );		}		// render SSR		this.ssrMaterial.uniforms[ 'opacity' ].value = this.opacity;		this.ssrMaterial.uniforms[ 'maxDistance' ].value = this.maxDistance;		this.ssrMaterial.uniforms[ 'thickness' ].value = this.thickness;		this.renderPass( renderer, this.ssrMaterial, this.ssrRenderTarget );		// render blur		if ( this.blur ) {			this.renderPass( renderer, this.blurMaterial, this.blurRenderTarget );			this.renderPass( renderer, this.blurMaterial2, this.blurRenderTarget2 );			// this.renderPass(renderer, this.blurMaterial3, this.blurRenderTarget3);		}		// output result to screen		switch ( this.output ) {			case SSRPass.OUTPUT.Default:				if ( this.bouncing ) {					this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;					this.copyMaterial.blending = NoBlending;					this.renderPass( renderer, this.copyMaterial, this.prevRenderTarget );					if ( this.blur )						this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget2.texture;					else						this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;					this.copyMaterial.blending = NormalBlending;					this.renderPass( renderer, this.copyMaterial, this.prevRenderTarget );					this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.prevRenderTarget.texture;					this.copyMaterial.blending = NoBlending;					this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );				} else {					this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;					this.copyMaterial.blending = NoBlending;					this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );					if ( this.blur )						this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget2.texture;					else						this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;					this.copyMaterial.blending = NormalBlending;					this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );				}				break;			case SSRPass.OUTPUT.SSR:				if ( this.blur )					this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget2.texture;				else					this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;				this.copyMaterial.blending = NoBlending;				this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );				if ( this.bouncing ) {					if ( this.blur )						this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget2.texture;					else						this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;					this.copyMaterial.blending = NoBlending;					this.renderPass( renderer, this.copyMaterial, this.prevRenderTarget );					this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;					this.copyMaterial.blending = NormalBlending;					this.renderPass( renderer, this.copyMaterial, this.prevRenderTarget );				}				break;			case SSRPass.OUTPUT.Beauty:				this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;				this.copyMaterial.blending = NoBlending;				this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );				break;			case SSRPass.OUTPUT.Depth:				this.renderPass( renderer, this.depthRenderMaterial, this.renderToScreen ? null : writeBuffer );				break;			case SSRPass.OUTPUT.Normal:				this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.normalRenderTarget.texture;				this.copyMaterial.blending = NoBlending;				this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );				break;			case SSRPass.OUTPUT.Metalness:				this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.metalnessRenderTarget.texture;				this.copyMaterial.blending = NoBlending;				this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );				break;			default:				console.warn( 'THREE.SSRPass: Unknown output type.' );		}	}	renderPass( renderer, passMaterial, renderTarget, clearColor, clearAlpha ) {		// save original state		this.originalClearColor.copy( renderer.getClearColor( this.tempColor ) );		const originalClearAlpha = renderer.getClearAlpha( this.tempColor );		const originalAutoClear = renderer.autoClear;		renderer.setRenderTarget( renderTarget );		// setup pass state		renderer.autoClear = false;		if ( ( clearColor !== undefined ) && ( clearColor !== null ) ) {			renderer.setClearColor( clearColor );			renderer.setClearAlpha( clearAlpha || 0.0 );			renderer.clear();		}		this.fsQuad.material = passMaterial;		this.fsQuad.render( renderer );		// restore original state		renderer.autoClear = originalAutoClear;		renderer.setClearColor( this.originalClearColor );		renderer.setClearAlpha( originalClearAlpha );	}	renderOverride( renderer, overrideMaterial, renderTarget, clearColor, clearAlpha ) {		this.originalClearColor.copy( renderer.getClearColor( this.tempColor ) );		const originalClearAlpha = renderer.getClearAlpha( this.tempColor );		const originalAutoClear = renderer.autoClear;		renderer.setRenderTarget( renderTarget );		renderer.autoClear = false;		clearColor = overrideMaterial.clearColor || clearColor;		clearAlpha = overrideMaterial.clearAlpha || clearAlpha;		if ( ( clearColor !== undefined ) && ( clearColor !== null ) ) {			renderer.setClearColor( clearColor );			renderer.setClearAlpha( clearAlpha || 0.0 );			renderer.clear();		}		this.scene.overrideMaterial = overrideMaterial;		renderer.render( this.scene, this.camera );		this.scene.overrideMaterial = null;		// restore original state		renderer.autoClear = originalAutoClear;		renderer.setClearColor( this.originalClearColor );		renderer.setClearAlpha( originalClearAlpha );	}	renderMetalness( renderer, overrideMaterial, renderTarget, clearColor, clearAlpha ) {		this.originalClearColor.copy( renderer.getClearColor( this.tempColor ) );		const originalClearAlpha = renderer.getClearAlpha( this.tempColor );		const originalAutoClear = renderer.autoClear;		renderer.setRenderTarget( renderTarget );		renderer.autoClear = false;		clearColor = overrideMaterial.clearColor || clearColor;		clearAlpha = overrideMaterial.clearAlpha || clearAlpha;		if ( ( clearColor !== undefined ) && ( clearColor !== null ) ) {			renderer.setClearColor( clearColor );			renderer.setClearAlpha( clearAlpha || 0.0 );			renderer.clear();		}		this.scene.traverseVisible( child => {			child._SSRPassBackupMaterial = child.material;			if ( this._selects.includes( child ) ) {				child.material = this.metalnessOnMaterial;			} else {				child.material = this.metalnessOffMaterial;			}		} );		renderer.render( this.scene, this.camera );		this.scene.traverseVisible( child => {			child.material = child._SSRPassBackupMaterial;		} );		// restore original state		renderer.autoClear = originalAutoClear;		renderer.setClearColor( this.originalClearColor );		renderer.setClearAlpha( originalClearAlpha );	}	setSize( width, height ) {		this.width = width;		this.height = height;		this.ssrMaterial.defines.MAX_STEP = Math.sqrt( width * width + height * height );		this.ssrMaterial.needsUpdate = true;		this.beautyRenderTarget.setSize( width, height );		this.prevRenderTarget.setSize( width, height );		this.ssrRenderTarget.setSize( width, height );		this.normalRenderTarget.setSize( width, height );		this.metalnessRenderTarget.setSize( width, height );		this.blurRenderTarget.setSize( width, height );		this.blurRenderTarget2.setSize( width, height );		// this.blurRenderTarget3.setSize(width, height);		this.ssrMaterial.uniforms[ 'resolution' ].value.set( width, height );		this.ssrMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );		this.ssrMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );		this.blurMaterial.uniforms[ 'resolution' ].value.set( width, height );		this.blurMaterial2.uniforms[ 'resolution' ].value.set( width, height );	}}SSRPass.OUTPUT = {	'Default': 0,	'SSR': 1,	'Beauty': 3,	'Depth': 4,	'Normal': 5,	'Metalness': 7,};export { SSRPass };
 |