@anov/3d 0.0.1 → 0.0.2

package/examples/jsm/postprocessing/EffectComposer.js

@@ -0,0 +1,231 @@
+import {
+	Clock,
+	HalfFloatType,
+	NoBlending,
+	Vector2,
+	WebGLRenderTarget
+} from 'three';
+import { CopyShader } from '../shaders/CopyShader.js';
+import { ShaderPass } from './ShaderPass.js';
+import { MaskPass } from './MaskPass.js';
+import { ClearMaskPass } from './MaskPass.js';
+
+class EffectComposer {
+
+	constructor( renderer, renderTarget ) {
+
+		this.renderer = renderer;
+
+		this._pixelRatio = renderer.getPixelRatio();
+
+		if ( renderTarget === undefined ) {
+
+			const size = renderer.getSize( new Vector2() );
+			this._width = size.width;
+			this._height = size.height;
+
+			renderTarget = new WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, { type: HalfFloatType } );
+			renderTarget.texture.name = 'EffectComposer.rt1';
+
+		} else {
+
+			this._width = renderTarget.width;
+			this._height = renderTarget.height;
+
+		}
+
+		this.renderTarget1 = renderTarget;
+		this.renderTarget2 = renderTarget.clone();
+		this.renderTarget2.texture.name = 'EffectComposer.rt2';
+
+		this.writeBuffer = this.renderTarget1;
+		this.readBuffer = this.renderTarget2;
+
+		this.renderToScreen = true;
+
+		this.passes = [];
+
+		this.copyPass = new ShaderPass( CopyShader );
+		this.copyPass.material.blending = NoBlending;
+
+		this.clock = new Clock();
+
+	}
+
+	swapBuffers() {
+
+		const tmp = this.readBuffer;
+		this.readBuffer = this.writeBuffer;
+		this.writeBuffer = tmp;
+
+	}
+
+	addPass( pass ) {
+
+		this.passes.push( pass );
+		pass.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
+
+	}
+
+	insertPass( pass, index ) {
+
+		this.passes.splice( index, 0, pass );
+		pass.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
+
+	}
+
+	removePass( pass ) {
+
+		const index = this.passes.indexOf( pass );
+
+		if ( index !== - 1 ) {
+
+			this.passes.splice( index, 1 );
+
+		}
+
+	}
+
+	isLastEnabledPass( passIndex ) {
+
+		for ( let i = passIndex + 1; i < this.passes.length; i ++ ) {
+
+			if ( this.passes[ i ].enabled ) {
+
+				return false;
+
+			}
+
+		}
+
+		return true;
+
+	}
+
+	render( deltaTime ) {
+
+		// deltaTime value is in seconds
+
+		if ( deltaTime === undefined ) {
+
+			deltaTime = this.clock.getDelta();
+
+		}
+
+		const currentRenderTarget = this.renderer.getRenderTarget();
+
+		let maskActive = false;
+
+		for ( let i = 0, il = this.passes.length; i < il; i ++ ) {
+
+			const pass = this.passes[ i ];
+
+			if ( pass.enabled === false ) continue;
+
+			pass.renderToScreen = ( this.renderToScreen && this.isLastEnabledPass( i ) );
+			pass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime, maskActive );
+
+			if ( pass.needsSwap ) {
+
+				if ( maskActive ) {
+
+					const context = this.renderer.getContext();
+					const stencil = this.renderer.state.buffers.stencil;
+
+					//context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
+					stencil.setFunc( context.NOTEQUAL, 1, 0xffffffff );
+
+					this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime );
+
+					//context.stencilFunc( context.EQUAL, 1, 0xffffffff );
+					stencil.setFunc( context.EQUAL, 1, 0xffffffff );
+
+				}
+
+				this.swapBuffers();
+
+			}
+
+			if ( MaskPass !== undefined ) {
+
+				if ( pass instanceof MaskPass ) {
+
+					maskActive = true;
+
+				} else if ( pass instanceof ClearMaskPass ) {
+
+					maskActive = false;
+
+				}
+
+			}
+
+		}
+
+		this.renderer.setRenderTarget( currentRenderTarget );
+
+	}
+
+	reset( renderTarget ) {
+
+		if ( renderTarget === undefined ) {
+
+			const size = this.renderer.getSize( new Vector2() );
+			this._pixelRatio = this.renderer.getPixelRatio();
+			this._width = size.width;
+			this._height = size.height;
+
+			renderTarget = this.renderTarget1.clone();
+			renderTarget.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
+
+		}
+
+		this.renderTarget1.dispose();
+		this.renderTarget2.dispose();
+		this.renderTarget1 = renderTarget;
+		this.renderTarget2 = renderTarget.clone();
+
+		this.writeBuffer = this.renderTarget1;
+		this.readBuffer = this.renderTarget2;
+
+	}
+
+	setSize( width, height ) {
+
+		this._width = width;
+		this._height = height;
+
+		const effectiveWidth = this._width * this._pixelRatio;
+		const effectiveHeight = this._height * this._pixelRatio;
+
+		this.renderTarget1.setSize( effectiveWidth, effectiveHeight );
+		this.renderTarget2.setSize( effectiveWidth, effectiveHeight );
+
+		for ( let i = 0; i < this.passes.length; i ++ ) {
+
+			this.passes[ i ].setSize( effectiveWidth, effectiveHeight );
+
+		}
+
+	}
+
+	setPixelRatio( pixelRatio ) {
+
+		this._pixelRatio = pixelRatio;
+
+		this.setSize( this._width, this._height );
+
+	}
+
+	dispose() {
+
+		this.renderTarget1.dispose();
+		this.renderTarget2.dispose();
+
+		this.copyPass.dispose();
+
+	}
+
+}
+
+export { EffectComposer };

package/examples/jsm/postprocessing/FilmPass.js

@@ -0,0 +1,66 @@
+import {
+	ShaderMaterial,
+	UniformsUtils
+} from 'three';
+import { Pass, FullScreenQuad } from './Pass.js';
+import { FilmShader } from '../shaders/FilmShader.js';
+
+class FilmPass extends Pass {
+
+	constructor( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) {
+
+		super();
+
+		const shader = FilmShader;
+
+		this.uniforms = UniformsUtils.clone( shader.uniforms );
+
+		this.material = new ShaderMaterial( {
+
+			name: shader.name,
+			uniforms: this.uniforms,
+			vertexShader: shader.vertexShader,
+			fragmentShader: shader.fragmentShader
+
+		} );
+
+		if ( grayscale !== undefined )	this.uniforms.grayscale.value = grayscale;
+		if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;
+		if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
+		if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
+
+		this.fsQuad = new FullScreenQuad( this.material );
+
+	}
+
+	render( renderer, writeBuffer, readBuffer, deltaTime /*, maskActive */ ) {
+
+		this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
+		this.uniforms[ 'time' ].value += deltaTime;
+
+		if ( this.renderToScreen ) {
+
+			renderer.setRenderTarget( null );
+			this.fsQuad.render( renderer );
+
+		} else {
+
+			renderer.setRenderTarget( writeBuffer );
+			if ( this.clear ) renderer.clear();
+			this.fsQuad.render( renderer );
+
+		}
+
+	}
+
+	dispose() {
+
+		this.material.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
+}
+
+export { FilmPass };

package/examples/jsm/postprocessing/GlitchPass.js

@@ -0,0 +1,128 @@
+import {
+	DataTexture,
+	FloatType,
+	MathUtils,
+	RedFormat,
+	LuminanceFormat,
+	ShaderMaterial,
+	UniformsUtils
+} from 'three';
+import { Pass, FullScreenQuad } from './Pass.js';
+import { DigitalGlitch } from '../shaders/DigitalGlitch.js';
+
+class GlitchPass extends Pass {
+
+	constructor( dt_size = 64 ) {
+
+		super();
+
+		const shader = DigitalGlitch;
+
+		this.uniforms = UniformsUtils.clone( shader.uniforms );
+
+		this.heightMap = this.generateHeightmap( dt_size );
+
+		this.uniforms[ 'tDisp' ].value = this.heightMap;
+
+		this.material = new ShaderMaterial( {
+			uniforms: this.uniforms,
+			vertexShader: shader.vertexShader,
+			fragmentShader: shader.fragmentShader
+		} );
+
+		this.fsQuad = new FullScreenQuad( this.material );
+
+		this.goWild = false;
+		this.curF = 0;
+		this.generateTrigger();
+
+	}
+
+	render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
+
+		if ( renderer.capabilities.isWebGL2 === false ) this.uniforms[ 'tDisp' ].value.format = LuminanceFormat;
+
+		this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
+		this.uniforms[ 'seed' ].value = Math.random();//default seeding
+		this.uniforms[ 'byp' ].value = 0;
+
+		if ( this.curF % this.randX == 0 || this.goWild == true ) {
+
+			this.uniforms[ 'amount' ].value = Math.random() / 30;
+			this.uniforms[ 'angle' ].value = MathUtils.randFloat( - Math.PI, Math.PI );
+			this.uniforms[ 'seed_x' ].value = MathUtils.randFloat( - 1, 1 );
+			this.uniforms[ 'seed_y' ].value = MathUtils.randFloat( - 1, 1 );
+			this.uniforms[ 'distortion_x' ].value = MathUtils.randFloat( 0, 1 );
+			this.uniforms[ 'distortion_y' ].value = MathUtils.randFloat( 0, 1 );
+			this.curF = 0;
+			this.generateTrigger();
+
+		} else if ( this.curF % this.randX < this.randX / 5 ) {
+
+			this.uniforms[ 'amount' ].value = Math.random() / 90;
+			this.uniforms[ 'angle' ].value = MathUtils.randFloat( - Math.PI, Math.PI );
+			this.uniforms[ 'distortion_x' ].value = MathUtils.randFloat( 0, 1 );
+			this.uniforms[ 'distortion_y' ].value = MathUtils.randFloat( 0, 1 );
+			this.uniforms[ 'seed_x' ].value = MathUtils.randFloat( - 0.3, 0.3 );
+			this.uniforms[ 'seed_y' ].value = MathUtils.randFloat( - 0.3, 0.3 );
+
+		} else if ( this.goWild == false ) {
+
+			this.uniforms[ 'byp' ].value = 1;
+
+		}
+
+		this.curF ++;
+
+		if ( this.renderToScreen ) {
+
+			renderer.setRenderTarget( null );
+			this.fsQuad.render( renderer );
+
+		} else {
+
+			renderer.setRenderTarget( writeBuffer );
+			if ( this.clear ) renderer.clear();
+			this.fsQuad.render( renderer );
+
+		}
+
+	}
+
+	generateTrigger() {
+
+		this.randX = MathUtils.randInt( 120, 240 );
+
+	}
+
+	generateHeightmap( dt_size ) {
+
+		const data_arr = new Float32Array( dt_size * dt_size );
+		const length = dt_size * dt_size;
+
+		for ( let i = 0; i < length; i ++ ) {
+
+			const val = MathUtils.randFloat( 0, 1 );
+			data_arr[ i ] = val;
+
+		}
+
+		const texture = new DataTexture( data_arr, dt_size, dt_size, RedFormat, FloatType );
+		texture.needsUpdate = true;
+		return texture;
+
+	}
+
+	dispose() {
+
+		this.material.dispose();
+
+		this.heightMap.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
+}
+
+export { GlitchPass };

package/examples/jsm/postprocessing/HalftonePass.js

@@ -0,0 +1,79 @@
+import {
+	ShaderMaterial,
+	UniformsUtils
+} from 'three';
+import { Pass, FullScreenQuad } from './Pass.js';
+import { HalftoneShader } from '../shaders/HalftoneShader.js';
+
+/**
+ * RGB Halftone pass for three.js effects composer. Requires HalftoneShader.
+ */
+
+class HalftonePass extends Pass {
+
+	constructor( width, height, params ) {
+
+		super();
+
+	 	this.uniforms = UniformsUtils.clone( HalftoneShader.uniforms );
+	 	this.material = new ShaderMaterial( {
+	 		uniforms: this.uniforms,
+	 		fragmentShader: HalftoneShader.fragmentShader,
+	 		vertexShader: HalftoneShader.vertexShader
+	 	} );
+
+		// set params
+		this.uniforms.width.value = width;
+		this.uniforms.height.value = height;
+
+		for ( const key in params ) {
+
+			if ( params.hasOwnProperty( key ) && this.uniforms.hasOwnProperty( key ) ) {
+
+				this.uniforms[ key ].value = params[ key ];
+
+			}
+
+		}
+
+		this.fsQuad = new FullScreenQuad( this.material );
+
+	}
+
+	render( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive*/ ) {
+
+ 		this.material.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
+
+ 		if ( this.renderToScreen ) {
+
+ 			renderer.setRenderTarget( null );
+ 			this.fsQuad.render( renderer );
+
+		} else {
+
+ 			renderer.setRenderTarget( writeBuffer );
+ 			if ( this.clear ) renderer.clear();
+			this.fsQuad.render( renderer );
+
+		}
+
+ 	}
+
+ 	setSize( width, height ) {
+
+ 		this.uniforms.width.value = width;
+ 		this.uniforms.height.value = height;
+
+ 	}
+
+	dispose() {
+
+		this.material.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
+}
+
+export { HalftonePass };

package/examples/jsm/postprocessing/LUTPass.js

@@ -0,0 +1,173 @@
+import { ShaderPass } from './ShaderPass.js';
+
+const LUTShader = {
+
+	defines: {
+		USE_3DTEXTURE: 1,
+	},
+
+	uniforms: {
+		lut3d: { value: null },
+
+		lut: { value: null },
+		lutSize: { value: 0 },
+
+		tDiffuse: { value: null },
+		intensity: { value: 1.0 },
+	},
+
+	vertexShader: /* glsl */`
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}
+
+	`,
+
+
+	fragmentShader: /* glsl */`
+
+		uniform float lutSize;
+		#if USE_3DTEXTURE
+		precision highp sampler3D;
+		uniform sampler3D lut3d;
+		#else
+		uniform sampler2D lut;
+
+		vec3 lutLookup( sampler2D tex, float size, vec3 rgb ) {
+
+			float sliceHeight = 1.0 / size;
+			float yPixelHeight = 1.0 / ( size * size );
+
+			// Get the slices on either side of the sample
+			float slice = rgb.b * size;
+			float interp = fract( slice );
+			float slice0 = slice - interp;
+			float centeredInterp = interp - 0.5;
+
+			float slice1 = slice0 + sign( centeredInterp );
+
+			// Pull y sample in by half a pixel in each direction to avoid color
+			// bleeding from adjacent slices.
+			float greenOffset = clamp( rgb.g * sliceHeight, yPixelHeight * 0.5, sliceHeight - yPixelHeight * 0.5 );
+
+			vec2 uv0 = vec2(
+				rgb.r,
+				slice0 * sliceHeight + greenOffset
+			);
+			vec2 uv1 = vec2(
+				rgb.r,
+				slice1 * sliceHeight + greenOffset
+			);
+
+			vec3 sample0 = texture2D( tex, uv0 ).rgb;
+			vec3 sample1 = texture2D( tex, uv1 ).rgb;
+
+			return mix( sample0, sample1, abs( centeredInterp ) );
+
+		}
+		#endif
+
+		varying vec2 vUv;
+		uniform float intensity;
+		uniform sampler2D tDiffuse;
+		void main() {
+
+			vec4 val = texture2D( tDiffuse, vUv );
+			vec4 lutVal;
+
+			// pull the sample in by half a pixel so the sample begins
+			// at the center of the edge pixels.
+			float pixelWidth = 1.0 / lutSize;
+			float halfPixelWidth = 0.5 / lutSize;
+			vec3 uvw = vec3( halfPixelWidth ) + val.rgb * ( 1.0 - pixelWidth );
+
+			#if USE_3DTEXTURE
+
+			lutVal = vec4( texture( lut3d, uvw ).rgb, val.a );
+
+			#else
+
+			lutVal = vec4( lutLookup( lut, lutSize, uvw ), val.a );
+
+			#endif
+
+			gl_FragColor = vec4( mix( val, lutVal, intensity ) );
+
+		}
+
+	`,
+
+};
+
+class LUTPass extends ShaderPass {
+
+	set lut( v ) {
+
+		const material = this.material;
+		if ( v !== this.lut ) {
+
+			material.uniforms.lut3d.value = null;
+			material.uniforms.lut.value = null;
+
+			if ( v ) {
+
+				const is3dTextureDefine = v.isData3DTexture ? 1 : 0;
+				if ( is3dTextureDefine !== material.defines.USE_3DTEXTURE ) {
+
+					material.defines.USE_3DTEXTURE = is3dTextureDefine;
+					material.needsUpdate = true;
+
+				}
+
+				material.uniforms.lutSize.value = v.image.width;
+				if ( v.isData3DTexture ) {
+
+					material.uniforms.lut3d.value = v;
+
+				} else {
+
+					material.uniforms.lut.value = v;
+
+				}
+
+			}
+
+		}
+
+	}
+
+	get lut() {
+
+		return this.material.uniforms.lut.value || this.material.uniforms.lut3d.value;
+
+	}
+
+	set intensity( v ) {
+
+		this.material.uniforms.intensity.value = v;
+
+	}
+
+	get intensity() {
+
+		return this.material.uniforms.intensity.value;
+
+	}
+
+	constructor( options = {} ) {
+
+		super( LUTShader );
+		this.lut = options.lut || null;
+		this.intensity = 'intensity' in options ? options.intensity : 1;
+
+	}
+
+}
+
+export { LUTPass };