@gnsx/three 0.184.0

package/examples/jsm/postprocessing/GlitchPass.js

@@ -0,0 +1,177 @@
+import {
+	DataTexture,
+	FloatType,
+	MathUtils,
+	RedFormat,
+	ShaderMaterial,
+	UniformsUtils
+} from 'three';
+import { Pass, FullScreenQuad } from './Pass.js';
+import { DigitalGlitch } from '../shaders/DigitalGlitch.js';
+
+/**
+ * Pass for creating a glitch effect.
+ *
+ * ```js
+ * const glitchPass = new GlitchPass();
+ * composer.addPass( glitchPass );
+ * ```
+ *
+ * @augments Pass
+ * @three_import import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
+ */
+class GlitchPass extends Pass {
+
+	/**
+	 * Constructs a new glitch pass.
+	 *
+	 * @param {number} [dt_size=64] - The size of the displacement texture
+	 * for digital glitch squares.
+	 */
+	constructor( dt_size = 64 ) {
+
+		super();
+
+		/**
+		 * The pass uniforms.
+		 *
+		 * @type {Object}
+		 */
+		this.uniforms = UniformsUtils.clone( DigitalGlitch.uniforms );
+
+		/**
+		 * The pass material.
+		 *
+		 * @type {ShaderMaterial}
+		 */
+		this.material = new ShaderMaterial( {
+			uniforms: this.uniforms,
+			vertexShader: DigitalGlitch.vertexShader,
+			fragmentShader: DigitalGlitch.fragmentShader
+		} );
+
+		/**
+		 * Whether to noticeably increase the effect intensity or not.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this.goWild = false;
+
+		// internals
+
+		this._heightMap = this._generateHeightmap( dt_size );
+		this.uniforms[ 'tDisp' ].value = this._heightMap;
+
+		this._fsQuad = new FullScreenQuad( this.material );
+
+		this._curF = 0;
+		this._randX = 0;
+
+		this._generateTrigger();
+
+	}
+
+	/**
+	 * Performs the glitch pass.
+	 *
+	 * @param {WebGLRenderer} renderer - The renderer.
+	 * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
+	 * destination for the pass.
+	 * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
+	 * previous pass from this buffer.
+	 * @param {number} deltaTime - The delta time in seconds.
+	 * @param {boolean} maskActive - Whether masking is active or not.
+	 */
+	render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
+
+		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 );
+
+		}
+
+	}
+
+	/**
+	 * Frees the GPU-related resources allocated by this instance. Call this
+	 * method whenever the pass is no longer used in your app.
+	 */
+	dispose() {
+
+		this.material.dispose();
+
+		this._heightMap.dispose();
+
+		this._fsQuad.dispose();
+
+	}
+
+	// internals
+
+	_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;
+
+	}
+
+}
+
+export { GlitchPass };

package/examples/jsm/postprocessing/HalftonePass.js

@@ -0,0 +1,134 @@
+import {
+	ShaderMaterial,
+	UniformsUtils
+} from 'three';
+import { Pass, FullScreenQuad } from './Pass.js';
+import { HalftoneShader } from '../shaders/HalftoneShader.js';
+
+/**
+ * Pass for creating a RGB halftone effect.
+ *
+ * ```js
+ * const params = {
+ * 	shape: 1,
+ * 	radius: 4,
+ * 	rotateR: Math.PI / 12,
+ * 	rotateB: Math.PI / 12 * 2,
+ * 	rotateG: Math.PI / 12 * 3,
+ * 	scatter: 0,
+ * 	blending: 1,
+ * 	blendingMode: 1,
+ * 	greyscale: false,
+ * 	disable: false
+ * };
+ * const halftonePass = new HalftonePass( params );
+ * composer.addPass( halftonePass );
+ * ```
+ *
+ * @augments Pass
+ * @three_import import { HalftonePass } from 'three/addons/postprocessing/HalftonePass.js';
+ */
+class HalftonePass extends Pass {
+
+	/**
+	 * Constructs a new halftone pass.
+	 *
+	 * @param {Object} params - The halftone shader parameter.
+	 */
+	constructor( params ) {
+
+		super();
+
+		/**
+		 * The pass uniforms.
+		 *
+		 * @type {Object}
+		 */
+	 	this.uniforms = UniformsUtils.clone( HalftoneShader.uniforms );
+
+		/**
+		 * The pass material.
+		 *
+		 * @type {ShaderMaterial}
+		 */
+	 	this.material = new ShaderMaterial( {
+	 		uniforms: this.uniforms,
+	 		fragmentShader: HalftoneShader.fragmentShader,
+	 		vertexShader: HalftoneShader.vertexShader
+	 	} );
+
+
+		for ( const key in params ) {
+
+			if ( params.hasOwnProperty( key ) && this.uniforms.hasOwnProperty( key ) ) {
+
+				this.uniforms[ key ].value = params[ key ];
+
+			}
+
+		}
+
+		// internals
+
+		this._fsQuad = new FullScreenQuad( this.material );
+
+	}
+
+	/**
+	 * Performs the halftone pass.
+	 *
+	 * @param {WebGLRenderer} renderer - The renderer.
+	 * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
+	 * destination for the pass.
+	 * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
+	 * previous pass from this buffer.
+	 * @param {number} deltaTime - The delta time in seconds.
+	 * @param {boolean} maskActive - Whether masking is active or not.
+	 */
+	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 );
+
+		}
+
+ 	}
+
+	/**
+	 * Sets the size of the pass.
+	 *
+	 * @param {number} width - The width to set.
+	 * @param {number} height - The height to set.
+	 */
+ 	setSize( width, height ) {
+
+ 		this.uniforms.width.value = width;
+ 		this.uniforms.height.value = height;
+
+ 	}
+
+	/**
+	 * Frees the GPU-related resources allocated by this instance. Call this
+	 * method whenever the pass is no longer used in your app.
+	 */
+	dispose() {
+
+		this.material.dispose();
+
+		this._fsQuad.dispose();
+
+	}
+
+}
+
+export { HalftonePass };

package/examples/jsm/postprocessing/LUTPass.js

@@ -0,0 +1,138 @@
+import { ShaderPass } from './ShaderPass.js';
+
+const LUTShader = {
+
+	name: 'LUTShader',
+
+	uniforms: {
+
+		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;
+		uniform sampler3D lut;
+
+		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 );
+
+
+			lutVal = vec4( texture( lut, uvw ).rgb, val.a );
+
+			gl_FragColor = vec4( mix( val, lutVal, intensity ) );
+
+		}
+
+	`,
+
+};
+
+/**
+ * Pass for color grading via lookup tables.
+ *
+ * ```js
+ * const lutPass = new LUTPass( { lut: lut.texture3D } );
+ * composer.addPass( lutPass );
+ * ```
+ *
+ * @augments ShaderPass
+ * @three_import import { LUTPass } from 'three/addons/postprocessing/LUTPass.js';
+ */
+class LUTPass extends ShaderPass {
+
+	/**
+	 * Constructs a LUT pass.
+	 *
+	 * @param {{lut:Data3DTexture,intensity:number}} [options={}] - The pass options.
+	 */
+	constructor( options = {} ) {
+
+		super( LUTShader );
+
+		/**
+		 * The LUT as a 3D texture.
+		 *
+		 * @type {?Data3DTexture}
+		 * @default null
+		 */
+		this.lut = options.lut || null;
+
+		/**
+		 * The intensity.
+		 *
+		 * @type {?number}
+		 * @default 1
+		 */
+		this.intensity = 'intensity' in options ? options.intensity : 1;
+
+	}
+
+	set lut( v ) {
+
+		const material = this.material;
+
+		if ( v !== this.lut ) {
+
+			material.uniforms.lut.value = null;
+
+			if ( v ) {
+
+				material.uniforms.lutSize.value = v.image.width;
+				material.uniforms.lut.value = v;
+
+			}
+
+		}
+
+	}
+
+	get lut() {
+
+		return this.material.uniforms.lut.value;
+
+	}
+
+	set intensity( v ) {
+
+		this.material.uniforms.intensity.value = v;
+
+	}
+
+	get intensity() {
+
+		return this.material.uniforms.intensity.value;
+
+	}
+
+}
+
+export { LUTPass };

package/examples/jsm/postprocessing/MaskPass.js

@@ -0,0 +1,195 @@
+import { Pass } from './Pass.js';
+
+/**
+ * This pass can be used to define a mask during post processing.
+ * Meaning only areas of subsequent post processing are affected
+ * which lie in the masking area of this pass. Internally, the masking
+ * is implemented with the stencil buffer.
+ *
+ * ```js
+ * const maskPass = new MaskPass( scene, camera );
+ * composer.addPass( maskPass );
+ * ```
+ *
+ * @augments Pass
+ * @three_import import { MaskPass } from 'three/addons/postprocessing/MaskPass.js';
+ */
+class MaskPass extends Pass {
+
+	/**
+	 * Constructs a new mask pass.
+	 *
+	 * @param {Scene} scene - The 3D objects in this scene will define the mask.
+	 * @param {Camera} camera - The camera.
+	 */
+	constructor( scene, camera ) {
+
+		super();
+
+		/**
+		 * The scene that defines the mask.
+		 *
+		 * @type {Scene}
+		 */
+		this.scene = scene;
+
+		/**
+		 * The camera.
+		 *
+		 * @type {Camera}
+		 */
+		this.camera = camera;
+
+		/**
+		 * Overwritten to perform a clear operation by default.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
+		this.clear = true;
+
+		/**
+		 * Overwritten to disable the swap.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this.needsSwap = false;
+
+		/**
+		 * Whether to inverse the mask or not.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this.inverse = false;
+
+	}
+
+	/**
+	 * Performs a mask pass with the configured scene and camera.
+	 *
+	 * @param {WebGLRenderer} renderer - The renderer.
+	 * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
+	 * destination for the pass.
+	 * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
+	 * previous pass from this buffer.
+	 * @param {number} deltaTime - The delta time in seconds.
+	 * @param {boolean} maskActive - Whether masking is active or not.
+	 */
+	render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
+
+		const context = renderer.getContext();
+		const state = renderer.state;
+
+		// don't update color or depth
+
+		state.buffers.color.setMask( false );
+		state.buffers.depth.setMask( false );
+
+		// lock buffers
+
+		state.buffers.color.setLocked( true );
+		state.buffers.depth.setLocked( true );
+
+		// set up stencil
+
+		let writeValue, clearValue;
+
+		if ( this.inverse ) {
+
+			writeValue = 0;
+			clearValue = 1;
+
+		} else {
+
+			writeValue = 1;
+			clearValue = 0;
+
+		}
+
+		state.buffers.stencil.setTest( true );
+		state.buffers.stencil.setOp( context.REPLACE, context.REPLACE, context.REPLACE );
+		state.buffers.stencil.setFunc( context.ALWAYS, writeValue, 0xffffffff );
+		state.buffers.stencil.setClear( clearValue );
+		state.buffers.stencil.setLocked( true );
+
+		// draw into the stencil buffer
+
+		renderer.setRenderTarget( readBuffer );
+		if ( this.clear ) renderer.clear();
+		renderer.render( this.scene, this.camera );
+
+		renderer.setRenderTarget( writeBuffer );
+		if ( this.clear ) renderer.clear();
+		renderer.render( this.scene, this.camera );
+
+		// unlock color and depth buffer and make them writable for subsequent rendering/clearing
+
+		state.buffers.color.setLocked( false );
+		state.buffers.depth.setLocked( false );
+
+		state.buffers.color.setMask( true );
+		state.buffers.depth.setMask( true );
+
+		// only render where stencil is set to 1
+
+		state.buffers.stencil.setLocked( false );
+		state.buffers.stencil.setFunc( context.EQUAL, 1, 0xffffffff ); // draw if == 1
+		state.buffers.stencil.setOp( context.KEEP, context.KEEP, context.KEEP );
+		state.buffers.stencil.setLocked( true );
+
+	}
+
+}
+
+/**
+ * This pass can be used to clear a mask previously defined with {@link MaskPass}.
+ *
+ * ```js
+ * const clearPass = new ClearMaskPass();
+ * composer.addPass( clearPass );
+ * ```
+ *
+ * @augments Pass
+ */
+class ClearMaskPass extends Pass {
+
+	/**
+	 * Constructs a new clear mask pass.
+	 */
+	constructor() {
+
+		super();
+
+		/**
+		 * Overwritten to disable the swap.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this.needsSwap = false;
+
+	}
+
+	/**
+	 * Performs the clear of the currently defined mask.
+	 *
+	 * @param {WebGLRenderer} renderer - The renderer.
+	 * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
+	 * destination for the pass.
+	 * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
+	 * previous pass from this buffer.
+	 * @param {number} deltaTime - The delta time in seconds.
+	 * @param {boolean} maskActive - Whether masking is active or not.
+	 */
+	render( renderer /*, writeBuffer, readBuffer, deltaTime, maskActive */ ) {
+
+		renderer.state.buffers.stencil.setLocked( false );
+		renderer.state.buffers.stencil.setTest( false );
+
+	}
+
+}
+
+export { MaskPass, ClearMaskPass };