@d3p1/img2pxl 1.18.1 → 1.18.3

package/dist/core/app.d.ts

@@ -23,10 +23,6 @@ export default class App {
      *
      * @param   {number} elapsed
      * @returns {void}
-     * @note    It is required to validate if `uTime` is set
-     *          because the `beforeCompile` image material shader logic
-     *          (which adds this uniform)
-     *          only runs after the first render of the scene
      */
     update(elapsed: number): void;
     /**

package/dist/core/lib/renderer-manager.d.ts

@@ -47,6 +47,13 @@ export default class RendererManager {
      * @returns {void}
      */
     update(): void;
+    /**
+     * Compile shaders
+     *
+     * @returns {void}
+     * {@link   https://github.com/mrdoob/three.js/pull/10960}
+     */
+    compile(): void;
     /**
      * Dispose
      *

package/dist/img2pxl.js

@@ -69,7 +69,7 @@ float disFactor  = texture(uDisTexture, uv).r;
 float displacementX      = cos(aDisAngle) * disFactor;
 float displacementY      = sin(aDisAngle) * disFactor;
 vec2  displacement       = vec2(displacementX, displacementY);
-      vertexPosition.xy += displacement;`, p, W, Z, N, K, ue, me, ve, he;
+      vertexPosition.xy += displacement;`, p, W, K, N, X, ue, me, ve, he;
 class De {
   /**
    * Constructor
@@ -84,8 +84,8 @@ class De {
    * @param {number}          displacementFrequency
    * @param {number}          displacementAmplitude
    */
-  constructor(e, t, s, r, m, h = 0.1, b = 5, v = 5, Y = 50) {
-    a(this, K);
+  constructor(e, t, s, r, m, h = 0.1, Z = 5, v = 5, Y = 50) {
+    a(this, X);
     /**
      * @type {Image}
      */
@@ -97,25 +97,21 @@ class De {
     /**
      * @type {RendererManager}
      */
-    a(this, Z);
+    a(this, K);
     /**
      * @type {Pane}
      */
     a(this, N);
-    l(this, p, e), l(this, W, t), l(this, Z, s), l(this, N, r), n(this, K, ue).call(this, m, h, b, v, Y), n(this, K, me).call(this);
+    l(this, p, e), l(this, W, t), l(this, K, s), l(this, N, r), n(this, X, ue).call(this, m, h, Z, v, Y), n(this, X, me).call(this);
   }
   /**
    * Update
    *
    * @param   {number} elapsed
    * @returns {void}
-   * @note    It is required to validate if `uTime` is set
-   *          because the `beforeCompile` image material shader logic
-   *          (which adds this uniform)
-   *          only runs after the first render of the scene
    */
   update(e) {
-    i(this, p).points.material.uniforms.uTime && (i(this, p).points.material.uniforms.uTime.value = e, i(this, W).update()), i(this, Z).update();
+    i(this, p).points.material.uniforms.uTime.value = e, i(this, W).update(), i(this, K).update();
   }
   /**
    * Enable debug mode
@@ -141,7 +137,7 @@ class De {
         amplitude: i(this, p).points.material.uniforms.uDisAmplitude.value
       },
       "amplitude",
-      { min: 0, max: i(this, Z).width, step: 1 }
+      { min: 0, max: i(this, K).width, step: 1 }
     ).on(
       "change",
       (s) => i(this, p).points.material.uniforms.uDisAmplitude.value = s.value
@@ -163,7 +159,7 @@ class De {
         amplitude: i(this, p).points.material.uniforms.uNoiseAmplitude.value
       },
       "amplitude",
-      { min: 0, max: i(this, Z).width, step: 1 }
+      { min: 0, max: i(this, K).width, step: 1 }
     ).on(
       "change",
       (s) => i(this, p).points.material.uniforms.uNoiseAmplitude.value = s.value
@@ -178,7 +174,7 @@ class De {
     i(this, p).dispose(), i(this, W).dispose();
   }
 }
-p = new WeakMap(), W = new WeakMap(), Z = new WeakMap(), N = new WeakMap(), K = new WeakSet(), /**
+p = new WeakMap(), W = new WeakMap(), K = new WeakMap(), N = new WeakMap(), X = new WeakSet(), /**
  * Init image
  *
  * @param   {string} noiseImageSrc
@@ -189,14 +185,14 @@ p = new WeakMap(), W = new WeakMap(), Z = new WeakMap(), N = new WeakMap(), K =
  * @returns {void}
  */
 ue = function(e, t, s, r, m) {
-  n(this, K, he).call(this), n(this, K, ve).call(this, e, t, s, r, m), i(this, Z).scene.add(i(this, p).points);
+  i(this, K).scene.add(i(this, p).points), n(this, X, he).call(this), n(this, X, ve).call(this, e, t, s, r, m);
 }, /**
  * Init pointer
  *
  * @returns {void}
  */
 me = function() {
-  i(this, W).raycasterPlane.position.copy(i(this, p).points.position), i(this, W).raycasterPlane.position.z += 0.01, i(this, Z).scene.add(i(this, W).raycasterPlane);
+  i(this, W).raycasterPlane.position.copy(i(this, p).points.position), i(this, W).raycasterPlane.position.z += 0.01, i(this, K).scene.add(i(this, W).raycasterPlane);
 }, /**
  * Add logic that handles vertex/point/pixel displacement to image
  *
@@ -210,24 +206,28 @@ me = function() {
  *          is called `uDisTexture` inside the shader because
  *          it is considered that the shader does not need to know
  *          that this texture is related to a pointer
+ * @note    Force shader compilation with `compile()`.
+ *          If it is not forced the shader compilation, then
+ *          uniforms will be undefined until first render of the scene
+ * {@link   https://github.com/mrdoob/three.js/pull/10960}
  */
 ve = function(e, t, s, r, m) {
-  const b = new V.TextureLoader().load(e);
-  b.wrapS = V.RepeatWrapping, i(this, p).points.material.onBeforeCompile = (v) => {
+  const Z = new V.TextureLoader().load(e);
+  Z.wrapS = V.RepeatWrapping, i(this, p).points.material.onBeforeCompile = (v) => {
     v.uniforms.uTime = new V.Uniform(0), v.uniforms.uDisFrequency = new V.Uniform(
       r
     ), v.uniforms.uDisAmplitude = new V.Uniform(
       m
     ), v.uniforms.uDisTexture = new V.Uniform(
       i(this, W).canvas.texture
-    ), v.uniforms.uNoiseFrequency = new V.Uniform(t), v.uniforms.uNoiseAmplitude = new V.Uniform(s), v.uniforms.uNoiseTexture = new V.Uniform(b), v.vertexShader = v.vertexShader.replace(
+    ), v.uniforms.uNoiseFrequency = new V.Uniform(t), v.uniforms.uNoiseAmplitude = new V.Uniform(s), v.uniforms.uNoiseTexture = new V.Uniform(Z), v.vertexShader = v.vertexShader.replace(
       "varying vec4 vColor;",
       Ie
     ), v.vertexShader = v.vertexShader.replace(
       "vec3 vertexPosition = position;",
       Ce
     );
-  };
+  }, i(this, K).compile();
 }, /**
  * Add attributes that handle displacement to image
  *
@@ -245,7 +245,7 @@ he = function() {
     new V.BufferAttribute(s, 1)
   );
 };
-var U, fe, ce, Ue, We, Re;
+var U, ce, fe, Ue, We, Re;
 class Ee {
   /**
    * Constructor
@@ -282,7 +282,7 @@ class Ee {
      * @note Device pixel ratio
      */
     q(this, "dpr");
-    this.width = e, this.height = t, n(this, U, fe).call(this), n(this, U, Ue).call(this), n(this, U, ce).call(this);
+    this.width = e, this.height = t, n(this, U, ce).call(this), n(this, U, Ue).call(this), n(this, U, fe).call(this);
   }
   /**
    * Update
@@ -292,6 +292,15 @@ class Ee {
   update() {
     this.renderer.render(this.scene, this.camera);
   }
+  /**
+   * Compile shaders
+   *
+   * @returns {void}
+   * {@link   https://github.com/mrdoob/three.js/pull/10960}
+   */
+  compile() {
+    this.renderer.compile(this.scene, this.camera);
+  }
   /**
    * Dispose
    *
@@ -310,7 +319,7 @@ U = new WeakSet(), /**
  *          devices with `2` or more as pixel ratio
  *          do not require this feature
  */
-fe = function() {
+ce = function() {
   const e = document.createElement("canvas");
   document.body.append(e), this.dpr = Math.min(window.devicePixelRatio, 2);
   let t = !1;
@@ -332,7 +341,7 @@ fe = function() {
  *          `1` world unit is `1` pixel, making it easy to position things
  * @link    https://discourse.threejs.org/t/mapping-orthographiccamera-world-units-to-pixels/10142
  */
-ce = function() {
+fe = 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, m = 0.1, h = 1;
   this.camera = new V.OrthographicCamera(
     e,
@@ -388,7 +397,7 @@ void main() {
 
     #include <tonemapping_fragment>
     #include <colorspace_fragment>
-}`, x, L, O, X, Ke, H, A, qe;
+}`, x, L, O, F, Ke, H, A, qe;
 let Ge = (qe = class {
   /**
    * Constructor
@@ -401,7 +410,7 @@ let Ge = (qe = class {
    * @param {number}          pointSize
    */
   constructor(e, t, s, r, m, h = 1) {
-    a(this, X);
+    a(this, F);
     /**
      * @type {THREE.Points}
      */
@@ -418,7 +427,7 @@ let Ge = (qe = class {
      * @type {Pane}
      */
     a(this, O);
-    l(this, L, e), l(this, O, t), n(this, X, Ke).call(this, s, r, m, h);
+    l(this, L, e), l(this, O, t), n(this, F, Ke).call(this, s, r, m, h);
   }
   /**
    * Enable debug mode
@@ -434,13 +443,13 @@ let Ge = (qe = class {
       "width",
       { min: 0, max: this.points.geometry.parameters.width, step: 1 }
     ).on("change", (s) => {
-      s.last && n(this, X, H).call(this, s.value, this.points.geometry.parameters.heightSegments);
+      s.last && n(this, F, H).call(this, s.value, this.points.geometry.parameters.heightSegments);
     }), e.addBinding(
       { height: this.points.geometry.parameters.heightSegments },
       "height",
       { min: 0, max: this.points.geometry.parameters.height, step: 1 }
     ).on("change", (s) => {
-      s.last && n(this, X, H).call(this, this.points.geometry.parameters.widthSegments, s.value);
+      s.last && n(this, F, H).call(this, this.points.geometry.parameters.widthSegments, s.value);
     }), i(this, O).addFolder({ title: "Image Pixel" }).addBinding(
       { size: this.points.material.uniforms.uPointSize.value },
       "size",
@@ -457,7 +466,7 @@ let Ge = (qe = class {
   dispose() {
     this.points.geometry.dispose(), this.points.material.dispose(), i(this, x).dispose();
   }
-}, x = new WeakMap(), L = new WeakMap(), O = new WeakMap(), X = new WeakSet(), /**
+}, x = new WeakMap(), L = new WeakMap(), O = new WeakMap(), F = new WeakSet(), /**
  * Init points
  *
  * @param   {string} imageSrc
@@ -469,7 +478,7 @@ let Ge = (qe = class {
 Ke = function(e, t, s, r) {
   const m = new V.TextureLoader();
   l(this, x, m.load(e));
-  const h = n(this, X, A).call(this, t, s), b = new V.ShaderMaterial({
+  const h = n(this, F, A).call(this, t, s), Z = new V.ShaderMaterial({
     vertexShader: Ye,
     fragmentShader: Qe,
     uniforms: {
@@ -479,7 +488,7 @@ Ke = function(e, t, s, r) {
     transparent: !0,
     depthWrite: !1
   });
-  this.points = new V.Points(h, b);
+  this.points = new V.Points(h, Z);
 }, /**
  * Replace image geometry
  *
@@ -492,7 +501,7 @@ Ke = function(e, t, s, r) {
  */
 H = function(e, t) {
   const s = this.points.geometry.attributes;
-  this.points.geometry.dispose(), this.points.geometry = n(this, X, A).call(this, e, t, s);
+  this.points.geometry.dispose(), this.points.geometry = n(this, F, A).call(this, e, t, s);
 }, /**
  * Create image geometry
  *
@@ -515,7 +524,7 @@ A = function(e, t, s = null) {
   );
   return r.setIndex(null), r.deleteAttribute("normal"), s && (r.attributes = { ...s, ...r.attributes }), r;
 }, qe);
-var R, T, g, F, Xe, Fe, be, Ze;
+var R, T, g, b, Xe, Fe, be, Ze;
 class Be {
   /**
    * Constructor
@@ -524,7 +533,7 @@ class Be {
    * @param {Canvas}          canvas
    */
   constructor(e, t) {
-    a(this, F);
+    a(this, b);
     /**
      * @type {THREE.Vector2 | {x: number | undefined, y: number | undefined}}
      */
@@ -553,7 +562,7 @@ class Be {
      * @type {Function}
      */
     a(this, g);
-    this.canvas = t, this.coord = new V.Vector2(void 0, void 0), l(this, R, e), n(this, F, be).call(this);
+    this.canvas = t, this.coord = new V.Vector2(void 0, void 0), l(this, R, e), n(this, b, be).call(this);
   }
   /**
    * Update
@@ -589,10 +598,10 @@ class Be {
    * @returns {void}
    */
   dispose() {
-    this.canvas.dispose(), n(this, F, Ze).call(this);
+    this.canvas.dispose(), n(this, b, Ze).call(this);
   }
 }
-R = new WeakMap(), T = new WeakMap(), g = new WeakMap(), F = new WeakSet(), /**
+R = new WeakMap(), T = new WeakMap(), g = new WeakMap(), b = new WeakSet(), /**
  * Process pointer move
  *
  * @param   {PointerEvent} e
@@ -620,10 +629,10 @@ Fe = function() {
  *          working between the raycaster and image points
  */
 be = function() {
-  this.raycaster = new V.Raycaster(), l(this, T, n(this, F, Xe).bind(this)), i(this, R).renderer.domElement.addEventListener(
+  this.raycaster = new V.Raycaster(), l(this, T, n(this, b, Xe).bind(this)), i(this, R).renderer.domElement.addEventListener(
     "pointermove",
     i(this, T)
-  ), l(this, g, n(this, F, Fe).bind(this)), i(this, R).renderer.domElement.addEventListener(
+  ), l(this, g, n(this, b, Fe).bind(this)), i(this, R).renderer.domElement.addEventListener(
     "pointerleave",
     i(this, g)
   ), this.raycasterPlane = new V.Mesh(
@@ -647,7 +656,7 @@ Ze = function() {
     i(this, g)
   ), this.raycasterPlane.geometry.dispose(), this.raycasterPlane.material.dispose();
 };
-var M, f, j, S, k, c, Se, ye, Pe, ze, _;
+var M, c, j, S, k, f, Se, ye, Pe, ze, _;
 class He {
   /**
    * Constructor
@@ -660,7 +669,7 @@ class He {
    * @param {number} pointerTrailingFactor
    */
   constructor(e, t, s, r, m = 0.1, h = 0.05) {
-    a(this, c);
+    a(this, f);
     /**
      * @type {Pane}
      */
@@ -676,7 +685,7 @@ class He {
     /**
      * @type {CanvasRenderingContext2D}
      */
-    a(this, f);
+    a(this, c);
     /**
      * @type {HTMLImageElement}
      * @note Image that will represent the pointer.
@@ -699,7 +708,7 @@ class He {
      *       pixels' displacement
      */
     a(this, k);
-    l(this, M, e), l(this, k, h), n(this, c, Pe).call(this, t, s), n(this, c, ze).call(this, r, m);
+    l(this, M, e), l(this, k, h), n(this, f, Pe).call(this, t, s), n(this, f, ze).call(this, r, m);
   }
   /**
    * Update
@@ -709,7 +718,7 @@ class He {
    * @returns {void}
    */
   update(e, t) {
-    n(this, c, ye).call(this), e && t && n(this, c, Se).call(this, e, t), this.texture.needsUpdate = !0;
+    n(this, f, ye).call(this), e && t && n(this, f, Se).call(this, e, t), this.texture.needsUpdate = !0;
   }
   /**
    * Enable debug mode
@@ -724,7 +733,7 @@ class He {
       min: 0,
       max: 1,
       step: 0.01
-    }).on("change", (s) => n(this, c, _).call(this, s.value)), e.addBinding(
+    }).on("change", (s) => n(this, f, _).call(this, s.value)), e.addBinding(
       { trailing: i(this, k) },
       "trailing",
       {
@@ -747,7 +756,7 @@ class He {
     this.texture.dispose();
   }
 }
-M = new WeakMap(), f = new WeakMap(), j = new WeakMap(), S = new WeakMap(), k = new WeakMap(), c = new WeakSet(), /**
+M = new WeakMap(), c = new WeakMap(), j = new WeakMap(), S = new WeakMap(), k = new WeakMap(), f = new WeakSet(), /**
  * Draw
  *
  * @param   {number} dx
@@ -757,13 +766,13 @@ M = new WeakMap(), f = new WeakMap(), j = new WeakMap(), S = new WeakMap(), k =
  *          so it is drawn at the center of the destination position
  */
 Se = function(e, t) {
-  e -= i(this, S) / 2, t -= i(this, S) / 2, i(this, f).save(), i(this, f).globalCompositeOperation = "lighten", i(this, f).drawImage(
+  e -= i(this, S) / 2, t -= i(this, S) / 2, i(this, c).save(), i(this, c).globalCompositeOperation = "lighten", i(this, c).drawImage(
     i(this, j),
     e,
     t,
     i(this, S),
     i(this, S)
-  ), i(this, f).restore();
+  ), i(this, c).restore();
 }, /**
  * Clear
  *
@@ -773,7 +782,7 @@ Se = function(e, t) {
  *          That is why it is required to clear the canvas with black color
  */
 ye = function() {
-  i(this, f).save(), i(this, f).globalAlpha = i(this, k), i(this, f).fillStyle = "#000", i(this, f).fillRect(0, 0, this.element.width, this.element.height), i(this, f).restore();
+  i(this, c).save(), i(this, c).globalAlpha = i(this, k), i(this, c).fillStyle = "#000", i(this, c).fillRect(0, 0, this.element.width, this.element.height), i(this, c).restore();
 }, /**
  * Init canvas texture used to detect pointer location and
  * displace points
@@ -786,7 +795,7 @@ ye = function() {
  *          That is why it is used the image resolution as its dimensions
  */
 Pe = function(e, t) {
-  this.element = document.createElement("canvas"), this.element.width = e, this.element.height = t, this.texture = new V.CanvasTexture(this.element), l(this, f, this.element.getContext("2d"));
+  this.element = document.createElement("canvas"), this.element.width = e, this.element.height = t, this.texture = new V.CanvasTexture(this.element), l(this, c, this.element.getContext("2d"));
 }, /**
  * Init pointer image
  *
@@ -797,7 +806,7 @@ Pe = function(e, t) {
  *          a white image that will indicate which pixels should be displaced
  */
 ze = function(e, t) {
-  l(this, j, new Image()), i(this, j).src = e, n(this, c, _).call(this, t);
+  l(this, j, new Image()), i(this, j).src = e, n(this, f, _).call(this, t);
 }, /**
  * Process pointer image size
  *
@@ -1135,7 +1144,7 @@ xe = function() {
  * @returns {void}
  */
 Le = function() {
-  var e, t, s, r, m, h, b, v, Y, te, se, ne, re, ae, oe, le, Ve;
+  var e, t, s, r, m, h, Z, v, Y, te, se, ne, re, ae, oe, le, Ve;
   l(this, P, new De(
     new Ge(
       this.rendererManager,
@@ -1158,7 +1167,7 @@ Le = function() {
     ),
     this.rendererManager,
     this.debugManager,
-    ((b = (h = i(this, u).currentImage.motion) == null ? void 0 : h.noise) == null ? void 0 : b.src) ?? _e,
+    ((Z = (h = i(this, u).currentImage.motion) == null ? void 0 : h.noise) == null ? void 0 : Z.src) ?? _e,
     ((Y = (v = i(this, u).currentImage.motion) == null ? void 0 : v.noise) == null ? void 0 : Y.frequency) ?? 0.05,
     ((se = (te = i(this, u).currentImage.motion) == null ? void 0 : te.noise) == null ? void 0 : se.amplitude) ?? 3,
     ((ae = (re = (ne = i(this, u).currentImage.pixel) == null ? void 0 : ne.motion) == null ? void 0 : re.displacement) == null ? void 0 : ae.frequency) ?? 5,