@twick/core 0.15.20 → 0.15.21

package/dist/index.cjs

@@ -95,6 +95,7 @@ __export(index_exports, {
   ValueDispatcher: () => ValueDispatcher,
   Variables: () => Variables,
   Vector2: () => Vector2,
+  WasmEffectsExporter: () => WasmEffectsExporter,
   WasmExporter: () => WasmExporter,
   addEditorToProject: () => addEditorToProject,
   all: () => all,
@@ -1594,6 +1595,117 @@ _WasmExporter.id = "@twick/core/wasm";
 _WasmExporter.displayName = "Video (Wasm)";
 var WasmExporter = _WasmExporter;
 
+// src/exporter/WasmEffectsExporter.ts
+var import_gl_runtime = require("@twick/gl-runtime");
+var _WasmEffectsExporter = class _WasmEffectsExporter {
+  constructor(project, settings, inner) {
+    this.project = project;
+    this.settings = settings;
+    this.inner = inner;
+    this.effectGlCanvas = null;
+    this.effectContext = null;
+    this.effectReadbackFbo = null;
+  }
+  static async create(project, settings) {
+    const inner = await WasmExporter.create(project, settings);
+    return new _WasmEffectsExporter(project, settings, inner);
+  }
+  async start() {
+    return this.inner.start();
+  }
+  async handleFrame(canvas, frame, sceneFrame, sceneName, signal) {
+    const variables = this.project.variables;
+    const fps = this.settings.fps ?? this.project.settings.rendering.fps ?? 30;
+    const activeEffects = this.project.getActiveEffectsForFrame?.(variables ?? {}, frame, fps) ?? [];
+    if (activeEffects.length === 0) {
+      return this.inner.handleFrame(canvas, frame, sceneFrame, sceneName, signal);
+    }
+    const w = canvas.width;
+    const h = canvas.height;
+    if (w <= 0 || h <= 0) {
+      return this.inner.handleFrame(canvas, frame, sceneFrame, sceneName, signal);
+    }
+    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 = (0, import_gl_runtime.createEffectContext)(glCanvas);
+    }
+    const gl = this.effectContext.gl;
+    const sourceTexture = gl.createTexture();
+    if (!sourceTexture) {
+      return this.inner.handleFrame(canvas, frame, sceneFrame, sceneName, signal);
+    }
+    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 = (0, import_gl_runtime.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 outCanvas = document.createElement("canvas");
+    outCanvas.width = w;
+    outCanvas.height = h;
+    const ctx2d = outCanvas.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);
+    }
+    return this.inner.handleFrame(outCanvas, frame, sceneFrame, sceneName, signal);
+  }
+  async stop(result) {
+    return this.inner.stop?.();
+  }
+  async generateAudio(assets, startFrame, endFrame) {
+    return this.inner.generateAudio?.(assets, startFrame, endFrame);
+  }
+  async mergeMedia() {
+    return this.inner.mergeMedia?.();
+  }
+  async downloadVideos(assets) {
+    return this.inner.downloadVideos?.(assets);
+  }
+};
+_WasmEffectsExporter.id = "@twick/core/wasm-effects";
+_WasmEffectsExporter.displayName = "Video (Wasm + Effects)";
+var WasmEffectsExporter = _WasmEffectsExporter;
+
 // src/plugin/makePlugin.ts
 function makePlugin(plugin) {
   return typeof plugin === "function" ? plugin : () => plugin;
@@ -5016,7 +5128,8 @@ var Renderer = class {
     const exporters = [
       FFmpegExporterClient,
       ImageExporter,
-      WasmExporter
+      WasmExporter,
+      WasmEffectsExporter
     ];
     const exporterClass = exporters.find(
       (exporter) => exporter.id === settings.exporter.name
@@ -6330,6 +6443,7 @@ function* zoomOutTransition(area, duration = 0.6) {
   ValueDispatcher,
   Variables,
   Vector2,
+  WasmEffectsExporter,
   WasmExporter,
   addEditorToProject,
   all,