@polarfront-lab/ionian 1.2.0 → 1.4.0

package/dist/ionian.js

@@ -83,6 +83,125 @@ function clamp(value, min, max) {
   value = Math.max(value, min);
   return value;
 }
+class AssetService {
+  constructor(eventEmitter) {
+    __publicField(this, "serviceState", "created");
+    __publicField(this, "eventEmitter");
+    __publicField(this, "meshes", /* @__PURE__ */ new Map());
+    __publicField(this, "textures", /* @__PURE__ */ new Map());
+    __publicField(this, "gltfLoader", new GLTFLoader());
+    __publicField(this, "textureLoader", new THREE.TextureLoader());
+    __publicField(this, "dracoLoader", new DRACOLoader());
+    __publicField(this, "solidColorTexture", new THREE.DataTexture(new Uint8Array([127, 127, 127, 255]), 1, 1, THREE.RGBAFormat));
+    this.eventEmitter = eventEmitter;
+    this.dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.7/");
+    this.gltfLoader.setDRACOLoader(this.dracoLoader);
+    this.updateServiceState("ready");
+  }
+  /**
+   * Registers an asset.
+   * @param id - The ID of the asset.
+   * @param item - The asset to set.
+   */
+  register(id, item) {
+    item.name = id;
+    if (item instanceof THREE.Mesh) {
+      const prev = this.meshes.get(id);
+      if (prev) disposeMesh(prev);
+      this.meshes.set(id, item);
+    } else {
+      const prev = this.textures.get(id);
+      if (prev) prev.dispose();
+      this.textures.set(id, item);
+    }
+    this.eventEmitter.emit("assetRegistered", { id });
+  }
+  setSolidColor(color) {
+    this.changeColor(color);
+  }
+  getSolidColorTexture() {
+    return this.solidColorTexture;
+  }
+  getMesh(id) {
+    return this.meshes.get(id) ?? null;
+  }
+  getMatcap(id) {
+    const texture = this.textures.get(id);
+    if (!texture) this.eventEmitter.emit("invalidRequest", { message: `texture with id "${id}" not found. using solid color texture instead...` });
+    return texture ?? this.solidColorTexture;
+  }
+  getMeshIDs() {
+    return Array.from(this.meshes.keys());
+  }
+  getTextureIDs() {
+    return Array.from(this.textures.keys());
+  }
+  getMeshes() {
+    return Array.from(this.meshes.values());
+  }
+  getTextures() {
+    return Array.from(this.textures.values());
+  }
+  hasMatcap(id) {
+    return this.textures.has(id);
+  }
+  /**
+   * Loads a mesh asynchronously.
+   * @param id - The ID of the mesh.
+   * @param url - The URL of the mesh.
+   * @param options - Optional parameters.
+   * @returns The loaded mesh or null.
+   */
+  async loadMeshAsync(id, url, options = {}) {
+    const gltf = await this.gltfLoader.loadAsync(url);
+    try {
+      if (options.meshName) {
+        const mesh = gltf.scene.getObjectByName(options.meshName);
+        this.register(id, mesh);
+        return mesh;
+      } else {
+        const mesh = gltf.scene.children[0];
+        this.register(id, mesh);
+        return mesh;
+      }
+    } catch (error) {
+      this.eventEmitter.emit("invalidRequest", { message: `failed to load mesh: ${id}. ${error}` });
+      return null;
+    }
+  }
+  /**
+   * Loads a texture asynchronously.
+   * @param id - The ID of the texture.
+   * @param url - The URL of the texture.
+   * @returns The loaded texture or null.
+   */
+  async loadTextureAsync(id, url) {
+    try {
+      const texture = await this.textureLoader.loadAsync(url);
+      this.register(id, texture);
+      return texture;
+    } catch (error) {
+      this.eventEmitter.emit("invalidRequest", { message: `failed to load texture: ${id}. ${error}` });
+      return null;
+    }
+  }
+  dispose() {
+    this.updateServiceState("disposed");
+    this.meshes.forEach((mesh) => disposeMesh(mesh));
+    this.meshes.clear();
+    this.textures.forEach((texture) => texture.dispose());
+    this.textures.clear();
+  }
+  changeColor(color) {
+    const actual = new THREE.Color(color);
+    this.solidColorTexture = new THREE.DataTexture(new Uint8Array([actual.r, actual.g, actual.b, 255]), 1, 1, THREE.RGBAFormat);
+    this.solidColorTexture.needsUpdate = true;
+  }
+  updateServiceState(serviceState) {
+    this.serviceState = serviceState;
+    this.eventEmitter.emit("serviceStateUpdated", { type: "asset", state: serviceState });
+  }
+}
 const _face = new Triangle();
 const _color = new Vector3();
 const _uva = new Vector2(), _uvb = new Vector2(), _uvc = new Vector2();
@@ -295,8 +414,8 @@ const instanceFragmentShader = `
 varying vec2 vUv;
 uniform sampler2D uTexture;
 
-uniform sampler2D uSourceMatcap;
-uniform sampler2D uTargetMatcap;
+uniform sampler2D uOriginTexture;
+uniform sampler2D uDestinationTexture;
 
 uniform float uProgress;
 varying vec3 vNormal;
@@ -307,8 +426,8 @@ void main() {
     vec3 y = cross( viewDir, x );
     vec2 uv = vec2( dot( x, vNormal ), dot( y, vNormal ) ) * 0.495 + 0.5; // 0.495 to remove artifacts caused by undersized matcap disks
 
-    vec4 sourceMatcap = texture2D( uSourceMatcap, uv );
-    vec4 targetMatcap = texture2D( uTargetMatcap, uv );
+    vec4 sourceMatcap = texture2D( uOriginTexture, uv );
+    vec4 targetMatcap = texture2D( uDestinationTexture, uv );
 
     vec4 matcap = mix(sourceMatcap, targetMatcap, uProgress);
     gl_FragColor = matcap;
@@ -368,32 +487,36 @@ class InstancedMeshManager {
     __publicField(this, "size");
     __publicField(this, "mesh");
     __publicField(this, "matcapMaterial");
-    __publicField(this, "fallbackMaterial");
     __publicField(this, "fallbackGeometry");
-    __publicField(this, "materials");
+    __publicField(this, "uniforms");
+    __publicField(this, "originColor");
+    __publicField(this, "destinationColor");
     __publicField(this, "geometries");
     __publicField(this, "uvRefsCache");
     __publicField(this, "previousScale");
     this.size = initialSize;
-    this.materials = /* @__PURE__ */ new Map();
     this.geometries = /* @__PURE__ */ new Map();
     this.uvRefsCache = /* @__PURE__ */ new Map();
     this.previousScale = { x: 1, y: 1, z: 1 };
+    this.originColor = "grey";
+    this.destinationColor = "grey";
+    this.uniforms = {
+      uTime: { value: 0 },
+      uProgress: { value: 0 },
+      uTexture: { value: null },
+      uVelocity: { value: null },
+      uOriginTexture: { value: null },
+      uDestinationTexture: { value: null }
+    };
     this.matcapMaterial = new THREE.ShaderMaterial({
-      uniforms: {
-        uTime: { value: 0 },
-        uProgress: { value: 0 },
-        uTexture: { value: null },
-        uVelocity: { value: null },
-        uSourceMatcap: { value: null },
-        uTargetMatcap: { value: null }
-      },
+      uniforms: this.uniforms,
       vertexShader: instanceVertexShader,
       fragmentShader: instanceFragmentShader
     });
-    this.fallbackMaterial = new THREE.MeshBasicMaterial({ color: 16777215 });
+    this.setOriginColor(this.originColor);
+    this.setDestinationColor(this.destinationColor);
     this.fallbackGeometry = new THREE.BoxGeometry(1e-3, 1e-3, 1e-3);
-    this.mesh = this.createInstancedMesh(initialSize, this.fallbackGeometry, this.fallbackMaterial);
+    this.mesh = this.createInstancedMesh(initialSize, this.fallbackGeometry, this.matcapMaterial);
   }
   /**
    * Gets the instanced mesh.
@@ -417,10 +540,12 @@ class InstancedMeshManager {
    * @param matcap The matcap texture to set.
    */
   setOriginMatcap(matcap) {
-    this.matcapMaterial.uniforms.uSourceMatcap.value = matcap;
+    this.disposeSolidColorOriginTexture();
+    this.matcapMaterial.uniforms.uOriginTexture.value = matcap;
   }
   setDestinationMatcap(matcap) {
-    this.matcapMaterial.uniforms.uTargetMatcap.value = matcap;
+    this.disposeSolidColorDestinationTexture();
+    this.matcapMaterial.uniforms.uDestinationTexture.value = matcap;
   }
   setProgress(float) {
     float = Math.max(0, float);
@@ -438,16 +563,6 @@ class InstancedMeshManager {
   useMatcapMaterial() {
     this.mesh.material = this.matcapMaterial;
   }
-  /**
-   * Use the specified material for the instanced mesh.
-   * @param id The ID of the material to use.
-   */
-  useMaterial(id) {
-    const material = this.materials.get(id);
-    if (material) {
-      this.mesh.material = material;
-    }
-  }
   /**
    * Use the specified geometry for the instanced mesh.
    * @param id The ID of the geometry to use.
@@ -490,10 +605,11 @@ class InstancedMeshManager {
   dispose() {
     this.mesh.dispose();
     this.geometries.forEach((geometry) => geometry.dispose());
-    this.materials.forEach((material) => material.dispose());
+    this.disposeSolidColorOriginTexture();
+    this.disposeSolidColorDestinationTexture();
+    this.matcapMaterial.dispose();
     this.uvRefsCache.clear();
     this.geometries.clear();
-    this.materials.clear();
   }
   /**
    * Registers a geometry.
@@ -507,7 +623,7 @@ class InstancedMeshManager {
         return;
       }
     }
-    const uvRefs = this.getUVRefs(this.size);
+    const uvRefs = this.createUVRefs(this.size);
     geometry.setAttribute("uvRef", uvRefs);
     this.geometries.set(id, geometry);
     if (this.mesh.geometry === previous) {
@@ -515,30 +631,22 @@ class InstancedMeshManager {
     }
     previous == null ? void 0 : previous.dispose();
   }
-  /**
-   * Registers a material.
-   * @param id The ID of the material to register.
-   * @param material The material to register.
-   */
-  registerMaterial(id, material) {
-    const previous = this.materials.get(id);
-    if (previous) {
-      if (previous === material) {
-        return;
-      }
-    }
-    if (this.mesh.material === previous) {
-      this.mesh.material = material;
-    }
-    this.materials.set(id, material);
-    previous == null ? void 0 : previous.dispose();
+  setOriginColor(color) {
+    this.disposeSolidColorOriginTexture();
+    this.originColor = color;
+    this.uniforms.uOriginTexture.value = this.createSolidColorDataTexture(color);
+  }
+  setDestinationColor(color) {
+    this.disposeSolidColorDestinationTexture();
+    this.destinationColor = color;
+    this.uniforms.uDestinationTexture.value = this.createSolidColorDataTexture(color);
   }
   /**
    * Gets the UV references for the specified size.
    * @param size The size for which to generate UV references.
    * @returns The UV references.
    */
-  getUVRefs(size) {
+  createUVRefs(size) {
     const cached = this.uvRefsCache.get(size);
     if (cached) {
       return cached;
@@ -564,10 +672,50 @@ class InstancedMeshManager {
    */
   createInstancedMesh(size, geometry, material) {
     geometry = geometry || this.fallbackGeometry;
-    geometry.setAttribute("uvRef", this.getUVRefs(size));
+    geometry.setAttribute("uvRef", this.createUVRefs(size));
     const count = size * size;
     return new THREE.InstancedMesh(geometry, material, count);
   }
+  createSolidColorDataTexture(color, size = 16) {
+    const col = new THREE.Color(color);
+    const width = size;
+    const height = size;
+    const data = new Uint8Array(width * height * 4);
+    const r = Math.floor(col.r * 255);
+    const g = Math.floor(col.g * 255);
+    const b = Math.floor(col.b * 255);
+    for (let i = 0; i < width * height; i++) {
+      const index = i * 4;
+      data[index] = r;
+      data[index + 1] = g;
+      data[index + 2] = b;
+      data[index + 3] = 255;
+    }
+    const texture = new THREE.DataTexture(data, width, height, THREE.RGBAFormat);
+    texture.type = THREE.UnsignedByteType;
+    texture.wrapS = THREE.RepeatWrapping;
+    texture.wrapT = THREE.RepeatWrapping;
+    texture.minFilter = THREE.NearestFilter;
+    texture.magFilter = THREE.NearestFilter;
+    texture.needsUpdate = true;
+    return texture;
+  }
+  disposeSolidColorOriginTexture() {
+    if (this.originColor) {
+      this.originColor = null;
+      if (this.uniforms.uOriginTexture.value) {
+        this.uniforms.uOriginTexture.value.dispose();
+      }
+    }
+  }
+  disposeSolidColorDestinationTexture() {
+    if (this.destinationColor) {
+      this.destinationColor = null;
+      if (this.uniforms.uDestinationTexture.value) {
+        this.uniforms.uDestinationTexture.value.dispose();
+      }
+    }
+  }
 }
 class IntersectionService {
   /**
@@ -1335,122 +1483,6 @@ class TransitionService {
     this.eventEmitter.emit("transitionFinished", { type });
   }
 }
-class AssetService {
-  constructor(eventEmitter) {
-    __publicField(this, "serviceState", "created");
-    __publicField(this, "eventEmitter");
-    __publicField(this, "meshes", /* @__PURE__ */ new Map());
-    __publicField(this, "textures", /* @__PURE__ */ new Map());
-    __publicField(this, "gltfLoader", new GLTFLoader());
-    __publicField(this, "textureLoader", new THREE.TextureLoader());
-    __publicField(this, "dracoLoader", new DRACOLoader());
-    __publicField(this, "solidColorTexture", new THREE.DataTexture(new Uint8Array([127, 127, 127, 255]), 1, 1, THREE.RGBAFormat));
-    this.eventEmitter = eventEmitter;
-    this.dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.7/");
-    this.gltfLoader.setDRACOLoader(this.dracoLoader);
-    this.updateServiceState("ready");
-  }
-  /**
-   * Registers an asset.
-   * @param id - The ID of the asset.
-   * @param item - The asset to set.
-   */
-  register(id, item) {
-    item.name = id;
-    if (item instanceof THREE.Mesh) {
-      const prev = this.meshes.get(id);
-      if (prev) disposeMesh(prev);
-      this.meshes.set(id, item);
-    } else {
-      const prev = this.textures.get(id);
-      if (prev) prev.dispose();
-      this.textures.set(id, item);
-    }
-    this.eventEmitter.emit("assetRegistered", { id });
-  }
-  setSolidColor(color) {
-    this.changeColor(color);
-  }
-  getSolidColorTexture() {
-    return this.solidColorTexture;
-  }
-  getMesh(id) {
-    return this.meshes.get(id) ?? null;
-  }
-  getMatcap(id) {
-    const texture = this.textures.get(id);
-    if (!texture) this.eventEmitter.emit("invalidRequest", { message: `texture with id "${id}" not found. using solid color texture instead...` });
-    return texture ?? this.solidColorTexture;
-  }
-  getMeshIDs() {
-    return Array.from(this.meshes.keys());
-  }
-  getTextureIDs() {
-    return Array.from(this.textures.keys());
-  }
-  getMeshes() {
-    return Array.from(this.meshes.values());
-  }
-  getTextures() {
-    return Array.from(this.textures.values());
-  }
-  /**
-   * Loads a mesh asynchronously.
-   * @param id - The ID of the mesh.
-   * @param url - The URL of the mesh.
-   * @param options - Optional parameters.
-   * @returns The loaded mesh or null.
-   */
-  async loadMeshAsync(id, url, options = {}) {
-    const gltf = await this.gltfLoader.loadAsync(url);
-    try {
-      if (options.meshName) {
-        const mesh = gltf.scene.getObjectByName(options.meshName);
-        this.register(id, mesh);
-        return mesh;
-      } else {
-        const mesh = gltf.scene.children[0];
-        this.register(id, mesh);
-        return mesh;
-      }
-    } catch (error) {
-      this.eventEmitter.emit("invalidRequest", { message: `failed to load mesh: ${id}. ${error}` });
-      return null;
-    }
-  }
-  /**
-   * Loads a texture asynchronously.
-   * @param id - The ID of the texture.
-   * @param url - The URL of the texture.
-   * @returns The loaded texture or null.
-   */
-  async loadTextureAsync(id, url) {
-    try {
-      const texture = await this.textureLoader.loadAsync(url);
-      this.register(id, texture);
-      return texture;
-    } catch (error) {
-      this.eventEmitter.emit("invalidRequest", { message: `failed to load texture: ${id}. ${error}` });
-      return null;
-    }
-  }
-  dispose() {
-    this.updateServiceState("disposed");
-    this.meshes.forEach((mesh) => disposeMesh(mesh));
-    this.meshes.clear();
-    this.textures.forEach((texture) => texture.dispose());
-    this.textures.clear();
-  }
-  changeColor(color) {
-    const actual = new THREE.Color(color);
-    this.solidColorTexture = new THREE.DataTexture(new Uint8Array([actual.r, actual.g, actual.b, 255]), 1, 1, THREE.RGBAFormat);
-    this.solidColorTexture.needsUpdate = true;
-  }
-  updateServiceState(serviceState) {
-    this.serviceState = serviceState;
-    this.eventEmitter.emit("serviceStateUpdated", { type: "asset", state: serviceState });
-  }
-}
 class ParticlesEngine {
   /**
    * Creates a new ParticlesEngine instance.
@@ -1543,6 +1575,30 @@ class ParticlesEngine {
     this.engineState.destinationMatcapID = matcapID;
     this.instancedMeshManager.setDestinationMatcap(this.assetService.getMatcap(matcapID));
   }
+  setOriginColor(color, override = false) {
+    if (override) this.eventEmitter.emit("transitionCancelled", { type: "matcap" });
+    this.instancedMeshManager.setOriginColor(color);
+  }
+  setDestinationColor(color, override = false) {
+    if (override) this.eventEmitter.emit("transitionCancelled", { type: "matcap" });
+    this.instancedMeshManager.setDestinationColor(color);
+  }
+  setOriginTexture(id, override = false) {
+    if (override) this.eventEmitter.emit("transitionCancelled", { type: "matcap" });
+    if (typeof id === "string" && this.assetService.hasMatcap(id)) {
+      this.setOriginMatcap(id);
+    } else {
+      this.setOriginColor(id);
+    }
+  }
+  setDestinationTexture(id, override = false) {
+    if (override) this.eventEmitter.emit("transitionCancelled", { type: "matcap" });
+    if (typeof id === "string" && this.assetService.hasMatcap(id)) {
+      this.setDestinationMatcap(id);
+    } else {
+      this.setDestinationColor(id);
+    }
+  }
   setMatcapProgress(progress, override = false) {
     if (override) this.eventEmitter.emit("transitionCancelled", { type: "matcap" });
     this.engineState.matcapTransitionProgress = progress;
@@ -1563,7 +1619,12 @@ class ParticlesEngine {
       this.eventEmitter.emit("invalidRequest", { message: `Mesh with id "${this.engineState.destinationMeshID}" does not exist` });
       return;
     }
-    this.dataTextureManager.getDataTexture(originMesh).then((texture) => this.simulationRendererService.setOriginDataTexture({ dataTexture: texture, textureSize: size }));
+    this.dataTextureManager.getDataTexture(originMesh).then(
+      (texture) => this.simulationRendererService.setOriginDataTexture({
+        dataTexture: texture,
+        textureSize: size
+      })
+    );
     this.dataTextureManager.getDataTexture(destinationMesh).then(
       (texture) => this.simulationRendererService.setDestinationDataTexture({
         dataTexture: texture,
@@ -1636,6 +1697,24 @@ class ParticlesEngine {
       }
     );
   }
+  scheduleTextureTransition(origin, destination, options) {
+    const easing = (options == null ? void 0 : options.easing) ?? linear;
+    const duration = (options == null ? void 0 : options.duration) ?? 1e3;
+    if (options == null ? void 0 : options.override) {
+      this.eventEmitter.emit("transitionCancelled", { type: "matcap" });
+    }
+    this.transitionService.enqueue(
+      "matcap",
+      { easing, duration },
+      {
+        onTransitionBegin: () => {
+          this.setOriginTexture(origin);
+          this.setDestinationTexture(destination);
+          this.setMatcapProgress(0);
+        }
+      }
+    );
+  }
   handleServiceStateUpdated({ type, state }) {
     this.serviceStates[type] = state;
   }