3d-spinner 0.9.2 → 0.9.4

package/dist/cjs/engines/little-3d-engine/renderers/canvas2d-textured.cjs

@@ -0,0 +1,345 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/engines/little-3d-engine/core/math.ts
+function subtract(a, b) {
+  return { x: a.x - b.x, y: a.y - b.y, z: a.z - b.z };
+}
+function cross(a, b) {
+  return {
+    x: a.y * b.z - a.z * b.y,
+    y: a.z * b.x - a.x * b.z,
+    z: a.x * b.y - a.y * b.x
+  };
+}
+function dot(a, b) {
+  return a.x * b.x + a.y * b.y + a.z * b.z;
+}
+function normalize(v) {
+  const length = Math.hypot(v.x, v.y, v.z);
+  if (length === 0) return { x: 0, y: 0, z: 0 };
+  return { x: v.x / length, y: v.y / length, z: v.z / length };
+}
+function transformPoint(m, p) {
+  const x = m[0] * p.x + m[4] * p.y + m[8] * p.z + m[12];
+  const y = m[1] * p.x + m[5] * p.y + m[9] * p.z + m[13];
+  const z = m[2] * p.x + m[6] * p.y + m[10] * p.z + m[14];
+  const w = m[3] * p.x + m[7] * p.y + m[11] * p.z + m[15] || 1;
+  return { x: x / w, y: y / w, z: z / w };
+}
+function transformAffine(m, p) {
+  return {
+    x: m[0] * p.x + m[4] * p.y + m[8] * p.z + m[12],
+    y: m[1] * p.x + m[5] * p.y + m[9] * p.z + m[13],
+    z: m[2] * p.x + m[6] * p.y + m[10] * p.z + m[14]
+  };
+}
+var init_math = __esm({
+  "src/engines/little-3d-engine/core/math.ts"() {
+    "use strict";
+  }
+});
+
+// src/engines/little-3d-engine/renderer.ts
+function opacity(value, fallback) {
+  return Math.max(0, Math.min(1, value ?? fallback));
+}
+function resolveTwoSidedOpacity(transparency) {
+  const front = opacity(
+    transparency.frontOpacity ?? transparency.opacity,
+    DEFAULT_FRONT_OPACITY
+  );
+  const backFallback = transparency.opacity === void 0 ? DEFAULT_BACK_OPACITY : front * (2 / 3);
+  return {
+    front,
+    back: opacity(transparency.backOpacity, backFallback)
+  };
+}
+var DEFAULT_ONE_SIDED_OPACITY, DEFAULT_BACK_OPACITY, DEFAULT_FRONT_OPACITY;
+var init_renderer = __esm({
+  "src/engines/little-3d-engine/renderer.ts"() {
+    "use strict";
+    DEFAULT_ONE_SIDED_OPACITY = 0.35;
+    DEFAULT_BACK_OPACITY = 0.84;
+    DEFAULT_FRONT_OPACITY = 0.56;
+  }
+});
+
+// src/engines/little-3d-engine/core/geometry.ts
+function parseColor(color) {
+  const hex = color.trim().replace("#", "");
+  const full = hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex;
+  const n = parseInt(full, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+var init_geometry = __esm({
+  "src/engines/little-3d-engine/core/geometry.ts"() {
+    "use strict";
+    init_math();
+  }
+});
+
+// src/engines/little-3d-engine/core/light.ts
+function clamp01(value) {
+  return Math.min(1, Math.max(0, value));
+}
+function shadeColor(normal, color, light) {
+  const lambert = Math.max(0, dot(normal, light.toLight));
+  const brightness = clamp01(light.ambient + light.intensity * lambert);
+  const [r, g, b] = parseColor(color);
+  return `rgb(${Math.round(r * brightness)}, ${Math.round(g * brightness)}, ${Math.round(
+    b * brightness
+  )})`;
+}
+var init_light = __esm({
+  "src/engines/little-3d-engine/core/light.ts"() {
+    "use strict";
+    init_math();
+    init_geometry();
+  }
+});
+
+// src/engines/little-3d-engine/renderers/canvas2d.ts
+var Canvas2DRenderer;
+var init_canvas2d = __esm({
+  "src/engines/little-3d-engine/renderers/canvas2d.ts"() {
+    "use strict";
+    init_light();
+    init_math();
+    init_renderer();
+    Canvas2DRenderer = class {
+      constructor(options = {}) {
+        this.options = options;
+        this.dpr = 1;
+      }
+      init(canvas) {
+        this.ctx = canvas.getContext("2d") ?? void 0;
+      }
+      resize(_cssWidth, _cssHeight, dpr) {
+        this.dpr = dpr;
+        this.ctx?.setTransform(dpr, 0, 0, dpr, 0, 0);
+      }
+      render(frame) {
+        const ctx = this.ctx;
+        if (!ctx) return;
+        if (this.options.background) {
+          ctx.fillStyle = this.options.background;
+          ctx.fillRect(0, 0, frame.width, frame.height);
+        } else {
+          ctx.clearRect(0, 0, frame.width, frame.height);
+        }
+        const polygons = [];
+        for (const item of frame.items) {
+          const world = item.mesh.vertices.map((v) => transformAffine(item.model, v));
+          const twoSidedOpacity = item.transparency?.mode === "two-sided" ? resolveTwoSidedOpacity(item.transparency) : void 0;
+          for (const face of item.mesh.faces) {
+            const a = world[face.indices[0]];
+            const b = world[face.indices[1]];
+            const c = world[face.indices[2]];
+            const normal = normalize(cross(subtract(b, a), subtract(c, a)));
+            const frontFacing = dot(normal, subtract(frame.eye, a)) > 0;
+            const transparency = item.transparency;
+            if (!frontFacing && transparency?.mode !== "two-sided") continue;
+            let faceOpacity = 1;
+            if (transparency?.mode === "one-sided") {
+              faceOpacity = opacity(transparency.opacity, DEFAULT_ONE_SIDED_OPACITY);
+            } else if (twoSidedOpacity) {
+              faceOpacity = frontFacing ? twoSidedOpacity.front : twoSidedOpacity.back;
+            }
+            const points = face.indices.map((i) => {
+              const ndc = transformPoint(frame.viewProjection, world[i]);
+              return {
+                x: (ndc.x * 0.5 + 0.5) * frame.width,
+                y: (1 - (ndc.y * 0.5 + 0.5)) * frame.height
+              };
+            });
+            let depth = 0;
+            for (const i of face.indices) {
+              const d = subtract(world[i], frame.eye);
+              depth += dot(d, d);
+            }
+            depth /= face.indices.length;
+            polygons.push({
+              points,
+              color: shadeColor(normal, face.color, frame.light),
+              depth,
+              opacity: faceOpacity
+            });
+          }
+        }
+        polygons.sort((p, q) => q.depth - p.depth);
+        for (const poly of polygons) {
+          if (poly.points.length < 3) continue;
+          ctx.beginPath();
+          ctx.moveTo(poly.points[0].x, poly.points[0].y);
+          for (let i = 1; i < poly.points.length; i++) {
+            ctx.lineTo(poly.points[i].x, poly.points[i].y);
+          }
+          ctx.closePath();
+          ctx.fillStyle = poly.color;
+          ctx.strokeStyle = poly.color;
+          ctx.lineWidth = 1;
+          ctx.globalAlpha = poly.opacity;
+          ctx.fill();
+          ctx.stroke();
+        }
+        ctx.globalAlpha = 1;
+      }
+      destroy() {
+        this.ctx = void 0;
+      }
+    };
+  }
+});
+
+// src/engines/little-3d-engine/renderers/canvas2d-textured.ts
+var canvas2d_textured_exports = {};
+__export(canvas2d_textured_exports, {
+  Canvas2DTexturedRenderer: () => Canvas2DTexturedRenderer
+});
+module.exports = __toCommonJS(canvas2d_textured_exports);
+init_math();
+init_renderer();
+init_canvas2d();
+function imageSize(source) {
+  if (source instanceof HTMLImageElement) {
+    return source.complete && source.naturalWidth > 0 ? { width: source.naturalWidth, height: source.naturalHeight } : void 0;
+  }
+  if (source instanceof HTMLVideoElement) {
+    return source.readyState >= 2 ? { width: source.videoWidth, height: source.videoHeight } : void 0;
+  }
+  if (source instanceof SVGImageElement) {
+    const width = source.width.baseVal.value;
+    const height = source.height.baseVal.value;
+    return width > 0 && height > 0 ? { width, height } : void 0;
+  }
+  if (typeof VideoFrame !== "undefined" && source instanceof VideoFrame) {
+    return { width: source.displayWidth, height: source.displayHeight };
+  }
+  const sized = source;
+  return sized.width > 0 && sized.height > 0 ? { width: sized.width, height: sized.height } : void 0;
+}
+function drawMappedTriangle(ctx, image, source, target) {
+  const [s0, s1, s2] = source;
+  const [d0, d1, d2] = target;
+  const determinant = s0.x * (s1.y - s2.y) + s1.x * (s2.y - s0.y) + s2.x * (s0.y - s1.y);
+  if (Math.abs(determinant) < 1e-8) return;
+  const a = (d0.x * (s1.y - s2.y) + d1.x * (s2.y - s0.y) + d2.x * (s0.y - s1.y)) / determinant;
+  const c = (d0.x * (s2.x - s1.x) + d1.x * (s0.x - s2.x) + d2.x * (s1.x - s0.x)) / determinant;
+  const e = (d0.x * (s1.x * s2.y - s2.x * s1.y) + d1.x * (s2.x * s0.y - s0.x * s2.y) + d2.x * (s0.x * s1.y - s1.x * s0.y)) / determinant;
+  const b = (d0.y * (s1.y - s2.y) + d1.y * (s2.y - s0.y) + d2.y * (s0.y - s1.y)) / determinant;
+  const d = (d0.y * (s2.x - s1.x) + d1.y * (s0.x - s2.x) + d2.y * (s1.x - s0.x)) / determinant;
+  const f = (d0.y * (s1.x * s2.y - s2.x * s1.y) + d1.y * (s2.x * s0.y - s0.x * s2.y) + d2.y * (s0.x * s1.y - s1.x * s0.y)) / determinant;
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(d0.x, d0.y);
+  ctx.lineTo(d1.x, d1.y);
+  ctx.lineTo(d2.x, d2.y);
+  ctx.closePath();
+  ctx.clip();
+  ctx.transform(a, b, c, d, e, f);
+  ctx.drawImage(image, 0, 0);
+  ctx.restore();
+}
+var Canvas2DTexturedRenderer = class {
+  constructor(options = {}) {
+    this.sources = /* @__PURE__ */ new Map();
+    this.loaded = /* @__PURE__ */ new Map();
+    this.dpr = 1;
+    this.inner = new Canvas2DRenderer(options);
+  }
+  /** Texture every instance of `mesh` with `source`. Call any time, also before init. */
+  setTexture(mesh, source) {
+    this.sources.set(mesh, source);
+    if (typeof source === "string" && !this.loaded.has(source)) {
+      const image = new Image();
+      image.src = source;
+      this.loaded.set(source, image);
+    }
+  }
+  init(canvas) {
+    this.inner.init(canvas);
+    this.ctx = canvas.getContext("2d") ?? void 0;
+  }
+  resize(cssWidth, cssHeight, dpr) {
+    this.dpr = dpr;
+    this.inner.resize(cssWidth, cssHeight, dpr);
+  }
+  drawable(mesh) {
+    const source = this.sources.get(mesh);
+    return typeof source === "string" ? this.loaded.get(source) : source;
+  }
+  render(frame) {
+    const plain = frame.items.filter((item) => {
+      if (!this.sources.has(item.mesh)) return true;
+      const source = this.drawable(item.mesh);
+      return !source || !imageSize(source);
+    });
+    this.inner.render({ ...frame, items: plain });
+    const ctx = this.ctx;
+    if (!ctx) return;
+    ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+    const tinted = /* @__PURE__ */ new Map();
+    for (const item of frame.items) {
+      const source = this.drawable(item.mesh);
+      if (!source) continue;
+      const size = imageSize(source);
+      if (!size) continue;
+      let image = tinted.get(item.mesh);
+      if (!image) {
+        image = document.createElement("canvas");
+        image.width = size.width;
+        image.height = size.height;
+        const tint = image.getContext("2d");
+        if (!tint) continue;
+        tint.drawImage(source, 0, 0, size.width, size.height);
+        tint.globalCompositeOperation = "source-in";
+        tint.fillStyle = item.mesh.faces[0]?.color ?? "#ffffff";
+        tint.fillRect(0, 0, size.width, size.height);
+        tinted.set(item.mesh, image);
+      }
+      const world = item.mesh.vertices.map((vertex) => transformAffine(item.model, vertex));
+      const projected = world.map((vertex) => {
+        const ndc = transformPoint(frame.viewProjection, vertex);
+        return { x: (ndc.x * 0.5 + 0.5) * frame.width, y: (1 - (ndc.y * 0.5 + 0.5)) * frame.height };
+      });
+      const face = item.mesh.faces[0];
+      if (!face || face.indices.length !== 4) continue;
+      const [a, b, c, d] = face.indices.map((index) => projected[index]);
+      ctx.globalAlpha = item.transparency?.mode === "one-sided" ? opacity(item.transparency.opacity, DEFAULT_ONE_SIDED_OPACITY) : 1;
+      drawMappedTriangle(ctx, image, [{ x: 0, y: size.height }, { x: size.width, y: size.height }, { x: size.width, y: 0 }], [a, b, c]);
+      drawMappedTriangle(ctx, image, [{ x: 0, y: size.height }, { x: size.width, y: 0 }, { x: 0, y: 0 }], [a, c, d]);
+    }
+    ctx.globalAlpha = 1;
+  }
+  destroy() {
+    this.inner.destroy();
+    this.ctx = void 0;
+    this.sources.clear();
+    this.loaded.clear();
+  }
+};