DigDig.IO 3D Effect

3D effect for DigDig.IO
目前為 2021-07-11 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         DigDig.IO 3D Effect
// @namespace    http://tampermonkey.net/
// @version      0.1.1
// @description  3D effect for DigDig.IO
// @author       Zertalious (Zert)
// @match        *://digdig.io/
// @icon         https://www.google.com/s2/favicons?domain=digdig.io
// @require      https://unpkg.com/three@latest/build/three.min.js
// ==/UserScript==

( function () {

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

	CanvasRenderingContext2D.prototype.fillRect = new Proxy( CanvasRenderingContext2D.prototype.fillRect, {
		apply( target, thisArgs, args ) {

			if ( thisArgs.globalAlpha < 1 && args[ 3 ] > 50 ) {

				return;

			}

			return Reflect.apply( ...arguments );

		}
	} );

	const renderer = new THREE.WebGLRenderer( { alpha: true, preserveDrawingBuffer: 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.PerspectiveCamera( 60, 1, 0.1, 1000 );

	camera.position.z = Math.sin( Math.PI / 3 );

	const texture = new THREE.CanvasTexture( canvas );
	texture.minFilter = texture.magFilter = THREE.NearestFilter;

	const material = new THREE.RawShaderMaterial( {
		vertexShader: `

		precision mediump float;

		attribute vec3 position;
		attribute vec2 uv;

		uniform mat4 projectionMatrix;
		uniform mat4 modelViewMatrix;

		uniform vec3 ground;
		uniform sampler2D texture;
		uniform float groundDepth;

		varying vec2 vUv;
		varying float vDepth;

		void main() {

			vec4 p = vec4( position, 1.0 );

			vec3 texColor = texture2D( texture, uv ).rgb;

			if ( length( ground - texColor ) < 0.05 ) p.z -= groundDepth;

			vDepth = - p.z;

			gl_Position = projectionMatrix * modelViewMatrix * p;
			vUv = uv;

		}

		`,
		fragmentShader: `

		precision mediump float;

		uniform sampler2D texture;
		uniform vec3 ground;
		uniform float groundDepth;

		varying vec2 vUv;
		varying float vDepth;

		void main() {

			if ( vDepth > 0.0 && vDepth < groundDepth ) {

				gl_FragColor = vec4( ground * 0.8, 1.0 );

			} else {

				gl_FragColor = texture2D( texture, vUv );

			}

		}

		`,
		uniforms: {
			texture: { value: texture },
			ground: { value: new THREE.Color( '#522e00' ) },
			groundDepth: { value: 0.10 }
		}
	} );

	scene.background = material.uniforms.ground.value;

	const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1, 500, 500 ), material );
	scene.add( mesh );

	window.addEventListener( 'resize', function () {

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

		renderer.render( scene, camera );

	} );

	function animate() {

		requestAnimationFrame( animate );

		texture.needsUpdate = true;

		renderer.render( scene, camera );

	}

	animate();

} )();
欢迎访问Greasy Fork镜像
