How to use the postprocessing.Effect function in postprocessing

To help you get started, we’ve selected a few postprocessing examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github slammayjammay / hyper-postprocessing / examples / effects / space-travel / index.js View on Github external
module.exports = ({ hyperTerm, xTerm }) => {
	// two passes. one to scale the text down a bit so blooming doesn't go right
	// up against the edge of the terminal. another for space and bloom effects.
	const scaleEffects = [];
	const spaceEffects = [];

	// scale
	scaleEffects.push(new Effect(
		'scale',
		readFileSync(resolve(__dirname, '../../glsl/scale.glsl')).toString(),
		{
			defines: new Map([['scale', '0.95']])
		}
	));

	// avoid sampling issues
	scaleEffects.push(new Effect(
		'sampling',
		readFileSync(resolve(__dirname, '../../glsl/sampling.glsl')).toString(),
		{
			blendFunction: 13 // normal -- overwrite
		}
	));
github slammayjammay / hyper-postprocessing / examples / effects / glitch / index.js View on Github external
blendFunction: 1 // add
	}));

	effects.push(new ScanlineEffect({ density: 1.3 }));
	effects.push(new SepiaEffect({ intensity: 0.5 }));
	effects.push(new VignetteEffect({
		darkness: 0.6,
		offset: 0
	}));

	effects.push(new Effect(
		'curvedMonitorEffect',
		readFileSync(resolve(__dirname, '../../glsl/curved-monitor.glsl')).toString()
	));

	effects.push(new Effect(
		'sampling',
		readFileSync(resolve(__dirname, '../../glsl/sampling.glsl')).toString(),
		{
			blendFunction: 13 // normal -- overwrite
		}
	));

	return { pass: new EffectPass(null, ...effects) };
};
github slammayjammay / hyper-postprocessing / examples / effects / fallout-boy / index.js View on Github external
module.exports = ({ hyperTerm, xTerm }) => {
	// turn all colors that aren't black into white -- then we can multiply the
	// image against this to "shine" through only the text (setting the background
	// to black in the hyper config is required)
	const textEffect = new Effect(
		'textEffect',
		readFileSync(resolve(__dirname, '../../glsl/black-and-white.glsl')).toString()
	);

	// move background image left
	const backgroundEffect = new Effect(
		'backgroundEffect',
		readFileSync(resolve(__dirname, '../../glsl/background-image.glsl')).toString(),
		{
			uniforms: new Map([['backgroundImage', new Uniform(null)]]),
			defines: new Map([['motionX', '-0.1']]),
			blendFunction: BlendFunction.MULTIPLY
		}
	);

	new TextureLoader().load(resolve(__dirname, '../../images/fallout-boy.jpg'), texture => {
github slammayjammay / hyper-postprocessing / examples / effects / glitch / index.js View on Github external
}));

	effects.push(new BloomEffect({
		kernelSize: 3,
		distinction: 1,
		blendFunction: 1 // add
	}));

	effects.push(new ScanlineEffect({ density: 1.3 }));
	effects.push(new SepiaEffect({ intensity: 0.5 }));
	effects.push(new VignetteEffect({
		darkness: 0.6,
		offset: 0
	}));

	effects.push(new Effect(
		'curvedMonitorEffect',
		readFileSync(resolve(__dirname, '../../glsl/curved-monitor.glsl')).toString()
	));

	effects.push(new Effect(
		'sampling',
		readFileSync(resolve(__dirname, '../../glsl/sampling.glsl')).toString(),
		{
			blendFunction: 13 // normal -- overwrite
		}
	));

	return { pass: new EffectPass(null, ...effects) };
};
github slammayjammay / hyper-postprocessing / examples / effects / space-travel / index.js View on Github external
// two passes. one to scale the text down a bit so blooming doesn't go right
	// up against the edge of the terminal. another for space and bloom effects.
	const scaleEffects = [];
	const spaceEffects = [];

	// scale
	scaleEffects.push(new Effect(
		'scale',
		readFileSync(resolve(__dirname, '../../glsl/scale.glsl')).toString(),
		{
			defines: new Map([['scale', '0.95']])
		}
	));

	// avoid sampling issues
	scaleEffects.push(new Effect(
		'sampling',
		readFileSync(resolve(__dirname, '../../glsl/sampling.glsl')).toString(),
		{
			blendFunction: 13 // normal -- overwrite
		}
	));

	// space
	spaceEffects.push(new Effect(
		'space',
		readFileSync(resolve(__dirname, '../../glsl/space-travel.glsl')).toString()
	));

	// bloom
	spaceEffects.push(new BloomEffect({
		kernelSize: 3,
github slammayjammay / hyper-postprocessing / examples / effects / mattias-crt / index.js View on Github external
module.exports = ({ hyperTerm, xTerm }) => {

	return { 
		pass: new EffectPass(null, new Effect(
			'mattias-crt',
			readFileSync(resolve(__dirname, '../../glsl/mattias-crt.glsl')).toString(),
			{ blendFunction: BlendFunction.NORMAL },
		)),
		coordinateTransform: function(x, y) {
			x = (x - 0.5) * 2;
			y = (y - 0.5) * 2;

			x *= 1.1 + Math.pow(x / 6, 2);
			y *= 1.1 + Math.pow(y / 6, 2);

			x = x / 2 + 0.5;
			y = y / 2 + 0.5;

			x = x * 0.91 + 0.045;
			y = y * 0.91 + 0.045;
github slammayjammay / hyper-postprocessing / examples / effects / vt220 / index.js View on Github external
module.exports = ({ hyperTerm, xTerm }) => {

	return { 
		pass: new EffectPass(null, new Effect(
			'vt220',
			readFileSync(resolve(__dirname, '../../glsl/vt220.glsl')).toString(),
			{ blendFunction: BlendFunction.NORMAL },
		)),
		coordinateTransform: function(x, y) {
			let r = 4;
			x = (x - 0.5) * 2;
			y = (y - 0.5) * 2;

			x = r * x / Math.sqrt(r * r - x * x - y * y) * (0.465 / 0.4);
			y = r * y / Math.sqrt(r * r - x * x - y * y) * (0.473 / 0.4);

			x = x / 2 + 0.5;
			y = y / 2 + 0.5;;

			return [x, y];
github slammayjammay / hyper-postprocessing / examples / effects / ripple / index.js View on Github external
module.exports = ({ hyperTerm, xTerm }) => {
	const effects = [];

	const backgroundEffect = new Effect(
		'backgroundImage',
		readFileSync(resolve(__dirname, '../../glsl/background-image.glsl')).toString(),
		{
			uniforms: new Map([['backgroundImage', new Uniform(null)]])
		}
	);
	new TextureLoader().load(resolve(__dirname, '../../images/underwater.jpg'), texture => {
		texture.minFilter = LinearFilter;
		backgroundEffect.uniforms.get('backgroundImage').value = texture;
	});
	effects.push(backgroundEffect);

	effects.push(new Effect(
		'underwaterEffect',
		readFileSync(resolve(__dirname, '../../glsl/ripple.glsl')).toString()
	));
github slammayjammay / hyper-postprocessing / examples / effects / ripple / index.js View on Github external
effects.push(backgroundEffect);

	effects.push(new Effect(
		'underwaterEffect',
		readFileSync(resolve(__dirname, '../../glsl/ripple.glsl')).toString()
	));

	effects.push(new Effect(
		'scaleEffect',
		readFileSync(resolve(__dirname, '../../glsl/scale.glsl')).toString(),
		{
			defines: new Map([['scale', '0.9']])
		}
	));

	effects.push(new Effect(
		'sampling',
		readFileSync(resolve(__dirname, '../../glsl/sampling.glsl')).toString(),
		{
			blendFunction: 13
		}
	));

	return { pass: new EffectPass(null, ...effects) };
};
github slammayjammay / hyper-postprocessing / examples / effects / chalk / index.js View on Github external
module.exports = ({ hyperTerm, xTerm }) => {
	const effect = new Effect(
		'chalkEffect',
		readFileSync(resolve(__dirname, '../../glsl/chalk.glsl')).toString(),
		{
			uniforms: new Map([['noiseTexture', new Uniform(null)]])
		}
	);

	new TextureLoader().load(resolve(__dirname, '../../images/noise.png'), texture => {
		texture.minFilter = LinearFilter;
		effect.uniforms.get('noiseTexture').value = texture;
	});

	return { pass: new EffectPass(null, effect) };
};