☰

DigDig.IO 3D Effect

3D effect for DigDig.IO

  1. // ==UserScript==
  2. // @name         DigDig.IO 3D Effect
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.2
  5. // @description  3D effect for DigDig.IO
  6. // @author       Zertalious (Zert)
  7. // @match        *://digdig.io/*
  8. // @icon         https://www.google.com/s2/favicons?domain=digdig.io
  9. // @require      https://unpkg.com/three@latest/build/three.min.js
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. const CTX = CanvasRenderingContext2D.prototype;
  14.  
  15. CTX.createPattern = new Proxy( CTX.createPattern, {
  16. 	apply( target, thisArgs, args ) {
  17.  
  18. 		console.log( args );
  19.  
  20. 		return Reflect.apply( ...arguments );
  21.  
  22. 	}
  23. } )
  24.  
  25. const canvas = document.getElementById( 'canvas' );
  26. canvas.style.opacity = '0';
  27.  
  28. const renderer = new THREE.WebGLRenderer( { alpha: true, preserveDrawingBuffer: true } );
  29.  
  30. renderer.domElement.style.position = 'absolute';
  31. renderer.domElement.style.left = '0';
  32. renderer.domElement.style.top = '0';
  33. renderer.domElement.style.pointerEvents = 'none';
  34.  
  35. renderer.setPixelRatio( window.devicePixelRatio );
  36. renderer.setSize( window.innerWidth, window.innerHeight );
  37.  
  38. document.body.insertBefore( renderer.domElement, canvas );
  39.  
  40. const scene = new THREE.Scene();
  41.  
  42. const camera = new THREE.PerspectiveCamera( 60, 1, 0.1, 10 );
  43. camera.position.z = Math.sin( camera.fov * Math.PI / 180 ) * 2;
  44.  
  45. const texture = new THREE.CanvasTexture( canvas );
  46. texture.minFilter = texture.magFilter = THREE.NearestFilter;
  47.  
  48. const material = new THREE.RawShaderMaterial( {
  49.     vertexShader: `
  50.  
  51. 		attribute vec3 position;
  52.  
  53. 		varying vec3 vPosition;
  54.  
  55. 		void main() {
  56.  
  57. 			vPosition = position;
  58.  
  59. 			gl_Position = vec4( position, 1.0 );
  60.  
  61. 		}
  62.  
  63. 		`,
  64.     fragmentShader: `
  65.  
  66. 		precision mediump float;
  67.  
  68. 		uniform sampler2D map;
  69. 		uniform float depth;
  70.  
  71. 		uniform mat4 modelViewMatrix;
  72. 		uniform mat4 projectionMatrix;
  73.  
  74. 		varying vec3 vPosition;
  75.  
  76. 		void main() {
  77.  
  78. 			vec3 groundColor = vec3( 0.32, 0.18, 0.0 );
  79.  
  80. 			vec4 a;
  81.  
  82. 			const int count = 20;
  83.  
  84. 			for ( int i = 0; i <= count; i ++ ) {
  85.  
  86. 				vec4 p = projectionMatrix * modelViewMatrix * vec4( vec3( vPosition.xy, float( i ) / float( count ) * depth ), 1.0 );
  87.  
  88. 				vec4 b = texture2D( map, p.xy / p.w * 0.5 + 0.5 );
  89.  
  90. 				if ( length( b.rgb - groundColor ) < 0.1 ) {
  91.  
  92. 					if ( i != count ) {
  93.  
  94. 						b.a = 0.0;
  95.  
  96. 					}
  97.  
  98. 				} else if ( i != 0 ) {
  99.  
  100. 					b.rgb = groundColor * 0.8;
  101.  
  102. 				}
  103.  
  104. 				a.rgb = a.rgb * a.a + b.rgb * b.a * ( 1.0 - a.a );
  105. 				a.a = a.a + b.a * ( 1.0 - a.a );
  106.  
  107. 			}
  108.  
  109. 			gl_FragColor = a;
  110.  
  111. 		}
  112.  
  113. 		`,
  114.     uniforms: {
  115.         map: {
  116.             value: texture
  117.         },
  118.         depth: {
  119.             value: 0.25
  120.         }
  121.     }
  122. } );
  123.  
  124. const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), material );
  125. scene.add( mesh );
  126.  
  127. window.addEventListener( 'resize', function () {
  128.  
  129. 	renderer.setSize( window.innerWidth, window.innerHeight );
  130.  
  131. 	renderer.render( scene, camera );
  132.  
  133. } );
  134.  
  135. function animate() {
  136.  
  137. 	requestAnimationFrame( animate );
  138.  
  139. 	texture.needsUpdate = true;
  140.  
  141. 	renderer.render( scene, camera );
  142.  
  143. }
  144.  
  145. animate();