@twick/live-player 0.15.20 → 0.15.21

package/dist/{internal-LKI2GAXH-C1j65akX.mjs → internal-B6KRB6EV-DXLdD4g5.js}

@@ -1,6 +1,191 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var dist = {};
+var runtime = {};
+Object.defineProperty(runtime, "__esModule", { value: true });
+runtime.createEffectContext = createEffectContext;
+runtime.applyEffects = applyEffects;
+var BASIC_VERTEX_SHADER = "\n  attribute vec2 a_position;\n  attribute vec2 a_texCoord;\n\n  varying vec2 v_texCoord;\n\n  void main() {\n    v_texCoord = a_texCoord;\n    gl_Position = vec4(a_position, 0.0, 1.0);\n  }\n";
+function createShader(gl, type, source) {
+  var shader = gl.createShader(type);
+  if (!shader) {
+    throw new Error("Failed to create shader");
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    var info = gl.getShaderInfoLog(shader) || "Unknown error";
+    gl.deleteShader(shader);
+    throw new Error("Failed to compile shader: ".concat(info));
+  }
+  return shader;
+}
+function createProgram(gl, vertexSrc, fragmentSrc) {
+  var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSrc);
+  var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSrc);
+  var program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create program");
+  }
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var info = gl.getProgramInfoLog(program) || "Unknown error";
+    gl.deleteProgram(program);
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+    throw new Error("Failed to link program: ".concat(info));
+  }
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  return program;
+}
+function createEffectContext(canvas) {
+  var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    throw new Error("WebGL not supported");
+  }
+  var quadBuffer = gl.createBuffer();
+  if (!quadBuffer) {
+    throw new Error("Failed to create quad buffer");
+  }
+  gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+  var quadVertices = new Float32Array([
+    -1,
+    -1,
+    //
+    1,
+    -1,
+    -1,
+    1,
+    1,
+    1
+  ]);
+  gl.bufferData(gl.ARRAY_BUFFER, quadVertices, gl.STATIC_DRAW);
+  var texCoordBuffer = gl.createBuffer();
+  if (!texCoordBuffer) {
+    throw new Error("Failed to create texCoord buffer");
+  }
+  gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
+  var texCoords = new Float32Array([
+    0,
+    0,
+    //
+    1,
+    0,
+    0,
+    1,
+    1,
+    1
+  ]);
+  gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW);
+  var framebuffers = [];
+  var textures = [];
+  return {
+    gl,
+    programCache: /* @__PURE__ */ new Map(),
+    quadBuffer,
+    texCoordBuffer,
+    framebuffers,
+    textures
+  };
+}
+function ensureRenderTargets(ctx, width, height) {
+  var gl = ctx.gl, framebuffers = ctx.framebuffers, textures = ctx.textures;
+  while (framebuffers.length < 2) {
+    var fb = gl.createFramebuffer();
+    var tex = gl.createTexture();
+    if (!fb || !tex) {
+      throw new Error("Failed to create framebuffer or texture");
+    }
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    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);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+    framebuffers.push(fb);
+    textures.push(tex);
+  }
+  for (var i = 0; i < textures.length; i++) {
+    gl.bindTexture(gl.TEXTURE_2D, textures[i]);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  }
+}
+function applyEffects(opts) {
+  var ctx = opts.ctx, sourceTexture = opts.sourceTexture, width = opts.width, height = opts.height, effects = opts.effects;
+  var gl = ctx.gl, programCache = ctx.programCache, quadBuffer = ctx.quadBuffer, texCoordBuffer = ctx.texCoordBuffer, framebuffers = ctx.framebuffers, textures = ctx.textures;
+  if (!effects.length) {
+    return sourceTexture;
+  }
+  ensureRenderTargets(ctx, width, height);
+  var readTexture = sourceTexture;
+  var writeIndex = 0;
+  gl.viewport(0, 0, width, height);
+  effects.forEach(function(active) {
+    if (!active.fragment)
+      return;
+    var cacheKey = active.fragment;
+    var program = programCache.get(cacheKey);
+    if (!program) {
+      program = createProgram(gl, BASIC_VERTEX_SHADER, active.fragment);
+      programCache.set(cacheKey, program);
+    }
+    gl.useProgram(program);
+    var positionLocation = gl.getAttribLocation(program, "a_position");
+    var texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
+    gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+    gl.enableVertexAttribArray(positionLocation);
+    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
+    gl.enableVertexAttribArray(texCoordLocation);
+    gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
+    var fb = framebuffers[writeIndex];
+    var targetTex = textures[writeIndex];
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, readTexture);
+    var textureLocation = gl.getUniformLocation(program, "uTexture");
+    if (textureLocation) {
+      gl.uniform1i(textureLocation, 0);
+    }
+    var resolutionLocation = gl.getUniformLocation(program, "uResolution");
+    if (resolutionLocation) {
+      gl.uniform2f(resolutionLocation, width, height);
+    }
+    var timeLocation = gl.getUniformLocation(program, "uTime");
+    if (timeLocation) {
+      gl.uniform1f(timeLocation, active.progress);
+    }
+    var intensityLocation = gl.getUniformLocation(program, "uIntensity");
+    if (intensityLocation) {
+      gl.uniform1f(intensityLocation, active.intensity);
+    }
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    readTexture = targetTex;
+    writeIndex = (writeIndex + 1) % textures.length;
+  });
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  return readTexture;
+}
+(function(exports$1) {
+  Object.defineProperty(exports$1, "__esModule", { value: true });
+  exports$1.applyEffects = exports$1.createEffectContext = void 0;
+  var runtime_1 = runtime;
+  Object.defineProperty(exports$1, "createEffectContext", { enumerable: true, get: function() {
+    return runtime_1.createEffectContext;
+  } });
+  Object.defineProperty(exports$1, "applyEffects", { enumerable: true, get: function() {
+    return runtime_1.applyEffects;
+  } });
+})(dist);
 const parseNumber = (color, len) => {
   if (typeof color !== "number") return;
   if (len === 3) {
@@ -6064,6 +6249,15 @@ var TwickPlayer = class extends HTMLElement {
     __publicField(this, "_looping", true);
     __publicField(this, "_volume", 1);
     __publicField(this, "volumeChangeRequested", true);
+    /** WebGL canvas and context for applying effects to the live preview. */
+    __publicField(this, "effectGlCanvas", null);
+    __publicField(this, "effectContext", null);
+    __publicField(this, "effectReadbackFbo", null);
+    /**
+     * Optional resolver for active effects at a given time. Set by the host (e.g. twick) so
+     * effect logic lives outside twick-base. When set, used for live preview effects.
+     */
+    __publicField(this, "getActiveEffectsForTime");
     /**
      * Triggered by the timeline.
      */
@@ -6111,6 +6305,7 @@ var TwickPlayer = class extends HTMLElement {
           this.player.playback.currentScene,
           this.player.playback.previousScene
         );
+        this.applyEffectsToFinalBuffer();
         this.dispatchEvent(new CustomEvent("timeupdate", { detail: this.time }));
         const durationInFrames = this.player.playback.duration;
         if (durationInFrames === this.duration) {
@@ -6308,6 +6503,85 @@ var TwickPlayer = class extends HTMLElement {
     this.addEventListener("seekto", this.handleSeekTo);
     this.addEventListener("volumechange", this.handleVolumeChange);
   }
+  /**
+   * Resolve active effects for the given time. Uses host-provided callback when set.
+   */
+  resolveActiveEffectsForTime(timeInSec) {
+    var _a;
+    if (this.getActiveEffectsForTime) {
+      const fps = ((_a = this.player) == null ? void 0 : _a.playback.fps) ?? 30;
+      return this.getActiveEffectsForTime(this.variables, timeInSec, fps);
+    }
+    return [];
+  }
+  /**
+   * Apply GL effects to the current frame and draw the result back to the stage canvas.
+   */
+  applyEffectsToFinalBuffer() {
+    const canvas = this.stage.finalBuffer;
+    const w = canvas.width;
+    const h = canvas.height;
+    if (w <= 0 || h <= 0) return;
+    const activeEffects = this.resolveActiveEffectsForTime(this.time);
+    if (activeEffects.length === 0) return;
+    if (!this.effectGlCanvas) {
+      this.effectGlCanvas = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(w, h) : document.createElement("canvas");
+      this.effectGlCanvas.width = w;
+      this.effectGlCanvas.height = h;
+    }
+    const glCanvas = this.effectGlCanvas;
+    if (glCanvas.width !== w || glCanvas.height !== h) {
+      glCanvas.width = w;
+      glCanvas.height = h;
+    }
+    if (!this.effectContext) {
+      this.effectContext = dist.createEffectContext(glCanvas);
+    }
+    const gl = this.effectContext.gl;
+    const sourceTexture = gl.createTexture();
+    if (!sourceTexture) return;
+    gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
+    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);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
+    const resultTexture = dist.applyEffects({
+      ctx: this.effectContext,
+      sourceTexture,
+      width: w,
+      height: h,
+      effects: activeEffects
+    });
+    gl.deleteTexture(sourceTexture);
+    if (!this.effectReadbackFbo) {
+      this.effectReadbackFbo = gl.createFramebuffer();
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.effectReadbackFbo);
+    gl.framebufferTexture2D(
+      gl.FRAMEBUFFER,
+      gl.COLOR_ATTACHMENT0,
+      gl.TEXTURE_2D,
+      resultTexture,
+      0
+    );
+    const pixels = new Uint8Array(w * h * 4);
+    gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    const ctx2d = canvas.getContext("2d");
+    if (ctx2d) {
+      const imageData = ctx2d.createImageData(w, h);
+      const rowBytes = w * 4;
+      for (let y = 0; y < h; y++) {
+        imageData.data.set(
+          pixels.subarray((h - 1 - y) * rowBytes, (h - y) * rowBytes),
+          y * rowBytes
+        );
+      }
+      ctx2d.putImageData(imageData, 0, 0);
+    }
+  }
   updateSettings() {
     var _a;
     if (!this.defaultSettings) {
@@ -6327,4 +6601,4 @@ var TwickPlayer = class extends HTMLElement {
 if (!customElements.get(ID)) {
   customElements.define(ID, TwickPlayer);
 }
-//# sourceMappingURL=internal-LKI2GAXH-C1j65akX.mjs.map
+//# sourceMappingURL=internal-B6KRB6EV-DXLdD4g5.js.map