☰

Diep.IO 3D

Turns diep.io into real 3D

当前为 2021-09-24 提交的版本，查看 最新版本。

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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