@d3p1/img2pxl 1.21.2 → 1.21.3

package/dist/img2pxl.js

@@ -84,7 +84,7 @@ class Ee {
    * @param {number}          displacementFrequency
    * @param {number}          displacementAmplitude
    */
-  constructor(e, t, s, r, q, h = 0.1, c = 5, u = 5, D = 50) {
+  constructor(e, t, s, r, m, h = 0.1, c = 5, u = 5, D = 50) {
     a(this, X);
     /**
      * @type {Image}
@@ -102,7 +102,7 @@ class Ee {
      * @type {Pane}
      */
     a(this, x);
-    l(this, p, e), l(this, R, t), l(this, b, s), l(this, x, r), n(this, X, qe).call(this, q, h, c, u, D), n(this, X, ve).call(this);
+    l(this, p, e), l(this, R, t), l(this, b, s), l(this, x, r), n(this, X, qe).call(this, m, h, c, u, D), n(this, X, ve).call(this);
   }
   /**
    * Update
@@ -184,8 +184,8 @@ p = new WeakMap(), R = new WeakMap(), b = new WeakMap(), x = new WeakMap(), X =
  * @param   {number} displacementAmplitude
  * @returns {void}
  */
-qe = function(e, t, s, r, q) {
-  i(this, b).scene.add(i(this, p).points), n(this, X, ce).call(this), n(this, X, he).call(this, e, t, s, r, q);
+qe = function(e, t, s, r, m) {
+  i(this, b).scene.add(i(this, p).points), n(this, X, ce).call(this), n(this, X, he).call(this, e, t, s, r, m);
 }, /**
  * Init pointer
  *
@@ -211,13 +211,13 @@ ve = function() {
  *          uniforms will be undefined until first render of the scene
  * {@link   https://github.com/mrdoob/three.js/pull/10960}
  */
-he = function(e, t, s, r, q) {
+he = function(e, t, s, r, m) {
   const c = new d.TextureLoader().load(e);
   c.wrapS = d.RepeatWrapping, i(this, p).points.material.onBeforeCompile = (u) => {
     u.uniforms.uTime = new d.Uniform(0), u.uniforms.uDisFrequency = new d.Uniform(
       r
     ), u.uniforms.uDisAmplitude = new d.Uniform(
-      q
+      m
     ), u.uniforms.uDisTexture = new d.Uniform(
       i(this, R).canvas.texture
     ), u.uniforms.uNoiseFrequency = new d.Uniform(t), u.uniforms.uNoiseAmplitude = new d.Uniform(s), u.uniforms.uNoiseTexture = new d.Uniform(c), u.vertexShader = u.vertexShader.replace(
@@ -342,13 +342,13 @@ fe = function() {
  * @link    https://discourse.threejs.org/t/mapping-orthographiccamera-world-units-to-pixels/10142
  */
 Ue = function() {
-  const e = -this.renderer.domElement.width / 2, t = this.renderer.domElement.width / 2, s = this.renderer.domElement.height / 2, r = -this.renderer.domElement.height / 2, q = 0.1, h = 1;
+  const e = -this.renderer.domElement.width / 2, t = this.renderer.domElement.width / 2, s = this.renderer.domElement.height / 2, r = -this.renderer.domElement.height / 2, m = 0.1, h = 1;
   this.camera = new d.OrthographicCamera(
     e,
     t,
     s,
     r,
-    q,
+    m,
     h
   ), this.scene.add(this.camera), this.camera.position.z = h - 0.1;
 }, /**
@@ -390,9 +390,15 @@ void main() {
     gl_PointSize = uPointSize;
 
     vColor = texture(uImageTexture, uv);
-}`, Ge = `varying vec4 vColor;
+}`, Ge = `uniform float uAlphaTest;
+
+varying vec4 vColor;
 
 void main() {
+    if (vColor.a < uAlphaTest) {
+        discard;
+    }
+
     gl_FragColor = vColor;
 
     #include <tonemapping_fragment>
@@ -410,7 +416,7 @@ let Be = (me = class {
    * @param {number}          pointSize
    * @param {number}          alphaTest
    */
-  constructor(e, t, s, r, q, h = 1, c = 0.1) {
+  constructor(e, t, s, r, m, h = 1, c = 0.1) {
     a(this, F);
     /**
      * @type {THREE.Points}
@@ -428,7 +434,7 @@ let Be = (me = class {
      * @type {Pane}
      */
     a(this, L);
-    l(this, P, e), l(this, L, t), n(this, F, be).call(this, s, r, q, h, c);
+    l(this, P, e), l(this, L, t), n(this, F, be).call(this, s, r, m, h, c);
   }
   /**
    * Enable debug mode
@@ -477,7 +483,7 @@ let Be = (me = class {
  * @param   {number} alphaTest
  * @returns {void}
  */
-be = function(e, t, s, r, q) {
+be = function(e, t, s, r, m) {
   const h = new d.TextureLoader();
   l(this, N, h.load(e));
   const c = n(this, F, re).call(this, t, s), u = new d.ShaderMaterial({
@@ -485,11 +491,12 @@ be = function(e, t, s, r, q) {
     fragmentShader: Ge,
     uniforms: {
       uImageTexture: new d.Uniform(i(this, N)),
-      uPointSize: new d.Uniform(r)
+      uPointSize: new d.Uniform(r),
+      uAlphaTest: new d.Uniform(m)
     },
     transparent: !0,
     depthWrite: !1,
-    alphaTest: q
+    alphaTest: m
   });
   this.points = new d.Points(c, u);
 }, /**
@@ -675,7 +682,7 @@ class Ae {
    * @param {number} pointerImageSize
    * @param {number} pointerTrailingFactor
    */
-  constructor(e, t, s, r, q = 0.1, h = 0.05) {
+  constructor(e, t, s, r, m = 0.1, h = 0.05) {
     a(this, U);
     /**
      * @type {Pane}
@@ -715,7 +722,7 @@ class Ae {
      *       pixels' displacement
      */
     a(this, j);
-    l(this, M, e), l(this, j, h), n(this, U, ze).call(this, t, s), n(this, U, we).call(this, r, q);
+    l(this, M, e), l(this, j, h), n(this, U, ze).call(this, t, s), n(this, U, we).call(this, r, m);
   }
   /**
    * Update
@@ -967,7 +974,7 @@ ge = function(e) {
     );
   l(this, Q, e);
 };
-var z, m, w, S, g, G, I, C, V, oe, le, xe, de, Ne, Le, Te, Oe;
+var z, q, w, S, g, G, I, C, V, oe, le, xe, de, Ne, Le, Te, Oe;
 class ni {
   /**
    * Constructor
@@ -1028,7 +1035,7 @@ class ni {
     /**
      * @type {ImageManager}
      */
-    a(this, m);
+    a(this, q);
     /**
      * @type {Timer}
      */
@@ -1088,7 +1095,7 @@ class ni {
      * @type {Function}
      */
     a(this, C);
-    l(this, S, e), l(this, g, e.isDebugging ?? !1), l(this, m, new ei(e.images)), n(this, V, oe).call(this);
+    l(this, S, e), l(this, g, e.isDebugging ?? !1), l(this, q, new ei(e.images)), n(this, V, oe).call(this);
   }
   /**
    * Debug
@@ -1107,17 +1114,17 @@ class ni {
     cancelAnimationFrame(i(this, G)), window.removeEventListener("keydown", i(this, I)), window.removeEventListener("resize", i(this, C)), i(this, w).dispose(), i(this, z).dispose(), this.rendererManager.dispose(), this.debugManager.dispose(), this.debugManager.element.remove();
   }
 }
-z = new WeakMap(), m = new WeakMap(), w = new WeakMap(), S = new WeakMap(), g = new WeakMap(), G = new WeakMap(), I = new WeakMap(), C = new WeakMap(), V = new WeakSet(), /**
+z = new WeakMap(), q = new WeakMap(), w = new WeakMap(), S = new WeakMap(), g = new WeakMap(), G = new WeakMap(), I = new WeakMap(), C = new WeakMap(), V = new WeakSet(), /**
  * Init
  *
  * @returns {void}
  */
 oe = function() {
   this.rendererManager = new Ye(
-    i(this, m).currentImage.width,
-    i(this, m).currentImage.height
+    i(this, q).currentImage.width,
+    i(this, q).currentImage.height
   ), l(this, w, new Je()), n(this, V, Te).call(this), n(this, V, Le).call(this), i(this, S).containerSelector && n(this, V, Oe).call(this, i(this, S).containerSelector), l(this, I, n(this, V, xe).bind(this)), window.addEventListener("keydown", i(this, I)), i(this, g) ? n(this, V, de).call(this) : n(this, V, Ne).call(this), l(this, C, () => {
-    i(this, m).update() && (this.dispose(), n(this, V, oe).call(this));
+    i(this, q).update() && (this.dispose(), n(this, V, oe).call(this));
   }), window.addEventListener("resize", i(this, C)), n(this, V, le).call(this);
 }, /**
  * Render
@@ -1148,7 +1155,7 @@ de = function() {
   e.on("click", () => {
     const t = this.debugManager.exportState();
     if (t.children && t.children instanceof Array) {
-      const s = t.children[0], r = s.children[0].binding.value, q = s.children[1].binding.value, h = t.children[2], c = h.children[0].binding.value, u = h.children[1].binding.value, B = t.children[3].children[0].binding.value, E = t.children[4], H = E.children[0].binding.value, A = E.children[1].binding.value, Y = t.children[5], _ = Y.children[0].binding.value, $ = Y.children[1].binding.value, ee = `{
+      const s = t.children[0], r = s.children[0].binding.value, m = s.children[1].binding.value, h = t.children[2], c = h.children[0].binding.value, u = h.children[1].binding.value, B = t.children[3].children[0].binding.value, E = t.children[4], H = E.children[0].binding.value, A = E.children[1].binding.value, Y = t.children[5], _ = Y.children[0].binding.value, $ = Y.children[1].binding.value, ee = `{
           images: {
             0: {
               src: <image-src>,
@@ -1178,7 +1185,7 @@ de = function() {
           pointer: {
             size: ${r},
             trailing: {
-              factor: ${q}
+              factor: ${m}
             }
           }
         }`;
@@ -1202,35 +1209,35 @@ Ne = function() {
  * @returns {void}
  */
 Le = function() {
-  var e, t, s, r, q, h, c, u, D, B, E, H, A, Y, _, $, ee, pe;
+  var e, t, s, r, m, h, c, u, D, B, E, H, A, Y, _, $, ee, pe;
   l(this, z, new Ee(
     new Be(
       this.rendererManager,
       this.debugManager,
-      i(this, m).currentImage.src,
-      i(this, m).currentImage.resolution.width,
-      i(this, m).currentImage.resolution.height,
-      ((e = i(this, m).currentImage.pixel) == null ? void 0 : e.size) ?? 1,
-      ((t = i(this, m).currentImage.pixel) == null ? void 0 : t.alphaTest) ?? 0.1
+      i(this, q).currentImage.src,
+      i(this, q).currentImage.resolution.width,
+      i(this, q).currentImage.resolution.height,
+      ((e = i(this, q).currentImage.pixel) == null ? void 0 : e.size) ?? 1,
+      ((t = i(this, q).currentImage.pixel) == null ? void 0 : t.alphaTest) ?? 0.1
     ),
     new He(
       this.rendererManager,
       new Ae(
         this.debugManager,
-        i(this, m).currentImage.resolution.width,
-        i(this, m).currentImage.resolution.height,
+        i(this, q).currentImage.resolution.width,
+        i(this, q).currentImage.resolution.height,
         ((s = i(this, S).pointer) == null ? void 0 : s.src) ?? _e,
         ((r = i(this, S).pointer) == null ? void 0 : r.size) ?? 0.15,
-        ((h = (q = i(this, S).pointer) == null ? void 0 : q.trailing) == null ? void 0 : h.factor) ?? 0.01
+        ((h = (m = i(this, S).pointer) == null ? void 0 : m.trailing) == null ? void 0 : h.factor) ?? 0.01
       )
     ),
     this.rendererManager,
     this.debugManager,
-    ((u = (c = i(this, m).currentImage.motion) == null ? void 0 : c.noise) == null ? void 0 : u.src) ?? $e,
-    ((B = (D = i(this, m).currentImage.motion) == null ? void 0 : D.noise) == null ? void 0 : B.frequency) ?? 0.05,
-    ((H = (E = i(this, m).currentImage.motion) == null ? void 0 : E.noise) == null ? void 0 : H.amplitude) ?? 3,
-    ((_ = (Y = (A = i(this, m).currentImage.pixel) == null ? void 0 : A.motion) == null ? void 0 : Y.displacement) == null ? void 0 : _.frequency) ?? 5,
-    ((pe = (ee = ($ = i(this, m).currentImage.pixel) == null ? void 0 : $.motion) == null ? void 0 : ee.displacement) == null ? void 0 : pe.amplitude) ?? 4
+    ((u = (c = i(this, q).currentImage.motion) == null ? void 0 : c.noise) == null ? void 0 : u.src) ?? $e,
+    ((B = (D = i(this, q).currentImage.motion) == null ? void 0 : D.noise) == null ? void 0 : B.frequency) ?? 0.05,
+    ((H = (E = i(this, q).currentImage.motion) == null ? void 0 : E.noise) == null ? void 0 : H.amplitude) ?? 3,
+    ((_ = (Y = (A = i(this, q).currentImage.pixel) == null ? void 0 : A.motion) == null ? void 0 : Y.displacement) == null ? void 0 : _.frequency) ?? 5,
+    ((pe = (ee = ($ = i(this, q).currentImage.pixel) == null ? void 0 : $.motion) == null ? void 0 : ee.displacement) == null ? void 0 : pe.amplitude) ?? 4
   ));
 }, /**
  * Init debug manager