☰

Diep.IO 3D

Turns diep.io into real 3D

目前為 2021-09-23 提交的版本，檢視 最新版本。

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