Makes the lava, diamonds, and gold glow in digdig.io
Від
// ==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();
} )();