@adatechnology/game-vfx-three 0.3.4 → 0.3.6

package/dist/index.js

@@ -418,6 +418,11 @@ function createMarkTextures(THREE, createCanvas) {
 var MAX_CONFORM_STEPS = 48;
 var MIN_CONFORM_STEPS = 16;
 var BLOOD_GROW_RATE = 1.2;
+var BLOOD_START_GROWTH = 0.05;
+var DEFAULT_MAX_GROUND_MARKS = 64;
+var DEFAULT_MAX_ROCKS = 512;
+var DEFAULT_MAX_BLOOD = 256;
+var MAX_SPARE_GROUND_GEOMETRIES = 16;
 function createMarkLayer(THREE, options) {
   const group = new THREE.Group();
   const textures = createMarkTextures(THREE, options.createCanvas);
@@ -441,92 +446,146 @@ function createMarkLayer(THREE, options) {
   const bloodMaterial = new THREE.MeshStandardMaterial({ color: 6031882, roughness: 0.15, metalness: 0.1, polygonOffset: true, polygonOffsetFactor: -3, polygonOffsetUnits: -3 });
   const bloodGeometry = new THREE.CircleGeometry(0.5, 9).rotateX(-Math.PI / 2);
   owned.push(bloodMaterial, bloodGeometry);
-  const rockMaterials = /* @__PURE__ */ new Map();
-  const blood = [];
-  let meshCount = 0;
-  function rockMaterial(color) {
-    let material = rockMaterials.get(color);
-    if (!material) {
-      material = new THREE.MeshStandardMaterial({ color, roughness: 0.9, metalness: 0, flatShading: true });
-      rockMaterials.set(color, material);
-      owned.push(material);
+  const maxGroundMarks = options.maxGroundMarks ?? DEFAULT_MAX_GROUND_MARKS;
+  const instanced = {};
+  function rockMaterial() {
+    if (!instanced.rockMaterial) {
+      instanced.rockMaterial = new THREE.MeshStandardMaterial({ color: 16777215, roughness: 0.9, metalness: 0, flatShading: true });
+      owned.push(instanced.rockMaterial);
     }
-    return material;
+    return instanced.rockMaterial;
+  }
+  function bloodMesh() {
+    return instanced.blood ?? (instanced.blood = attach(createInstanced(bloodGeometry, bloodMaterial, options.maxBlood ?? DEFAULT_MAX_BLOOD)));
+  }
+  function rockMesh() {
+    return instanced.rock ?? (instanced.rock = attach(createInstanced(options.rockGeometry, rockMaterial(), options.maxRocks ?? DEFAULT_MAX_ROCKS), true));
+  }
+  function plateMesh() {
+    return instanced.plate ?? (instanced.plate = attach(createInstanced(options.plateGeometry, rockMaterial(), options.maxRocks ?? DEFAULT_MAX_ROCKS), true));
+  }
+  function attach(mesh, castShadow = false) {
+    mesh.castShadow = castShadow;
+    group.add(mesh);
+    return mesh;
+  }
+  const groundMarks = [];
+  const spareGeometries = [];
+  const blood = [];
+  const placed = { blood: 0, rock: 0, plate: 0 };
+  const matrix = new THREE.Matrix4();
+  const position = new THREE.Vector3();
+  const quaternion = new THREE.Quaternion();
+  const euler = new THREE.Euler();
+  const scale = new THREE.Vector3();
+  const color = new THREE.Color();
+  const up = new THREE.Vector3(0, 1, 0);
+  function createInstanced(geometry, material, capacity) {
+    const mesh = new THREE.InstancedMesh(geometry, material, capacity);
+    mesh.count = 0;
+    mesh.frustumCulled = false;
+    mesh.receiveShadow = true;
+    return mesh;
+  }
+  function takeSpare(vertexCount) {
+    const found = spareGeometries.findIndex((geometry) => geometry.getAttribute("position").count === vertexCount);
+    return found < 0 ? void 0 : spareGeometries.splice(found, 1)[0];
+  }
+  function evictOldestGroundMark() {
+    const oldest = groundMarks.shift();
+    group.remove(oldest.mesh);
+    spareGeometries.push(oldest.mesh.geometry);
+    if (spareGeometries.length > MAX_SPARE_GROUND_GEOMETRIES) spareGeometries.shift().dispose();
   }
   function conform(mark, material) {
     const radius = mark.radius;
     const steps = Math.max(MIN_CONFORM_STEPS, Math.min(MAX_CONFORM_STEPS, Math.round(radius * 8)));
-    const geometry = new THREE.PlaneGeometry(2, 2, steps, steps).rotateX(-Math.PI / 2);
-    const position = geometry.attributes.position;
+    if (groundMarks.length >= maxGroundMarks) evictOldestGroundMark();
+    const geometry = takeSpare((steps + 1) * (steps + 1)) ?? new THREE.PlaneGeometry(2, 2, steps, steps).rotateX(-Math.PI / 2);
+    const grid = geometry.attributes.position;
+    const cell = 2 / steps;
     const cos = Math.cos(mark.rotation);
     const sin = Math.sin(mark.rotation);
-    for (let index = 0; index < position.count; index++) {
-      const localX = position.getX(index) * radius;
-      const localZ = position.getZ(index) * radius;
+    for (let index = 0; index < grid.count; index++) {
+      const localX = Math.fround(index % (steps + 1) * cell - 1) * radius;
+      const localZ = Math.fround(Math.floor(index / (steps + 1)) * cell - 1) * radius;
       const worldX = mark.x + localX * cos - localZ * sin;
       const worldZ = mark.z + localX * sin + localZ * cos;
-      position.setXYZ(index, worldX, (options.ground?.heightAt(worldX, worldZ) ?? 0) + mark.lift, worldZ);
+      grid.setXYZ(index, worldX, (options.ground?.heightAt(worldX, worldZ) ?? 0) + mark.lift, worldZ);
     }
+    grid.needsUpdate = true;
     geometry.computeVertexNormals();
+    geometry.attributes.normal.needsUpdate = true;
+    geometry.boundingSphere = null;
+    geometry.boundingBox = null;
     const mesh = new THREE.Mesh(geometry, material);
     mesh.receiveShadow = true;
-    return mesh;
+    group.add(mesh);
+    groundMarks.push({ mesh, steps });
   }
   function addRock(mark) {
-    const mesh = new THREE.Mesh(mark.plate ? options.plateGeometry : options.rockGeometry, rockMaterial(mark.color));
-    mesh.position.set(mark.x, mark.y, mark.z);
-    mesh.scale.set(mark.scale[0], mark.scale[1], mark.scale[2]);
-    mesh.rotation.set(mark.rotation[0], mark.rotation[1], mark.rotation[2]);
-    mesh.castShadow = true;
-    mesh.receiveShadow = true;
-    return mesh;
+    const mesh = mark.plate ? plateMesh() : rockMesh();
+    const slot = mark.plate ? "plate" : "rock";
+    const index = placed[slot]++ % mesh.instanceMatrix.count;
+    quaternion.setFromEuler(euler.set(mark.rotation[0], mark.rotation[1], mark.rotation[2]));
+    mesh.setMatrixAt(index, matrix.compose(position.set(mark.x, mark.y, mark.z), quaternion, scale.set(mark.scale[0], mark.scale[1], mark.scale[2])));
+    mesh.setColorAt(index, color.set(mark.color));
+    mesh.count = Math.min(placed[slot], mesh.instanceMatrix.count);
+    mesh.instanceMatrix.needsUpdate = true;
+    mesh.instanceColor.needsUpdate = true;
+  }
+  function writeBlood(index, drawn, growth) {
+    quaternion.setFromAxisAngle(up, drawn.rotation);
+    const mesh = bloodMesh();
+    mesh.setMatrixAt(index, matrix.compose(position.set(drawn.position[0], drawn.position[1], drawn.position[2]), quaternion, scale.set(drawn.scaleX * growth, 1, drawn.scaleZ * growth)));
+    mesh.instanceMatrix.needsUpdate = true;
   }
   function addBlood(mark) {
-    const mesh = new THREE.Mesh(bloodGeometry, bloodMaterial);
-    mesh.position.set(mark.x, mark.y, mark.z);
-    mesh.scale.set(mark.scaleX, 1, mark.scaleZ);
-    mesh.rotation.y = mark.rotation;
-    mesh.receiveShadow = true;
-    mesh.scale.multiplyScalar(0.05);
-    blood.push({ mesh, scaleX: mark.scaleX, scaleZ: mark.scaleZ, age: 0 });
-    return mesh;
+    const index = placed.blood++ % bloodMesh().instanceMatrix.count;
+    const drawn = { position: [mark.x, mark.y, mark.z], rotation: mark.rotation, scaleX: mark.scaleX, scaleZ: mark.scaleZ, age: 0 };
+    blood[index] = drawn;
+    writeBlood(index, drawn, BLOOD_START_GROWTH);
+    bloodMesh().count = Math.min(placed.blood, bloodMesh().instanceMatrix.count);
   }
   function build(mark) {
-    if (mark.kind === "scorch") return conform(mark, scorchMaterials[mark.variant]);
-    if (mark.kind === "dirt") return conform(mark, dirtMaterial);
-    if (mark.kind === "rock") return addRock(mark);
-    return addBlood(mark);
+    if (mark.kind === "scorch") conform(mark, scorchMaterials[mark.variant]);
+    else if (mark.kind === "dirt") conform(mark, dirtMaterial);
+    else if (mark.kind === "rock") addRock(mark);
+    else addBlood(mark);
   }
-  function clearMeshes() {
-    for (const child of [...group.children]) {
-      group.remove(child);
-      const geometry = child.geometry;
-      if (geometry !== options.rockGeometry && geometry !== options.plateGeometry && geometry !== bloodGeometry) geometry.dispose();
-    }
+  function clearMarks() {
+    for (const drawn of groundMarks) group.remove(drawn.mesh);
+    for (const drawn of groundMarks) drawn.mesh.geometry.dispose();
+    groundMarks.length = 0;
+    for (const geometry of spareGeometries) geometry.dispose();
+    spareGeometries.length = 0;
     blood.length = 0;
-    meshCount = 0;
+    placed.blood = placed.rock = placed.plate = 0;
+    for (const mesh of [instanced.blood, instanced.rock, instanced.plate]) if (mesh) mesh.count = 0;
   }
   return {
     group,
     handle(event) {
-      if (event.type === "clear") {
-        clearMeshes();
-        return;
-      }
-      group.add(build(event.mark));
-      meshCount++;
+      if (event.type === "clear") clearMarks();
+      else build(event.mark);
+    },
+    prepare() {
+      bloodMesh();
+      rockMesh();
+      plateMesh();
     },
     update(dt) {
-      for (const drawn of blood) {
-        if (drawn.age > 1) continue;
+      for (let index = 0; index < blood.length; index++) {
+        const drawn = blood[index];
+        if (!drawn || drawn.age > 1) continue;
         drawn.age += dt * BLOOD_GROW_RATE;
-        const ease = 1 - Math.pow(1 - Math.min(1, drawn.age), 2.5);
-        drawn.mesh.scale.set(drawn.scaleX * Math.max(0.05, ease), 1, drawn.scaleZ * Math.max(0.05, ease));
+        writeBlood(index, drawn, Math.max(BLOOD_START_GROWTH, 1 - Math.pow(1 - Math.min(1, drawn.age), 2.5)));
       }
     },
-    count: () => meshCount,
+    count: () => groundMarks.length + [instanced.blood, instanced.rock, instanced.plate].filter((mesh) => mesh && mesh.count > 0).length,
     dispose() {
-      clearMeshes();
+      clearMarks();
+      for (const mesh of [instanced.blood, instanced.rock, instanced.plate]) mesh?.dispose();
       for (const item of owned) item.dispose();
     }
   };
@@ -535,18 +594,22 @@ function createMarkLayer(THREE, options) {
 // src/mesh-layer.ts
 var SPHERE_DEFAULT_WIDTH = 8;
 var SPHERE_DEFAULT_HEIGHT = 6;
+var MAX_PARKED_MESHES_PER_KIND = 256;
 function geometryOf(THREE, particle) {
   switch (particle.shape) {
     case "cone":
-      return new THREE.ConeGeometry(particle.radius, particle.height, particle.segments || void 0, particle.segments2 || 1, false);
+      return new THREE.ConeGeometry(1, 1, particle.segments || void 0, particle.segments2 || 1, false);
     case "cone_open":
-      return new THREE.ConeGeometry(particle.radius, particle.height, particle.segments || void 0, particle.segments2 || 1, true);
+      return new THREE.ConeGeometry(1, 1, particle.segments || void 0, particle.segments2 || 1, true);
     case "sphere":
-      return new THREE.SphereGeometry(particle.radius, particle.segments || SPHERE_DEFAULT_WIDTH, particle.segments2 || SPHERE_DEFAULT_HEIGHT);
+      return new THREE.SphereGeometry(1, particle.segments || SPHERE_DEFAULT_WIDTH, particle.segments2 || SPHERE_DEFAULT_HEIGHT);
     case "icosahedron":
-      return new THREE.IcosahedronGeometry(particle.radius, particle.segments);
+      return new THREE.IcosahedronGeometry(1, particle.segments);
   }
 }
+function isCone(particle) {
+  return particle.shape === "cone" || particle.shape === "cone_open";
+}
 function materialOf(THREE, particle) {
   if (particle.lit) return new THREE.MeshStandardMaterial({ color: particle.color, roughness: 1, metalness: 0, transparent: true, opacity: particle.opacity, depthWrite: false });
   return new THREE.MeshBasicMaterial({ color: particle.color, transparent: true, opacity: particle.opacity, depthWrite: false, ...particle.additive ? { blending: THREE.AdditiveBlending } : {} });
@@ -557,51 +620,82 @@ function createMeshLayerProbes(THREE) {
     (kind) => new THREE.Mesh(geometry, materialOf(THREE, { ...kind, color: 8421504, opacity: 0.5 }))
   );
 }
+function geometryKeyOf(particle) {
+  return `${particle.shape}:${particle.segments}:${particle.segments2}`;
+}
 function createMeshLayer(THREE, pool) {
   const group = new THREE.Group();
   group.name = "workshop-meshes";
   const drawn = /* @__PURE__ */ new Map();
+  const geometries = /* @__PURE__ */ new Map();
+  const parked = /* @__PURE__ */ new Map();
   const frame = new THREE.Quaternion();
   const euler = new THREE.Euler();
   const turn = new THREE.Quaternion();
   const offset = new THREE.Vector3();
-  function release(mesh) {
-    mesh.removeFromParent();
-    mesh.geometry.dispose();
-    mesh.material.dispose();
+  let stamp = 0;
+  function geometryFor(particle) {
+    const key = geometryKeyOf(particle);
+    let geometry = geometries.get(key);
+    if (!geometry) {
+      geometry = geometryOf(THREE, particle);
+      geometries.set(key, geometry);
+    }
+    return geometry;
+  }
+  function acquire(particle) {
+    const parkingKey = `${geometryKeyOf(particle)}|${particle.lit}|${particle.additive}`;
+    const mesh = parked.get(parkingKey)?.pop() ?? new THREE.Mesh(geometryFor(particle), materialOf(THREE, particle));
+    mesh.material.color.set(particle.color);
+    mesh.frustumCulled = false;
+    mesh.renderOrder = particle.additive ? 5 : 3;
+    group.add(mesh);
+    return { mesh, parkingKey, stamp };
+  }
+  function park(entry) {
+    entry.mesh.removeFromParent();
+    let free = parked.get(entry.parkingKey);
+    if (!free) {
+      free = [];
+      parked.set(entry.parkingKey, free);
+    }
+    if (free.length < MAX_PARKED_MESHES_PER_KIND) free.push(entry.mesh);
+    else entry.mesh.material.dispose();
   }
   return {
     group,
     sync() {
-      const live = /* @__PURE__ */ new Set();
+      stamp++;
       for (const particle of pool.particles) {
-        live.add(particle.id);
-        let mesh = drawn.get(particle.id);
-        if (!mesh) {
-          mesh = new THREE.Mesh(geometryOf(THREE, particle), materialOf(THREE, particle));
-          mesh.frustumCulled = false;
-          mesh.renderOrder = particle.additive ? 5 : 3;
-          drawn.set(particle.id, mesh);
-          group.add(mesh);
+        let entry = drawn.get(particle.id);
+        if (!entry) {
+          entry = acquire(particle);
+          drawn.set(particle.id, entry);
         }
+        entry.stamp = stamp;
+        const mesh = entry.mesh;
         frame.set(particle.frame[0], particle.frame[1], particle.frame[2], particle.frame[3]);
         offset.set(particle.at[0], particle.at[1], particle.at[2]).multiplyScalar(particle.scale).applyQuaternion(frame);
         mesh.position.set(particle.x + offset.x, particle.y + offset.y, particle.z + offset.z);
         turn.setFromEuler(euler.set(particle.rx, particle.ry, particle.rz));
         mesh.quaternion.copy(frame).multiply(turn);
-        mesh.scale.setScalar(particle.scale);
+        mesh.scale.set(particle.radius * particle.scale, (isCone(particle) ? particle.height : particle.radius) * particle.scale, particle.radius * particle.scale);
         mesh.material.opacity = particle.opacity;
       }
-      for (const [id, mesh] of drawn) {
-        if (live.has(id)) continue;
-        release(mesh);
+      for (const [id, entry] of drawn) {
+        if (entry.stamp === stamp) continue;
+        park(entry);
         drawn.delete(id);
       }
       return pool.count;
     },
     dispose() {
-      for (const mesh of drawn.values()) release(mesh);
+      for (const entry of drawn.values()) park(entry);
       drawn.clear();
+      for (const free of parked.values()) for (const mesh of free) mesh.material.dispose();
+      parked.clear();
+      for (const geometry of geometries.values()) geometry.dispose();
+      geometries.clear();
       group.removeFromParent();
     }
   };
@@ -1186,7 +1280,7 @@ function createVfxRenderer(THREE, options) {
   const shocks = createShockLayer(THREE, pools.shocks);
   const sprites = createSpriteLayer(THREE, world.sprites(), options.pointScale ?? 700);
   const lights = createLightLayer(THREE, pools.lights, options.lightScale ?? Math.PI);
-  const marks = createMarkLayer(THREE, { ground: pools.ground, createCanvas: options.createCanvas, rockGeometry, plateGeometry });
+  const marks = createMarkLayer(THREE, { ground: pools.ground, createCanvas: options.createCanvas, rockGeometry, plateGeometry, ...options.markLimits });
   root.add(puffs.mesh, sparks.mesh, glows.mesh, chunks.rocks, chunks.plates, shocks.group, lights.group, sprites.additive, sprites.normal, marks.group);
   const stopMarks = world.onMarks((event) => marks.handle(event));
   const overlay = options.overlay ? createScreenOverlay(options.overlay) : void 0;
@@ -1212,6 +1306,16 @@ function createVfxRenderer(THREE, options) {
     const position = options.camera.position;
     world.setCamera([position.x, position.y, position.z]);
   }
+  function attachWorkshopLayers() {
+    const engine = world.peekWorkshop();
+    if (!engine || engine === workshopEngine) return;
+    workshopLayers?.dispose();
+    if (workshopLayers) root.remove(workshopLayers.group);
+    workshopEngine = engine;
+    workshopLayers = createWorkshopLayers(THREE, engine, options.pointScale ?? 700, 1);
+    root.add(workshopLayers.group);
+    applyLayers();
+  }
   function syncAll() {
     lastDrawn.puffs = puffs.sync();
     lastDrawn.sparks = sparks.sync();
@@ -1220,15 +1324,7 @@ function createVfxRenderer(THREE, options) {
     lastDrawn.shocks = shocks.sync();
     lastDrawn.sprites = sprites.sync();
     lights.sync();
-    const engine = world.peekWorkshop();
-    if (engine && engine !== workshopEngine) {
-      workshopLayers?.dispose();
-      if (workshopLayers) root.remove(workshopLayers.group);
-      workshopEngine = engine;
-      workshopLayers = createWorkshopLayers(THREE, engine, options.pointScale ?? 700, 1);
-      root.add(workshopLayers.group);
-      applyLayers();
-    }
+    attachWorkshopLayers();
     const workshopCalls = workshopLayers?.sync() ?? 0;
     const glow = pools.lights.glow;
     uniforms.uGlowPos.value.set(glow.x, glow.y, glow.z);
@@ -1281,6 +1377,9 @@ function createVfxRenderer(THREE, options) {
     },
     warmUpProbes() {
       releaseAnchors();
+      marks.prepare();
+      world.workshop();
+      attachWorkshopLayers();
       const meshes = createMeshLayerProbes(THREE);
       for (const mesh of meshes) mesh.frustumCulled = false;
       const group = new THREE.Group();