☰

Arras.IO/Diep.IO 3D Effect

3D effect for arras.io and diep.io. No performance issues!

  1. // ==UserScript==
  2. // @name         Arras.IO/Diep.IO 3D Effect
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.0.1
  5. // @description  3D effect for arras.io and diep.io. No performance issues!
  6. // @author       Zertalious (Zert)
  7. // @match        *://diep.io/*
  8. // @match        *://arras.io/*
  9. // @icon         https://www.google.com/s2/favicons?domain=diep.io
  10. // @grant        none
  11. // @require      https://unpkg.com/three@latest/build/three.min.js
  12. // @run-at       document-end
  13. // ==/UserScript==
  14.  
  15. window.Image = new Proxy( window.Image, {
  16. 	construct() {
  17.  
  18. 		const result = Reflect.construct( ...arguments ); 
  19.  
  20. 		result.crossOrigin = 'anonymous';
  21.  
  22. 		return result;
  23.  
  24. 	}
  25. } );
  26.  
  27. const canvas = document.getElementById( 'canvas' );
  28.  
  29. canvas.style.opacity = '0';
  30.  
  31. const renderer = new THREE.WebGLRenderer( { alpha: true } );
  32.  
  33. renderer.setPixelRatio( window.devicePixelRatio );
  34. renderer.setSize( window.innerWidth, window.innerHeight );
  35.  
  36. renderer.domElement.style.position = 'absolute';
  37. renderer.domElement.style.left = '0';
  38. renderer.domElement.style.top = '0';
  39. renderer.domElement.style.pointerEvents = 'none';
  40.  
  41. canvas.parentNode.insertBefore( renderer.domElement, canvas );
  42.  
  43. const scene = new THREE.Scene();
  44.  
  45. scene.background = new THREE.Color( 'red' );
  46.  
  47. const camera = new THREE.PerspectiveCamera( 60, 1, 0.1, 1000 );
  48.  
  49. camera.position.z = Math.sin( Math.PI / 3 ) * 2;
  50.  
  51. const texture = new THREE.CanvasTexture( canvas );
  52.  
  53. texture.minFilter = texture.magFilter = THREE.LinearFilter;
  54.  
  55. const material = new THREE.RawShaderMaterial( {
  56. 	vertexShader: `
  57.  
  58. 		attribute vec3 position;
  59.  
  60. 		varying vec3 vPosition;
  61.  
  62. 		void main() {
  63.  
  64. 			vPosition = position;
  65.  
  66. 			gl_Position = vec4( position, 1.0 );
  67.  
  68. 		}
  69.  
  70. 		`,
  71. 	fragmentShader: `
  72.  
  73. 		precision mediump float;
  74.  
  75. 		uniform sampler2D mainTexture;
  76. 		uniform float depth;
  77.  
  78. 		uniform mat4 modelViewMatrix;
  79. 		uniform mat4 projectionMatrix;
  80.  
  81. 		varying vec3 vPosition;
  82.  
  83. 		void main() {
  84.  
  85. 			vec3 groundColor = vec3( 0.803921568627451, 0.803921568627451, 0.803921568627451 );
  86. 			vec3 red = vec3( 0.8666666666666667, 0.6745098039215687, 0.6784313725490196 );
  87. 		
  88. 			vec4 a, b;
  89.  
  90. 			const int count = 20;
  91.  
  92. 			for ( int i = 0; i <= count; i ++ ) {
  93.  
  94. 				vec3 position = vec3( vPosition.xy, float( i ) / float( count ) * depth );
  95.  
  96. 				vec4 transformed = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  97.  
  98. 				vec2 uv = transformed.xy / transformed.w * 0.5 + 0.5;
  99.  
  100. 				if ( uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0 ) {
  101.  
  102. 					b = vec4( groundColor, 1.0 ); 
  103.  
  104. 				} else {
  105.  
  106. 					b = texture2D( mainTexture, uv );
  107.  
  108. 				}
  109.  
  110. 				if ( length( b.rgb - groundColor ) < 0.22 || length( b.rgb - red ) < 0.1 ) {
  111.  
  112. 					if ( i != count ) {
  113.  
  114. 						b.a = 0.0;
  115.  
  116. 					}
  117.  
  118. 				} else if ( i != 0 ) {
  119.  
  120. 					b.rgb = groundColor * 0.8;
  121.  
  122. 				}
  123.  
  124. 				a.rgb = a.rgb * a.a + b.rgb * b.a * ( 1.0 - a.a );
  125. 				a.a = a.a + b.a * ( 1.0 - a.a );
  126.  
  127. 			}
  128.  
  129. 			gl_FragColor = a;
  130.  
  131. 		}
  132.  
  133. 		`,
  134. 		uniforms: {
  135. 		mainTexture: { value: texture },
  136. 		depth: { value: 0.2 }
  137.     }
  138. } );
  139.  
  140. const geometry = new THREE.PlaneGeometry( 2, 2 );
  141.  
  142. const mesh = new THREE.Mesh( geometry, material );
  143. scene.add( mesh );
  144.  
  145. window.addEventListener( 'resize', function () {
  146.  
  147. 	renderer.setSize( window.innerWidth, window.innerHeight );
  148.  
  149. }, false );
  150.  
  151. function animate() {
  152.  
  153. 	texture.needsUpdate = true;
  154.  
  155. 	renderer.render( scene, camera );
  156.  
  157. 	window.requestAnimationFrame( animate );
  158.  
  159. }
  160.  
  161. animate();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址