☰

Diep.IO 3D

Turns diep.io into real 3D

  1. // ==UserScript==
  2. // @name         Diep.IO 3D
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.0.8
  5. // @description  Turns diep.io into real 3D
  6. // @author       Zertalious (Zert)
  7. // @match        *://diep.io/*
  8. // @icon         https://www.google.com/s2/favicons?domain=diep.io
  9. // @grant        none
  10. // @require      https://unpkg.com/three@0.130.0/build/three.min.js
  11. // @require      https://unpkg.com/three@0.130.0/examples/js/controls/OrbitControls.js
  12. // @run-at       document-start
  13. // ==/UserScript==
  14.  
  15. const OUTLINE_LAYER = 0;
  16. const MAIN_LAYER = 1;
  17.  
  18. let canvas = {};
  19.  
  20. let renderer, scene, camera;
  21. let ortho;
  22.  
  23. let currentCamera;
  24.  
  25. let controls;
  26.  
  27. init();
  28.  
  29. const tempObject = new THREE.Object3D();
  30. const tempColor = new THREE.Color();
  31.  
  32. const materialParams = { transparent: true };
  33.  
  34. let materialIndex = 0;
  35.  
  36. const outlineMaterial = new THREE.MeshBasicMaterial( materialParams );
  37.  
  38. const materials = [
  39. 	new THREE.MeshToonMaterial( materialParams ), 
  40. 	new THREE.MeshLambertMaterial( materialParams ),
  41. 	new THREE.MeshPhongMaterial( materialParams ), 
  42. 	outlineMaterial
  43. ];
  44.  
  45. function onBeforeCompile( shader ) {
  46.  
  47. 	shader.vertexShader = shader.vertexShader.replace( 'void', `
  48.  
  49. 		attribute vec2 scale;
  50. 		attribute float alpha;
  51.  
  52. 		varying float vAlpha;
  53.  
  54. 	void` ).replace( '<begin_vertex>', `<begin_vertex>
  55.  
  56. 		if ( scale.x != 0.0 && scale.y != 0.0 ) {
  57.  
  58. 			if ( transformed.x == 1.0 || transformed.x == 0.5 ) {
  59.  
  60. 				transformed.yz *= scale.x;
  61.  
  62. 			} else if ( transformed.x == - 1.0 || transformed.x == - 0.5 ) {
  63.  
  64. 				transformed.yz *= scale.y;
  65.  
  66. 			}
  67.  
  68. 		}
  69.  
  70. 		vAlpha = alpha;
  71.  
  72. 	` );
  73.  
  74. 	shader.fragmentShader = shader.fragmentShader.replace( 'void', `
  75.  
  76. 		varying float vAlpha;
  77.  
  78. 	void` ).replace( '}', `
  79.  
  80. 		gl_FragColor.a *= vAlpha;
  81.  
  82. 	}` );
  83.  
  84. }
  85.  
  86. for ( let i = 0; i < materials.length; i ++ ) {
  87.  
  88. 	materials[ i ].onBeforeCompile = onBeforeCompile;
  89.  
  90. }
  91.  
  92. const instances = {};
  93.  
  94. const array = [ {
  95. 	name: 'sphere', 
  96. 	geometry: new THREE.SphereGeometry( 1, 16 ), 
  97. 	count: 150
  98. }, {
  99. 	name: 'cylinder', 
  100. 	geometry: new THREE.CylinderGeometry( 0.5, 0.5, 1, 16 ).rotateZ( Math.PI / 2 ), 
  101. 	count: 75, 
  102. 	hasScaling: true
  103. }, {
  104. 	name: 'poly3', 
  105. 	geometry: new THREE.CylinderGeometry( 1, 1, 1, 3, 1, false, - Math.PI / 6 ).rotateX( Math.PI / 2 ), 
  106. 	count: 75
  107. }, {
  108. 	name: 'poly4', 
  109. 	geometry: new THREE.BoxGeometry( 1, 1, 1 ), 
  110. 	count: 75
  111. }, {
  112. 	name: 'poly5', 
  113. 	geometry: new THREE.CylinderGeometry( 1, 1, 1, 5, 1, false, Math.PI / 10 ).rotateX( Math.PI / 2 ), 
  114. 	count: 40
  115. }, {
  116. 	name: 'poly6', 
  117. 	geometry: new THREE.CylinderGeometry( 1, 1, 1, 6, 1, false, - Math.PI / 12 ).rotateX( Math.PI / 2 ),
  118. 	count: 10
  119. } ];
  120.  
  121. for ( let i = 0; i < array.length; i ++ ) {
  122.  
  123. 	const { name, geometry, count, hasScaling } = array[ i ];
  124.  
  125. 	if ( hasScaling ) {
  126.  
  127. 		geometry.setAttribute( 'scale', new THREE.InstancedBufferAttribute( new Float32Array( count * 2 ), 2 ) );
  128.  
  129. 	}
  130.  
  131. 	geometry.setAttribute( 'alpha', new THREE.InstancedBufferAttribute( new Float32Array( count ), 1 ) );
  132.  
  133. 	const main = new THREE.InstancedMesh( geometry, materials[ materialIndex ], count );
  134. 	main.layers.set( MAIN_LAYER );
  135. 	scene.add( main );
  136.  
  137. 	const outline = new THREE.InstancedMesh( geometry, outlineMaterial, count );
  138. 	outline.layers.set( OUTLINE_LAYER );
  139. 	scene.add( outline );
  140.  
  141. 	main.setColorAt( 0, tempColor );
  142. 	outline.setColorAt( 0, tempColor );
  143.  
  144. 	instances[ name ] = {
  145. 		main, 
  146. 		outline, 
  147. 		count, 
  148. 		hasScaling, 
  149. 		index: 0
  150. 	};
  151.  
  152. }
  153.  
  154. const stack = [];
  155.  
  156. function getStack( index ) {
  157.  
  158. 	const result = stack[ stack.length - 1 - index ];
  159.  
  160. 	if ( result ) {
  161.  
  162. 		return result;
  163.  
  164. 	}
  165.  
  166. 	return { name: 'none' };
  167.  
  168. }
  169.  
  170. function setObject( name, x, y, z, sx, sy, sz, angle, color, alpha = 1, scaleX = 1, scaleY = 1 ) {
  171.  
  172. 	tempObject.position.set( x, y, z );
  173. 	tempObject.scale.set( sx, sy, sz );
  174. 	tempObject.rotation.set( 0, 0, angle );
  175.  
  176. 	tempObject.updateMatrix();
  177.  
  178. 	tempColor.set( color );
  179.  
  180. 	const instance = instances[ name ];
  181.  
  182. 	instance.main.setMatrixAt( instance.index, tempObject.matrix );
  183. 	instance.main.setColorAt( instance.index, tempColor );
  184.  
  185. 	instance.main.geometry.attributes.alpha.setX( instance.index, alpha );
  186. 	instance.outline.geometry.attributes.alpha.setX( instance.index, alpha );
  187.  
  188. 	const outlineSize = 4 / window.innerHeight * ( name === 'sphere' ? 0.7 : 1 );
  189.  
  190. 	if ( instance.hasScaling ) {
  191.  
  192. 		tempObject.scale.x += outlineSize;
  193. 		tempObject.scale.y += outlineSize / scaleY;
  194. 		tempObject.scale.z += outlineSize / scaleY;
  195.  
  196. 	} else {
  197.  
  198. 		tempObject.scale.addScalar( outlineSize );
  199.  
  200. 	}
  201.  
  202. 	tempObject.updateMatrix();
  203.  
  204. 	tempColor.multiplyScalar( 0.6 );
  205.  
  206. 	instance.outline.setMatrixAt( instance.index, tempObject.matrix );
  207. 	instance.outline.setColorAt( instance.index, tempColor );
  208.  
  209. 	if ( instance.hasScaling ) {
  210.  
  211. 		instance.main.geometry.attributes.scale.setXY( instance.index, scaleX, scaleY );
  212. 		instance.outline.geometry.attributes.scale.setXY( instance.index, scaleX, scaleY );
  213.  
  214. 	}
  215.  
  216. 	instance.index ++;
  217.  
  218. 	stack.push( { name, x, y, z, sx, sy, sz, angle, color, outlineSize, alpha } );
  219.  
  220. }
  221.  
  222. function init() {
  223.  
  224. 	window.addEventListener( 'DOMContentLoaded', function () {
  225. 	
  226. 		canvas = document.getElementById( 'canvas' );
  227.  
  228. 		renderer = new THREE.WebGLRenderer( { 
  229. 			antialias: true, 
  230. 			alpha: true 
  231. 		} );
  232.  
  233. 		renderer.autoClear = false;
  234.  
  235. 		renderer.setPixelRatio( window.devicePixelRatio );
  236. 		renderer.setSize( canvas.width, canvas.height, false );
  237.  
  238. 		controls = new THREE.OrbitControls( camera, canvas );
  239.  
  240. 		controls.enabled = false;
  241.  
  242. 		window.addEventListener( 'resize', onWindowResize );
  243. 	
  244. 	} );
  245.  
  246. 	scene = new THREE.Scene();
  247.  
  248. 	camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
  249.  
  250. 	ortho = new THREE.OrthographicCamera( - camera.aspect / 2, camera.aspect / 2, 0.5, - 0.5, 0, 1000 );
  251.  
  252. 	currentCamera = camera;
  253.  
  254. 	const oldZ = Math.sin( Math.PI / 3 );
  255. 	camera.position.z = ortho.position.z = oldZ;
  256.  
  257. 	const ambLight = new THREE.AmbientLight( 0xffffff, 0.5 );
  258. 	ambLight.layers.set( MAIN_LAYER );
  259. 	scene.add( ambLight );
  260.  
  261. 	const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
  262. 	dirLight.layers.set( MAIN_LAYER );
  263. 	dirLight.position.z = 1;
  264. 	scene.add( dirLight );
  265.  
  266. 	window.addEventListener( 'keyup', function ( event ) {
  267.  
  268. 		const key = String.fromCharCode( event.keyCode );
  269.  
  270. 		if ( key === 'V' ) {
  271.  
  272. 			controls.enabled = ! controls.enabled;
  273.  
  274. 			if ( ! controls.enabled ) {
  275.  
  276. 				camera.position.set( 0, 0, oldZ );
  277. 				camera.rotation.set( 0, 0, 0 );
  278.  
  279. 				controls.target.set( 0, 0, 0 );
  280.  
  281. 				ortho.position.set( 0, 0, oldZ );
  282. 				ortho.rotation.set( 0, 0, 0 );
  283.  
  284. 				ortho.zoom = 1;
  285.  
  286. 			}
  287.  
  288. 		} else if ( key === 'P' ) {
  289.  
  290. 			currentCamera = currentCamera === camera ? ortho : camera;
  291.  
  292. 			currentCamera.position.copy( controls.object.position );
  293. 			currentCamera.rotation.copy( controls.object.rotation );
  294.  
  295. 			controls.object = currentCamera;
  296.  
  297. 		} else if ( key === 'B' ) {
  298.  
  299. 			materialIndex = ( materialIndex + 1 ) % materials.length;
  300.  
  301. 			for ( let key in instances ) {
  302.  
  303. 				instances[ key ].main.material = materials[ materialIndex ];
  304.  
  305. 			}
  306.  
  307. 		}
  308.  
  309. 	} );
  310.  
  311. }
  312.  
  313. function onWindowResize() {
  314.  
  315. 	renderer.setSize( canvas.width, canvas.height, false );
  316. 	
  317. 	camera.aspect = canvas.width / canvas.height;
  318. 	camera.updateProjectionMatrix();
  319.  
  320. 	ortho.left = - camera.aspect / 2;
  321. 	ortho.right = camera.aspect / 2;
  322. 	ortho.updateProjectionMatrix();
  323.  
  324. }
  325.  
  326. window.requestAnimationFrame = new Proxy( window.requestAnimationFrame, {
  327. 	apply( target, thisArgs, args ) {
  328.  
  329. 		args[ 0 ] = new Proxy( args[ 0 ], {
  330. 			apply( target, thisArgs, args ) {
  331.  
  332. 				stack.length = 0;
  333.  
  334. 				tempObject.position.setScalar( 0 );
  335. 				tempObject.scale.setScalar( 0 );
  336. 				tempObject.rotation.set( 0, 0, 0 );
  337.  
  338. 				tempObject.updateMatrix();
  339.  
  340. 				tempColor.setRGB( 0, 0, 0 );
  341.  
  342. 				for ( let key in instances ) {
  343.  
  344. 					const { main, outline, count, hasScaling } = instances[ key ];
  345.  
  346. 					for ( let i = 0; i < count; i ++ ) {
  347.  
  348. 						main.setMatrixAt( i, tempObject.matrix );
  349. 						outline.setMatrixAt( i, tempObject.matrix );
  350.  
  351. 					}
  352.  
  353. 					main.instanceMatrix.needsUpdate = true;
  354. 					main.instanceColor.needsUpdate = true;
  355.  
  356. 					outline.instanceMatrix.needsUpdate = true;
  357. 					outline.instanceColor.needsUpdate = true;
  358.  
  359. 					if ( hasScaling ) {
  360.  
  361. 						main.geometry.attributes.scale.needsUpdate = true;
  362. 						outline.geometry.attributes.scale.needsUpdate = true;
  363.  
  364. 					}
  365.  
  366. 					main.geometry.attributes.alpha.needsUpdate = true;
  367. 					outline.geometry.attributes.alpha.needsUpdate = true;
  368.  
  369. 					instances[ key ].index = 0;
  370.  
  371. 				}
  372.  
  373. 				arcCounter = 0;
  374. 				renderCounter = 0;
  375.  
  376. 				Reflect.apply( ...arguments );
  377.  
  378.  
  379. 			}
  380. 		} );
  381.  
  382. 		return Reflect.apply( ...arguments );
  383.  
  384. 	}
  385. } );
  386.  
  387. const Context2D = CanvasRenderingContext2D.prototype;
  388.  
  389. let arcCounter = 0;
  390.  
  391. Context2D.arc = new Proxy( Context2D.arc, {
  392. 	apply( target, thisArgs, args ) {
  393.  
  394. 		if ( args[ 4 ] === Math.PI * 2 ) {
  395.  
  396. 			if ( arcCounter === 0 ) {
  397.  
  398. 				const matrix = thisArgs.getTransform();
  399.  
  400. 				const r = matrix.a / canvas.height;
  401.  
  402. 				const x = ( matrix.e / canvas.width - 0.5 ) * camera.aspect;
  403. 				const y = 0.5 - matrix.f / canvas.height;
  404.  
  405. 				let z = 0;
  406.  
  407. 				const s0 = getStack( 0 );
  408. 				const s1 = getStack( 1 );
  409.  
  410. 				if ( s0.name === 'cylinder' && s1.name === 'sphere' && Math.hypot( x - s1.x, y - s1.y ) < 0.001 ) {
  411.  
  412. 					z = s1.sz;
  413.  
  414. 					const index = ( instances.cylinder.index - 1 ) * 16 + 14;
  415.  
  416. 					const newDepth = z + r - s0.sz / 2;
  417.  
  418. 					instances.cylinder.main.instanceMatrix.array[ index ] = newDepth;
  419. 					instances.cylinder.outline.instanceMatrix.array[ index ] = newDepth;
  420.  
  421. 				} else myBlock: {
  422.  
  423. 					if ( getStack( 0 ).name === 'cylinder' && 
  424. 						getStack( 1 ).name === 'sphere' && 
  425. 						getStack( 2 ).name === 'cylinder' &&
  426. 						getStack( 3 ).name === 'sphere' &&
  427. 						getStack( 4 ).name === 'cylinder' &&
  428. 						getStack( 5 ).name === 'poly3' &&
  429. 						getStack( 6 ).name === 'cylinder' ) {
  430.  
  431. 						z = getStack( 5 ).sz / 2;
  432.  
  433. 						const tr = getStack( 2 ).sz;
  434.  
  435. 						for ( let i = 0; i < 3; i ++ ) {
  436.  
  437. 							const index = ( instances.cylinder.index - 1 - i ) * 16 + 14;
  438.  
  439. 							const newDepth = z + r - tr / 2;
  440.  
  441. 							instances.cylinder.main.instanceMatrix.array[ index ] = newDepth;
  442. 							instances.cylinder.outline.instanceMatrix.array[ index ] = newDepth;
  443.  
  444. 						}
  445.  
  446. 						for ( let i = 0; i < 2; i ++ ) {
  447.  
  448. 							const index = ( instances.sphere.index - 1 - i ) * 16 + 14;
  449.  
  450. 							instances.sphere.main.instanceMatrix.array[ index ] = z;
  451. 							instances.sphere.outline.instanceMatrix.array[ index ] = z;
  452.  
  453. 						}
  454.  
  455. 						break myBlock;
  456.  
  457. 					}
  458.  
  459. 					for ( let i = 0; i < 5; i ++ ) {
  460.  
  461. 						if ( getStack( i ).name !== 'cylinder' ) {
  462.  
  463. 							break myBlock;
  464.  
  465. 						}
  466.  
  467. 					}
  468.  
  469. 					if ( getStack( 0 ).angle !== getStack( 2 ).angle ) {
  470.  
  471. 						break myBlock;
  472.  
  473. 					}
  474.  
  475. 					const a = r - getStack( 0 ).sy;
  476.  
  477. 					for ( let i = 0; i < 5; i ++ ) {
  478.  
  479. 						const index = ( instances.cylinder.index - 1 - i ) * 16 + 14;
  480.  
  481. 						const newDepth = a - a * 2 * i / 4;
  482.  
  483. 						instances.cylinder.main.instanceMatrix.array[ index ] = newDepth;
  484. 						instances.cylinder.outline.instanceMatrix.array[ index ] = newDepth;
  485.  
  486. 					}
  487.  
  488. 				}
  489.  
  490. 				checkIfIsMainCanvas( thisArgs, 'sphere' );
  491.  
  492. 				setObject( 
  493. 					'sphere',  
  494. 					x, 
  495. 					y, 
  496. 					z, 
  497. 					r, 
  498. 					r, 
  499. 					r, 
  500. 					0, 
  501. 					thisArgs.fillStyle, 
  502. 					thisArgs.globalAlpha
  503. 				);
  504.  
  505. 			} else if ( arcCounter === 1 ) {
  506.  
  507. 				tempColor.set( thisArgs.fillStyle );
  508. 				instances.sphere.main.setColorAt( instances.sphere.index - 1, tempColor );
  509.  
  510. 				tempColor.multiplyScalar( 0.6 );
  511. 				instances.sphere.outline.setColorAt( instances.sphere.index - 1, tempColor );
  512.  
  513. 			}
  514.  
  515. 			arcCounter = ( arcCounter + 1 ) % 3;
  516.  
  517. 		}
  518.  
  519. 		return Reflect.apply( ...arguments );
  520.  
  521. 	}
  522. } );
  523.  
  524. Context2D.rect = new Proxy( Context2D.rect, {
  525. 	apply( target, thisArgs, args ) {
  526.  
  527. 		const matrix = thisArgs.getTransform();
  528.  
  529. 		const isTurret = matrix.b !== 0 && matrix.c !== 0;
  530.  
  531. 		if ( isTurret || ( thisArgs.canvas === canvas && Math.hypot( matrix.c, matrix.d ) > 100 && thisArgs.globalAlpha === 1 ) ) {
  532.  
  533. 			const center = new DOMPoint( 0.5, 0.5 ).matrixTransform( matrix );
  534.  
  535. 			const scaleYZ = Math.hypot( matrix.c, matrix.d ) / canvas.height;
  536.  
  537. 			const name = isTurret ? 'cylinder' : 'poly4';
  538.  
  539. 			checkIfIsMainCanvas( thisArgs, name );
  540.  
  541. 			setObject(
  542. 				name, 
  543. 				( center.x / canvas.width - 0.5 ) * camera.aspect, 
  544. 				0.5 - center.y / canvas.height, 
  545. 				isTurret ? 0 : 0.05, 
  546. 				Math.hypot( matrix.a, matrix.b ) / canvas.height, 
  547. 				scaleYZ, 
  548. 				isTurret ? scaleYZ : 0.1, 
  549. 				Math.atan2( matrix.c, matrix.d ), 
  550. 				thisArgs.fillStyle, 
  551. 				thisArgs.globalAlpha
  552. 			);
  553.  
  554. 		}
  555.  
  556. 		return Reflect.apply( ...arguments );
  557.  
  558. 	}
  559. } );
  560.  
  561. const points = [];
  562. let hasCurve = true;
  563.  
  564. Context2D.beginPath = new Proxy( Context2D.beginPath, {
  565. 	apply( target, thisArgs, args ) {
  566.  
  567. 		points.length = 0;
  568. 		hasCurve = false;
  569.  
  570. 		return Reflect.apply( ...arguments );
  571.  
  572. 	}
  573. } );
  574.  
  575. const addPoint = {
  576. 	apply( target, thisArgs, [ x, y ] ) {
  577.  
  578. 		points.push( new DOMPoint( x, y ).matrixTransform( thisArgs.getTransform() ) );
  579.  
  580. 		return Reflect.apply( ...arguments );
  581.  
  582. 	}
  583. };
  584.  
  585. Context2D.moveTo = new Proxy( Context2D.moveTo, addPoint );
  586. Context2D.lineTo = new Proxy( Context2D.lineTo, addPoint );
  587.  
  588. Context2D.arc = new Proxy( Context2D.arc, {
  589. 	apply( target, thisArgs, args ) {
  590.  
  591. 		hasCurve = true;
  592.  
  593. 		return Reflect.apply( ...arguments );
  594.  
  595. 	}
  596. } );
  597.  
  598. Context2D.fill = new Proxy( Context2D.fill, {
  599. 	apply( target, thisArgs, args ) {
  600.  
  601. 		if ( ! hasCurve ) {
  602.  
  603. 			if ( points.length > 2 && points.length < 7 ) myBlock: {
  604.  
  605. 				const center = { x: 0, y: 0 };
  606.  
  607. 				const count = points.length;
  608.  
  609. 				for ( let i = 0; i < count; i ++ ) {
  610.  
  611. 					center.x += points[ i ].x;
  612. 					center.y += points[ i ].y;
  613.  
  614. 				}
  615.  
  616. 				center.x /= count;
  617. 				center.y /= count;
  618.  
  619. 				if ( points.length === 6 ) {
  620.  
  621. 					const d1 = Math.hypot( points[ 0 ].x - center.x, points[ 0 ].y - center.y );
  622. 					const d2 = Math.hypot( points[ 1 ].x - center.x, points[ 1 ].y - center.y );
  623.  
  624. 					if ( Math.abs( d1 - d2 ) > 0.01 ) {
  625.  
  626. 						break myBlock;
  627.  
  628. 					}
  629.  
  630. 				}
  631.  
  632. 				let s, sx, angle, scaleX, scaleY;
  633.  
  634. 				let name = 'poly' + points.length;
  635.  
  636. 				if ( points.length === 4 ) {
  637.  
  638. 					const [ p0, p1, p2 ] = points;
  639. 					const pl = points[ points.length - 1 ];
  640.  
  641. 					scaleX = Math.hypot( p1.x - p2.x, p1.y - p2.y ) / canvas.height;
  642. 					scaleY = Math.hypot( p0.x - pl.x, p0.y - pl.y ) / canvas.height;
  643.  
  644. 					const dx = ( p1.x + p2.x ) / 2 - ( p0.x + pl.x ) / 2;
  645. 					const dy = ( p1.y + p2.y ) / 2 - ( p0.y + pl.y ) / 2;
  646.  
  647. 					sx = Math.hypot( dx, dy ) / canvas.height;
  648. 					angle = Math.atan2( dx, dy ) - Math.PI / 2;
  649.  
  650. 					if ( Math.abs( scaleX - scaleY ) > 0.001 ) {
  651.  
  652. 						s = 1;
  653. 						name = 'cylinder';
  654.  
  655. 					} else {
  656.  
  657. 						s = sx = scaleY;
  658.  
  659. 					}
  660.  
  661. 				} else { 
  662.  
  663. 					s = sx = Math.hypot( points[ 0 ].x - center.x, points[ 0 ].y - center.y ) / canvas.height;
  664.  
  665. 					angle = - Math.atan2( points[ 0 ].y - center.y, points[ 0 ].x - center.x );
  666.  
  667. 				}
  668.  
  669. 				checkIfIsMainCanvas( thisArgs, name );
  670.  
  671. 				setObject(
  672. 					name, 
  673. 					( center.x / canvas.width - 0.5 ) * camera.aspect, 
  674. 					0.5 - center.y / canvas.height, 
  675. 					0, 
  676. 					sx, 
  677. 					s, 
  678. 					s, 
  679. 					angle, 
  680. 					thisArgs.fillStyle, 
  681. 					thisArgs.globalAlpha, 
  682. 					scaleX, 
  683. 					scaleY
  684. 				);
  685.  
  686. 			}
  687.  
  688. 		}
  689.  
  690. 		return Reflect.apply( ...arguments );
  691.  
  692. 	}
  693. } );
  694.  
  695. Context2D.fillText = new Proxy( Context2D.fillText, {
  696. 	apply( target, thisArgs, [ text ] ) {
  697.  
  698. 		if ( text === 'diep.io' ) {
  699.  
  700. 			thisArgs.canvas.isScoreboard = true;
  701.  
  702. 		}
  703.  
  704. 		return Reflect.apply( ...arguments );
  705.  
  706. 	}
  707. } );
  708.  
  709. let renderCounter = 0;
  710.  
  711. function render() {
  712.  
  713. 	renderCounter ++;
  714.  
  715. 	if ( renderCounter > 1 ) {
  716.  
  717. 		console.log( renderCounter, '!!!!' );
  718.  
  719. 	}
  720.  
  721. 	renderer.clear();
  722.  
  723. 	currentCamera.layers.set( OUTLINE_LAYER );
  724.  
  725. 	renderer.render( scene, currentCamera );
  726.  
  727. 	renderer.clearDepth();
  728.  
  729. 	currentCamera.layers.set( MAIN_LAYER );
  730.  
  731. 	renderer.render( scene, currentCamera );
  732.  
  733. }
  734.  
  735. function drawTexts( ctx ) {
  736.  
  737. 	const texts = [ 'Diep3D by Zert', 'Also try triep.io & hornex.pro' ];
  738.  
  739. 	const s = Math.min( ctx.canvas.width / 1200, ctx.canvas.height / 700 ) * 1.2;
  740. 	ctx.scale( s, s );
  741.  
  742. 	ctx.translate( 10, 10 );
  743.  
  744. 	ctx.font = 'bolder 11px Ubuntu';
  745. 	ctx.fillStyle = '#fff';
  746. 	ctx.strokeStyle = '#444';
  747. 	ctx.lineWidth = 2;
  748.  
  749. 	ctx.textBaseline = 'top';
  750. 	ctx.textAlign = 'left';
  751.  
  752. 	for ( let i = 0; i < texts.length; i ++ ) {
  753. 	
  754. 		const text = texts[ i ];
  755.  
  756. 		ctx.strokeText( text, 0, 0 );
  757. 		ctx.fillText( text, 0, 0 );
  758.  
  759. 		ctx.translate( 0, 14 );
  760.  
  761. 	}
  762.  
  763. }
  764.  
  765. Context2D.drawImage = new Proxy( Context2D.drawImage, {
  766. 	apply( target, thisArgs, args ) {
  767.  
  768. 		if ( args[ 0 ].isScoreboard && thisArgs.canvas.width === canvas.width && thisArgs.canvas.height === canvas.height ) {
  769.  
  770. 			thisArgs.canvas.hasScoreboard = true;
  771.  
  772. 		} else if ( args[ 0 ].hasScoreboard ) {
  773.  
  774. 			render();
  775.  
  776. 			thisArgs.save();
  777. 			thisArgs.globalAlpha = 1;
  778. 			thisArgs.setTransform( 1, 0, 0, 1, 0, 0 );
  779.  
  780. 			Reflect.apply( target, thisArgs, [ renderer.domElement, 0, 0, canvas.width, canvas.height ] );
  781.  
  782. 			drawTexts( thisArgs );
  783.  
  784. 			thisArgs.restore();
  785.  
  786. 		}
  787.  
  788. 		if ( thisArgs.canvas === canvas && args[ 0 ].objects ) {
  789.  
  790. 			const matrix = thisArgs.getTransform();
  791.  
  792. 			const x = matrix.e / canvas.width;
  793. 			const y = matrix.f / canvas.height;
  794.  
  795. 			const sx = Math.hypot( matrix.a, matrix.b );
  796. 			const sy = Math.hypot( matrix.c, matrix.d );
  797.  
  798. 			for ( let i = 0; i < args[ 0 ].objects.length; i ++ ) {
  799.  
  800. 				const { name, index } = args[ 0 ].objects[ i ];
  801.  
  802. 				const instance = instances[ name ];
  803.  
  804. 				const ma = instance.main.instanceMatrix.array;
  805. 				const oa = instance.outline.instanceMatrix.array;
  806.  
  807. 				const idx = index * 16;
  808.  
  809. 				const ox = ma[ idx + 12 ] / camera.aspect + 0.5;
  810. 				const oy = - ma[ idx + 13 ] + 0.5;
  811.  
  812. 				const outlineOldSx = Math.hypot( oa[ idx + 0 ], oa[ idx + 1 ] );
  813. 				const outlineOldSy = Math.hypot( oa[ idx + 4 ], oa[ idx + 5 ] );
  814.  
  815. 				const outlineSizeX = outlineOldSx - Math.hypot( ma[ idx + 0 ], ma[ idx + 1 ] );
  816. 				const outlineSizeY = outlineOldSy - Math.hypot( ma[ idx + 4 ], ma[ idx + 5 ] );
  817.  
  818. 				ma[ idx + 0 ] *= sx;
  819. 				ma[ idx + 1 ] *= sx;
  820. 				ma[ idx + 4 ] *= sy;
  821. 				ma[ idx + 5 ] *= sy;
  822. 				ma[ idx + 10 ] *= sy;
  823.  
  824. 				const nsx = Math.hypot( ma[ idx + 0 ], ma[ idx + 1 ] ) + outlineSizeX;
  825. 				const nsy = Math.hypot( ma[ idx + 4 ], ma[ idx + 5 ] ) + outlineSizeY;
  826.  
  827. 				oa[ idx + 0 ] *= nsx / outlineOldSx;
  828. 				oa[ idx + 1 ] *= nsx / outlineOldSx;
  829. 				oa[ idx + 4 ] *= nsy / outlineOldSy;
  830. 				oa[ idx + 5 ] *= nsy / outlineOldSy;
  831. 				oa[ idx + 10 ] *= sy;
  832.  
  833. 				ma[ idx + 12 ] = oa[ idx + 12 ] = ( ( ox * sx + x ) - 0.5 ) * camera.aspect;
  834. 				ma[ idx + 13 ] = oa[ idx + 13 ] = 0.5 - ( oy * sy + y );
  835.  
  836. 				instance.main.geometry.attributes.alpha.array[ index ] = thisArgs.globalAlpha;
  837. 				instance.outline.geometry.attributes.alpha.array[ index ] = thisArgs.globalAlpha;
  838.  
  839. 			}
  840.  
  841. 			delete args[ 0 ][ 'objects' ];
  842.  
  843. 		}
  844.  
  845. 		return Reflect.apply( ...arguments );
  846.  
  847. 	}
  848. } );
  849.  
  850. function checkIfIsMainCanvas( ctx, name ) {
  851.  
  852. 	if ( ctx.canvas !== canvas ) {
  853.  
  854. 		const { index } = instances[ name ];
  855.  
  856. 		if ( ctx.canvas.objects ) {
  857.  
  858. 			ctx.canvas.objects.push( { name, index } );
  859.  
  860. 		} else {
  861.  
  862. 			ctx.canvas.objects = [ { name, index } ];
  863.  
  864. 		}
  865.  
  866. 	}
  867.  
  868. }