3D effect for DigDig.IO
À partir de
// ==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();
} )();