3d-spinner 0.9.2 → 0.9.3

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

@@ -0,0 +1,528 @@
+"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 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 };
+}
+var init_math = __esm({
+  "src/engines/little-3d-engine/core/math.ts"() {
+    "use strict";
+  }
+});
+
+// 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];
+}
+function expandToTriangles(mesh) {
+  let triangles = 0;
+  for (const face of mesh.faces) triangles += Math.max(0, face.indices.length - 2);
+  const positions = new Float32Array(triangles * 9);
+  const normals = new Float32Array(triangles * 9);
+  const colors = new Float32Array(triangles * 9);
+  let o = 0;
+  for (const face of mesh.faces) {
+    const v0 = mesh.vertices[face.indices[0]];
+    const v1 = mesh.vertices[face.indices[1]];
+    const v2 = mesh.vertices[face.indices[2]];
+    const normal = normalize(cross(subtract(v1, v0), subtract(v2, v0)));
+    const [r, g, b] = parseColor(face.color);
+    const cr = r / 255;
+    const cg = g / 255;
+    const cb = b / 255;
+    for (let k = 1; k < face.indices.length - 1; k++) {
+      const tri = [face.indices[0], face.indices[k], face.indices[k + 1]];
+      for (const index of tri) {
+        const v = mesh.vertices[index];
+        positions[o] = v.x;
+        positions[o + 1] = v.y;
+        positions[o + 2] = v.z;
+        normals[o] = normal.x;
+        normals[o + 1] = normal.y;
+        normals[o + 2] = normal.z;
+        colors[o] = cr;
+        colors[o + 1] = cg;
+        colors[o + 2] = cb;
+        o += 3;
+      }
+    }
+  }
+  return { positions, normals, colors, count: positions.length / 3 };
+}
+var init_geometry = __esm({
+  "src/engines/little-3d-engine/core/geometry.ts"() {
+    "use strict";
+    init_math();
+  }
+});
+
+// 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/renderers/webgl.ts
+function compile(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    throw new Error(`3d-spinner: shader compile failed: ${gl.getShaderInfoLog(shader)}`);
+  }
+  return shader;
+}
+function link(gl) {
+  const program = gl.createProgram();
+  gl.attachShader(program, compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER));
+  gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER));
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error(`3d-spinner: program link failed: ${gl.getProgramInfoLog(program)}`);
+  }
+  return program;
+}
+var VERTEX_SHADER, FRAGMENT_SHADER, WebGLRenderer;
+var init_webgl = __esm({
+  "src/engines/little-3d-engine/renderers/webgl.ts"() {
+    "use strict";
+    init_geometry();
+    init_renderer();
+    VERTEX_SHADER = `#version 300 es
+in vec3 aPos;
+in vec3 aNormal;
+in vec3 aColor;
+uniform mat4 uViewProj;
+uniform mat4 uModel;
+out vec3 vNormal;
+out vec3 vColor;
+void main() {
+  vNormal = mat3(uModel) * aNormal;
+  vColor = aColor;
+  gl_Position = uViewProj * uModel * vec4(aPos, 1.0);
+}`;
+    FRAGMENT_SHADER = `#version 300 es
+precision mediump float;
+in vec3 vNormal;
+in vec3 vColor;
+uniform vec3 uToLight;
+uniform float uIntensity;
+uniform float uAmbient;
+uniform float uOpacity;
+out vec4 fragColor;
+void main() {
+  float lambert = max(dot(normalize(vNormal), normalize(uToLight)), 0.0);
+  float brightness = clamp(uAmbient + uIntensity * lambert, 0.0, 1.0);
+  fragColor = vec4(vColor * brightness, uOpacity);
+}`;
+    WebGLRenderer = class {
+      constructor(options = {}) {
+        this.cache = /* @__PURE__ */ new Map();
+        if (options.background) {
+          const [r, g, b] = parseColor(options.background);
+          this.clearColor = [r / 255, g / 255, b / 255, 1];
+        } else {
+          this.clearColor = [0, 0, 0, 0];
+        }
+      }
+      init(canvas) {
+        const gl = canvas.getContext("webgl2");
+        if (!gl) throw new Error("3d-spinner: WebGL2 is not supported in this browser.");
+        this.gl = gl;
+        this.program = link(gl);
+        this.locations = {
+          aPos: gl.getAttribLocation(this.program, "aPos"),
+          aNormal: gl.getAttribLocation(this.program, "aNormal"),
+          aColor: gl.getAttribLocation(this.program, "aColor"),
+          uViewProj: gl.getUniformLocation(this.program, "uViewProj"),
+          uModel: gl.getUniformLocation(this.program, "uModel"),
+          uToLight: gl.getUniformLocation(this.program, "uToLight"),
+          uIntensity: gl.getUniformLocation(this.program, "uIntensity"),
+          uAmbient: gl.getUniformLocation(this.program, "uAmbient"),
+          uOpacity: gl.getUniformLocation(this.program, "uOpacity")
+        };
+        gl.enable(gl.DEPTH_TEST);
+        gl.enable(gl.CULL_FACE);
+        gl.cullFace(gl.BACK);
+        gl.frontFace(gl.CCW);
+      }
+      resize() {
+        const gl = this.gl;
+        if (!gl) return;
+        const canvas = gl.canvas;
+        gl.viewport(0, 0, canvas.width, canvas.height);
+      }
+      buffers(mesh) {
+        const cached = this.cache.get(mesh);
+        if (cached) return cached;
+        const gl = this.gl;
+        const loc = this.locations;
+        const data = expandToTriangles(mesh);
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        const attribute = (location, array) => {
+          if (location < 0) return;
+          const buffer = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+          gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);
+          gl.enableVertexAttribArray(location);
+          gl.vertexAttribPointer(location, 3, gl.FLOAT, false, 0, 0);
+        };
+        attribute(loc.aPos, data.positions);
+        attribute(loc.aNormal, data.normals);
+        attribute(loc.aColor, data.colors);
+        gl.bindVertexArray(null);
+        const result = { vao, count: data.count };
+        this.cache.set(mesh, result);
+        return result;
+      }
+      render(frame) {
+        const gl = this.gl;
+        const loc = this.locations;
+        if (!gl || !this.program || !loc) return;
+        gl.clearColor(...this.clearColor);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        gl.useProgram(this.program);
+        gl.uniformMatrix4fv(loc.uViewProj, false, new Float32Array(frame.viewProjection));
+        gl.uniform3f(loc.uToLight, frame.light.toLight.x, frame.light.toLight.y, frame.light.toLight.z);
+        gl.uniform1f(loc.uIntensity, frame.light.intensity);
+        gl.uniform1f(loc.uAmbient, frame.light.ambient);
+        gl.disable(gl.BLEND);
+        gl.depthMask(true);
+        gl.cullFace(gl.BACK);
+        for (const item of frame.items) {
+          if (item.transparency) continue;
+          const mesh = this.buffers(item.mesh);
+          gl.uniformMatrix4fv(loc.uModel, false, new Float32Array(item.model));
+          gl.uniform1f(loc.uOpacity, 1);
+          gl.bindVertexArray(mesh.vao);
+          gl.drawArrays(gl.TRIANGLES, 0, mesh.count);
+        }
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.depthMask(false);
+        for (const item of frame.items) {
+          const transparency = item.transparency;
+          if (!transparency) continue;
+          const mesh = this.buffers(item.mesh);
+          gl.uniformMatrix4fv(loc.uModel, false, new Float32Array(item.model));
+          gl.bindVertexArray(mesh.vao);
+          if (transparency.mode === "two-sided") {
+            const resolved = resolveTwoSidedOpacity(transparency);
+            gl.cullFace(gl.FRONT);
+            gl.uniform1f(loc.uOpacity, resolved.back);
+            gl.drawArrays(gl.TRIANGLES, 0, mesh.count);
+            gl.cullFace(gl.BACK);
+            gl.uniform1f(loc.uOpacity, resolved.front);
+            gl.drawArrays(gl.TRIANGLES, 0, mesh.count);
+          } else {
+            gl.cullFace(gl.BACK);
+            gl.uniform1f(loc.uOpacity, opacity(transparency.opacity, DEFAULT_ONE_SIDED_OPACITY));
+            gl.drawArrays(gl.TRIANGLES, 0, mesh.count);
+          }
+        }
+        gl.depthMask(true);
+        gl.disable(gl.BLEND);
+        gl.cullFace(gl.BACK);
+        gl.bindVertexArray(null);
+      }
+      destroy() {
+        const gl = this.gl;
+        if (gl) {
+          for (const mesh of this.cache.values()) gl.deleteVertexArray(mesh.vao);
+          if (this.program) gl.deleteProgram(this.program);
+        }
+        this.cache.clear();
+        this.gl = void 0;
+        this.program = void 0;
+        this.locations = void 0;
+      }
+    };
+  }
+});
+
+// src/engines/little-3d-engine/renderers/webgl-textured.ts
+var webgl_textured_exports = {};
+__export(webgl_textured_exports, {
+  WebGLTexturedRenderer: () => WebGLTexturedRenderer
+});
+module.exports = __toCommonJS(webgl_textured_exports);
+init_geometry();
+init_renderer();
+
+// src/engines/little-3d-engine/renderers/textured-helpers.ts
+function planarUVs(mesh) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const v of mesh.vertices) {
+    minX = Math.min(minX, v.x);
+    minY = Math.min(minY, v.y);
+    maxX = Math.max(maxX, v.x);
+    maxY = Math.max(maxY, v.y);
+  }
+  const width = maxX - minX || 1;
+  const height = maxY - minY || 1;
+  let triangles = 0;
+  for (const face of mesh.faces) triangles += Math.max(0, face.indices.length - 2);
+  const uvs = new Float32Array(triangles * 6);
+  let o = 0;
+  for (const face of mesh.faces) {
+    for (let k = 1; k < face.indices.length - 1; k++) {
+      for (const index of [face.indices[0], face.indices[k], face.indices[k + 1]]) {
+        const v = mesh.vertices[index];
+        uvs[o] = (v.x - minX) / width;
+        uvs[o + 1] = 1 - (v.y - minY) / height;
+        o += 2;
+      }
+    }
+  }
+  return uvs;
+}
+
+// src/engines/little-3d-engine/renderers/webgl-textured.ts
+init_webgl();
+var VERTEX_SHADER2 = `#version 300 es
+in vec3 aPos;
+in vec2 aUV;
+in vec3 aColor;
+uniform mat4 uViewProj;
+uniform mat4 uModel;
+out vec2 vUV;
+out vec3 vColor;
+void main() {
+  vUV = aUV;
+  vColor = aColor;
+  gl_Position = uViewProj * uModel * vec4(aPos, 1.0);
+}`;
+var FRAGMENT_SHADER2 = `#version 300 es
+precision mediump float;
+in vec2 vUV;
+in vec3 vColor;
+uniform sampler2D uTexture;
+uniform float uOpacity;
+out vec4 fragColor;
+void main() {
+  vec4 t = texture(uTexture, vUV);
+  fragColor = vec4(t.rgb * vColor, t.a * uOpacity);
+}`;
+function compile2(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    throw new Error(`3d-spinner: shader compile failed: ${gl.getShaderInfoLog(shader)}`);
+  }
+  return shader;
+}
+function link2(gl) {
+  const program = gl.createProgram();
+  gl.attachShader(program, compile2(gl, gl.VERTEX_SHADER, VERTEX_SHADER2));
+  gl.attachShader(program, compile2(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER2));
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error(`3d-spinner: program link failed: ${gl.getProgramInfoLog(program)}`);
+  }
+  return program;
+}
+function itemOpacity(transparency) {
+  if (!transparency) return 1;
+  if (transparency.mode === "two-sided") return resolveTwoSidedOpacity(transparency).front;
+  return opacity(transparency.opacity, DEFAULT_ONE_SIDED_OPACITY);
+}
+var WebGLTexturedRenderer = class {
+  constructor(options = {}) {
+    this.sources = /* @__PURE__ */ new Map();
+    this.textures = /* @__PURE__ */ new Map();
+    this.buffers = /* @__PURE__ */ new Map();
+    this.inner = new WebGLRenderer(options);
+  }
+  /** Texture every instance of `mesh` with `source`. Call any time, also before init. */
+  setTexture(mesh, source) {
+    this.sources.set(mesh, source);
+  }
+  init(canvas) {
+    this.inner.init(canvas);
+    const gl = canvas.getContext("webgl2");
+    this.gl = gl;
+    this.program = link2(gl);
+    this.locations = {
+      aPos: gl.getAttribLocation(this.program, "aPos"),
+      aUV: gl.getAttribLocation(this.program, "aUV"),
+      aColor: gl.getAttribLocation(this.program, "aColor"),
+      uViewProj: gl.getUniformLocation(this.program, "uViewProj"),
+      uModel: gl.getUniformLocation(this.program, "uModel"),
+      uTexture: gl.getUniformLocation(this.program, "uTexture"),
+      uOpacity: gl.getUniformLocation(this.program, "uOpacity")
+    };
+  }
+  resize() {
+    this.inner.resize();
+  }
+  textureFor(mesh) {
+    const cached = this.textures.get(mesh);
+    if (cached) return cached;
+    const gl = this.gl;
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      1,
+      1,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      new Uint8Array([255, 255, 255, 255])
+    );
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    this.textures.set(mesh, texture);
+    const upload = (image) => {
+      if (!this.gl || this.textures.get(mesh) !== texture) return;
+      this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+      this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, image);
+    };
+    const source = this.sources.get(mesh);
+    if (typeof source === "string") {
+      const image = new Image();
+      image.onload = () => upload(image);
+      image.src = source;
+    } else {
+      upload(source);
+    }
+    return texture;
+  }
+  buffersFor(mesh) {
+    const cached = this.buffers.get(mesh);
+    if (cached) return cached;
+    const gl = this.gl;
+    const loc = this.locations;
+    const data = expandToTriangles(mesh);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    const attribute = (location, array, size) => {
+      if (location < 0) return;
+      const buffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+      gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);
+      gl.enableVertexAttribArray(location);
+      gl.vertexAttribPointer(location, size, gl.FLOAT, false, 0, 0);
+    };
+    attribute(loc.aPos, data.positions, 3);
+    attribute(loc.aColor, data.colors, 3);
+    attribute(loc.aUV, planarUVs(mesh), 2);
+    gl.bindVertexArray(null);
+    const result = { vao, count: data.count };
+    this.buffers.set(mesh, result);
+    return result;
+  }
+  render(frame) {
+    const plain = [];
+    const textured = [];
+    for (const item of frame.items) {
+      (this.sources.has(item.mesh) ? textured : plain).push(item);
+    }
+    this.inner.render(textured.length ? { ...frame, items: plain } : frame);
+    if (!textured.length) return;
+    const gl = this.gl;
+    const loc = this.locations;
+    if (!gl || !this.program || !loc) return;
+    gl.useProgram(this.program);
+    gl.uniformMatrix4fv(loc.uViewProj, false, new Float32Array(frame.viewProjection));
+    gl.uniform1i(loc.uTexture, 0);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    gl.depthMask(false);
+    for (const item of textured) {
+      const buffers = this.buffersFor(item.mesh);
+      gl.bindTexture(gl.TEXTURE_2D, this.textureFor(item.mesh));
+      gl.uniformMatrix4fv(loc.uModel, false, new Float32Array(item.model));
+      gl.uniform1f(loc.uOpacity, itemOpacity(item.transparency));
+      gl.bindVertexArray(buffers.vao);
+      gl.drawArrays(gl.TRIANGLES, 0, buffers.count);
+    }
+    gl.depthMask(true);
+    gl.disable(gl.BLEND);
+    gl.bindVertexArray(null);
+  }
+  destroy() {
+    const gl = this.gl;
+    if (gl) {
+      for (const texture of this.textures.values()) gl.deleteTexture(texture);
+      for (const buffers of this.buffers.values()) gl.deleteVertexArray(buffers.vao);
+      if (this.program) gl.deleteProgram(this.program);
+    }
+    this.textures.clear();
+    this.buffers.clear();
+    this.sources.clear();
+    this.gl = void 0;
+    this.program = void 0;
+    this.locations = void 0;
+    this.inner.destroy();
+  }
+};