DigDig.IO Glow Effect

Makes the lava, diamonds, and gold glow in digdig.io
目前为 2021-07-10 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         DigDig.IO Glow Effect
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Makes the lava, diamonds, and gold glow in digdig.io 
// @author       Zertalious (Zert)
// @match        *://digdig.io/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @require      https://unpkg.com/three@latest/build/three.min.js
// @require      https://unpkg.com/three@latest/examples/js/postprocessing/EffectComposer.js
// @require      https://unpkg.com/three@latest/examples/js/postprocessing/RenderPass.js
// @require      https://unpkg.com/three@latest/examples/js/postprocessing/UnrealBloomPass.js
// @require      https://unpkg.com/three@latest/examples/js/postprocessing/ShaderPass.js
// @require      https://unpkg.com/three@latest/examples/js/shaders/LuminosityHighPassShader.js
// @require      https://unpkg.com/three@latest/examples/js/shaders/CopyShader.js
// ==/UserScript==

( function () {

	const canvas = document.getElementById( 'canvas' );
	canvas.style.opacity = '0';

	const params = {
		exposure: 1,
		bloomStrength: 0.5,
		bloomThreshold: 0,
		bloomRadius: 0
	};

	const renderer = new THREE.WebGLRenderer( { alpha: true } );

	renderer.domElement.style.position = 'absolute';
	renderer.domElement.style.left = '0';
	renderer.domElement.style.top = '0';
	renderer.domElement.style.pointerEvents = 'none';

	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );

	document.body.insertBefore( renderer.domElement, canvas );

	const scene = new THREE.Scene();
	const camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 100 );

	camera.position.z = 5;

	const texture = new THREE.CanvasTexture( canvas );

	const maskMaterial = new THREE.MeshBasicMaterial( { map: texture } );

	maskMaterial.onBeforeCompile = function ( shader ) {

		const diamond = '#31a59e';
		const gold = '#a59e15';
		const lava = '#a61906';

		const array = [ diamond, gold, lava ];

		let text = '';

		for ( let i = 0; i < array.length; i ++ ) {

			const hex = array[ i ];

			const r = parseInt( hex.slice( 1, 3 ), 16 ) / 255;
			const g = parseInt( hex.slice( 3, 5 ), 16 ) / 255;
			const b = parseInt( hex.slice( 5, 7 ), 16 ) / 255;
			
			text += 'length(vec3(' + r + ', ' + g + ', ' + b + ') - gl_FragColor.rgb) > 0.1';

			if ( i < array.length - 1 ) {

				text += ' && ';

			}

		}

		console.log( { text } );

		shader.fragmentShader = shader.fragmentShader.replace( '}', 'if (' + text + ') discard;}' );

	}

	const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), maskMaterial );
	scene.add( mesh );

	const renderScene = new THREE.RenderPass( scene, camera );

	const bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
	bloomPass.threshold = params.bloomThreshold;
	bloomPass.strength = params.bloomStrength;
	bloomPass.radius = params.bloomRadius;

	const finalPass = new THREE.ShaderPass(
		new THREE.ShaderMaterial( {
			uniforms: {
				baseTexture: { value: null }, 
				originalTexture: { value: texture }
			},
			vertexShader: `

			varying vec2 vUv;

			void main() {

				vUv = uv;

				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

			}

			`,
			fragmentShader: `

			uniform sampler2D baseTexture;
			uniform sampler2D originalTexture;

			varying vec2 vUv;

			void main() {

				gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( originalTexture, vUv ) );

			}

			`,
			defines: {}
		} ), "baseTexture"
	);
	finalPass.needsSwap = true;

	composer = new THREE.EffectComposer( renderer );
	composer.addPass( renderScene );
	composer.addPass( bloomPass );
	composer.addPass( finalPass );

	window.addEventListener( 'resize', function () {
		
		const width = window.innerWidth;
		const height = window.innerHeight;

		camera.aspect = width / height;
		camera.updateProjectionMatrix();

		renderer.setSize( width, height );
		composer.setSize( width, height );

	} );

	function animate() {

		bloomPass.strength = ( Math.sin( Date.now() / 150 ) * 0.5 + 0.5 ) * 0.75 + 0.5;

		requestAnimationFrame( animate );

		texture.needsUpdate = true;

		composer.render();

	}

	animate();

} )();