import { ShaderMaterial, Vector2 } from '../Three';
import { Shaders } from './shaders/Shaders';

class PopupMaterial extends ShaderMaterial {

	constructor ( container, popupImage, rotation, colour ) {

		const cos = Math.cos( rotation );
		const sin = Math.sin( rotation );
		const pixelRatio = window.devicePixelRatio || 1;
		const canvas = popupImage.image;
		const rotationMatrix = new Float32Array( [ cos, sin, -sin, cos ] );
		const scale = new Vector2( canvas.width * pixelRatio / container.clientWidth, canvas.height * pixelRatio / container.clientHeight );

		colour = colour || [ 1, 1, 1 ];

		super( {
			vertexShader: Shaders.popupVertexShader,
			fragmentShader: Shaders.popupFragmentShader,
			type: 'CV.PopupMaterial',
			uniforms: {
				rotate: { value: rotationMatrix },
				popupImage: { value: popupImage },
				scale: { value: scale },
			},
			defines: {
				USE_COLOR: true
			}
		} );

		this.opacity = 1.0;
		this.alphaTest = 0.8;
		this.depthTest = false;
		this.transparent = true;

		this.texture = popupImage;

		this.defaultAttributeValues.color = colour;

	}

}

export { PopupMaterial };
@@ -421,24 +421,25 @@
 n, cos %5D );%0A
+%0A
 %09%09const scal
@@ -468,17 +468,29 @@
 s.width 
-*
+/ Math.floor(
  pixelRa
@@ -485,33 +485,33 @@
 oor( pixelRatio 
-/
+*
  container.clien
@@ -516,16 +516,17 @@
 entWidth
+)
 , canvas
@@ -533,17 +533,29 @@
 .height 
-*
+/ Math.floor(
  pixelRa
@@ -558,17 +558,17 @@
 elRatio 
-/
+*
  contain
@@ -584,16 +584,38 @@
 Height )
+ ).multiplyScalar( 2 )
 ;%0A%0A%09%09col

correct popup text scaling