@livekit/track-processors 0.5.3 → 0.5.5

package/dist/index.js

@@ -251,14 +251,112 @@ var dependencies = {
   "@mediapipe/tasks-vision": "0.10.14"
 };
 
-// src/webgl/index.ts
-var blurFragmentShader = `
-  precision highp float;
-  varying vec2 texCoords;
+// src/webgl/utils.ts
+function initTexture(gl, texIndex) {
+  const texRef = gl.TEXTURE0 + texIndex;
+  gl.activeTexture(texRef);
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  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.bindTexture(gl.TEXTURE_2D, texture);
+  return texture;
+}
+function createShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.error("Shader compile failed:", gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    throw new Error("Shader compile failed");
+  }
+  return shader;
+}
+function createProgram(gl, vs, fs) {
+  const program = gl.createProgram();
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.error("Program link failed:", gl.getProgramInfoLog(program));
+    throw new Error("Program link failed");
+  }
+  return program;
+}
+function createFramebuffer(gl, texture, width, height) {
+  const framebuffer = gl.createFramebuffer();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+  if (status !== gl.FRAMEBUFFER_COMPLETE) {
+    throw new Error("Framebuffer not complete");
+  }
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  return framebuffer;
+}
+function createVertexBuffer(gl) {
+  const vertexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([-1, -1, -1, 1, 1, 1, -1, -1, 1, 1, 1, -1]),
+    gl.STATIC_DRAW
+  );
+  return vertexBuffer;
+}
+async function resizeImageToCover(image, targetWidth, targetHeight) {
+  const imgAspect = image.width / image.height;
+  const targetAspect = targetWidth / targetHeight;
+  let sx = 0;
+  let sy = 0;
+  let sWidth = image.width;
+  let sHeight = image.height;
+  if (imgAspect > targetAspect) {
+    sWidth = Math.round(image.height * targetAspect);
+    sx = Math.round((image.width - sWidth) / 2);
+  } else if (imgAspect < targetAspect) {
+    sHeight = Math.round(image.width / targetAspect);
+    sy = Math.round((image.height - sHeight) / 2);
+  }
+  return createImageBitmap(image, sx, sy, sWidth, sHeight, {
+    resizeWidth: targetWidth,
+    resizeHeight: targetHeight,
+    resizeQuality: "medium"
+  });
+}
+var emptyImageData = new ImageData(2, 2);
+emptyImageData.data[0] = 0;
+emptyImageData.data[1] = 0;
+emptyImageData.data[2] = 0;
+emptyImageData.data[3] = 0;
+var glsl = (source) => source;
+
+// src/webgl/shader-programs/vertexShader.ts
+var vertexShaderSource = (flipY = true) => `#version 300 es
+  in vec2 position;
+  out vec2 texCoords;
+
+  void main() {
+    texCoords = (position + 1.0) / 2.0;
+    texCoords.y = ${flipY ? "1.0 - texCoords.y" : "texCoords.y"};
+    gl_Position = vec4(position, 0, 1.0);
+  }
+`;
+
+// src/webgl/shader-programs/blurShader.ts
+var blurFragmentShader = glsl`#version 300 es
+  precision mediump float;
+  in vec2 texCoords;
   uniform sampler2D u_texture;
   uniform vec2 u_texelSize;
   uniform vec2 u_direction;
   uniform float u_radius;
+  out vec4 fragColor;
 
   void main() {
     float sigma = u_radius;
@@ -273,93 +371,18 @@ var blurFragmentShader = `
       if (abs(offset) > float(radius)) continue;
       float weight = exp(-(offset * offset) / twoSigmaSq);
       vec2 sampleCoord = texCoords + u_direction * u_texelSize * offset;
-      result += texture2D(u_texture, sampleCoord).rgb * weight;
+      result += texture(u_texture, sampleCoord).rgb * weight;
       totalWeight += weight;
     }
 
-    gl_FragColor = vec4(result / totalWeight, 1.0);
+    fragColor = vec4(result / totalWeight, 1.0);
   }
 `;
-var createShaderProgram = (gl) => {
-  const vs = `
-      attribute vec2 position;
-      varying vec2 texCoords;
-    
-      void main() {
-        texCoords = (position + 1.0) / 2.0;
-        texCoords.y = 1.0 - texCoords.y;
-        gl_Position = vec4(position, 0, 1.0);
-      }
-    `;
-  const cS = `
-      precision highp float;
-      varying vec2 texCoords;
-      uniform sampler2D background;
-      uniform sampler2D frame;
-      uniform sampler2D mask;
-      void main() {
-          vec4 maskTex = texture2D(mask, texCoords); 
-          vec4 frameTex = texture2D(frame, texCoords);
-          vec4 bgTex = texture2D(background, texCoords);
-       
-      
-        float a = maskTex.r;
-  
-        gl_FragColor = mix(bgTex, vec4(frameTex.rgb, 1.0), 1.0 - a);
-      
-      }
-    `;
-  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
-  if (!vertexShader) {
-    throw Error("can not create vertex shader");
-  }
-  gl.shaderSource(vertexShader, vs);
-  gl.compileShader(vertexShader);
-  const compositeShader = gl.createShader(gl.FRAGMENT_SHADER);
-  if (!compositeShader) {
-    throw Error("can not create fragment shader");
-  }
-  gl.shaderSource(compositeShader, cS);
-  gl.compileShader(compositeShader);
-  const compositeProgram = gl.createProgram();
-  if (!compositeProgram) {
-    throw Error("can not create composite program");
-  }
-  gl.attachShader(compositeProgram, vertexShader);
-  gl.attachShader(compositeProgram, compositeShader);
-  gl.linkProgram(compositeProgram);
-  let blurProgram = null;
-  let blurVertexShader = null;
-  let blurFrag = null;
-  let blurUniforms = null;
-  blurFrag = gl.createShader(gl.FRAGMENT_SHADER);
-  if (!blurFrag) {
-    throw Error("can not create blur shader");
-  }
-  gl.shaderSource(blurFrag, blurFragmentShader);
-  gl.compileShader(blurFrag);
-  if (!gl.getShaderParameter(blurFrag, gl.COMPILE_STATUS)) {
-    const info = gl.getShaderInfoLog(blurFrag);
-    throw Error(`Failed to compile blur shader: ${info}`);
-  }
-  blurVertexShader = gl.createShader(gl.VERTEX_SHADER);
-  if (!blurVertexShader) {
-    throw Error("can not create blur vertex shader");
-  }
-  gl.shaderSource(blurVertexShader, vs);
-  gl.compileShader(blurVertexShader);
-  blurProgram = gl.createProgram();
-  if (!blurProgram) {
-    throw Error("can not create blur program");
-  }
-  gl.attachShader(blurProgram, blurVertexShader);
-  gl.attachShader(blurProgram, blurFrag);
-  gl.linkProgram(blurProgram);
-  if (!gl.getProgramParameter(blurProgram, gl.LINK_STATUS)) {
-    const info = gl.getProgramInfoLog(blurProgram);
-    throw Error(`Failed to link blur program: ${info}`);
-  }
-  blurUniforms = {
+function createBlurProgram(gl) {
+  const blurVertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource());
+  const blurFrag = createShader(gl, gl.FRAGMENT_SHADER, blurFragmentShader);
+  const blurProgram = createProgram(gl, blurVertexShader, blurFrag);
+  const blurUniforms = {
     position: gl.getAttribLocation(blurProgram, "position"),
     texture: gl.getUniformLocation(blurProgram, "u_texture"),
     texelSize: gl.getUniformLocation(blurProgram, "u_texelSize"),
@@ -367,123 +390,267 @@ var createShaderProgram = (gl) => {
     radius: gl.getUniformLocation(blurProgram, "u_radius")
   };
   return {
+    program: blurProgram,
+    shader: blurFrag,
+    vertexShader: blurVertexShader,
+    uniforms: blurUniforms
+  };
+}
+function applyBlur(gl, sourceTexture, width, height, blurRadius, blurProgram, blurUniforms, vertexBuffer, processFramebuffers, processTextures) {
+  gl.useProgram(blurProgram);
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+  gl.vertexAttribPointer(blurUniforms.position, 2, gl.FLOAT, false, 0, 0);
+  gl.enableVertexAttribArray(blurUniforms.position);
+  const texelWidth = 1 / width;
+  const texelHeight = 1 / height;
+  gl.bindFramebuffer(gl.FRAMEBUFFER, processFramebuffers[0]);
+  gl.viewport(0, 0, width, height);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
+  gl.uniform1i(blurUniforms.texture, 0);
+  gl.uniform2f(blurUniforms.texelSize, texelWidth, texelHeight);
+  gl.uniform2f(blurUniforms.direction, 1, 0);
+  gl.uniform1f(blurUniforms.radius, blurRadius);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, processFramebuffers[1]);
+  gl.viewport(0, 0, width, height);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, processTextures[0]);
+  gl.uniform1i(blurUniforms.texture, 0);
+  gl.uniform2f(blurUniforms.direction, 0, 1);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  return processTextures[1];
+}
+
+// src/webgl/shader-programs/boxBlurShader.ts
+var boxBlurFragmentShader = glsl`#version 300 es
+precision mediump float;
+
+in vec2 texCoords;
+
+uniform sampler2D u_texture;
+uniform vec2 u_texelSize;    // 1.0 / texture size
+uniform vec2 u_direction;    // (1.0, 0.0) for horizontal, (0.0, 1.0) for vertical
+uniform float u_radius;      // blur radius in texels
+
+out vec4 fragColor;
+
+void main() {
+    vec3 sum = vec3(0.0);
+    float count = 0.0;
+
+    // Limit radius to avoid excessive loop cost
+    const int MAX_RADIUS = 16;
+    int radius = int(min(float(MAX_RADIUS), u_radius));
+
+    for (int i = -MAX_RADIUS; i <= MAX_RADIUS; ++i) {
+        if (abs(i) > radius) continue;
+
+        vec2 offset = u_direction * u_texelSize * float(i);
+        sum += texture(u_texture, texCoords + offset).rgb;
+        count += 1.0;
+  }
+
+  fragColor = vec4(sum / count, 1.0);
+}
+`;
+function createBoxBlurProgram(gl) {
+  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource());
+  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, boxBlurFragmentShader);
+  const program = createProgram(gl, vertexShader, fragmentShader);
+  const uniforms = {
+    position: gl.getAttribLocation(program, "position"),
+    texture: gl.getUniformLocation(program, "u_texture"),
+    texelSize: gl.getUniformLocation(program, "u_texelSize"),
+    direction: gl.getUniformLocation(program, "u_direction"),
+    radius: gl.getUniformLocation(program, "u_radius")
+  };
+  return {
+    program,
     vertexShader,
-    compositeShader,
-    blurShader: blurFrag,
-    compositeProgram,
-    blurProgram,
-    attribLocations: {
-      position: gl.getAttribLocation(compositeProgram, "position")
-    },
-    uniformLocations: {
-      mask: gl.getUniformLocation(compositeProgram, "mask"),
-      frame: gl.getUniformLocation(compositeProgram, "frame"),
-      background: gl.getUniformLocation(compositeProgram, "background")
-    },
-    blurUniforms
+    fragmentShader,
+    uniforms
   };
-};
-function initTexture(gl, texIndex) {
-  const texRef = gl.TEXTURE0 + texIndex;
-  gl.activeTexture(texRef);
+}
+
+// src/webgl/shader-programs/compositeShader.ts
+var compositeFragmentShader = glsl`#version 300 es
+  precision mediump float;
+  in vec2 texCoords;
+  uniform sampler2D background;
+  uniform sampler2D frame;
+  uniform sampler2D mask;
+  out vec4 fragColor;
+  
+  void main() {
+      
+    vec4 frameTex = texture(frame, texCoords);
+    vec4 bgTex = texture(background, texCoords);
+
+    float maskVal = texture(mask, texCoords).r;
+
+    // Compute screen-space gradient to detect edge sharpness
+    float grad = length(vec2(dFdx(maskVal), dFdy(maskVal)));
+
+    float edgeSoftness = 2.0; // higher = softer
+    
+    // Create a smooth edge around binary transition
+    float smoothAlpha = smoothstep(0.5 - grad * edgeSoftness, 0.5 + grad * edgeSoftness, maskVal);
+
+    // Optional: preserve frame alpha, or override as fully opaque
+    vec4 blended = mix(bgTex, vec4(frameTex.rgb, 1.0), 1.0 - smoothAlpha);
+    
+    fragColor = blended;
+  
+  }
+`;
+function createCompositeProgram(gl) {
+  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource());
+  const compositeShader = createShader(gl, gl.FRAGMENT_SHADER, compositeFragmentShader);
+  const compositeProgram = createProgram(gl, vertexShader, compositeShader);
+  const attribLocations = {
+    position: gl.getAttribLocation(compositeProgram, "position")
+  };
+  const uniformLocations = {
+    mask: gl.getUniformLocation(compositeProgram, "mask"),
+    frame: gl.getUniformLocation(compositeProgram, "frame"),
+    background: gl.getUniformLocation(compositeProgram, "background"),
+    stepWidth: gl.getUniformLocation(compositeProgram, "u_stepWidth")
+  };
+  return {
+    program: compositeProgram,
+    vertexShader,
+    fragmentShader: compositeShader,
+    attribLocations,
+    uniformLocations
+  };
+}
+
+// src/webgl/shader-programs/downSampler.ts
+function createDownSampler(gl, width, height) {
   const texture = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, texture);
-  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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-  gl.bindTexture(gl.TEXTURE_2D, texture);
-  return texture;
-}
-function createFramebuffer(gl, texture, width, height) {
+  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);
   const framebuffer = gl.createFramebuffer();
   gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
-  gl.bindTexture(gl.TEXTURE_2D, texture);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
-  if (status !== gl.FRAMEBUFFER_COMPLETE) {
-    throw new Error("Framebuffer not complete");
-  }
-  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-  return framebuffer;
+  const vertexSource = `
+      attribute vec2 position;
+      varying vec2 v_uv;
+      void main() {
+        v_uv = (position + 1.0) * 0.5;
+        gl_Position = vec4(position, 0.0, 1.0);
+      }
+    `;
+  const fragmentSource = `
+      precision mediump float;
+      varying vec2 v_uv;
+      uniform sampler2D u_texture;
+      void main() {
+        gl_FragColor = texture2D(u_texture, v_uv);
+      }
+    `;
+  const vertShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
+  const fragShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+  const program = createProgram(gl, vertShader, fragShader);
+  const uniforms = {
+    texture: gl.getUniformLocation(program, "u_texture"),
+    position: gl.getAttribLocation(program, "position")
+  };
+  return {
+    framebuffer,
+    texture,
+    program,
+    uniforms
+  };
 }
-var createVertexBuffer = (gl) => {
-  if (!gl) {
-    return null;
-  }
-  const vertexBuffer = gl.createBuffer();
+function applyDownsampling(gl, inputTexture, downSampler, vertexBuffer, width, height) {
+  gl.useProgram(downSampler.program);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, downSampler.framebuffer);
+  gl.viewport(0, 0, width, height);
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-  gl.bufferData(
-    gl.ARRAY_BUFFER,
-    new Float32Array([-1, -1, -1, 1, 1, 1, -1, -1, 1, 1, 1, -1]),
-    gl.STATIC_DRAW
-  );
-  return vertexBuffer;
-};
+  gl.enableVertexAttribArray(downSampler.uniforms.position);
+  gl.vertexAttribPointer(downSampler.uniforms.position, 2, gl.FLOAT, false, 0, 0);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, inputTexture);
+  gl.uniform1i(downSampler.uniforms.texture, 0);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  return downSampler.texture;
+}
+
+// src/webgl/index.ts
 var setupWebGL = (canvas) => {
-  const gl = canvas.getContext("webgl2", { premultipliedAlpha: false });
+  const gl = canvas.getContext("webgl2", {
+    antialias: true,
+    premultipliedAlpha: true
+  });
   let blurRadius = null;
+  let maskBlurRadius = 8;
+  const downsampleFactor = 4;
   if (!gl) {
+    console.error("Failed to create WebGL context");
     return void 0;
   }
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  const composite = createCompositeProgram(gl);
+  const compositeProgram = composite.program;
+  const positionLocation = composite.attribLocations.position;
   const {
-    compositeProgram,
-    blurProgram,
-    attribLocations: { position: positionLocation },
-    uniformLocations: {
-      mask: maskTextureLocation,
-      frame: frameTextureLocation,
-      background: bgTextureLocation
-    },
-    blurUniforms
-  } = createShaderProgram(gl);
+    mask: maskTextureLocation,
+    frame: frameTextureLocation,
+    background: bgTextureLocation
+  } = composite.uniformLocations;
+  const blur = createBlurProgram(gl);
+  const blurProgram = blur.program;
+  const blurUniforms = blur.uniforms;
+  const boxBlur = createBoxBlurProgram(gl);
+  const boxBlurProgram = boxBlur.program;
+  const boxBlurUniforms = boxBlur.uniforms;
   const bgTexture = initTexture(gl, 0);
   const frameTexture = initTexture(gl, 1);
   const vertexBuffer = createVertexBuffer(gl);
-  let processTextures = [];
-  let processFramebuffers = [];
-  processTextures.push(initTexture(gl, 3));
-  processTextures.push(initTexture(gl, 4));
-  processFramebuffers.push(createFramebuffer(gl, processTextures[0], canvas.width, canvas.height));
-  processFramebuffers.push(createFramebuffer(gl, processTextures[1], canvas.width, canvas.height));
+  if (!vertexBuffer) {
+    throw new Error("Failed to create vertex buffer");
+  }
+  let bgBlurTextures = [];
+  let bgBlurFrameBuffers = [];
+  let blurredMaskTexture = null;
+  let finalMaskTextures = [];
+  let readMaskIndex = 0;
+  let writeMaskIndex = 1;
+  bgBlurTextures.push(initTexture(gl, 3));
+  bgBlurTextures.push(initTexture(gl, 4));
+  const bgBlurTextureWidth = Math.floor(canvas.width / downsampleFactor);
+  const bgBlurTextureHeight = Math.floor(canvas.height / downsampleFactor);
+  const downSampler = createDownSampler(gl, bgBlurTextureWidth, bgBlurTextureHeight);
+  bgBlurFrameBuffers.push(
+    createFramebuffer(gl, bgBlurTextures[0], bgBlurTextureWidth, bgBlurTextureHeight)
+  );
+  bgBlurFrameBuffers.push(
+    createFramebuffer(gl, bgBlurTextures[1], bgBlurTextureWidth, bgBlurTextureHeight)
+  );
+  const tempMaskTexture = initTexture(gl, 5);
+  const tempMaskFrameBuffer = createFramebuffer(gl, tempMaskTexture, canvas.width, canvas.height);
+  finalMaskTextures.push(initTexture(gl, 6));
+  finalMaskTextures.push(initTexture(gl, 7));
+  const finalMaskFrameBuffers = [
+    createFramebuffer(gl, finalMaskTextures[0], canvas.width, canvas.height),
+    createFramebuffer(gl, finalMaskTextures[1], canvas.width, canvas.height)
+  ];
   gl.useProgram(compositeProgram);
   gl.uniform1i(bgTextureLocation, 0);
   gl.uniform1i(frameTextureLocation, 1);
   gl.uniform1i(maskTextureLocation, 2);
-  let customBackgroundImage = null;
-  function applyBlur(sourceTexture, width, height) {
-    if (!blurRadius || !blurProgram || !blurUniforms)
-      return bgTexture;
-    gl.useProgram(blurProgram);
-    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-    gl.vertexAttribPointer(blurUniforms.position, 2, gl.FLOAT, false, 0, 0);
-    gl.enableVertexAttribArray(blurUniforms.position);
-    const texelWidth = 1 / width;
-    const texelHeight = 1 / height;
-    gl.bindFramebuffer(gl.FRAMEBUFFER, processFramebuffers[0]);
-    gl.viewport(0, 0, width, height);
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
-    gl.uniform1i(blurUniforms.texture, 0);
-    gl.uniform2f(blurUniforms.texelSize, texelWidth, texelHeight);
-    gl.uniform2f(blurUniforms.direction, 1, 0);
-    gl.uniform1f(blurUniforms.radius, blurRadius);
-    gl.drawArrays(gl.TRIANGLES, 0, 6);
-    gl.bindFramebuffer(gl.FRAMEBUFFER, processFramebuffers[1]);
-    gl.viewport(0, 0, width, height);
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, processTextures[0]);
-    gl.uniform1i(blurUniforms.texture, 0);
-    gl.uniform2f(blurUniforms.direction, 0, 1);
-    gl.drawArrays(gl.TRIANGLES, 0, 6);
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    return processTextures[1];
-  }
-  function render(frame, mask) {
-    if (frame.codedWidth === 0 || mask.width === 0) {
+  let customBackgroundImage = emptyImageData;
+  function renderFrame(frame) {
+    if (frame.codedWidth === 0 || finalMaskTextures.length === 0) {
       return;
     }
     const width = frame.displayWidth;
@@ -492,15 +659,33 @@ var setupWebGL = (canvas) => {
     gl.bindTexture(gl.TEXTURE_2D, frameTexture);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, frame);
     let backgroundTexture = bgTexture;
-    if (customBackgroundImage) {
+    if (blurRadius) {
+      const downSampledFrameTexture = applyDownsampling(
+        gl,
+        frameTexture,
+        downSampler,
+        vertexBuffer,
+        bgBlurTextureWidth,
+        bgBlurTextureHeight
+      );
+      backgroundTexture = applyBlur(
+        gl,
+        downSampledFrameTexture,
+        bgBlurTextureWidth,
+        bgBlurTextureHeight,
+        blurRadius,
+        blurProgram,
+        blurUniforms,
+        vertexBuffer,
+        bgBlurFrameBuffers,
+        bgBlurTextures
+      );
+    } else {
       gl.activeTexture(gl.TEXTURE0);
       gl.bindTexture(gl.TEXTURE_2D, bgTexture);
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, customBackgroundImage);
       backgroundTexture = bgTexture;
-    } else if (blurRadius) {
-      backgroundTexture = applyBlur(frameTexture, width, height);
     }
-    const maskTexture = mask.getAsWebGLTexture();
     gl.viewport(0, 0, width, height);
     gl.clearColor(1, 1, 1, 1);
     gl.clear(gl.COLOR_BUFFER_BIT);
@@ -515,81 +700,89 @@ var setupWebGL = (canvas) => {
     gl.bindTexture(gl.TEXTURE_2D, frameTexture);
     gl.uniform1i(frameTextureLocation, 1);
     gl.activeTexture(gl.TEXTURE2);
-    gl.bindTexture(gl.TEXTURE_2D, maskTexture);
+    gl.bindTexture(gl.TEXTURE_2D, finalMaskTextures[readMaskIndex]);
     gl.uniform1i(maskTextureLocation, 2);
     gl.drawArrays(gl.TRIANGLES, 0, 6);
-    mask.close();
   }
   async function setBackgroundImage(image) {
-    customBackgroundImage = null;
+    customBackgroundImage = emptyImageData;
     if (image) {
       try {
-        const canvasWidth = canvas.width;
-        const canvasHeight = canvas.height;
-        const imgAspect = image.width / image.height;
-        const canvasAspect = canvasWidth / canvasHeight;
-        let sx = 0;
-        let sy = 0;
-        let sWidth = image.width;
-        let sHeight = image.height;
-        if (imgAspect > canvasAspect) {
-          sWidth = Math.round(image.height * canvasAspect);
-          sx = Math.round((image.width - sWidth) / 2);
-        } else if (imgAspect < canvasAspect) {
-          sHeight = Math.round(image.width / canvasAspect);
-          sy = Math.round((image.height - sHeight) / 2);
-        }
-        const croppedImage = await createImageBitmap(image, sx, sy, sWidth, sHeight, {
-          resizeWidth: canvasWidth,
-          resizeHeight: canvasHeight,
-          resizeQuality: "medium"
-        });
+        const croppedImage = await resizeImageToCover(image, canvas.width, canvas.height);
         customBackgroundImage = croppedImage;
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, bgTexture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, croppedImage);
       } catch (error) {
-        console.error("Error processing background image:", error);
-        customBackgroundImage = image;
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, bgTexture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+        console.error(
+          "Error processing background image, falling back to black background:",
+          error
+        );
       }
-    } else {
-      const emptyImage = new ImageData(2, 2);
-      emptyImage.data[0] = 0;
-      emptyImage.data[1] = 0;
-      emptyImage.data[2] = 0;
-      emptyImage.data[3] = 0;
-      gl.activeTexture(gl.TEXTURE0);
-      gl.bindTexture(gl.TEXTURE_2D, bgTexture);
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, emptyImage);
     }
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, bgTexture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, customBackgroundImage);
   }
   function setBlurRadius(radius) {
-    blurRadius = radius;
+    blurRadius = radius ? Math.max(1, Math.floor(radius / downsampleFactor)) : null;
     setBackgroundImage(null);
   }
+  function updateMask(mask) {
+    const tempFramebuffers = [tempMaskFrameBuffer, finalMaskFrameBuffers[writeMaskIndex]];
+    const tempTextures = [tempMaskTexture, finalMaskTextures[writeMaskIndex]];
+    applyBlur(
+      gl,
+      mask,
+      canvas.width,
+      canvas.height,
+      maskBlurRadius || 1,
+      boxBlurProgram,
+      boxBlurUniforms,
+      vertexBuffer,
+      tempFramebuffers,
+      tempTextures
+    );
+    readMaskIndex = writeMaskIndex;
+    writeMaskIndex = 1 - writeMaskIndex;
+  }
   function cleanup() {
     gl.deleteProgram(compositeProgram);
     gl.deleteProgram(blurProgram);
+    gl.deleteProgram(boxBlurProgram);
     gl.deleteTexture(bgTexture);
     gl.deleteTexture(frameTexture);
-    for (const texture of processTextures) {
+    gl.deleteTexture(tempMaskTexture);
+    gl.deleteFramebuffer(tempMaskFrameBuffer);
+    for (const texture of bgBlurTextures) {
+      gl.deleteTexture(texture);
+    }
+    for (const framebuffer of bgBlurFrameBuffers) {
+      gl.deleteFramebuffer(framebuffer);
+    }
+    for (const texture of finalMaskTextures) {
       gl.deleteTexture(texture);
     }
-    for (const framebuffer of processFramebuffers) {
+    for (const framebuffer of finalMaskFrameBuffers) {
       gl.deleteFramebuffer(framebuffer);
     }
     gl.deleteBuffer(vertexBuffer);
+    if (blurredMaskTexture) {
+      gl.deleteTexture(blurredMaskTexture);
+    }
+    if (downSampler) {
+      gl.deleteTexture(downSampler.texture);
+      gl.deleteFramebuffer(downSampler.framebuffer);
+      gl.deleteProgram(downSampler.program);
+    }
     if (customBackgroundImage) {
-      customBackgroundImage.close();
-      customBackgroundImage = null;
+      if (customBackgroundImage instanceof ImageBitmap) {
+        customBackgroundImage.close();
+      }
+      customBackgroundImage = emptyImageData;
     }
-    processTextures = [];
-    processFramebuffers = [];
+    bgBlurTextures = [];
+    bgBlurFrameBuffers = [];
+    finalMaskTextures = [];
   }
-  return { render, setBackgroundImage, setBlurRadius, cleanup };
+  return { renderFrame, updateMask, setBackgroundImage, setBlurRadius, cleanup };
 };
 
 // src/transformers/VideoTransformer.ts
@@ -640,6 +833,7 @@ var BackgroundProcessor = class extends VideoTransformer {
   constructor(opts) {
     super();
     this.backgroundImage = null;
+    this.segmentationTimeMs = 0;
     this.options = opts;
     this.update(opts);
   }
@@ -691,7 +885,7 @@ var BackgroundProcessor = class extends VideoTransformer {
     (_a = this.gl) == null ? void 0 : _a.setBackgroundImage(imageData);
   }
   async transform(frame, controller) {
-    var _a;
+    var _a, _b;
     try {
       if (!(frame instanceof VideoFrame) || frame.codedWidth === 0 || frame.codedHeight === 0) {
         console.debug("empty frame detected, ignoring");
@@ -701,37 +895,49 @@ var BackgroundProcessor = class extends VideoTransformer {
         controller.enqueue(frame);
         return;
       }
+      const frameTimeMs = Date.now();
       if (!this.canvas) {
         throw TypeError("Canvas needs to be initialized first");
       }
       this.canvas.width = frame.displayWidth;
       this.canvas.height = frame.displayHeight;
-      let startTimeMs = performance.now();
-      (_a = this.imageSegmenter) == null ? void 0 : _a.segmentForVideo(frame, startTimeMs, (result) => {
-        var _a2, _b;
-        const segmentationTimeMs = performance.now() - startTimeMs;
-        this.segmentationResults = result;
-        this.drawFrame(frame);
-        if (this.canvas && this.canvas.width > 0 && this.canvas.height > 0) {
-          const newFrame = new VideoFrame(this.canvas, {
-            timestamp: frame.timestamp || Date.now()
+      const segmentationPromise = new Promise((resolve, reject) => {
+        var _a2;
+        try {
+          let segmentationStartTimeMs = performance.now();
+          (_a2 = this.imageSegmenter) == null ? void 0 : _a2.segmentForVideo(frame, segmentationStartTimeMs, (result) => {
+            this.segmentationTimeMs = performance.now() - segmentationStartTimeMs;
+            this.segmentationResults = result;
+            this.updateMask(result.categoryMask);
+            result.close();
+            resolve();
           });
-          const filterTimeMs = performance.now() - startTimeMs - segmentationTimeMs;
-          const stats = {
-            processingTimeMs: performance.now() - startTimeMs,
-            segmentationTimeMs,
-            filterTimeMs
-          };
-          (_b = (_a2 = this.options).onFrameProcessed) == null ? void 0 : _b.call(_a2, stats);
-          controller.enqueue(newFrame);
-        } else {
-          controller.enqueue(frame);
+        } catch (e) {
+          reject(e);
         }
-        frame.close();
       });
+      const filterStartTimeMs = performance.now();
+      this.drawFrame(frame);
+      if (this.canvas && this.canvas.width > 0 && this.canvas.height > 0) {
+        const newFrame = new VideoFrame(this.canvas, {
+          timestamp: frame.timestamp || frameTimeMs
+        });
+        controller.enqueue(newFrame);
+        const filterTimeMs = performance.now() - filterStartTimeMs;
+        const stats = {
+          processingTimeMs: this.segmentationTimeMs + filterTimeMs,
+          segmentationTimeMs: this.segmentationTimeMs,
+          filterTimeMs
+        };
+        (_b = (_a = this.options).onFrameProcessed) == null ? void 0 : _b.call(_a, stats);
+      } else {
+        controller.enqueue(frame);
+      }
+      await segmentationPromise;
     } catch (e) {
       console.error("Error while processing frame: ", e);
-      frame == null ? void 0 : frame.close();
+    } finally {
+      frame.close();
     }
   }
   async update(opts) {
@@ -744,12 +950,16 @@ var BackgroundProcessor = class extends VideoTransformer {
     }
   }
   async drawFrame(frame) {
-    if (!this.canvas || !this.gl || !this.segmentationResults || !this.inputVideo)
+    var _a;
+    if (!this.gl)
       return;
-    const mask = this.segmentationResults.categoryMask;
-    if (mask) {
-      this.gl.render(frame, mask);
-    }
+    (_a = this.gl) == null ? void 0 : _a.renderFrame(frame);
+  }
+  async updateMask(mask) {
+    var _a;
+    if (!mask)
+      return;
+    (_a = this.gl) == null ? void 0 : _a.updateMask(mask.getAsWebGLTexture());
   }
 };
 
@@ -797,17 +1007,14 @@ var BackgroundProcessor2 = (options, name = "background-processor") => {
     onFrameProcessed,
     ...processorOpts
   } = options;
-  const processor = new ProcessorWrapper(
-    new BackgroundProcessor({
-      blurRadius,
-      imagePath,
-      segmenterOptions,
-      assetPaths,
-      onFrameProcessed
-    }),
-    name,
-    processorOpts
-  );
+  const transformer = new BackgroundProcessor({
+    blurRadius,
+    imagePath,
+    segmenterOptions,
+    assetPaths,
+    onFrameProcessed
+  });
+  const processor = new ProcessorWrapper(transformer, name, processorOpts);
   return processor;
 };