First visible map

diplomacy/animation/node_modules/three/examples/jsm/effects/AnaglyphEffect.js

@@ -0,0 +1,147 @@
+import {
+	LinearFilter,
+	Matrix3,
+	NearestFilter,
+	RGBAFormat,
+	ShaderMaterial,
+	StereoCamera,
+	WebGLRenderTarget
+} from 'three';
+import { FullScreenQuad } from '../postprocessing/Pass.js';
+
+class AnaglyphEffect {
+
+	constructor( renderer, width = 512, height = 512 ) {
+
+		// Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
+
+		this.colorMatrixLeft = new Matrix3().fromArray( [
+			0.456100, - 0.0400822, - 0.0152161,
+			0.500484, - 0.0378246, - 0.0205971,
+			0.176381, - 0.0157589, - 0.00546856
+		] );
+
+		this.colorMatrixRight = new Matrix3().fromArray( [
+			- 0.0434706, 0.378476, - 0.0721527,
+			- 0.0879388, 0.73364, - 0.112961,
+			- 0.00155529, - 0.0184503, 1.2264
+		] );
+
+		const _stereo = new StereoCamera();
+
+		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
+
+		const _renderTargetL = new WebGLRenderTarget( width, height, _params );
+		const _renderTargetR = new WebGLRenderTarget( width, height, _params );
+
+		const _material = new ShaderMaterial( {
+
+			uniforms: {
+
+				'mapLeft': { value: _renderTargetL.texture },
+				'mapRight': { value: _renderTargetR.texture },
+
+				'colorMatrixLeft': { value: this.colorMatrixLeft },
+				'colorMatrixRight': { value: this.colorMatrixRight }
+
+			},
+
+			vertexShader: [
+
+				'varying vec2 vUv;',
+
+				'void main() {',
+
+				'	vUv = vec2( uv.x, uv.y );',
+				'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+
+				'}'
+
+			].join( '\n' ),
+
+			fragmentShader: [
+
+				'uniform sampler2D mapLeft;',
+				'uniform sampler2D mapRight;',
+				'varying vec2 vUv;',
+
+				'uniform mat3 colorMatrixLeft;',
+				'uniform mat3 colorMatrixRight;',
+
+				'void main() {',
+
+				'	vec2 uv = vUv;',
+
+				'	vec4 colorL = texture2D( mapLeft, uv );',
+				'	vec4 colorR = texture2D( mapRight, uv );',
+
+				'	vec3 color = clamp(',
+				'			colorMatrixLeft * colorL.rgb +',
+				'			colorMatrixRight * colorR.rgb, 0., 1. );',
+
+				'	gl_FragColor = vec4(',
+				'			color.r, color.g, color.b,',
+				'			max( colorL.a, colorR.a ) );',
+
+				'	#include <tonemapping_fragment>',
+				'	#include <colorspace_fragment>',
+
+				'}'
+
+			].join( '\n' )
+
+		} );
+
+		const _quad = new FullScreenQuad( _material );
+
+		this.setSize = function ( width, height ) {
+
+			renderer.setSize( width, height );
+
+			const pixelRatio = renderer.getPixelRatio();
+
+			_renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
+			_renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
+
+		};
+
+		this.render = function ( scene, camera ) {
+
+			const currentRenderTarget = renderer.getRenderTarget();
+
+			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+
+			_stereo.update( camera );
+
+			renderer.setRenderTarget( _renderTargetL );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraL );
+
+			renderer.setRenderTarget( _renderTargetR );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraR );
+
+			renderer.setRenderTarget( null );
+			_quad.render( renderer );
+
+			renderer.setRenderTarget( currentRenderTarget );
+
+		};
+
+		this.dispose = function () {
+
+			_renderTargetL.dispose();
+			_renderTargetR.dispose();
+
+			_material.dispose();
+			_quad.dispose();
+
+		};
+
+	}
+
+}
+
+export { AnaglyphEffect };

diplomacy/animation/node_modules/three/examples/jsm/effects/AsciiEffect.js

@@ -0,0 +1,263 @@
+/**
+ * Ascii generation is based on https://github.com/hassadee/jsascii/blob/master/jsascii.js
+ *
+ * 16 April 2012 - @blurspline
+ */
+
+class AsciiEffect {
+
+	constructor( renderer, charSet = ' .:-=+*#%@', options = {} ) {
+
+		// ' .,:;=|iI+hHOE#`$';
+		// darker bolder character set from https://github.com/saw/Canvas-ASCII-Art/
+		// ' .\'`^",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$'.split('');
+
+		// Some ASCII settings
+
+		const fResolution = options[ 'resolution' ] || 0.15; // Higher for more details
+		const iScale = options[ 'scale' ] || 1;
+		const bColor = options[ 'color' ] || false; // nice but slows down rendering!
+		const bAlpha = options[ 'alpha' ] || false; // Transparency
+		const bBlock = options[ 'block' ] || false; // blocked characters. like good O dos
+		const bInvert = options[ 'invert' ] || false; // black is white, white is black
+		const strResolution = options[ 'strResolution' ] || 'low';
+
+		let width, height;
+
+		const domElement = document.createElement( 'div' );
+		domElement.style.cursor = 'default';
+
+		const oAscii = document.createElement( 'table' );
+		domElement.appendChild( oAscii );
+
+		let iWidth, iHeight;
+		let oImg;
+
+		this.setSize = function ( w, h ) {
+
+			width = w;
+			height = h;
+
+			renderer.setSize( w, h );
+
+			initAsciiSize();
+
+		};
+
+
+		this.render = function ( scene, camera ) {
+
+			renderer.render( scene, camera );
+			asciifyImage( oAscii );
+
+		};
+
+		this.domElement = domElement;
+
+
+		// Throw in ascii library from https://github.com/hassadee/jsascii/blob/master/jsascii.js (MIT License)
+
+		function initAsciiSize() {
+
+			iWidth = Math.floor( width * fResolution );
+			iHeight = Math.floor( height * fResolution );
+
+			oCanvas.width = iWidth;
+			oCanvas.height = iHeight;
+			// oCanvas.style.display = "none";
+			// oCanvas.style.width = iWidth;
+			// oCanvas.style.height = iHeight;
+
+			oImg = renderer.domElement;
+
+			if ( oImg.style.backgroundColor ) {
+
+				oAscii.rows[ 0 ].cells[ 0 ].style.backgroundColor = oImg.style.backgroundColor;
+				oAscii.rows[ 0 ].cells[ 0 ].style.color = oImg.style.color;
+
+			}
+
+			oAscii.cellSpacing = 0;
+			oAscii.cellPadding = 0;
+
+			const oStyle = oAscii.style;
+			oStyle.whiteSpace = 'pre';
+			oStyle.margin = '0px';
+			oStyle.padding = '0px';
+			oStyle.letterSpacing = fLetterSpacing + 'px';
+			oStyle.fontFamily = strFont;
+			oStyle.fontSize = fFontSize + 'px';
+			oStyle.lineHeight = fLineHeight + 'px';
+			oStyle.textAlign = 'left';
+			oStyle.textDecoration = 'none';
+
+		}
+
+
+		const aDefaultCharList = ( ' .,:;i1tfLCG08@' ).split( '' );
+		const aDefaultColorCharList = ( ' CGO08@' ).split( '' );
+		const strFont = 'courier new, monospace';
+
+		const oCanvasImg = renderer.domElement;
+
+		const oCanvas = document.createElement( 'canvas' );
+		if ( ! oCanvas.getContext ) {
+
+			return;
+
+		}
+
+		const oCtx = oCanvas.getContext( '2d' );
+		if ( ! oCtx.getImageData ) {
+
+			return;
+
+		}
+
+		let aCharList = ( bColor ? aDefaultColorCharList : aDefaultCharList );
+
+		if ( charSet ) aCharList = charSet;
+
+		// Setup dom
+
+		const fFontSize = ( 2 / fResolution ) * iScale;
+		const fLineHeight = ( 2 / fResolution ) * iScale;
+
+		// adjust letter-spacing for all combinations of scale and resolution to get it to fit the image width.
+
+		let fLetterSpacing = 0;
+
+		if ( strResolution == 'low' ) {
+
+			switch ( iScale ) {
+
+				case 1 : fLetterSpacing = - 1; break;
+				case 2 :
+				case 3 : fLetterSpacing = - 2.1; break;
+				case 4 : fLetterSpacing = - 3.1; break;
+				case 5 : fLetterSpacing = - 4.15; break;
+
+			}
+
+		}
+
+		if ( strResolution == 'medium' ) {
+
+			switch ( iScale ) {
+
+				case 1 : fLetterSpacing = 0; break;
+				case 2 : fLetterSpacing = - 1; break;
+				case 3 : fLetterSpacing = - 1.04; break;
+				case 4 :
+				case 5 : fLetterSpacing = - 2.1; break;
+
+			}
+
+		}
+
+		if ( strResolution == 'high' ) {
+
+			switch ( iScale ) {
+
+				case 1 :
+				case 2 : fLetterSpacing = 0; break;
+				case 3 :
+				case 4 :
+				case 5 : fLetterSpacing = - 1; break;
+
+			}
+
+		}
+
+
+		// can't get a span or div to flow like an img element, but a table works?
+
+
+		// convert img element to ascii
+
+		function asciifyImage( oAscii ) {
+
+			oCtx.clearRect( 0, 0, iWidth, iHeight );
+			oCtx.drawImage( oCanvasImg, 0, 0, iWidth, iHeight );
+			const oImgData = oCtx.getImageData( 0, 0, iWidth, iHeight ).data;
+
+			// Coloring loop starts now
+			let strChars = '';
+
+			// console.time('rendering');
+
+			for ( let y = 0; y < iHeight; y += 2 ) {
+
+				for ( let x = 0; x < iWidth; x ++ ) {
+
+					const iOffset = ( y * iWidth + x ) * 4;
+
+					const iRed = oImgData[ iOffset ];
+					const iGreen = oImgData[ iOffset + 1 ];
+					const iBlue = oImgData[ iOffset + 2 ];
+					const iAlpha = oImgData[ iOffset + 3 ];
+					let iCharIdx;
+
+					let fBrightness;
+
+					fBrightness = ( 0.3 * iRed + 0.59 * iGreen + 0.11 * iBlue ) / 255;
+					// fBrightness = (0.3*iRed + 0.5*iGreen + 0.3*iBlue) / 255;
+
+					if ( iAlpha == 0 ) {
+
+						// should calculate alpha instead, but quick hack :)
+						//fBrightness *= (iAlpha / 255);
+						fBrightness = 1;
+
+					}
+
+					iCharIdx = Math.floor( ( 1 - fBrightness ) * ( aCharList.length - 1 ) );
+
+					if ( bInvert ) {
+
+						iCharIdx = aCharList.length - iCharIdx - 1;
+
+					}
+
+					// good for debugging
+					//fBrightness = Math.floor(fBrightness * 10);
+					//strThisChar = fBrightness;
+
+					let strThisChar = aCharList[ iCharIdx ];
+
+					if ( strThisChar === undefined || strThisChar == ' ' )
+						strThisChar = '&nbsp;';
+
+					if ( bColor ) {
+
+						strChars += '<span style=\''
+							+ 'color:rgb(' + iRed + ',' + iGreen + ',' + iBlue + ');'
+							+ ( bBlock ? 'background-color:rgb(' + iRed + ',' + iGreen + ',' + iBlue + ');' : '' )
+							+ ( bAlpha ? 'opacity:' + ( iAlpha / 255 ) + ';' : '' )
+							+ '\'>' + strThisChar + '</span>';
+
+					} else {
+
+						strChars += strThisChar;
+
+					}
+
+				}
+
+				strChars += '<br/>';
+
+			}
+
+			oAscii.innerHTML = `<tr><td style="display:block;width:${width}px;height:${height}px;overflow:hidden">${strChars}</td></tr>`;
+
+			// console.timeEnd('rendering');
+
+			// return oAscii;
+
+		}
+
+	}
+
+}
+
+export { AsciiEffect };

diplomacy/animation/node_modules/three/examples/jsm/effects/ParallaxBarrierEffect.js

@@ -0,0 +1,125 @@
+import {
+	LinearFilter,
+	NearestFilter,
+	RGBAFormat,
+	ShaderMaterial,
+	StereoCamera,
+	WebGLRenderTarget
+} from 'three';
+import { FullScreenQuad } from '../postprocessing/Pass.js';
+
+class ParallaxBarrierEffect {
+
+	constructor( renderer ) {
+
+		const _stereo = new StereoCamera();
+
+		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
+
+		const _renderTargetL = new WebGLRenderTarget( 512, 512, _params );
+		const _renderTargetR = new WebGLRenderTarget( 512, 512, _params );
+
+		const _material = new ShaderMaterial( {
+
+			uniforms: {
+
+				'mapLeft': { value: _renderTargetL.texture },
+				'mapRight': { value: _renderTargetR.texture }
+
+			},
+
+			vertexShader: [
+
+				'varying vec2 vUv;',
+
+				'void main() {',
+
+				'	vUv = vec2( uv.x, uv.y );',
+				'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+
+				'}'
+
+			].join( '\n' ),
+
+			fragmentShader: [
+
+				'uniform sampler2D mapLeft;',
+				'uniform sampler2D mapRight;',
+				'varying vec2 vUv;',
+
+				'void main() {',
+
+				'	vec2 uv = vUv;',
+
+				'	if ( ( mod( gl_FragCoord.y, 2.0 ) ) > 1.00 ) {',
+
+				'		gl_FragColor = texture2D( mapLeft, uv );',
+
+				'	} else {',
+
+				'		gl_FragColor = texture2D( mapRight, uv );',
+
+				'	}',
+
+				'	#include <tonemapping_fragment>',
+				'	#include <colorspace_fragment>',
+
+				'}'
+
+			].join( '\n' )
+
+		} );
+
+		const _quad = new FullScreenQuad( _material );
+
+		this.setSize = function ( width, height ) {
+
+			renderer.setSize( width, height );
+
+			const pixelRatio = renderer.getPixelRatio();
+
+			_renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
+			_renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
+
+		};
+
+		this.render = function ( scene, camera ) {
+
+			const currentRenderTarget = renderer.getRenderTarget();
+
+			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+
+			_stereo.update( camera );
+
+			renderer.setRenderTarget( _renderTargetL );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraL );
+
+			renderer.setRenderTarget( _renderTargetR );
+			renderer.clear();
+			renderer.render( scene, _stereo.cameraR );
+
+			renderer.setRenderTarget( null );
+			_quad.render( renderer );
+
+			renderer.setRenderTarget( currentRenderTarget );
+
+		};
+
+		this.dispose = function () {
+
+			_renderTargetL.dispose();
+			_renderTargetR.dispose();
+
+			_material.dispose();
+			_quad.dispose();
+
+		};
+
+	}
+
+}
+
+export { ParallaxBarrierEffect };

diplomacy/animation/node_modules/three/examples/jsm/effects/PeppersGhostEffect.js

@@ -0,0 +1,153 @@
+import {
+	PerspectiveCamera,
+	Quaternion,
+	Vector3
+} from 'three';
+
+/**
+ * peppers ghost effect based on http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS
+ */
+
+class PeppersGhostEffect {
+
+	constructor( renderer ) {
+
+		const scope = this;
+
+		scope.cameraDistance = 15;
+		scope.reflectFromAbove = false;
+
+		// Internals
+		let _halfWidth, _width, _height;
+
+		const _cameraF = new PerspectiveCamera(); //front
+		const _cameraB = new PerspectiveCamera(); //back
+		const _cameraL = new PerspectiveCamera(); //left
+		const _cameraR = new PerspectiveCamera(); //right
+
+		const _position = new Vector3();
+		const _quaternion = new Quaternion();
+		const _scale = new Vector3();
+
+		// Initialization
+		renderer.autoClear = false;
+
+		this.setSize = function ( width, height ) {
+
+			_halfWidth = width / 2;
+			if ( width < height ) {
+
+				_width = width / 3;
+				_height = width / 3;
+
+			} else {
+
+				_width = height / 3;
+				_height = height / 3;
+
+			}
+
+			renderer.setSize( width, height );
+
+		};
+
+		this.render = function ( scene, camera ) {
+
+			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+
+			camera.matrixWorld.decompose( _position, _quaternion, _scale );
+
+			// front
+			_cameraF.position.copy( _position );
+			_cameraF.quaternion.copy( _quaternion );
+			_cameraF.translateZ( scope.cameraDistance );
+			_cameraF.lookAt( scene.position );
+
+			// back
+			_cameraB.position.copy( _position );
+			_cameraB.quaternion.copy( _quaternion );
+			_cameraB.translateZ( - ( scope.cameraDistance ) );
+			_cameraB.lookAt( scene.position );
+			_cameraB.rotation.z += 180 * ( Math.PI / 180 );
+
+			// left
+			_cameraL.position.copy( _position );
+			_cameraL.quaternion.copy( _quaternion );
+			_cameraL.translateX( - ( scope.cameraDistance ) );
+			_cameraL.lookAt( scene.position );
+			_cameraL.rotation.x += 90 * ( Math.PI / 180 );
+
+			// right
+			_cameraR.position.copy( _position );
+			_cameraR.quaternion.copy( _quaternion );
+			_cameraR.translateX( scope.cameraDistance );
+			_cameraR.lookAt( scene.position );
+			_cameraR.rotation.x += 90 * ( Math.PI / 180 );
+
+
+			renderer.clear();
+			renderer.setScissorTest( true );
+
+			renderer.setScissor( _halfWidth - ( _width / 2 ), ( _height * 2 ), _width, _height );
+			renderer.setViewport( _halfWidth - ( _width / 2 ), ( _height * 2 ), _width, _height );
+
+			if ( scope.reflectFromAbove ) {
+
+				renderer.render( scene, _cameraB );
+
+			} else {
+
+				renderer.render( scene, _cameraF );
+
+			}
+
+			renderer.setScissor( _halfWidth - ( _width / 2 ), 0, _width, _height );
+			renderer.setViewport( _halfWidth - ( _width / 2 ), 0, _width, _height );
+
+			if ( scope.reflectFromAbove ) {
+
+				renderer.render( scene, _cameraF );
+
+			} else {
+
+				renderer.render( scene, _cameraB );
+
+			}
+
+			renderer.setScissor( _halfWidth - ( _width / 2 ) - _width, _height, _width, _height );
+			renderer.setViewport( _halfWidth - ( _width / 2 ) - _width, _height, _width, _height );
+
+			if ( scope.reflectFromAbove ) {
+
+				renderer.render( scene, _cameraR );
+
+			} else {
+
+				renderer.render( scene, _cameraL );
+
+			}
+
+			renderer.setScissor( _halfWidth + ( _width / 2 ), _height, _width, _height );
+			renderer.setViewport( _halfWidth + ( _width / 2 ), _height, _width, _height );
+
+			if ( scope.reflectFromAbove ) {
+
+				renderer.render( scene, _cameraL );
+
+			} else {
+
+				renderer.render( scene, _cameraR );
+
+			}
+
+			renderer.setScissorTest( false );
+
+		};
+
+	}
+
+}
+
+export { PeppersGhostEffect };

diplomacy/animation/node_modules/three/examples/jsm/effects/StereoEffect.js

@@ -0,0 +1,60 @@
+import {
+	StereoCamera,
+	Vector2
+} from 'three';
+
+class StereoEffect {
+
+	constructor( renderer ) {
+
+		const _stereo = new StereoCamera();
+		_stereo.aspect = 0.5;
+		const size = new Vector2();
+
+		this.setEyeSeparation = function ( eyeSep ) {
+
+			_stereo.eyeSep = eyeSep;
+
+		};
+
+		this.setSize = function ( width, height ) {
+
+			renderer.setSize( width, height );
+
+		};
+
+		this.render = function ( scene, camera ) {
+
+			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+
+			_stereo.update( camera );
+
+			const currentAutoClear = renderer.autoClear;
+			renderer.getSize( size );
+
+			renderer.autoClear = false;
+			renderer.clear();
+
+			renderer.setScissorTest( true );
+
+			renderer.setScissor( 0, 0, size.width / 2, size.height );
+			renderer.setViewport( 0, 0, size.width / 2, size.height );
+			renderer.render( scene, _stereo.cameraL );
+
+			renderer.setScissor( size.width / 2, 0, size.width / 2, size.height );
+			renderer.setViewport( size.width / 2, 0, size.width / 2, size.height );
+			renderer.render( scene, _stereo.cameraR );
+
+			renderer.setScissorTest( false );
+
+			renderer.autoClear = currentAutoClear;
+
+		};
+
+	}
+
+}
+
+export { StereoEffect };