diff --git a/CHANGELOG.md b/CHANGELOG.md
index b7f3f91..c98f9d9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,46 @@
+3.0.0-beta.1 (December 4, 2024)
+===============================
+
+* Web workers are now supported for Firefox and Safari.
+
+3.0.0-preview.2 (September 16, 2024)
+====================================
+
+* The web workers can now be hosted on a different domain than that of the application, provided the `Access-Control-Allow-Origin` response header points to the domain of the application.
+  ```ts
+  import { GaussianBlurBackgroundProcessor } from '@twilio/video-processors';
+
+  /* Application is running at https://appserver.com/app */
+
+  const processor = new GaussianBlurBackgroundProcessor({
+    assetsPath: "https://assetsserver.com/path/to/assets"
+  });
+  ```
+
+3.0.0-preview.1 (August 13, 2024)
+=================================
+
+*The 3.x version of the Video Processors SDK works with `twilio-video` SDK versions `2.29.0` and above.*
+
+API Changes
+-----------
+
+* The VideoProcessors now run in web workers on Chromium-based browsers. Support for web workers on other supported browsers is upcoming. While adding a `VideoProcessor` to a `VideoTrack`, use the following `AddProcessorOptions`:
+  ```ts
+  videoTrack.addProcessor(processor, {
+    inputFrameBufferType: 'videoframe',
+    outputFrameBufferContextType: 'bitmaprenderer'
+  });
+  ```
+* The `Canvas2D` and `WebGL2` pipelines are replaced by a single hybrid pipeline. Therefore, the following APIs are no longer available:
+  * `BackgroundProcessorOptions.pipeline`
+  * `Pipeline` enum exported by `@twilio/video-processors`
+
+Performance Improvements
+------------------------
+
+*TODO(mmalavalli)*
+
 2.2.0 (July 16, 2024)
 =====================
 
diff --git a/LICENSE.md b/LICENSE.md
index d29b5f9..ecba1f6 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,7 +1,7 @@
 The following license applies to all parts of this software except as
 documented below.
 
-    Copyright (C) 2022 Twilio Inc.
+    Copyright (C) 2025 Twilio Inc.
     All rights reserved.
 
     Redistribution and use in source and binary forms, with or without
diff --git a/README.md b/README.md
index 7fbe7fa..aa69f53 100644
--- a/README.md
+++ b/README.md
@@ -53,7 +53,11 @@ You can also copy `twilio-video-processors.js` from the `dist/build` folder and
 
 ### Assets
 
-In order to achieve the best performance, the VideoProcessors use WebAssembly to run TensorFlow Lite for person segmentation. You need to serve the tflite model and binaries so they can be loaded properly. These files can be downloaded from the `dist/build` folder. Check the [API docs](https://twilio.github.io/twilio-video-processors.js/interfaces/VirtualBackgroundProcessorOptions.html#assetsPath) for details and the [examples](https://github.com/twilio/twilio-video-processors.js/tree/master/examples) folder for reference.
+In order to achieve the best performance, the VideoProcessors use WebAssembly to run TensorFlow Lite for person segmentation. You need to serve the tflite model, binaries and web workers so they can be loaded properly. These files can be downloaded from the `dist/build` folder. Check the [API docs](https://twilio.github.io/twilio-video-processors.js/interfaces/VirtualBackgroundProcessorOptions.html#assetsPath) for details and the [examples](https://github.com/twilio/twilio-video-processors.js/tree/master/examples) folder for reference.
+
+#### CORS
+
+If you are serving the assets from a domain that is different from that of your application, then ensure that the `Access-Control-Allow-Origin` response header points to your application's domain.
 
 ## Usage
 
diff --git a/assets/selfie_segmentation_landscape.tflite b/assets/selfie_segmentation_landscape.tflite
index 4ea3f8a..3a508f8 100644
Binary files a/assets/selfie_segmentation_landscape.tflite and b/assets/selfie_segmentation_landscape.tflite differ
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..d397cf8
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,20 @@
+const globals = require("globals");
+const pluginJs = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+
+
+module.exports = [
+  { files: ["lib/**/*.ts"] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    rules: {
+      "@typescript-eslint/ban-ts-comment": "warn",
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-namespace": "warn",
+      "no-unused-vars": "warn",
+      "no-undef": "warn",
+    },
+  },
+];
diff --git a/examples/README.md b/examples/README.md
index e410d1c..9fd6335 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -8,9 +8,10 @@ Go to `${PROJECT_ROOT}/examples` and run `npm install`. It will install the depe
 
 Open `http://localhost:3000` in a Chrome tab. The app captures your camera upon loading and plays it in a `<video>` element. You can choose to enable, disable or update the background settings using the controls on the page. Additionally, you can specify the following url parameters:
 
+- `blurFilterRadius` - Radius of the background blur filter (default: 15)
 - `capFramerate` - Choose video capture frame rate (default: 30)
 - `capResolution=wxh` - Choose video capture resolution (default: 1280x720)
-- `debounce=true|false` - Whether to skip processing every other frame (default: false)
-- `maskBlurRadius` - Radius of the mask blur filter (default: 8 for WebGL2, 4 for Canvas2D)
-- `pipeline=Canvas2D|WebGL2` - Choose the canvas or webgl pipeline (default: WebGL2)
+- `deferInputFrameDownscale=true|false` - **(Chrome only)** Whether to calculate the person mask without waiting for the input frame to be downscaled (default: false)
+- `maskBlurRadius` - Radius of the mask blur filter (default: 8)
 - `stats=advanced|hide|show` - Show performance benchmarks (default: show)
+- `useWebWorker=true|false` - **(Chrome only)** Whether to use a web worker for background replacement (default: true)
diff --git a/examples/virtualbackground/index.html b/examples/virtualbackground/index.html
index 7e3f74e..a71be3c 100644
--- a/examples/virtualbackground/index.html
+++ b/examples/virtualbackground/index.html
@@ -44,7 +44,7 @@ <h5 class="modal-title" id="errorModalLabel">Error</h5>
         </div>
       </div>
     </div>
-    <script src="https://sdk.twilio.com/js/video/releases/2.28.1/twilio-video.js"></script>
+    <script src="twilio-video.js"></script>
     <script src="twilio-video-processors.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
     <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"></script>
diff --git a/examples/virtualbackground/index.js b/examples/virtualbackground/index.js
index 4467a35..4de8407 100644
--- a/examples/virtualbackground/index.js
+++ b/examples/virtualbackground/index.js
@@ -10,12 +10,13 @@ const assetsPath = '';
 const bkgImages = new Map();
 
 const defaultParams = {
+  blurFilterRadius: '15',
   capFramerate: '30',
   capResolution: '1280x720',
-  debounce: 'false',
-  pipeline: 'WebGL2',
-  maskBlurRadiusCanvas2D: '4',
-  maskBlurRadiusWebGL2: '8',
+  deferInputFrameDownscale: 'false',
+  maskBlurRadius: '8',
+  stats: 'show',
+  useWebWorker: 'true',
 };
 
 const params = {
@@ -45,35 +46,28 @@ const loadImage = async (name) => {
   return bkgImage;
 }
 
-params.maskBlurRadius = params.pipeline === 'WebGL2'
-  ? params.maskBlurRadiusWebGL2
-  : params.maskBlurRadiusCanvas2D;
-
 (async ({
   Video: { createLocalVideoTrack },
   VideoProcessors: {
     GaussianBlurBackgroundProcessor,
-    Pipeline: { Canvas2D, WebGL2 },
     VirtualBackgroundProcessor,
     isSupported,
     version,
   },
 }) => {
   const {
+    blurFilterRadius,
     capFramerate,
     capResolution,
-    pipeline,
-    debounce,
+    deferInputFrameDownscale,
     maskBlurRadius,
-    stats = 'show',
+    stats,
+    useWebWorker,
   } = params;
 
   const addProcessorOptions = {
-    inputFrameBufferType: 'video',
-    outputFrameBufferContextType: {
-      [Canvas2D]: '2d',
-      [WebGL2]: 'webgl2',
-    }[pipeline],
+    inputFrameBufferType: 'videoframe',
+    outputFrameBufferContextType: 'bitmaprenderer',
   };
 
   const capDimensions = capResolution
@@ -88,9 +82,9 @@ params.maskBlurRadius = params.pipeline === 'WebGL2'
 
   const processorOptions = {
     assetsPath,
-    pipeline,
-    debounce: JSON.parse(debounce),
+    deferInputFrameDownscale: JSON.parse(deferInputFrameDownscale),
     maskBlurRadius: Number(maskBlurRadius),
+    useWebWorker: JSON.parse(useWebWorker),
   };
 
   let videoTrack = null;
@@ -129,7 +123,10 @@ params.maskBlurRadius = params.pipeline === 'WebGL2'
       setProcessor(videoTrack, null);
     } else if (bg === 'blur') {
       if (!gaussianBlurProcessor) {
-        gaussianBlurProcessor = new GaussianBlurBackgroundProcessor(processorOptions);
+        gaussianBlurProcessor = new GaussianBlurBackgroundProcessor({
+          blurFilterRadius: Number(blurFilterRadius),
+          ...processorOptions,
+        });
         await gaussianBlurProcessor.loadModel();
       }
       setProcessor(videoTrack, gaussianBlurProcessor);
@@ -158,7 +155,6 @@ params.maskBlurRadius = params.pipeline === 'WebGL2'
       }
       const { frameRate, height, width } = videoTrack.mediaStreamTrack.getSettings();
       $stats.innerText = `Sdk version: ${version}`;
-      $stats.innerText += `\nPipeline: ${params.pipeline}`;
       $stats.innerText += `\nCapture dimensions (in): ${width} x ${height}`;
       $stats.innerText += `\nFrame rate (in): ${frameRate.toFixed(2)} fps`;
 
diff --git a/karma.conf.ts b/karma.conf.ts
index e18b945..a02b7ab 100644
--- a/karma.conf.ts
+++ b/karma.conf.ts
@@ -111,8 +111,7 @@ export default function(config: any) {
     karmaTypescriptConfig: {
       coverageOptions: {
         exclude: [
-          /tests\/.*/,
-          /lib\/processors\/webgl2\/.*/
+          /tests\/.*/
         ]
       },
       include: [
diff --git a/lib/constants.ts b/lib/constants.ts
index 39e005c..b082a59 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -5,7 +5,9 @@ export const MASK_BLUR_RADIUS = 8;
 export const MODEL_NAME = 'selfie_segmentation_landscape.tflite';
 export const TFLITE_LOADER_NAME = 'tflite-1-0-0.js';
 export const TFLITE_SIMD_LOADER_NAME = 'tflite-simd-1-0-0.js';
-export const TFLITE_WORKER_NAME = 'tflite-worker.js';
+export const TWILIO_GAUSSIAN_BLUR_BACKGROUND_PROCESSOR_PIPELINE_WORKER = 'twilio-gaussian-blur-background-processor-pipeline-worker.js';
+export const TWILIO_VIRTUAL_BACKGROUND_PROCESSOR_PIPELINE_WORKER = 'twilio-virtual-background-processor-pipeline-worker.js';
+
 
 export const WASM_INFERENCE_DIMENSIONS: Dimensions = {
   width: 256,
diff --git a/lib/index.ts b/lib/index.ts
index 2906696..3de9b13 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -1,6 +1,6 @@
 import { GaussianBlurBackgroundProcessor, GaussianBlurBackgroundProcessorOptions } from './processors/background/GaussianBlurBackgroundProcessor';
 import { VirtualBackgroundProcessor, VirtualBackgroundProcessorOptions } from './processors/background/VirtualBackgroundProcessor';
-import { ImageFit, Pipeline } from './types';
+import { ImageFit } from './types';
 import { isSupported } from './utils/support';
 import { version } from './utils/version';
 
@@ -10,7 +10,6 @@ if (typeof window !== 'undefined') {
     ...window.Twilio.VideoProcessors,
     GaussianBlurBackgroundProcessor,
     ImageFit,
-    Pipeline,
     isSupported,
     version,
     VirtualBackgroundProcessor,
@@ -21,7 +20,6 @@ export {
   GaussianBlurBackgroundProcessor,
   GaussianBlurBackgroundProcessorOptions,
   ImageFit,
-  Pipeline,
   isSupported,
   version,
   VirtualBackgroundProcessor,
diff --git a/lib/processors/Processor.ts b/lib/processors/Processor.ts
index 43777ae..ccae4f5 100644
--- a/lib/processors/Processor.ts
+++ b/lib/processors/Processor.ts
@@ -11,6 +11,6 @@ export abstract class Processor {
    * @param outputFrameBuffer - The output frame buffer to use to draw the processed frame.
    */
   abstract processFrame(
-    inputFrameBuffer: OffscreenCanvas | HTMLCanvasElement | HTMLVideoElement,
+    inputFrameBuffer: OffscreenCanvas | HTMLCanvasElement | HTMLVideoElement | VideoFrame,
     outputFrameBuffer: HTMLCanvasElement): Promise<void> | void;
 }
diff --git a/lib/processors/background/BackgroundProcessor.ts b/lib/processors/background/BackgroundProcessor.ts
index 30de120..83ca1ff 100644
--- a/lib/processors/background/BackgroundProcessor.ts
+++ b/lib/processors/background/BackgroundProcessor.ts
@@ -1,19 +1,8 @@
-import { Processor } from '../Processor';
+import { MASK_BLUR_RADIUS } from '../../constants';
 import { Benchmark } from '../../utils/Benchmark';
-import { TwilioTFLite } from '../../utils/TwilioTFLite';
-import { isChromiumImageBitmap } from '../../utils/support';
-import { Dimensions, Pipeline, WebGL2PipelineType } from '../../types';
-import { buildWebGL2Pipeline } from '../webgl2';
-
-import {
-  MASK_BLUR_RADIUS,
-  MODEL_NAME,
-  TFLITE_LOADER_NAME,
-  TFLITE_SIMD_LOADER_NAME,
-  WASM_INFERENCE_DIMENSIONS,
-} from '../../constants';
-
-type InputResizeMode = 'canvas' | 'image-bitmap';
+import { InputFrame } from '../../types';
+import { Processor } from '../Processor';
+import { BackgroundProcessorPipeline, BackgroundProcessorPipelineProxy } from './pipelines/backgroundprocessorpipeline';
 
 /**
  * @private
@@ -51,110 +40,103 @@ export interface BackgroundProcessorOptions {
   assetsPath: string;
 
   /**
-   * Whether to skip processing every other frame to improve the output frame rate, but reducing accuracy in the process.
+   * Whether the pipeline should calculate the person mask without
+   * waiting for the current input frame to be downscaled. Setting
+   * this to true will potentially increase the output frame rate at
+   * the expense of a slight trailing effect around the person mask
+   * (Chrome only).
    * @default
    * ```html
-   * true
+   * false
    * ```
    */
-  debounce?: boolean;
-
-  /**
-   * @private
-   */
-  deferInputResize?: boolean;
-
-  /**
-   * @private
-   */
-  inferenceDimensions?: Dimensions;
-
-  /**
-   * @private
-   */
-  inputResizeMode?: InputResizeMode;
+  deferInputFrameDownscale?: boolean;
 
   /**
    * The blur radius to use when smoothing out the edges of the person's mask.
    * @default
    * ```html
-   * 8 for WebGL2 pipeline, 4 for Canvas2D pipeline
+   * 8
    * ```
    */
   maskBlurRadius?: number;
 
   /**
-   * Specifies which pipeline to use when processing video frames.
+   * Whether to use a web worker (Chrome only).
    * @default
    * ```html
-   * 'WebGL2'
+   * true
    * ```
    */
-  pipeline?: Pipeline;
+  useWebWorker?: boolean;
 }
 
 /**
  * @private
  */
-export abstract class BackgroundProcessor extends Processor {
-  private static _tflite: TwilioTFLite | null = null;
-
-  protected _backgroundImage: HTMLImageElement | null = null;
-  protected _outputCanvas: HTMLCanvasElement | null = null;
-  protected _outputContext: CanvasRenderingContext2D | WebGL2RenderingContext | null = null;
-  protected _webgl2Pipeline: ReturnType<typeof buildWebGL2Pipeline> | null = null;
-
-  private _assetsPath: string;
-  private _benchmark: Benchmark;
-  private _currentMask: ImageData | null;
-  private _debounce: boolean;
-  private _deferInputResize: boolean;
-  private _inferenceDimensions: Dimensions = WASM_INFERENCE_DIMENSIONS;
-  private _inferenceInputCanvas: OffscreenCanvas | HTMLCanvasElement;
-  private _inferenceInputContext: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
-  private _inputFrameCanvas: OffscreenCanvas | HTMLCanvasElement;
-  private _inputFrameContext: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
-  private _inputResizeMode: InputResizeMode;
-  // tslint:disable-next-line no-unused-variable
-  private _isSimdEnabled: boolean | null;
-  private _maskBlurRadius: number;
-  private _maskCanvas: OffscreenCanvas | HTMLCanvasElement;
-  private _maskContext: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
-  private _pipeline: Pipeline;
-
-  constructor(options: BackgroundProcessorOptions) {
+export class BackgroundProcessor extends Processor {
+  protected readonly _assetsPath: string;
+  protected readonly _backgroundProcessorPipeline: BackgroundProcessorPipeline | BackgroundProcessorPipelineProxy;
+
+  private readonly _benchmark: Benchmark;
+  private _deferInputFrameDownscale: boolean = false;
+  private readonly _inputFrameCanvas: OffscreenCanvas = new OffscreenCanvas(1, 1);
+  private readonly _inputFrameContext: OffscreenCanvasRenderingContext2D = this._inputFrameCanvas.getContext('2d', { willReadFrequently: true })!;
+  private _isSimdEnabled: boolean | null = null;
+  private _maskBlurRadius: number = MASK_BLUR_RADIUS;
+  private _outputFrameBuffer: HTMLCanvasElement | null = null;
+  private _outputFrameBufferContext: CanvasRenderingContext2D | ImageBitmapRenderingContext | null = null;
+
+  protected constructor(
+    backgroundProcessorPipeline: BackgroundProcessorPipeline | BackgroundProcessorPipelineProxy,
+    options: BackgroundProcessorOptions
+  ) {
     super();
 
-    if (typeof options.assetsPath !== 'string') {
-      throw new Error('assetsPath parameter is missing');
-    }
-    let assetsPath = options.assetsPath;
-    if (assetsPath && assetsPath[assetsPath.length - 1] !== '/') {
-      assetsPath += '/';
+    const {
+      assetsPath,
+      deferInputFrameDownscale = this._deferInputFrameDownscale,
+      maskBlurRadius = this._maskBlurRadius
+    } = options;
+
+    if (typeof assetsPath !== 'string') {
+      throw new Error('assetsPath parameter must be a string');
     }
 
-    this._assetsPath = assetsPath;
-    this._debounce = typeof options.debounce === 'boolean' ? options.debounce : true;
-    this._deferInputResize = typeof options.deferInputResize === 'boolean' ? options.deferInputResize : false;
-    this._inferenceDimensions = options.inferenceDimensions! || this._inferenceDimensions;
+    this._assetsPath = assetsPath.replace(/([^/])$/, '$1/');
+    this._backgroundProcessorPipeline = backgroundProcessorPipeline;
+    // @ts-ignore
+    this._benchmark = this._backgroundProcessorPipeline._benchmark;
+    this.deferInputFrameDownscale = deferInputFrameDownscale;
+    this.maskBlurRadius = maskBlurRadius;
+  }
 
-    this._inputResizeMode = typeof options.inputResizeMode === 'string'
-      ? options.inputResizeMode
-      : (isChromiumImageBitmap() ? 'image-bitmap' : 'canvas');
+  /**
+   * Whether the pipeline is calculating the person mask without
+   * waiting for the current input frame to be downscaled (Chrome only).
+   */
+  get deferInputFrameDownscale(): boolean {
+    return this._deferInputFrameDownscale;
+  }
 
-    this._pipeline = options.pipeline! || Pipeline.WebGL2;
-    this._benchmark = new Benchmark();
-    this._currentMask = null;
-    this._isSimdEnabled = null;
-    this._inferenceInputCanvas = typeof OffscreenCanvas !== 'undefined' ? new OffscreenCanvas(1, 1) : document.createElement('canvas');
-    this._inferenceInputContext = this._inferenceInputCanvas.getContext('2d', { willReadFrequently: true }) as OffscreenCanvasRenderingContext2D;
-    this._inputFrameCanvas = typeof OffscreenCanvas !== 'undefined' ? new OffscreenCanvas(1, 1) : document.createElement('canvas');
-    this._inputFrameContext = this._inputFrameCanvas.getContext('2d') as OffscreenCanvasRenderingContext2D;
-    this._maskBlurRadius = typeof options.maskBlurRadius === 'number' ? options.maskBlurRadius : (
-      this._pipeline === Pipeline.WebGL2 ? MASK_BLUR_RADIUS : (MASK_BLUR_RADIUS / 2)
-    );
-    this._maskCanvas = typeof OffscreenCanvas !== 'undefined' ? new OffscreenCanvas(1, 1) : document.createElement('canvas');
-    this._maskContext = this._maskCanvas.getContext('2d') as OffscreenCanvasRenderingContext2D;
+  /**
+   * Toggle whether the pipeline should calculate the person mask
+   * without waiting for the current input frame to be downscaled
+   * (Chrome only).
+   */
+  set deferInputFrameDownscale(defer: boolean) {
+    if (typeof defer !== 'boolean') {
+      console.warn('Provided deferInputFrameDownscale is not a boolean.');
+      defer = this._deferInputFrameDownscale;
+    }
+    if (this._deferInputFrameDownscale !== defer) {
+      this._deferInputFrameDownscale = defer;
+      this._backgroundProcessorPipeline.setDeferInputFrameDownscale(
+        this._deferInputFrameDownscale
+      ).catch(() => {
+        /* noop */
+      });
+    }
   }
 
   /**
@@ -174,11 +156,11 @@ export abstract class BackgroundProcessor extends Processor {
     }
     if (this._maskBlurRadius !== radius) {
       this._maskBlurRadius = radius;
-      this._webgl2Pipeline?.updatePostProcessingConfig({
-        jointBilateralFilter: {
-          sigmaSpace: this._maskBlurRadius
-        }
-      });
+      this._backgroundProcessorPipeline
+        .setMaskBlurRadius(this._maskBlurRadius)
+        .catch(() => {
+          /* noop */
+        });
     }
   }
 
@@ -188,18 +170,9 @@ export abstract class BackgroundProcessor extends Processor {
    * video frames are processed correctly.
    */
   async loadModel(): Promise<void> {
-    let { _tflite: tflite } = BackgroundProcessor;
-    if (!tflite) {
-      tflite = new TwilioTFLite();
-      await tflite.initialize(
-        this._assetsPath,
-        MODEL_NAME,
-        TFLITE_LOADER_NAME,
-        TFLITE_SIMD_LOADER_NAME,
-      );
-      BackgroundProcessor._tflite = tflite;
-    }
-    this._isSimdEnabled = tflite.isSimdEnabled;
+    this._isSimdEnabled = await this
+      ._backgroundProcessorPipeline
+      .loadTwilioTFLite();
   }
 
   /**
@@ -210,222 +183,99 @@ export abstract class BackgroundProcessor extends Processor {
    * <br/>
    * <br/>
    * [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) - Good for canvas-related processing
-   * that can be rendered off screen. Only works when using [[Pipeline.Canvas2D]].
+   * that can be rendered off screen.
    * <br/>
    * <br/>
    * [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) - This is recommended on browsers
-   * that doesn't support `OffscreenCanvas`, or if you need to render the frame on the screen. Only works when using [[Pipeline.Canvas2D]].
+   * that doesn't support `OffscreenCanvas`, or if you need to render the frame on the screen.
+   * <br/>
    * <br/>
+   * [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement)
    * <br/>
-   * [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) - Recommended when using [[Pipeline.WebGL2]] but
-   * works for both [[Pipeline.Canvas2D]] and [[Pipeline.WebGL2]].
+   * <br/>
+   * [VideoFrame](https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame) - Recommended on browsers that support the
+   * [Insertable Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Insertable_Streams_for_MediaStreamTrack_API).
    * <br/>
    * @param outputFrameBuffer - The output frame buffer to use to draw the processed frame.
    */
   async processFrame(
-    inputFrameBuffer: OffscreenCanvas | HTMLCanvasElement | HTMLVideoElement,
+    inputFrameBuffer: OffscreenCanvas | HTMLCanvasElement | HTMLVideoElement | VideoFrame,
     outputFrameBuffer: HTMLCanvasElement
   ): Promise<void> {
-    if (!BackgroundProcessor._tflite) {
-      return;
-    }
     if (!inputFrameBuffer || !outputFrameBuffer) {
       throw new Error('Missing input or output frame buffer');
     }
-    this._benchmark.end('captureFrameDelay');
-    this._benchmark.start('processFrameDelay');
 
     const {
-      width: inferenceWidth,
-      height: inferenceHeight
-    } = this._inferenceDimensions;
+      _backgroundProcessorPipeline,
+      _benchmark,
+      _outputFrameBufferContext
+    } = this;
+
+    _benchmark.end('captureFrameDelay');
+    _benchmark.end('totalProcessingDelay');
+    _benchmark.start('totalProcessingDelay');
+    _benchmark.start('processFrameDelay');
 
     const {
       width: captureWidth,
       height: captureHeight
     } = inputFrameBuffer instanceof HTMLVideoElement
       ? { width: inputFrameBuffer.videoWidth, height: inputFrameBuffer.videoHeight }
-      : inputFrameBuffer;
-
-    if (this._outputCanvas !== outputFrameBuffer) {
-      this._outputCanvas = outputFrameBuffer;
-      this._outputContext = this._outputCanvas
-        .getContext(this._pipeline === Pipeline.Canvas2D ? '2d' : 'webgl2') as
-        CanvasRenderingContext2D | WebGL2RenderingContext;
-      this._webgl2Pipeline?.cleanUp();
-      this._webgl2Pipeline = null;
+      : typeof VideoFrame === 'function' && inputFrameBuffer instanceof VideoFrame
+        ? { width: inputFrameBuffer.displayWidth, height: inputFrameBuffer.displayHeight }
+        : inputFrameBuffer as (OffscreenCanvas | HTMLCanvasElement);
+
+    if (this._outputFrameBuffer !== outputFrameBuffer) {
+      this._outputFrameBuffer = outputFrameBuffer;
+      this._outputFrameBufferContext = outputFrameBuffer.getContext('2d')
+        || outputFrameBuffer.getContext('bitmaprenderer');
     }
-
-    if (this._pipeline === Pipeline.WebGL2) {
-      if (!this._webgl2Pipeline) {
-        this._createWebGL2Pipeline(
-          inputFrameBuffer as HTMLVideoElement,
-          captureWidth,
-          captureHeight,
-          inferenceWidth,
-          inferenceHeight
-        );
-      }
-      this._webgl2Pipeline?.sampleInputFrame();
-    }
-
-    // Only set the canvas' dimensions if they have changed to prevent unnecessary redraw
     if (this._inputFrameCanvas.width !== captureWidth) {
       this._inputFrameCanvas.width = captureWidth;
     }
     if (this._inputFrameCanvas.height !== captureHeight) {
       this._inputFrameCanvas.height = captureHeight;
     }
-    if (this._inferenceInputCanvas.width !== inferenceWidth) {
-      this._inferenceInputCanvas.width = inferenceWidth;
-      this._maskCanvas.width = inferenceWidth;
-    }
-    if (this._inferenceInputCanvas.height !== inferenceHeight) {
-      this._inferenceInputCanvas.height = inferenceHeight;
-      this._maskCanvas.height = inferenceHeight;
-    }
 
-    let inputFrame: OffscreenCanvas | HTMLCanvasElement | HTMLVideoElement;
+    let inputFrame: InputFrame;
     if (inputFrameBuffer instanceof HTMLVideoElement) {
-      this._inputFrameContext.drawImage(inputFrameBuffer, 0, 0);
+      this._inputFrameContext.drawImage(
+        inputFrameBuffer,
+        0,
+        0
+      );
       inputFrame = this._inputFrameCanvas;
     } else {
       inputFrame = inputFrameBuffer;
     }
 
-    const personMask = await this._createPersonMask(inputFrame);
-    if (this._debounce) {
-      this._currentMask = this._currentMask === personMask
-        ? null
-        : personMask;
-    }
-
-    if (this._pipeline === Pipeline.WebGL2) {
-      this._webgl2Pipeline?.render(personMask.data);
-    }
-    else {
-      this._benchmark.start('imageCompositionDelay');
-      if (!this._debounce || this._currentMask) {
-        this._maskContext.putImageData(personMask, 0, 0);
-      }
-      const ctx = this._outputContext as CanvasRenderingContext2D;
-      const {
-        height: outputHeight,
-        width: outputWidth
-      } = this._outputCanvas;
-      ctx.save();
-      ctx.filter = `blur(${this._maskBlurRadius}px)`;
-      ctx.globalCompositeOperation = 'copy';
-      ctx.drawImage(this._maskCanvas, 0, 0, outputWidth, outputHeight);
-      ctx.filter = 'none';
-      ctx.globalCompositeOperation = 'source-in';
-      ctx.drawImage(inputFrame, 0, 0, outputWidth, outputHeight);
-      ctx.globalCompositeOperation = 'destination-over';
-      this._setBackground(inputFrame);
-      ctx.restore();
-      this._benchmark.end('imageCompositionDelay');
-    }
-
-    this._benchmark.end('processFrameDelay');
-    this._benchmark.end('totalProcessingDelay');
-
-    // NOTE (csantos): Start the benchmark from here so we can include the delay from the Video sdk
-    // for a more accurate fps
-    this._benchmark.start('totalProcessingDelay');
-    this._benchmark.start('captureFrameDelay');
-  }
-
-  protected abstract _getWebGL2PipelineType(): WebGL2PipelineType;
-
-  protected abstract _setBackground(inputFrame?: OffscreenCanvas | HTMLCanvasElement): void;
-
-  private async _createPersonMask(inputFrame: OffscreenCanvas | HTMLCanvasElement): Promise<ImageData> {
-    const { height, width } = this._inferenceDimensions;
-    const stages = {
-      inference: {
-        false: () => BackgroundProcessor._tflite!.runInference(),
-        true: () => this._currentMask!.data
-      },
-      resize: {
-        false: async () => this._resizeInputFrame(inputFrame),
-        true: async () => { /* noop */ }
-      }
-    };
-    const shouldDebounce = !!this._currentMask;
-    const inferenceStage = stages.inference[`${shouldDebounce}`];
-    const resizeStage = stages.resize[`${shouldDebounce}`];
-
-    this._benchmark.start('inputImageResizeDelay');
-    const resizePromise = resizeStage();
-    if (!this._deferInputResize) {
-      await resizePromise;
-    }
-    this._benchmark.end('inputImageResizeDelay');
-    this._benchmark.start('segmentationDelay');
-    const personMaskBuffer = inferenceStage();
-    this._benchmark.end('segmentationDelay');
-    return this._currentMask || new ImageData(personMaskBuffer, width, height);
-  }
-
-  private _createWebGL2Pipeline(
-    inputFrame: HTMLVideoElement,
-    captureWidth: number,
-    captureHeight: number,
-    inferenceWidth: number,
-    inferenceHeight: number,
-  ): void {
-    this._webgl2Pipeline = buildWebGL2Pipeline(
-      {
-        htmlElement: inputFrame,
-        width: captureWidth,
-        height: captureHeight,
-      },
-      this._backgroundImage,
-      {
-        type: this._getWebGL2PipelineType(),
-      },
-      {
-        inputResolution: `${inferenceWidth}x${inferenceHeight}`,
-      },
-      this._outputCanvas!,
-      this._benchmark,
-      this._debounce
-    );
-    this._webgl2Pipeline.updatePostProcessingConfig({
-      jointBilateralFilter: {
-        sigmaSpace: this._maskBlurRadius,
-        sigmaColor: 0.1
-      },
-      coverage: [
+    const outputFrame = _backgroundProcessorPipeline instanceof BackgroundProcessorPipeline
+      ? await (_backgroundProcessorPipeline as BackgroundProcessorPipeline)
+          .render(
+            inputFrame
+          )
+      : await (_backgroundProcessorPipeline as BackgroundProcessorPipelineProxy)
+          .render(
+            inputFrame instanceof OffscreenCanvas
+              ? inputFrame.transferToImageBitmap()
+              : (inputFrame as VideoFrame)
+          );
+
+    if (_outputFrameBufferContext instanceof ImageBitmapRenderingContext) {
+      const outputBitmap = outputFrame instanceof OffscreenCanvas
+        ? outputFrame.transferToImageBitmap()
+        : outputFrame;
+      _outputFrameBufferContext.transferFromImageBitmap(outputBitmap);
+    } else if (_outputFrameBufferContext instanceof CanvasRenderingContext2D && outputFrame) {
+      _outputFrameBufferContext.drawImage(
+        outputFrame,
         0,
-        0.99
-      ],
-      lightWrapping: 0,
-      blendMode: 'screen'
-    });
-  }
-
-  private async _resizeInputFrame(inputFrame: OffscreenCanvas | HTMLCanvasElement): Promise<void> {
-    const {
-      _inferenceInputCanvas: {
-        width: resizeWidth,
-        height: resizeHeight
-      },
-      _inferenceInputContext: ctx,
-      _inputResizeMode: resizeMode
-    } = this;
-    if (resizeMode === 'image-bitmap') {
-      const resizedInputFrameBitmap = await createImageBitmap(inputFrame, {
-        resizeWidth,
-        resizeHeight,
-        resizeQuality: 'pixelated'
-      });
-      ctx.drawImage(resizedInputFrameBitmap, 0, 0, resizeWidth, resizeHeight);
-      resizedInputFrameBitmap.close();
-    } else {
-      ctx.drawImage(inputFrame, 0, 0, resizeWidth, resizeHeight);
+        0
+      );
     }
-    const imageData = ctx.getImageData(0, 0, resizeWidth, resizeHeight);
-    BackgroundProcessor._tflite!.loadInputBuffer(imageData.data);
+
+    _benchmark.end('processFrameDelay');
+    _benchmark.start('captureFrameDelay');
   }
 }
diff --git a/lib/processors/background/GaussianBlurBackgroundProcessor.ts b/lib/processors/background/GaussianBlurBackgroundProcessor.ts
index 93eeffc..e863799 100644
--- a/lib/processors/background/GaussianBlurBackgroundProcessor.ts
+++ b/lib/processors/background/GaussianBlurBackgroundProcessor.ts
@@ -1,6 +1,6 @@
+import { BLUR_FILTER_RADIUS, MASK_BLUR_RADIUS } from '../../constants';
 import { BackgroundProcessor, BackgroundProcessorOptions } from './BackgroundProcessor';
-import { BLUR_FILTER_RADIUS } from '../../constants';
-import { WebGL2PipelineType } from '../../types';
+import { GaussianBlurBackgroundProcessorPipeline, GaussianBlurBackgroundProcessorPipelineProxy } from './pipelines/backgroundprocessorpipeline';
 
 /**
  * Options passed to [[GaussianBlurBackgroundProcessor]] constructor.
@@ -27,22 +27,13 @@ export interface GaussianBlurBackgroundProcessorOptions extends BackgroundProces
  *
  * ```ts
  * import { createLocalVideoTrack } from 'twilio-video';
- * import { Pipeline, GaussianBlurBackgroundProcessor } from '@twilio/video-processors';
- * import { simd } from 'wasm-feature-detect';
+ * import { GaussianBlurBackgroundProcessor } from '@twilio/video-processors';
  *
  * let blurBackground: GaussianBlurBackgroundProcessor;
  *
  * (async() => {
- *   const isWasmSimdSupported = await simd();
- *
  *   blurBackground = new GaussianBlurBackgroundProcessor({
- *     assetsPath: 'https://my-server-path/assets',
- *
- *     // Enable debounce only if the browser does not support
- *     // WASM SIMD in order to retain an acceptable frame rate.
- *     debounce: !isWasmSimdSupported,
- *
- *     pipeline: Pipeline.WebGL2,
+ *     assetsPath: 'https://my-server-path/assets'
  *   });
  *   await blurBackground.loadModel();
  *
@@ -59,14 +50,13 @@ export interface GaussianBlurBackgroundProcessorOptions extends BackgroundProces
  *     frameRate: 24
  *   });
  *   track.addProcessor(virtualBackground, {
- *     inputFrameBufferType: 'video',
- *     outputFrameBufferContextType: 'webgl2',
+ *     inputFrameBufferType: 'videoframe',
+ *     outputFrameBufferContextType: 'bitmaprenderer'
  *   });
  * })();
  * ```
  */
 export class GaussianBlurBackgroundProcessor extends BackgroundProcessor {
-
   private _blurFilterRadius: number = BLUR_FILTER_RADIUS;
   // tslint:disable-next-line no-unused-variable
   private readonly _name: string = 'GaussianBlurBackgroundProcessor';
@@ -77,7 +67,33 @@ export class GaussianBlurBackgroundProcessor extends BackgroundProcessor {
    * invalid properties will be ignored.
    */
   constructor(options: GaussianBlurBackgroundProcessorOptions) {
-    super(options);
+    const {
+      blurFilterRadius = BLUR_FILTER_RADIUS,
+      deferInputFrameDownscale = false,
+      maskBlurRadius = MASK_BLUR_RADIUS,
+      useWebWorker = true
+    } = options;
+
+    const assetsPath = options
+      .assetsPath
+      .replace(/([^/])$/, '$1/');
+
+    const BackgroundProcessorPipelineOrProxy = useWebWorker
+      ? GaussianBlurBackgroundProcessorPipelineProxy
+      : GaussianBlurBackgroundProcessorPipeline;
+
+    const backgroundProcessorPipeline = new BackgroundProcessorPipelineOrProxy({
+      assetsPath,
+      blurFilterRadius,
+      deferInputFrameDownscale,
+      maskBlurRadius
+    });
+
+    super(
+      backgroundProcessorPipeline,
+      options
+    );
+
     this.blurFilterRadius = options.blurFilterRadius!;
   }
 
@@ -97,18 +113,10 @@ export class GaussianBlurBackgroundProcessor extends BackgroundProcessor {
       radius = BLUR_FILTER_RADIUS;
     }
     this._blurFilterRadius = radius;
-  }
-
-  protected _getWebGL2PipelineType(): WebGL2PipelineType {
-    return WebGL2PipelineType.Blur;
-  }
-
-  protected _setBackground(inputFrame: OffscreenCanvas | HTMLCanvasElement): void {
-    if (!this._outputContext) {
-      return;
-    }
-    const ctx = this._outputContext as CanvasRenderingContext2D;
-    ctx.filter = `blur(${this._blurFilterRadius}px)`;
-    ctx.drawImage(inputFrame, 0, 0);
+    (this._backgroundProcessorPipeline as GaussianBlurBackgroundProcessorPipeline | GaussianBlurBackgroundProcessorPipelineProxy)
+      .setBlurFilterRadius(this._blurFilterRadius)
+      .catch(() => {
+        /* noop */
+      });
   }
 }
diff --git a/lib/processors/background/VirtualBackgroundProcessor.ts b/lib/processors/background/VirtualBackgroundProcessor.ts
index 2e8eeb4..47d0533 100644
--- a/lib/processors/background/VirtualBackgroundProcessor.ts
+++ b/lib/processors/background/VirtualBackgroundProcessor.ts
@@ -1,5 +1,7 @@
+import { ImageFit } from '../../types';
+import { MASK_BLUR_RADIUS } from '../../constants';
 import { BackgroundProcessor, BackgroundProcessorOptions } from './BackgroundProcessor';
-import { ImageFit, WebGL2PipelineType } from '../../types';
+import { VirtualBackgroundProcessorPipeline, VirtualBackgroundProcessorPipelineProxy } from './pipelines/backgroundprocessorpipeline';
 
 /**
  * Options passed to [[VirtualBackgroundProcessor]] constructor.
@@ -35,24 +37,15 @@ export interface VirtualBackgroundProcessorOptions extends BackgroundProcessorOp
  *
  * ```ts
  * import { createLocalVideoTrack } from 'twilio-video';
- * import { Pipeline, VirtualBackgroundProcessor } from '@twilio/video-processors';
- * import { simd } from 'wasm-feature-detect';
+ * import { VirtualBackgroundProcessor } from '@twilio/video-processors';
  *
  * let virtualBackground: VirtualBackgroundProcessor;
  * const img = new Image();
  *
  * img.onload = async () => {
- *   const isWasmSimdSupported = await simd();
- *
  *   virtualBackground = new VirtualBackgroundProcessor({
  *     assetsPath: 'https://my-server-path/assets',
- *     backgroundImage: img,
- *
- *     // Enable debounce only if the browser does not support
- *     // WASM SIMD in order to retain an acceptable frame rate.
- *     debounce: !isWasmSimdSupported,
- *
- *     pipeline: Pipeline.WebGL2,
+ *     backgroundImage: img
  *   });
  *   await virtualBackground.loadModel();
  *
@@ -69,8 +62,8 @@ export interface VirtualBackgroundProcessorOptions extends BackgroundProcessorOp
  *     frameRate: 24
  *   });
  *   track.addProcessor(virtualBackground, {
- *     inputFrameBufferType: 'video',
- *     outputFrameBufferContextType: 'webgl2',
+ *     inputFrameBufferType: 'videoframe',
+ *     outputFrameBufferContextType: 'bitmaprenderer'
  *   });
  * };
  *
@@ -78,7 +71,7 @@ export interface VirtualBackgroundProcessorOptions extends BackgroundProcessorOp
  * ```
  */
 export class VirtualBackgroundProcessor extends BackgroundProcessor {
-
+  private _backgroundImage!: HTMLImageElement;
   private _fitType!: ImageFit;
   // tslint:disable-next-line no-unused-variable
   private readonly _name: string = 'VirtualBackgroundProcessor';
@@ -89,16 +82,43 @@ export class VirtualBackgroundProcessor extends BackgroundProcessor {
    * and invalid properties will be ignored.
    */
   constructor(options: VirtualBackgroundProcessorOptions) {
-    super(options);
-    this.backgroundImage = options.backgroundImage;
-    this.fitType = options.fitType!;
+    const {
+      backgroundImage,
+      deferInputFrameDownscale = false,
+      fitType = ImageFit.Fill,
+      maskBlurRadius = MASK_BLUR_RADIUS,
+      useWebWorker = true
+    } = options;
+
+    const assetsPath = options
+      .assetsPath
+      .replace(/([^/])$/, '$1/');
+
+    const VirtualBackgroundProcessorPipelineOrProxy = useWebWorker
+      ? VirtualBackgroundProcessorPipelineProxy
+      : VirtualBackgroundProcessorPipeline;
+
+    const backgroundProcessorPipeline = new VirtualBackgroundProcessorPipelineOrProxy({
+      assetsPath,
+      deferInputFrameDownscale,
+      fitType,
+      maskBlurRadius
+    });
+
+    super(
+      backgroundProcessorPipeline,
+      options
+    );
+
+    this.backgroundImage = backgroundImage;
+    this.fitType = fitType;
   }
 
   /**
    * The HTMLImageElement representing the current background image.
    */
   get backgroundImage(): HTMLImageElement {
-    return this._backgroundImage!;
+    return this._backgroundImage;
   }
 
   /**
@@ -112,10 +132,12 @@ export class VirtualBackgroundProcessor extends BackgroundProcessor {
       throw new Error('Invalid image. Make sure that the image is an HTMLImageElement and has been successfully loaded');
     }
     this._backgroundImage = image;
-
-    // Triggers recreation of the pipeline in the next processFrame call
-    this._webgl2Pipeline?.cleanUp();
-    this._webgl2Pipeline = null;
+    createImageBitmap(this._backgroundImage).then(
+      (imageBitmap) => (this._backgroundProcessorPipeline as VirtualBackgroundProcessorPipeline | VirtualBackgroundProcessorPipelineProxy)
+        .setBackgroundImage(imageBitmap)
+    ).catch(() => {
+      /* noop */
+    });
   }
 
   /**
@@ -130,67 +152,15 @@ export class VirtualBackgroundProcessor extends BackgroundProcessor {
    */
   set fitType(fitType: ImageFit) {
     const validTypes = Object.keys(ImageFit);
-    if (!validTypes.includes(fitType as any)) {
+    if (!validTypes.includes(fitType as string)) {
       console.warn(`Valid fitType not found. Using '${ImageFit.Fill}' as default.`);
       fitType = ImageFit.Fill;
     }
     this._fitType = fitType;
-  }
-
-  protected _getWebGL2PipelineType(): WebGL2PipelineType {
-    return WebGL2PipelineType.Image;
-  }
-
-  protected _setBackground(): void {
-    if (!this._outputContext || !this._outputCanvas) {
-      return;
-    }
-    const img = this._backgroundImage!;
-    const imageWidth = img.naturalWidth;
-    const imageHeight = img.naturalHeight;
-    const canvasWidth = this._outputCanvas.width;
-    const canvasHeight = this._outputCanvas.height;
-    const ctx = this._outputContext as CanvasRenderingContext2D;
-
-    if (this._fitType === ImageFit.Fill) {
-      ctx.drawImage(img, 0, 0, imageWidth, imageHeight, 0, 0, canvasWidth, canvasHeight);
-    } else if (this._fitType === ImageFit.None) {
-      ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
-    } else if (this._fitType === ImageFit.Contain) {
-      const { x, y, w, h } = this._getFitPosition(imageWidth, imageHeight, canvasWidth, canvasHeight, ImageFit.Contain);
-      ctx.drawImage(img, 0, 0, imageWidth, imageHeight, x, y, w, h);
-    } else if (this._fitType === ImageFit.Cover) {
-      const { x, y, w, h } = this._getFitPosition(imageWidth, imageHeight, canvasWidth, canvasHeight, ImageFit.Cover);
-      ctx.drawImage(img, 0, 0, imageWidth, imageHeight, x, y, w, h);
-    }
-  }
-
-  private _getFitPosition(contentWidth: number, contentHeight: number,
-    viewportWidth: number, viewportHeight: number, type: ImageFit)
-      : { h: number, w: number, x: number, y: number } {
-
-    // Calculate new content width to fit viewport width
-    let factor = viewportWidth / contentWidth;
-    let newContentWidth = viewportWidth;
-    let newContentHeight = factor * contentHeight;
-
-    // Scale down the resulting height and width more
-    // to fit viewport height if the content still exceeds it
-    if ((type === ImageFit.Contain && newContentHeight > viewportHeight)
-      || (type === ImageFit.Cover && viewportHeight > newContentHeight)) {
-      factor = viewportHeight / newContentHeight;
-      newContentWidth = factor * newContentWidth;
-      newContentHeight = viewportHeight;
-    }
-
-    // Calculate the destination top left corner to center the content
-    const x = (viewportWidth - newContentWidth) / 2;
-    const y = (viewportHeight - newContentHeight) / 2;
-
-    return {
-      x, y,
-      w: newContentWidth,
-      h: newContentHeight,
-    };
+    (this._backgroundProcessorPipeline as VirtualBackgroundProcessorPipeline | VirtualBackgroundProcessorPipelineProxy)
+      .setFitType(this._fitType)
+      .catch(() => {
+        /* noop */
+      });
   }
 }
diff --git a/lib/processors/background/pipelines/backgroundprocessorpipeline/BackgroundProcessorPipeline.proxy.ts b/lib/processors/background/pipelines/backgroundprocessorpipeline/BackgroundProcessorPipeline.proxy.ts
new file mode 100644
index 0000000..4c65e07
--- /dev/null
+++ b/lib/processors/background/pipelines/backgroundprocessorpipeline/BackgroundProcessorPipeline.proxy.ts
@@ -0,0 +1,42 @@
+import { Remote, transfer } from 'comlink';
+import { Benchmark } from '../../../../utils/Benchmark';
+import { BackgroundProcessorPipeline } from './BackgroundProcessorPipeline';
+
+/**
+ * @private
+ */
+export class BackgroundProcessorPipelineProxy {
+  protected readonly _pipelineWorkerPromise: Promise<Remote<BackgroundProcessorPipeline>>;
+  private readonly _benchmark: Benchmark = new Benchmark();
+
+  protected constructor(
+    pipelineWorkerPromise: Promise<Remote<BackgroundProcessorPipeline>>
+  ) {
+    this._pipelineWorkerPromise = pipelineWorkerPromise;
+  }
+
+  async loadTwilioTFLite(): Promise<boolean> {
+    const pipelineWorker = await this._pipelineWorkerPromise;
+    return pipelineWorker.loadTwilioTFLite();
+  }
+
+  async render(inputFrame: VideoFrame | ImageBitmap): Promise<ImageBitmap | null> {
+    const pipelineWorker = await this._pipelineWorkerPromise;
+    const outputFrame = await pipelineWorker.render(
+      transfer(inputFrame, [inputFrame])
+    );
+    // @ts-ignore
+    this._benchmark.merge(await pipelineWorker._benchmark);
+    return outputFrame as ImageBitmap | null;
+  }
+
+  async setDeferInputFrameDownscale(defer: boolean): Promise<void> {
+    const pipelineWorker = await this._pipelineWorkerPromise;
+    return pipelineWorker.setDeferInputFrameDownscale(defer);
+  }
+
+  async setMaskBlurRadius(radius: number): Promise<void> {
+    const pipelineWorker = await this._pipelineWorkerPromise;
+    return pipelineWorker.setMaskBlurRadius(radius);
+  }
+}
diff --git a/lib/processors/background/pipelines/backgroundprocessorpipeline/BackgroundProcessorPipeline.ts b/lib/processors/background/pipelines/backgroundprocessorpipeline/BackgroundProcessorPipeline.ts
new file mode 100644
index 0000000..9ce5390
--- /dev/null
+++ b/lib/processors/background/pipelines/backgroundprocessorpipeline/BackgroundProcessorPipeline.ts
@@ -0,0 +1,174 @@
+import { MODEL_NAME, TFLITE_LOADER_NAME, TFLITE_SIMD_LOADER_NAME, WASM_INFERENCE_DIMENSIONS } from '../../../../constants';
+import { Benchmark } from '../../../../utils/Benchmark';
+import { isChromiumImageBitmap } from '../../../../utils/support';
+import { TwilioTFLite } from '../../../../utils/TwilioTFLite';
+import { InputFrame } from '../../../../types';
+import { Pipeline } from '../../../pipelines';
+import { InputFrameDowscaleStage } from './InputFrameDownscaleStage';
+import { PostProcessingStage } from './PostProcessingStage';
+
+/**
+ * @private
+ */
+export interface BackgroundProcessorPipelineOptions {
+  assetsPath: string;
+  deferInputFrameDownscale: boolean;
+  maskBlurRadius: number;
+}
+
+/**
+ * @private
+ */
+export abstract class BackgroundProcessorPipeline extends Pipeline {
+  private static _twilioTFLite: TwilioTFLite | null = null;
+
+  protected readonly _outputCanvas = new OffscreenCanvas(1, 1);
+  protected readonly _webgl2Canvas = new OffscreenCanvas(1, 1);
+  private readonly _assetsPath: string;
+  private readonly _benchmark = new Benchmark();
+  private _deferInputFrameDownscale: boolean;
+  private readonly _inferenceInputCanvas = new OffscreenCanvas(WASM_INFERENCE_DIMENSIONS.width, WASM_INFERENCE_DIMENSIONS.height);
+  private readonly _inputFrameDownscaleMode = isChromiumImageBitmap() ? 'image-bitmap' : 'canvas';
+  private readonly _onResizeWebGL2Canvas: () => void;
+
+  protected constructor(
+    options: BackgroundProcessorPipelineOptions,
+    onResizeWebGL2Canvas = () => {}
+  ) {
+    super();
+
+    const {
+      assetsPath,
+      deferInputFrameDownscale,
+      maskBlurRadius
+    } = options;
+
+    this._assetsPath = assetsPath;
+    this._deferInputFrameDownscale = deferInputFrameDownscale;
+    this._onResizeWebGL2Canvas = onResizeWebGL2Canvas;
+
+    this.addStage(new InputFrameDowscaleStage(
+      this._inferenceInputCanvas,
+      this._inputFrameDownscaleMode
+    ));
+
+    this.addStage(new PostProcessingStage(
+      WASM_INFERENCE_DIMENSIONS,
+      this._webgl2Canvas,
+      this._outputCanvas,
+      maskBlurRadius,
+      (inputFrame?: InputFrame): void => this._setBackground(inputFrame)
+    ));
+  }
+
+  async loadTwilioTFLite(): Promise<boolean> {
+    let { _twilioTFLite } = BackgroundProcessorPipeline;
+    if (!_twilioTFLite) {
+      _twilioTFLite = new TwilioTFLite();
+      await _twilioTFLite.initialize(
+        this._assetsPath,
+        MODEL_NAME,
+        TFLITE_LOADER_NAME,
+        TFLITE_SIMD_LOADER_NAME
+      );
+      BackgroundProcessorPipeline._twilioTFLite = _twilioTFLite;
+    }
+    return _twilioTFLite.isSimdEnabled!;
+  }
+
+  async render(inputFrame: InputFrame): Promise<OffscreenCanvas | ImageBitmap | null> {
+    if (!BackgroundProcessorPipeline._twilioTFLite) {
+      return null;
+    }
+
+    const [
+      inputFrameDownscaleStage,
+      postProcessingStage
+    ] = this._stages as [
+      InputFrameDowscaleStage,
+      PostProcessingStage
+    ];
+
+    const {
+      _benchmark,
+      _deferInputFrameDownscale,
+      _inferenceInputCanvas: {
+        height: inferenceInputHeight,
+        width: inferenceInputWidth
+      },
+      _outputCanvas,
+      _webgl2Canvas
+    } = this;
+
+    const {
+      _twilioTFLite
+    } = BackgroundProcessorPipeline;
+
+    const isInputVideoFrame = typeof VideoFrame === 'function'
+      && inputFrame instanceof VideoFrame;
+
+    const { height, width } = isInputVideoFrame
+      ? { height: inputFrame.displayHeight, width: inputFrame.displayWidth }
+      : inputFrame as (OffscreenCanvas | HTMLCanvasElement | ImageBitmap);
+
+    let didResizeWebGL2Canvas = false;
+    if (_outputCanvas.width !== width) {
+      _outputCanvas.width = width;
+      _webgl2Canvas.width = width;
+      didResizeWebGL2Canvas = true;
+    }
+    if (_outputCanvas.height !== height) {
+      _outputCanvas.height = height;
+      _webgl2Canvas.height = height;
+      didResizeWebGL2Canvas = true;
+    }
+    if (didResizeWebGL2Canvas) {
+      postProcessingStage.resetPersonMaskUpscalePipeline();
+      this._onResizeWebGL2Canvas();
+    }
+
+    _benchmark.start('inputImageResizeDelay');
+    const downscalePromise = inputFrameDownscaleStage.render(inputFrame)
+      .then((downscaledFrameData) => {
+        _twilioTFLite!.loadInputBuffer(downscaledFrameData);
+      });
+
+    if (!_deferInputFrameDownscale) {
+      await downscalePromise;
+    }
+    _benchmark.end('inputImageResizeDelay');
+
+    _benchmark.start('segmentationDelay');
+    const personMask = new ImageData(
+      _twilioTFLite!.runInference(),
+      inferenceInputWidth,
+      inferenceInputHeight
+    );
+    _benchmark.end('segmentationDelay');
+
+    _benchmark.start('imageCompositionDelay');
+    postProcessingStage.render(
+      inputFrame,
+      personMask
+    );
+    _benchmark.end('imageCompositionDelay');
+
+    if ((typeof VideoFrame === 'function' && inputFrame instanceof VideoFrame)
+      || (typeof ImageBitmap === 'function' && inputFrame instanceof ImageBitmap)) {
+      inputFrame.close();
+    }
+
+    return this._outputCanvas;
+  }
+
+  async setDeferInputFrameDownscale(defer: boolean): Promise<void> {
+    this._deferInputFrameDownscale = defer;
+  }
+
+  async setMaskBlurRadius(radius: number): Promise<void> {
+    (this._stages[1] as PostProcessingStage)
+      .updateMaskBlurRadius(radius);
+  }
+
+  protected abstract _setBackground(inputFrame?: InputFrame): void;
+}
diff --git a/lib/processors/background/pipelines/backgroundprocessorpipeline/GaussianBlurBackgroundProcessorPipeline.proxy.ts b/lib/processors/background/pipelines/backgroundprocessorpipeline/GaussianBlurBackgroundProcessorPipeline.proxy.ts
new file mode 100644
index 0000000..ea0e244
--- /dev/null
+++ b/lib/processors/background/pipelines/backgroundprocessorpipeline/GaussianBlurBackgroundProcessorPipeline.proxy.ts
@@ -0,0 +1,33 @@
+import { Remote, wrap } from 'comlink';
+import { TWILIO_GAUSSIAN_BLUR_BACKGROUND_PROCESSOR_PIPELINE_WORKER } from '../../../../constants';
+import { CorsWorker } from '../../../../utils/CorsWorker';
+import { BackgroundProcessorPipelineProxy } from './BackgroundProcessorPipeline.proxy';
+import { GaussianBlurBackgroundProcessorPipeline, GaussianBlurBackgroundProcessorPipelineOptions } from './GaussianBlurBackgroundProcessorPipeline';
+
+let GaussianBlurBackgroundProcessorPipelineWorker: Remote<typeof GaussianBlurBackgroundProcessorPipeline>;
+
+/**
+ * @private
+ */
+export class GaussianBlurBackgroundProcessorPipelineProxy extends BackgroundProcessorPipelineProxy {
+  protected readonly _pipelineWorkerPromise: Promise<Remote<GaussianBlurBackgroundProcessorPipeline>>;
+
+  constructor(
+    options: GaussianBlurBackgroundProcessorPipelineOptions
+  ) {
+    const corsWorker = new CorsWorker(
+      `${options.assetsPath}${TWILIO_GAUSSIAN_BLUR_BACKGROUND_PROCESSOR_PIPELINE_WORKER}`
+    );
+    const pipelineWorkerPromise = corsWorker.workerPromise.then((worker) => {
+      GaussianBlurBackgroundProcessorPipelineWorker ||= wrap<typeof GaussianBlurBackgroundProcessorPipeline>(worker);
+      return new GaussianBlurBackgroundProcessorPipelineWorker(options);
+    });
+    super(pipelineWorkerPromise);
+    this._pipelineWorkerPromise = pipelineWorkerPromise;
+  }
+
+  async setBlurFilterRadius(radius: number): Promise<void> {
+    const pipelineWorker = await this._pipelineWorkerPromise;
+    return pipelineWorker.setBlurFilterRadius(radius);
+  }
+}
diff --git a/lib/processors/background/pipelines/backgroundprocessorpipeline/GaussianBlurBackgroundProcessorPipeline.ts b/lib/processors/background/pipelines/backgroundprocessorpipeline/GaussianBlurBackgroundProcessorPipeline.ts
new file mode 100644
index 0000000..83a0a34
--- /dev/null
+++ b/lib/processors/background/pipelines/backgroundprocessorpipeline/GaussianBlurBackgroundProcessorPipeline.ts
@@ -0,0 +1,82 @@
+import { InputFrame } from '../../../../types';
+import { isCanvasBlurSupported } from '../../../../utils/support';
+import { GaussianBlurFilterPipeline } from '../gaussianblurfilterpipeline';
+import { BackgroundProcessorPipeline, BackgroundProcessorPipelineOptions } from './BackgroundProcessorPipeline';
+
+/**
+ * @private
+ */
+export interface GaussianBlurBackgroundProcessorPipelineOptions extends BackgroundProcessorPipelineOptions {
+  blurFilterRadius: number;
+}
+
+/**
+ * @private
+ */
+export class GaussianBlurBackgroundProcessorPipeline extends BackgroundProcessorPipeline {
+  private _blurFilterRadius: number;
+  private _gaussianBlurFilterPipeline: GaussianBlurFilterPipeline | null = null;
+
+  constructor(options: GaussianBlurBackgroundProcessorPipelineOptions) {
+    super(
+      options,
+      () => this._resetGaussianBlurFilterPipeline()
+    );
+
+    const {
+      blurFilterRadius
+    } = options;
+
+    this._blurFilterRadius = blurFilterRadius;
+  }
+
+  async setBlurFilterRadius(radius: number): Promise<void> {
+    this._blurFilterRadius = radius;
+    return this._gaussianBlurFilterPipeline?.updateRadius(
+      this._blurFilterRadius
+    );
+  }
+
+  protected _setBackground(inputFrame: InputFrame): void {
+    const {
+      _blurFilterRadius,
+      _outputCanvas,
+      _webgl2Canvas
+    } = this;
+
+    const ctx = _outputCanvas.getContext('2d')!;
+    if (isCanvasBlurSupported) {
+      ctx.filter = `blur(${_blurFilterRadius}px)`;
+      ctx.drawImage(
+        inputFrame,
+        0,
+        0
+      );
+      ctx.filter = 'none';
+      return;
+    }
+    if (!this._gaussianBlurFilterPipeline) {
+      this._resetGaussianBlurFilterPipeline();
+    }
+    this._gaussianBlurFilterPipeline!.render();
+    ctx.drawImage(
+      _webgl2Canvas,
+      0,
+      0
+    );
+  }
+
+  private _resetGaussianBlurFilterPipeline(): void {
+    const {
+      _blurFilterRadius,
+      _webgl2Canvas
+    } = this;
+    this._gaussianBlurFilterPipeline?.cleanUp();
+    this._gaussianBlurFilterPipeline = new GaussianBlurFilterPipeline(
+      _webgl2Canvas
+    );
+    this._gaussianBlurFilterPipeline!.updateRadius(
+      _blurFilterRadius
+    );
+  }
+}
diff --git a/lib/processors/background/pipelines/backgroundprocessorpipeline/GaussianBlurBackgroundProcessorPipeline.worker.ts b/lib/processors/background/pipelines/backgroundprocessorpipeline/GaussianBlurBackgroundProcessorPipeline.worker.ts
new file mode 100644
index 0000000..6609590
--- /dev/null
+++ b/lib/processors/background/pipelines/backgroundprocessorpipeline/GaussianBlurBackgroundProcessorPipeline.worker.ts
@@ -0,0 +1,22 @@
+import { expose, transfer } from 'comlink';
+import { GaussianBlurBackgroundProcessorPipeline } from './GaussianBlurBackgroundProcessorPipeline';
+
+/**
+ * @private
+ */
+export class GaussianBlurBackgroundProcessorPipelineWorker extends GaussianBlurBackgroundProcessorPipeline {
+  async render(inputFrame: VideoFrame | ImageBitmap): Promise<ImageBitmap | null> {
+    const outputFrame = await super.render(inputFrame);
+
+    const outputBitmap = outputFrame instanceof OffscreenCanvas
+      ? outputFrame.transferToImageBitmap()
+      : outputFrame;
+
+    return outputBitmap && transfer(
+      outputBitmap,
+      [outputBitmap]
+    );
+  }
+}
+
+expose(GaussianBlurBackgroundProcessorPipelineWorker);
diff --git a/lib/processors/background/pipelines/backgroundprocessorpipeline/InputFrameDownscaleStage.ts b/lib/processors/background/pipelines/backgroundprocessorpipeline/InputFrameDownscaleStage.ts
new file mode 100644
index 0000000..975316a
--- /dev/null
+++ b/lib/processors/background/pipelines/backgroundprocessorpipeline/InputFrameDownscaleStage.ts
@@ -0,0 +1,67 @@
+import { InputFrame } from '../../../../types';
+import { Pipeline } from '../../../pipelines';
+
+/**
+ * @private
+ */
+export class InputFrameDowscaleStage implements Pipeline.Stage {
+  private readonly _inputFrameDownscaleMode: 'canvas' | 'image-bitmap';
+  private readonly _outputContext: OffscreenCanvasRenderingContext2D;
+
+  constructor(
+    outputCanvas: OffscreenCanvas,
+    inputFrameDownscaleMode: 'canvas' | 'image-bitmap'
+
+) {
+    this._inputFrameDownscaleMode = inputFrameDownscaleMode;
+    this._outputContext = outputCanvas.getContext('2d', { willReadFrequently: true })!;
+  }
+
+  async render(inputFrame: InputFrame): Promise<Uint8ClampedArray> {
+    const {
+      _outputContext,
+      _inputFrameDownscaleMode,
+    } = this;
+
+    const {
+      canvas: {
+        height: resizeHeight,
+        width: resizeWidth
+      }
+    } = _outputContext;
+
+    if (_inputFrameDownscaleMode === 'image-bitmap') {
+      const downscaledBitmap = await createImageBitmap(
+        inputFrame,
+        {
+          resizeWidth,
+          resizeHeight,
+          resizeQuality: 'pixelated'
+        }
+      );
+      _outputContext.drawImage(
+        downscaledBitmap,
+        0,
+        0
+      );
+      downscaledBitmap.close();
+    } else {
+      _outputContext.drawImage(
+        inputFrame,
+        0,
+        0,
+        resizeWidth,
+        resizeHeight
+      );
+    }
+
+    const { data } = _outputContext.getImageData(
+      0,
+      0,
+      resizeWidth,
+      resizeHeight
+    );
+
+    return data;
+  }
+}
diff --git a/lib/processors/background/pipelines/backgroundprocessorpipeline/PostProcessingStage.ts b/lib/processors/background/pipelines/backgroundprocessorpipeline/PostProcessingStage.ts
new file mode 100644
index 0000000..4cb95d8
--- /dev/null
+++ b/lib/processors/background/pipelines/backgroundprocessorpipeline/PostProcessingStage.ts
@@ -0,0 +1,83 @@
+import { Dimensions, InputFrame } from '../../../../types';
+import { Pipeline } from '../../../pipelines';
+import { PersonMaskUpscalePipeline } from '../personmaskupscalepipeline';
+
+/**
+ * @private
+ */
+export class PostProcessingStage implements Pipeline.Stage {
+  private readonly _inputDimensions: Dimensions;
+  private _maskBlurRadius: number;
+  private readonly _outputContext: OffscreenCanvasRenderingContext2D;
+  private _personMaskUpscalePipeline: PersonMaskUpscalePipeline | null = null;
+  private readonly _setBackground: (inputFrame?: InputFrame) => void;
+  private readonly _webgl2Canvas: OffscreenCanvas;
+
+  constructor(
+    inputDimensions: Dimensions,
+    webgl2Canvas: OffscreenCanvas,
+    outputCanvas: OffscreenCanvas,
+    maskBlurRadius: number,
+    setBackground: (inputFrame?: InputFrame) => void
+  ) {
+    this._inputDimensions = inputDimensions;
+    this._maskBlurRadius = maskBlurRadius;
+    this._outputContext = outputCanvas.getContext('2d')!;
+    this._webgl2Canvas = webgl2Canvas;
+    this._setBackground = setBackground;
+  }
+
+  render(
+    inputFrame: InputFrame,
+    personMask: ImageData
+  ): void {
+    const {
+      _outputContext,
+      _setBackground,
+      _webgl2Canvas
+    } = this;
+    if (!this._personMaskUpscalePipeline) {
+      this.resetPersonMaskUpscalePipeline();
+    }
+    this._personMaskUpscalePipeline!.render(
+      inputFrame,
+      personMask
+    );
+    _outputContext.save();
+    _outputContext.globalCompositeOperation = 'copy';
+    _outputContext.drawImage(
+      _webgl2Canvas,
+      0,
+      0
+    );
+    _outputContext.globalCompositeOperation = 'destination-over';
+    _setBackground(inputFrame);
+    _outputContext.restore();
+  }
+
+  resetPersonMaskUpscalePipeline(): void {
+    const {
+      _inputDimensions,
+      _maskBlurRadius,
+      _webgl2Canvas
+    } = this;
+    this._personMaskUpscalePipeline?.cleanUp();
+    this._personMaskUpscalePipeline = new PersonMaskUpscalePipeline(
+      _inputDimensions,
+      _webgl2Canvas
+    );
+    this._personMaskUpscalePipeline.updateBilateralFilterConfig({
+      sigmaSpace: _maskBlurRadius
+    });
+  }
+
+  updateMaskBlurRadius(radius: number): void {
+    if (this._maskBlurRadius !== radius) {
+      this._maskBlurRadius = radius;
+      this._personMaskUpscalePipeline
+        ?.updateBilateralFilterConfig({
+          sigmaSpace: radius
+        });
+    }
+  }
+}
diff --git a/lib/processors/background/pipelines/backgroundprocessorpipeline/VirtualBackgroundProcessorPipeline.proxy.ts b/lib/processors/background/pipelines/backgroundprocessorpipeline/VirtualBackgroundProcessorPipeline.proxy.ts
new file mode 100644
index 0000000..154d724
--- /dev/null
+++ b/lib/processors/background/pipelines/backgroundprocessorpipeline/VirtualBackgroundProcessorPipeline.proxy.ts
@@ -0,0 +1,41 @@
+import { Remote, transfer, wrap } from 'comlink';
+import { TWILIO_VIRTUAL_BACKGROUND_PROCESSOR_PIPELINE_WORKER } from '../../../../constants';
+import { CorsWorker } from '../../../../utils/CorsWorker';
+import { ImageFit } from '../../../../types';
+import { BackgroundProcessorPipelineProxy } from './BackgroundProcessorPipeline.proxy';
+import { VirtualBackgroundProcessorPipeline, VirtualBackgroundProcessorPipelineOptions } from './VirtualBackgroundProcessorPipeline';
+
+let VirtualBackgroundProcessorPipelineWorker: Remote<typeof VirtualBackgroundProcessorPipeline>;
+
+/**
+ * @private
+ */
+export class VirtualBackgroundProcessorPipelineProxy extends BackgroundProcessorPipelineProxy {
+  protected readonly _pipelineWorkerPromise: Promise<Remote<VirtualBackgroundProcessorPipeline>>;
+
+  constructor(
+    options: VirtualBackgroundProcessorPipelineOptions
+  ) {
+    const corsWorker = new CorsWorker(
+      `${options.assetsPath}${TWILIO_VIRTUAL_BACKGROUND_PROCESSOR_PIPELINE_WORKER}`
+    );
+    const pipelineWorkerPromise = corsWorker.workerPromise.then((worker) => {
+      VirtualBackgroundProcessorPipelineWorker ||= wrap<typeof VirtualBackgroundProcessorPipeline>(worker);
+      return new VirtualBackgroundProcessorPipelineWorker(options);
+    });
+    super(pipelineWorkerPromise);
+    this._pipelineWorkerPromise = pipelineWorkerPromise;
+  }
+
+  async setBackgroundImage(backgroundImage: ImageBitmap): Promise<void> {
+    const pipelineWorker = await this._pipelineWorkerPromise;
+    return pipelineWorker.setBackgroundImage(
+      transfer(backgroundImage, [backgroundImage])
+    );
+  }
+
+  async setFitType(fitType: ImageFit): Promise<void> {
+    const pipelineWorker = await this._pipelineWorkerPromise;
+    return pipelineWorker.setFitType(fitType);
+  }
+}
diff --git a/lib/processors/background/pipelines/backgroundprocessorpipeline/VirtualBackgroundProcessorPipeline.ts b/lib/processors/background/pipelines/backgroundprocessorpipeline/VirtualBackgroundProcessorPipeline.ts
new file mode 100644
index 0000000..edc2ca3
--- /dev/null
+++ b/lib/processors/background/pipelines/backgroundprocessorpipeline/VirtualBackgroundProcessorPipeline.ts
@@ -0,0 +1,137 @@
+import { ImageFit } from '../../../../types';
+import { BackgroundProcessorPipeline, BackgroundProcessorPipelineOptions } from './BackgroundProcessorPipeline';
+
+/**
+ * @private
+ */
+export interface VirtualBackgroundProcessorPipelineOptions extends BackgroundProcessorPipelineOptions {
+  fitType: ImageFit;
+}
+
+/**
+ * @private
+ */
+export class VirtualBackgroundProcessorPipeline extends BackgroundProcessorPipeline {
+  private _backgroundImage: ImageBitmap | null;
+  private _fitType: ImageFit;
+
+  constructor(options: VirtualBackgroundProcessorPipelineOptions) {
+    super(options);
+
+    const {
+      fitType
+    } = options;
+
+    this._backgroundImage = null;
+    this._fitType = fitType;
+  }
+
+  async setBackgroundImage(
+    backgroundImage: ImageBitmap
+  ): Promise<void> {
+    this._backgroundImage?.close();
+    this._backgroundImage = backgroundImage;
+  }
+
+  async setFitType(fitType: ImageFit): Promise<void> {
+    this._fitType = fitType;
+  }
+
+  protected _setBackground(): void {
+    const {
+      _backgroundImage,
+      _fitType,
+      _outputCanvas
+    } = this;
+
+    if (!_backgroundImage) {
+      return;
+    }
+
+    const ctx = _outputCanvas.getContext('2d')!;
+    const imageWidth = _backgroundImage.width;
+    const imageHeight = _backgroundImage.height;
+    const canvasWidth = _outputCanvas.width;
+    const canvasHeight = _outputCanvas.height;
+
+    if (_fitType === ImageFit.Fill) {
+      ctx.drawImage(
+        _backgroundImage,
+        0,
+        0,
+        imageWidth,
+        imageHeight,
+        0,
+        0,
+        canvasWidth,
+        canvasHeight
+      );
+    } else if (_fitType === ImageFit.None) {
+      ctx.drawImage(
+        _backgroundImage,
+        0,
+        0,
+        imageWidth,
+        imageHeight
+      );
+    } else {
+      const { x, y, w, h } = this._getFitPosition(
+        imageWidth,
+        imageHeight,
+        canvasWidth,
+        canvasHeight,
+        _fitType
+      );
+      ctx.drawImage(
+        _backgroundImage,
+        0,
+        0,
+        imageWidth,
+        imageHeight,
+        x,
+        y,
+        w,
+        h
+      );
+    }
+  }
+
+  private _getFitPosition(
+    contentWidth: number,
+    contentHeight: number,
+    viewportWidth: number,
+    viewportHeight: number,
+    type: ImageFit
+  ): {
+    h: number,
+    w: number,
+    x: number,
+    y: number
+  } {
+
+    // Calculate new content width to fit viewport width
+    let factor = viewportWidth / contentWidth;
+    let newContentWidth = viewportWidth;
+    let newContentHeight = factor * contentHeight;
+
+    // Scale down the resulting height and width more
+    // to fit viewport height if the content still exceeds it
+    if ((type === ImageFit.Contain && newContentHeight > viewportHeight)
+      || (type === ImageFit.Cover && viewportHeight > newContentHeight)) {
+      factor = viewportHeight / newContentHeight;
+      newContentWidth = factor * newContentWidth;
+      newContentHeight = viewportHeight;
+    }
+
+    // Calculate the destination top left corner to center the content
+    const x = (viewportWidth - newContentWidth) / 2;
+    const y = (viewportHeight - newContentHeight) / 2;
+
+    return {
+      x,
+      y,
+      w: newContentWidth,
+      h: newContentHeight,
+    };
+  }
+}
diff --git a/lib/processors/background/pipelines/backgroundprocessorpipeline/VirtualBackgroundProcessorPipeline.worker.ts b/lib/processors/background/pipelines/backgroundprocessorpipeline/VirtualBackgroundProcessorPipeline.worker.ts
new file mode 100644
index 0000000..6d7a1e8
--- /dev/null
+++ b/lib/processors/background/pipelines/backgroundprocessorpipeline/VirtualBackgroundProcessorPipeline.worker.ts
@@ -0,0 +1,22 @@
+import { expose, transfer } from 'comlink';
+import { VirtualBackgroundProcessorPipeline } from './VirtualBackgroundProcessorPipeline';
+
+/**
+ * @private
+ */
+export class VirtualBackgroundProcessorPipelineWorker extends VirtualBackgroundProcessorPipeline {
+  async render(inputFrame: VideoFrame | ImageBitmap): Promise<ImageBitmap | null> {
+    const outputFrame = await super.render(inputFrame);
+
+    const outputBitmap = outputFrame instanceof OffscreenCanvas
+      ? outputFrame.transferToImageBitmap()
+      : outputFrame;
+
+    return outputBitmap && transfer(
+      outputBitmap,
+      [outputBitmap]
+    );
+  }
+}
+
+expose(VirtualBackgroundProcessorPipelineWorker);
diff --git a/lib/processors/background/pipelines/backgroundprocessorpipeline/index.ts b/lib/processors/background/pipelines/backgroundprocessorpipeline/index.ts
new file mode 100644
index 0000000..648e18f
--- /dev/null
+++ b/lib/processors/background/pipelines/backgroundprocessorpipeline/index.ts
@@ -0,0 +1,6 @@
+export { BackgroundProcessorPipeline } from './BackgroundProcessorPipeline';
+export { BackgroundProcessorPipelineProxy } from './BackgroundProcessorPipeline.proxy';
+export { GaussianBlurBackgroundProcessorPipeline } from './GaussianBlurBackgroundProcessorPipeline';
+export { GaussianBlurBackgroundProcessorPipelineProxy } from './GaussianBlurBackgroundProcessorPipeline.proxy';
+export { VirtualBackgroundProcessorPipeline } from './VirtualBackgroundProcessorPipeline';
+export { VirtualBackgroundProcessorPipelineProxy } from './VirtualBackgroundProcessorPipeline.proxy';
diff --git a/lib/processors/background/pipelines/gaussianblurfilterpipeline/SinglePassGaussianBlurFilterStage.ts b/lib/processors/background/pipelines/gaussianblurfilterpipeline/SinglePassGaussianBlurFilterStage.ts
new file mode 100644
index 0000000..2b10037
--- /dev/null
+++ b/lib/processors/background/pipelines/gaussianblurfilterpipeline/SinglePassGaussianBlurFilterStage.ts
@@ -0,0 +1,109 @@
+import { WebGL2Pipeline } from '../../../pipelines';
+
+/**
+ * @private
+ */
+function createGaussianBlurWeights(radius: number): number[] {
+  const coeff = 1.0 / Math.sqrt(2.0 * Math.PI) / radius;
+  return '0'.repeat(radius + 1).split('').map((zero, x) => {
+    return coeff * Math.exp(-0.5 * x * x / radius / radius);
+  });
+}
+
+/**
+ * @private
+ */
+export class SinglePassGaussianBlurFilterStage extends WebGL2Pipeline.ProcessingStage {
+  constructor(
+    glOut: WebGL2RenderingContext,
+    direction: 'horizontal' | 'vertical',
+    outputType: 'canvas' | 'texture',
+    inputTextureUnit: number,
+    outputTextureUnit = inputTextureUnit + 1
+  ) {
+    const {
+      height,
+      width
+    } = glOut.canvas;
+
+    super(
+      {
+        textureName: 'u_inputTexture',
+        textureUnit: inputTextureUnit
+      },
+      {
+        fragmentShaderSource: `#version 300 es
+          precision highp float;
+
+          uniform sampler2D u_inputTexture;
+          uniform vec2 u_texelSize;
+          uniform float u_direction;
+          uniform float u_radius;
+          uniform float u_gaussianBlurWeights[128];
+
+          in vec2 v_texCoord;
+
+          out vec4 outColor;
+
+          void main() {
+            float totalWeight = u_gaussianBlurWeights[0];
+            vec3 newColor = totalWeight * texture(u_inputTexture, v_texCoord).rgb;
+
+            for (float i = 1.0; i <= u_radius; i += 1.0) {
+              float x = (1.0 - u_direction) * i;
+              float y = u_direction * i;
+
+              vec2 shift = vec2(x, y) * u_texelSize;
+              vec2 coord = vec2(v_texCoord + shift);
+              float weight = u_gaussianBlurWeights[int(i)];
+              newColor += weight * texture(u_inputTexture, coord).rgb;
+              totalWeight += weight;
+
+              shift = vec2(-x, -y) * u_texelSize;
+              coord = vec2(v_texCoord + shift);
+              newColor += weight * texture(u_inputTexture, coord).rgb;
+              totalWeight += weight;
+            }
+
+            newColor /= totalWeight;
+            outColor = vec4(newColor, 1.0);
+          }
+        `,
+        glOut,
+        height,
+        textureUnit: outputTextureUnit,
+        type: outputType,
+        width,
+        uniformVars: [
+          {
+            name: 'u_direction',
+            type: 'float',
+            values: [direction === 'vertical' ? 1 : 0]
+          },
+          {
+            name: 'u_texelSize',
+            type: 'float',
+            values: [1 / width, 1 / height]
+          }
+        ]
+      }
+    );
+
+    this.updateRadius(0);
+  }
+
+  updateRadius(radius: number): void {
+    this._setUniformVars([
+      {
+        name: 'u_radius',
+        type: 'float',
+        values: [radius]
+      },
+      {
+        name: 'u_gaussianBlurWeights',
+        type: 'float:v',
+        values: createGaussianBlurWeights(radius)
+      }
+    ]);
+  }
+}
diff --git a/lib/processors/background/pipelines/gaussianblurfilterpipeline/index.ts b/lib/processors/background/pipelines/gaussianblurfilterpipeline/index.ts
new file mode 100644
index 0000000..bf89fa5
--- /dev/null
+++ b/lib/processors/background/pipelines/gaussianblurfilterpipeline/index.ts
@@ -0,0 +1,35 @@
+import { WebGL2Pipeline } from '../../../pipelines';
+import { SinglePassGaussianBlurFilterStage } from './SinglePassGaussianBlurFilterStage';
+
+/**
+ * @private
+ */
+export class GaussianBlurFilterPipeline extends WebGL2Pipeline {
+  constructor(outputCanvas: OffscreenCanvas | HTMLCanvasElement) {
+    super();
+
+    const glOut = outputCanvas.getContext('webgl2')! as WebGL2RenderingContext;
+
+    this.addStage(new SinglePassGaussianBlurFilterStage(
+      glOut,
+      'horizontal',
+      'texture',
+      0,
+      2
+    ));
+
+    this.addStage(new SinglePassGaussianBlurFilterStage(
+      glOut,
+      'vertical',
+      'canvas',
+      2
+    ));
+  }
+
+  updateRadius(radius: number): void {
+    this._stages.forEach(
+      (stage) => (stage as SinglePassGaussianBlurFilterStage)
+        .updateRadius(radius)
+    );
+  }
+}
diff --git a/lib/processors/background/pipelines/index.ts b/lib/processors/background/pipelines/index.ts
new file mode 100644
index 0000000..274342f
--- /dev/null
+++ b/lib/processors/background/pipelines/index.ts
@@ -0,0 +1,2 @@
+export { GaussianBlurFilterPipeline } from './gaussianblurfilterpipeline';
+export { PersonMaskUpscalePipeline } from './personmaskupscalepipeline';
diff --git a/lib/processors/background/pipelines/personmaskupscalepipeline/SinglePassBilateralFilterStage.ts b/lib/processors/background/pipelines/personmaskupscalepipeline/SinglePassBilateralFilterStage.ts
new file mode 100644
index 0000000..38402a7
--- /dev/null
+++ b/lib/processors/background/pipelines/personmaskupscalepipeline/SinglePassBilateralFilterStage.ts
@@ -0,0 +1,227 @@
+import { Dimensions } from '../../../../types';
+import { WebGL2Pipeline } from '../../../pipelines';
+
+/**
+ * @private
+ */
+function createSpaceWeights(
+  radius: number,
+  sigma: number,
+  texelSize: number
+): number[] {
+  return '0'.repeat(radius).split('').map((zero, i) => {
+    const x = (i + 1) * texelSize;
+    return Math.exp(-0.5 * x * x / sigma / sigma);
+  });
+}
+
+/**
+ * @private
+ */
+function createColorWeights(
+  sigma: number
+): number[] {
+  return '0'.repeat(256).split('').map((zero, i) => {
+    const x = i / 255;
+    return Math.exp(-0.5 * x * x / sigma / sigma);
+  });
+}
+
+/**
+ * @private
+ */
+export class SinglePassBilateralFilterStage extends WebGL2Pipeline.ProcessingStage {
+  private readonly _direction: 'horizontal' | 'vertical';
+  private readonly _inputDimensions: Dimensions;
+
+  constructor(
+    glOut: WebGL2RenderingContext,
+    direction: 'horizontal' | 'vertical',
+    outputType: 'canvas' | 'texture',
+    inputDimensions: Dimensions,
+    outputDimensions: Dimensions,
+    inputTextureUnit: number,
+    outputTextureUnit = inputTextureUnit + 1
+  ) {
+    const {
+      height,
+      width
+    } = outputDimensions;
+
+    super(
+      {
+        textureName: 'u_segmentationMask',
+        textureUnit: inputTextureUnit
+      },
+      {
+        fragmentShaderSource: `#version 300 es
+          precision highp float;
+
+          uniform sampler2D u_inputFrame;
+          uniform sampler2D u_segmentationMask;
+          uniform vec2 u_texelSize;
+          uniform float u_direction;
+          uniform float u_radius;
+          uniform float u_step;
+          uniform float u_spaceWeights[128];
+          uniform float u_colorWeights[256];
+
+          in vec2 v_texCoord;
+
+          out vec4 outColor;
+
+          float calculateColorWeight(vec2 coord, vec3 centerColor) {
+            vec3 coordColor = texture(u_inputFrame, coord).rgb;
+            float x = distance(centerColor, coordColor);
+            return u_colorWeights[int(x * 255.0)];
+          }
+
+          float edgePixelsAverageAlpha(float outAlpha) {
+            float totalAlpha = outAlpha;
+            float totalPixels = 1.0;
+
+            for (float i = -u_radius; u_radius > 0.0 && i <= u_radius; i += u_radius) {
+              for (float j = -u_radius; j <= u_radius; j += u_radius * (j == 0.0 ? 2.0 : 1.0)) {
+                vec2 shift = vec2(i, j) * u_texelSize;
+                vec2 coord = vec2(v_texCoord + shift);
+                totalAlpha += texture(u_segmentationMask, coord).a;
+                totalPixels++;
+              }
+            }
+
+            return totalAlpha / totalPixels;
+          }
+
+          void main() {
+            vec3 centerColor = texture(u_inputFrame, v_texCoord).rgb;
+            float outAlpha = texture(u_segmentationMask, v_texCoord).a;
+            float averageAlpha = edgePixelsAverageAlpha(outAlpha);
+            float totalWeight = 1.0;
+
+            if (averageAlpha == 0.0 || averageAlpha == 1.0) {
+              outColor = vec4(averageAlpha * centerColor, averageAlpha);
+              return;
+            }
+
+            for (float i = 1.0; i <= u_radius; i += u_step) {
+              float x = (1.0 - u_direction) * i;
+              float y = u_direction * i;
+              vec2 shift = vec2(x, y) * u_texelSize;
+              vec2 coord = vec2(v_texCoord + shift);
+              float spaceWeight = u_spaceWeights[int(i - 1.0)];
+              float colorWeight = calculateColorWeight(coord, centerColor);
+              float weight = spaceWeight * colorWeight;
+              float alpha = texture(u_segmentationMask, coord).a;
+              totalWeight += weight;
+              outAlpha += weight * alpha;
+
+              shift = vec2(-x, -y) * u_texelSize;
+              coord = vec2(v_texCoord + shift);
+              colorWeight = calculateColorWeight(coord, centerColor);
+              weight = spaceWeight * colorWeight;
+              alpha = texture(u_segmentationMask, coord).a;
+              totalWeight += weight;
+              outAlpha += weight * alpha;
+            }
+
+            outAlpha /= totalWeight;
+            outColor = vec4(outAlpha * centerColor, outAlpha);
+          }
+        `,
+        glOut,
+        height,
+        textureUnit: outputTextureUnit,
+        type: outputType,
+        width,
+        uniformVars: [
+          {
+            name: 'u_inputFrame',
+            type: 'int',
+            values: [0]
+          },
+          {
+            name: 'u_direction',
+            type: 'float',
+            values: [direction === 'vertical' ? 1 : 0]
+          },
+          {
+            name: 'u_texelSize',
+            type: 'float',
+            values: [1 / width, 1 / height]
+          }
+        ]
+      }
+    );
+
+    this._direction = direction;
+    this._inputDimensions = inputDimensions;
+    this.updateSigmaColor(0);
+    this.updateSigmaSpace(0);
+  }
+
+  updateSigmaColor(sigmaColor: number): void {
+    this._setUniformVars([
+      {
+        name: 'u_colorWeights',
+        type: 'float:v',
+        values: createColorWeights(
+          sigmaColor
+        )
+      }
+    ]);
+  }
+
+  updateSigmaSpace(sigmaSpace: number): void {
+    const {
+      height: inputHeight,
+      width: inputWidth
+    } = this._inputDimensions;
+
+    const {
+      height: outputHeight,
+      width: outputWidth
+    } = this._outputDimensions;
+
+    sigmaSpace *= Math.max(
+      outputWidth / inputWidth,
+      outputHeight / inputHeight
+    );
+
+    const step = Math.floor(
+      0.5 * sigmaSpace / Math.log(sigmaSpace)
+    );
+
+    const sigmaTexel = Math.max(
+      1 / outputWidth,
+      1 / outputHeight
+    ) * sigmaSpace;
+
+    const texelSize = 1 / (
+      this._direction === 'horizontal'
+        ? outputWidth
+        : outputHeight
+    );
+
+    this._setUniformVars([
+      {
+        name: 'u_radius',
+        type: 'float',
+        values: [sigmaSpace]
+      },
+      {
+        name: 'u_spaceWeights',
+        type: 'float:v',
+        values: createSpaceWeights(
+          sigmaSpace,
+          sigmaTexel,
+          texelSize
+        )
+      },
+      {
+        name: 'u_step',
+        type: 'float',
+        values: [step]
+      }
+    ]);
+  }
+}
diff --git a/lib/processors/background/pipelines/personmaskupscalepipeline/index.ts b/lib/processors/background/pipelines/personmaskupscalepipeline/index.ts
new file mode 100644
index 0000000..b5b1d3e
--- /dev/null
+++ b/lib/processors/background/pipelines/personmaskupscalepipeline/index.ts
@@ -0,0 +1,59 @@
+import { BilateralFilterConfig, Dimensions } from '../../../../types';
+import { WebGL2Pipeline } from '../../../pipelines';
+import { SinglePassBilateralFilterStage } from './SinglePassBilateralFilterStage';
+
+/**
+ * @private
+ */
+export class PersonMaskUpscalePipeline extends WebGL2Pipeline {
+  constructor(
+    inputDimensions: Dimensions,
+    outputCanvas: OffscreenCanvas | HTMLCanvasElement
+  ) {
+    super();
+    const glOut = outputCanvas.getContext('webgl2')! as WebGL2RenderingContext;
+
+    const outputDimensions = {
+      height: outputCanvas.height,
+      width: outputCanvas.width
+    };
+
+    this.addStage(new WebGL2Pipeline.InputStage(glOut));
+
+    this.addStage(new SinglePassBilateralFilterStage(
+      glOut,
+      'horizontal',
+      'texture',
+      inputDimensions,
+      outputDimensions,
+      1,
+      2
+    ));
+
+    this.addStage(new SinglePassBilateralFilterStage(
+      glOut,
+      'vertical',
+      'canvas',
+      inputDimensions,
+      outputDimensions,
+      2
+    ));
+  }
+
+  updateBilateralFilterConfig(config: BilateralFilterConfig) {
+    const [
+      /* inputStage */,
+      ...bilateralFilterStages
+    ] = this._stages;
+    const { sigmaSpace } = config;
+
+    if (typeof sigmaSpace === 'number') {
+      (bilateralFilterStages as SinglePassBilateralFilterStage[]).forEach(
+        (stage) => {
+          stage.updateSigmaColor(0.1);
+          stage.updateSigmaSpace(sigmaSpace);
+        }
+      );
+    }
+  }
+}
diff --git a/lib/processors/pipelines/Pipeline.ts b/lib/processors/pipelines/Pipeline.ts
new file mode 100644
index 0000000..0fd05ea
--- /dev/null
+++ b/lib/processors/pipelines/Pipeline.ts
@@ -0,0 +1,22 @@
+/**
+ * @private
+ */
+export class Pipeline implements Pipeline.Stage {
+  protected readonly _stages: Pipeline.Stage[] = [];
+
+  addStage(stage: Pipeline.Stage): void {
+    this._stages.push(stage);
+  }
+
+  render(...args: any[]): void {
+    this._stages.forEach((stage) => {
+      stage.render(...args);
+    });
+  }
+}
+
+export namespace Pipeline {
+  export interface Stage {
+    render(...args: any[]): void;
+  }
+}
diff --git a/lib/processors/pipelines/index.ts b/lib/processors/pipelines/index.ts
new file mode 100644
index 0000000..7c722c6
--- /dev/null
+++ b/lib/processors/pipelines/index.ts
@@ -0,0 +1,2 @@
+export { Pipeline } from './Pipeline';
+export { WebGL2Pipeline } from './webgl2pipeline';
diff --git a/lib/processors/pipelines/webgl2pipeline/WebGL2PipelineInputStage.ts b/lib/processors/pipelines/webgl2pipeline/WebGL2PipelineInputStage.ts
new file mode 100644
index 0000000..fa41391
--- /dev/null
+++ b/lib/processors/pipelines/webgl2pipeline/WebGL2PipelineInputStage.ts
@@ -0,0 +1,108 @@
+import { InputFrame } from '../../../types';
+import { Pipeline } from '../Pipeline';
+import { createTexture } from './webgl2PipelineHelpers';
+
+/**
+ * @private
+ */
+export class WebGL2PipelineInputStage implements Pipeline.Stage {
+  private readonly _glOut: WebGL2RenderingContext;
+  private readonly _inputFrameTexture: WebGLTexture;
+  private _inputTexture: WebGLTexture | null = null;
+
+  constructor(glOut: WebGL2RenderingContext) {
+    const { height, width } = glOut.canvas;
+    this._glOut = glOut;
+    this._inputFrameTexture = createTexture(
+      glOut,
+      glOut.RGBA8,
+      width,
+      height,
+      glOut.NEAREST,
+      glOut.NEAREST
+    )!;
+  }
+
+  cleanUp(): void {
+    const {
+      _glOut,
+      _inputFrameTexture,
+      _inputTexture
+    } = this;
+    _glOut.deleteTexture(_inputFrameTexture);
+    _glOut.deleteTexture(_inputTexture);
+  }
+
+  render(
+    inputFrame?: InputFrame,
+    inputTextureData?: ImageData
+  ): void {
+    const {
+      _glOut,
+      _inputFrameTexture
+    } = this;
+
+    const { height, width } = _glOut.canvas;
+    _glOut.viewport(0, 0, width, height);
+    _glOut.clearColor(0, 0, 0, 0);
+    _glOut.clear(_glOut.COLOR_BUFFER_BIT);
+
+    if (inputFrame) {
+      _glOut.activeTexture(_glOut.TEXTURE0);
+      _glOut.bindTexture(
+        _glOut.TEXTURE_2D,
+        _inputFrameTexture
+      );
+      _glOut.texSubImage2D(
+        _glOut.TEXTURE_2D,
+        0,
+        0,
+        0,
+        width,
+        height,
+        _glOut.RGBA,
+        _glOut.UNSIGNED_BYTE,
+        inputFrame
+      );
+    }
+
+    if (!inputTextureData) {
+      return;
+    }
+    const {
+      data,
+      height: textureHeight,
+      width: textureWidth
+    } = inputTextureData;
+
+    if (!this._inputTexture) {
+      this._inputTexture = createTexture(
+        _glOut,
+        _glOut.RGBA8,
+        textureWidth,
+        textureHeight,
+        _glOut.NEAREST,
+        _glOut.NEAREST
+      );
+    }
+
+    _glOut.viewport(0, 0, textureWidth, textureHeight);
+    _glOut.activeTexture(_glOut.TEXTURE1);
+
+    _glOut.bindTexture(
+      _glOut.TEXTURE_2D,
+      this._inputTexture
+    );
+    _glOut.texSubImage2D(
+      _glOut.TEXTURE_2D,
+      0,
+      0,
+      0,
+      textureWidth,
+      textureHeight,
+      _glOut.RGBA,
+      _glOut.UNSIGNED_BYTE,
+      data
+    );
+  }
+}
diff --git a/lib/processors/pipelines/webgl2pipeline/WebGL2PipelineProcessingStage.ts b/lib/processors/pipelines/webgl2pipeline/WebGL2PipelineProcessingStage.ts
new file mode 100644
index 0000000..28b7791
--- /dev/null
+++ b/lib/processors/pipelines/webgl2pipeline/WebGL2PipelineProcessingStage.ts
@@ -0,0 +1,240 @@
+import { Dimensions } from '../../../types';
+import { Pipeline } from '../Pipeline';
+import { compileShader, createPipelineStageProgram, createTexture, initBuffer } from './webgl2PipelineHelpers';
+
+interface InputConfig {
+  textureName: string;
+  textureUnit: number;
+}
+
+interface OutputConfig {
+  fragmentShaderSource: string;
+  glOut: WebGL2RenderingContext;
+  height?: number;
+  textureUnit?: number;
+  type: 'canvas' | 'texture';
+  uniformVars?: UniformVarInfo[];
+  vertexShaderSource?: string;
+  width?: number;
+}
+
+interface UniformVarInfo {
+  name: string;
+  type: 'float' | 'int' | 'uint' | 'float:v';
+  values: number[];
+}
+
+/**;
+ * @private
+ */
+export class WebGL2PipelineProcessingStage implements Pipeline.Stage {
+  protected readonly _outputDimensions: Dimensions;
+  private readonly _fragmentShader: WebGLSampler;
+  private readonly _glOut: WebGL2RenderingContext;
+  private readonly _outputFramebuffer: WebGLBuffer | null = null;
+  private readonly _outputTexture: WebGLTexture | null = null;
+  private readonly _outputTextureUnit: number;
+  private readonly _positionBuffer: WebGLBuffer;
+  private readonly _program: WebGLProgram;
+  private readonly _texCoordBuffer: WebGLBuffer;
+  private readonly _vertexShader: WebGLShader;
+
+  constructor(
+    inputConfig: InputConfig,
+    outputConfig: OutputConfig
+  ) {
+    const {
+      textureName,
+      textureUnit,
+    } = inputConfig;
+
+    const { glOut } = outputConfig;
+    this._glOut = glOut;
+
+    const {
+      fragmentShaderSource,
+      height = glOut.canvas.height,
+      textureUnit: outputTextureUnit = textureUnit + 1,
+      type: outputType,
+      uniformVars = [],
+      vertexShaderSource = `#version 300 es
+        in vec2 a_position;
+        in vec2 a_texCoord;
+
+        out vec2 v_texCoord;
+
+        void main() {
+          gl_Position = vec4(a_position${
+        outputType === 'canvas'
+          ? ' * vec2(1.0, -1.0)'
+          : ''
+      }, 0.0, 1.0);
+          v_texCoord = a_texCoord;
+        }
+      `,
+      width = glOut.canvas.width
+    } = outputConfig;
+
+    this._outputDimensions = {
+      height,
+      width
+    };
+
+    this._outputTextureUnit = outputTextureUnit;
+
+    this._fragmentShader = compileShader(
+      glOut,
+      glOut.FRAGMENT_SHADER,
+      fragmentShaderSource
+    );
+
+    this._vertexShader = compileShader(
+      glOut,
+      glOut.VERTEX_SHADER,
+      vertexShaderSource
+    );
+
+    this._positionBuffer = initBuffer(
+      glOut,
+      [
+        -1.0, -1.0,
+        1.0, -1.0,
+        -1.0, 1.0,
+        1.0, 1.0,
+      ]
+    )!;
+
+    this._texCoordBuffer = initBuffer(
+      glOut,
+      [
+        0.0, 0.0,
+        1.0, 0.0,
+        0.0, 1.0,
+        1.0, 1.0,
+      ]
+    )!;
+
+    if (outputType === 'texture') {
+      this._outputTexture = createTexture(
+        glOut,
+        glOut.RGBA8,
+        width,
+        height
+      );
+      this._outputFramebuffer = glOut.createFramebuffer();
+      glOut.bindFramebuffer(
+        glOut.FRAMEBUFFER,
+        this._outputFramebuffer
+      );
+      glOut.framebufferTexture2D(
+        glOut.FRAMEBUFFER,
+        glOut.COLOR_ATTACHMENT0,
+        glOut.TEXTURE_2D,
+        this._outputTexture,
+        0
+      );
+    }
+
+    const program = createPipelineStageProgram(
+      glOut,
+      this._vertexShader,
+      this._fragmentShader,
+      this._positionBuffer,
+      this._texCoordBuffer
+    );
+    this._program = program;
+
+    this._setUniformVars([
+      {
+        name: textureName,
+        type: 'int',
+        values: [textureUnit]
+      },
+      ...uniformVars
+    ]);
+  }
+
+  cleanUp(): void {
+    const {
+      _fragmentShader,
+      _glOut,
+      _positionBuffer,
+      _program,
+      _texCoordBuffer,
+      _vertexShader
+    } = this;
+    _glOut.deleteProgram(_program);
+    _glOut.deleteBuffer(_texCoordBuffer);
+    _glOut.deleteBuffer(_positionBuffer);
+    _glOut.deleteShader(_vertexShader);
+    _glOut.deleteShader(_fragmentShader);
+  }
+
+  render(): void {
+    const {
+      _glOut,
+      _outputDimensions: {
+        height,
+        width
+      },
+      _outputFramebuffer,
+      _outputTexture,
+      _outputTextureUnit,
+      _program
+    } = this;
+
+    _glOut.viewport(0, 0, width, height);
+    _glOut.useProgram(_program);
+
+    if (_outputTexture) {
+      _glOut.activeTexture(
+        _glOut.TEXTURE0
+        + _outputTextureUnit
+      );
+      _glOut.bindTexture(
+        _glOut.TEXTURE_2D,
+        _outputTexture
+      );
+    }
+    _glOut.bindFramebuffer(
+      _glOut.FRAMEBUFFER,
+      _outputFramebuffer
+    );
+    _glOut.drawArrays(
+      _glOut.TRIANGLE_STRIP,
+      0,
+      4
+    );
+  }
+
+  protected _setUniformVars(uniformVars: UniformVarInfo[]) {
+    const {
+      _glOut,
+      _program
+    } = this;
+
+    _glOut.useProgram(_program);
+
+    uniformVars.forEach(({ name, type, values }) => {
+      const uniformVarLocation = _glOut
+        .getUniformLocation(
+          _program,
+          name
+        );
+      const isVector = type.split(':')[1] === 'v';
+      if (isVector) {
+        // @ts-ignore
+        _glOut[`uniform1${type[0]}v`](
+          uniformVarLocation,
+          values
+        );
+      } else {
+        // @ts-ignore
+        _glOut[`uniform${values.length}${type[0]}`](
+          uniformVarLocation,
+          ...values
+        );
+      }
+    });
+  }
+}
diff --git a/lib/processors/pipelines/webgl2pipeline/index.ts b/lib/processors/pipelines/webgl2pipeline/index.ts
new file mode 100644
index 0000000..e3d142e
--- /dev/null
+++ b/lib/processors/pipelines/webgl2pipeline/index.ts
@@ -0,0 +1,31 @@
+import { InputFrame } from '../../../types';
+import { Pipeline } from '../Pipeline';
+import { WebGL2PipelineInputStage } from './WebGL2PipelineInputStage';
+import { WebGL2PipelineProcessingStage } from './WebGL2PipelineProcessingStage';
+
+/**
+ * @private
+ */
+export class WebGL2Pipeline extends Pipeline {
+  static InputStage = WebGL2PipelineInputStage;
+  static ProcessingStage = WebGL2PipelineProcessingStage;
+  protected readonly _stages: (WebGL2PipelineInputStage | WebGL2PipelineProcessingStage)[] = [];
+
+  cleanUp(): void {
+    this._stages.forEach(
+      (stage) => stage.cleanUp()
+    );
+  }
+
+  render(
+    inputFrame?: InputFrame,
+    inputTextureData?: ImageData
+  ): void {
+    const [inputStage, ...otherStages] = this._stages;
+    inputStage.render(inputFrame, inputTextureData);
+    otherStages.forEach(
+      (stage) => (stage as WebGL2PipelineProcessingStage)
+        .render()
+    );
+  }
+}
diff --git a/lib/processors/webgl2/helpers/webglHelper.ts b/lib/processors/pipelines/webgl2pipeline/webgl2PipelineHelpers.ts
similarity index 56%
rename from lib/processors/webgl2/helpers/webglHelper.ts
rename to lib/processors/pipelines/webgl2pipeline/webgl2PipelineHelpers.ts
index 3c3eed7..0980941 100644
--- a/lib/processors/webgl2/helpers/webglHelper.ts
+++ b/lib/processors/pipelines/webgl2pipeline/webgl2PipelineHelpers.ts
@@ -1,67 +1,68 @@
 /**
- * Use it along with boyswan.glsl-literal VSCode extension
- * to get GLSL syntax highlighting.
- * https://marketplace.visualstudio.com/items?itemName=boyswan.glsl-literal
- *
- * On VSCode OSS, boyswan.glsl-literal requires slevesque.shader extension
- * to be installed as well.
- * https://marketplace.visualstudio.com/items?itemName=slevesque.shader
+ * @private
  */
-export const glsl = String.raw
-
-export function createPiplelineStageProgram(
+export function createPipelineStageProgram(
   gl: WebGL2RenderingContext,
   vertexShader: WebGLShader,
   fragmentShader: WebGLShader,
   positionBuffer: WebGLBuffer,
   texCoordBuffer: WebGLBuffer
 ) {
-  const program = createProgram(gl, vertexShader, fragmentShader)
+  const program = createProgram(gl, vertexShader, fragmentShader);
 
-  const positionAttributeLocation = gl.getAttribLocation(program, 'a_position')
-  gl.enableVertexAttribArray(positionAttributeLocation)
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
-  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0)
+  const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
+  gl.enableVertexAttribArray(positionAttributeLocation);
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
 
-  const texCoordAttributeLocation = gl.getAttribLocation(program, 'a_texCoord')
-  gl.enableVertexAttribArray(texCoordAttributeLocation)
-  gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer)
-  gl.vertexAttribPointer(texCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0)
+  const texCoordAttributeLocation = gl.getAttribLocation(program, 'a_texCoord');
+  gl.enableVertexAttribArray(texCoordAttributeLocation);
+  gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
+  gl.vertexAttribPointer(texCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0);
 
-  return program
+  return program;
 }
 
+/**
+ * @private
+ */
 export function createProgram(
   gl: WebGL2RenderingContext,
   vertexShader: WebGLShader,
   fragmentShader: WebGLShader
 ) {
-  const program = gl.createProgram()!
-  gl.attachShader(program, vertexShader)
-  gl.attachShader(program, fragmentShader)
-  gl.linkProgram(program)
+  const program = gl.createProgram()!;
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
   if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
     throw new Error(
       `Could not link WebGL program: ${gl.getProgramInfoLog(program)}`
-    )
+    );
   }
-  return program
+  return program;
 }
 
+/**
+ * @private
+ */
 export function compileShader(
   gl: WebGL2RenderingContext,
   shaderType: number,
   shaderSource: string
 ) {
-  const shader = gl.createShader(shaderType)!
-  gl.shaderSource(shader, shaderSource)
-  gl.compileShader(shader)
+  const shader = gl.createShader(shaderType)!;
+  gl.shaderSource(shader, shaderSource);
+  gl.compileShader(shader);
   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    throw new Error(`Could not compile shader: ${gl.getShaderInfoLog(shader)}`)
+    throw new Error(`Could not compile shader: ${gl.getShaderInfoLog(shader)}`);
   }
-  return shader
+  return shader;
 }
 
+/**
+ * @private
+ */
 export function createTexture(
   gl: WebGL2RenderingContext,
   internalformat: number,
@@ -70,12 +71,29 @@ export function createTexture(
   minFilter: GLint = gl.NEAREST,
   magFilter: GLint = gl.NEAREST
 ) {
-  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, minFilter)
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter)
-  gl.texStorage2D(gl.TEXTURE_2D, 1, internalformat, width, height)
-  return texture
+  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, minFilter);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);
+  gl.texStorage2D(gl.TEXTURE_2D, 1, internalformat, width, height);
+  return texture;
+}
+
+/**
+ * @private
+ */
+export function initBuffer(
+  gl: WebGL2RenderingContext,
+  data: number[]
+) {
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array(data),
+    gl.STATIC_DRAW
+  );
+  return buffer;
 }
diff --git a/lib/processors/webgl2/helpers/backgroundHelper.ts b/lib/processors/webgl2/helpers/backgroundHelper.ts
deleted file mode 100644
index e46dc12..0000000
--- a/lib/processors/webgl2/helpers/backgroundHelper.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type BackgroundConfig = {
-  type: 'none' | 'blur' | 'image'
-  url?: string
-}
diff --git a/lib/processors/webgl2/helpers/postProcessingHelper.ts b/lib/processors/webgl2/helpers/postProcessingHelper.ts
deleted file mode 100644
index 2519ec9..0000000
--- a/lib/processors/webgl2/helpers/postProcessingHelper.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export type BlendMode = 'screen' | 'linearDodge'
-
-export type PostProcessingConfig = {
-  jointBilateralFilter?: JointBilateralFilterConfig
-  coverage?: [number, number]
-  lightWrapping?: number
-  blendMode?: BlendMode
-}
-
-export type JointBilateralFilterConfig = {
-  sigmaSpace?: number
-  sigmaColor?: number
-}
diff --git a/lib/processors/webgl2/helpers/segmentationHelper.ts b/lib/processors/webgl2/helpers/segmentationHelper.ts
deleted file mode 100644
index 9c58b02..0000000
--- a/lib/processors/webgl2/helpers/segmentationHelper.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export type InputResolution = '640x360' | '256x256' | '256x144' | '160x96' | string
-
-export const inputResolutions: {
-  [resolution in InputResolution]: [number, number]
-} = {
-  '640x360': [640, 360],
-  '256x256': [256, 256],
-  '256x144': [256, 144],
-  '160x96': [160, 96],
-}
-
-export type SegmentationConfig = {
-  inputResolution: InputResolution
-}
diff --git a/lib/processors/webgl2/helpers/sourceHelper.ts b/lib/processors/webgl2/helpers/sourceHelper.ts
deleted file mode 100644
index 0ae4dcc..0000000
--- a/lib/processors/webgl2/helpers/sourceHelper.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type SourcePlayback = {
-  htmlElement: HTMLImageElement | HTMLVideoElement
-  width: number
-  height: number
-}
diff --git a/lib/processors/webgl2/index.ts b/lib/processors/webgl2/index.ts
deleted file mode 100644
index faee7eb..0000000
--- a/lib/processors/webgl2/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * This pipeline is based on Volcomix's react project.
- * https://github.com/Volcomix/virtual-background
- * It was modified and converted into a module to work with
- * Twilio's Video Processor
- */
-import { buildWebGL2Pipeline } from './pipelines/webgl2Pipeline'
-
-export { buildWebGL2Pipeline };
diff --git a/lib/processors/webgl2/pipelines/backgroundBlurStage.ts b/lib/processors/webgl2/pipelines/backgroundBlurStage.ts
deleted file mode 100644
index 5dda79a..0000000
--- a/lib/processors/webgl2/pipelines/backgroundBlurStage.ts
+++ /dev/null
@@ -1,292 +0,0 @@
-import {
-  compileShader,
-  createPiplelineStageProgram,
-  createTexture,
-  glsl,
-} from '../helpers/webglHelper'
-
-export type BackgroundBlurStage = {
-  render(): void
-  updateCoverage(coverage: [number, number]): void
-  cleanUp(): void
-}
-
-export function buildBackgroundBlurStage(
-  gl: WebGL2RenderingContext,
-  vertexShader: WebGLShader,
-  positionBuffer: WebGLBuffer,
-  texCoordBuffer: WebGLBuffer,
-  personMaskTexture: WebGLTexture,
-  canvas: HTMLCanvasElement
-): BackgroundBlurStage {
-  const blurPass = buildBlurPass(
-    gl,
-    vertexShader,
-    positionBuffer,
-    texCoordBuffer,
-    personMaskTexture,
-    canvas
-  )
-  const blendPass = buildBlendPass(gl, positionBuffer, texCoordBuffer, canvas)
-
-  function render() {
-    blurPass.render()
-    blendPass.render()
-  }
-
-  function updateCoverage(coverage: [number, number]) {
-    blendPass.updateCoverage(coverage)
-  }
-
-  function cleanUp() {
-    blendPass.cleanUp()
-    blurPass.cleanUp()
-  }
-
-  return {
-    render,
-    updateCoverage,
-    cleanUp,
-  }
-}
-
-function buildBlurPass(
-  gl: WebGL2RenderingContext,
-  vertexShader: WebGLShader,
-  positionBuffer: WebGLBuffer,
-  texCoordBuffer: WebGLBuffer,
-  personMaskTexture: WebGLTexture,
-  canvas: HTMLCanvasElement
-) {
-  const fragmentShaderSource = glsl`#version 300 es
-
-    precision highp float;
-
-    uniform sampler2D u_inputFrame;
-    uniform sampler2D u_personMask;
-    uniform vec2 u_texelSize;
-
-    in vec2 v_texCoord;
-
-    out vec4 outColor;
-
-    const float offset[5] = float[](0.0, 1.0, 2.0, 3.0, 4.0);
-    const float weight[5] = float[](0.2270270270, 0.1945945946, 0.1216216216,
-      0.0540540541, 0.0162162162);
-
-    void main() {
-      vec4 centerColor = texture(u_inputFrame, v_texCoord);
-      float personMask = texture(u_personMask, v_texCoord).a;
-
-      vec4 frameColor = centerColor * weight[0] * (1.0 - personMask);
-
-      for (int i = 1; i < 5; i++) {
-        vec2 offset = vec2(offset[i]) * u_texelSize;
-
-        vec2 texCoord = v_texCoord + offset;
-        frameColor += texture(u_inputFrame, texCoord) * weight[i] *
-          (1.0 - texture(u_personMask, texCoord).a);
-
-        texCoord = v_texCoord - offset;
-        frameColor += texture(u_inputFrame, texCoord) * weight[i] *
-          (1.0 - texture(u_personMask, texCoord).a);
-      }
-      outColor = vec4(frameColor.rgb + (1.0 - frameColor.a) * centerColor.rgb, 1.0);
-    }
-  `
-
-  const scale = 0.5
-  const outputWidth = canvas.width * scale
-  const outputHeight = canvas.height * scale
-  const texelWidth = 1 / outputWidth
-  const texelHeight = 1 / outputHeight
-
-  const fragmentShader = compileShader(
-    gl,
-    gl.FRAGMENT_SHADER,
-    fragmentShaderSource
-  )
-  const program = createPiplelineStageProgram(
-    gl,
-    vertexShader,
-    fragmentShader,
-    positionBuffer,
-    texCoordBuffer
-  )
-  const inputFrameLocation = gl.getUniformLocation(program, 'u_inputFrame')
-  const personMaskLocation = gl.getUniformLocation(program, 'u_personMask')
-  const texelSizeLocation = gl.getUniformLocation(program, 'u_texelSize')
-  const texture1 = createTexture(
-    gl,
-    gl.RGBA8,
-    outputWidth,
-    outputHeight,
-    gl.NEAREST,
-    gl.LINEAR
-  )
-  const texture2 = createTexture(
-    gl,
-    gl.RGBA8,
-    outputWidth,
-    outputHeight,
-    gl.NEAREST,
-    gl.LINEAR
-  )
-
-  const frameBuffer1 = gl.createFramebuffer()
-  gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer1)
-  gl.framebufferTexture2D(
-    gl.FRAMEBUFFER,
-    gl.COLOR_ATTACHMENT0,
-    gl.TEXTURE_2D,
-    texture1,
-    0
-  )
-
-  const frameBuffer2 = gl.createFramebuffer()
-  gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer2)
-  gl.framebufferTexture2D(
-    gl.FRAMEBUFFER,
-    gl.COLOR_ATTACHMENT0,
-    gl.TEXTURE_2D,
-    texture2,
-    0
-  )
-
-  gl.useProgram(program)
-  gl.uniform1i(personMaskLocation, 1)
-
-  function render() {
-    gl.viewport(0, 0, outputWidth, outputHeight)
-    gl.useProgram(program)
-    gl.uniform1i(inputFrameLocation, 0)
-    gl.activeTexture(gl.TEXTURE1)
-    gl.bindTexture(gl.TEXTURE_2D, personMaskTexture)
-
-    for (let i = 0; i < 8; i++) {
-      gl.uniform2f(texelSizeLocation, 0, texelHeight)
-      gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer1)
-      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
-
-      gl.activeTexture(gl.TEXTURE2)
-      gl.bindTexture(gl.TEXTURE_2D, texture1)
-      gl.uniform1i(inputFrameLocation, 2)
-
-      gl.uniform2f(texelSizeLocation, texelWidth, 0)
-      gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer2)
-      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
-
-      gl.bindTexture(gl.TEXTURE_2D, texture2)
-    }
-  }
-
-  function cleanUp() {
-    gl.deleteFramebuffer(frameBuffer2)
-    gl.deleteFramebuffer(frameBuffer1)
-    gl.deleteTexture(texture2)
-    gl.deleteTexture(texture1)
-    gl.deleteProgram(program)
-    gl.deleteShader(fragmentShader)
-  }
-
-  return {
-    render,
-    cleanUp,
-  }
-}
-
-function buildBlendPass(
-  gl: WebGL2RenderingContext,
-  positionBuffer: WebGLBuffer,
-  texCoordBuffer: WebGLBuffer,
-  canvas: HTMLCanvasElement
-) {
-  const vertexShaderSource = glsl`#version 300 es
-
-    in vec2 a_position;
-    in vec2 a_texCoord;
-
-    out vec2 v_texCoord;
-
-    void main() {
-      // Flipping Y is required when rendering to canvas
-      gl_Position = vec4(a_position * vec2(1.0, -1.0), 0.0, 1.0);
-      v_texCoord = a_texCoord;
-    }
-  `
-
-  const fragmentShaderSource = glsl`#version 300 es
-
-    precision highp float;
-
-    uniform sampler2D u_inputFrame;
-    uniform sampler2D u_personMask;
-    uniform sampler2D u_blurredInputFrame;
-    uniform vec2 u_coverage;
-
-    in vec2 v_texCoord;
-
-    out vec4 outColor;
-
-    void main() {
-      vec3 color = texture(u_inputFrame, v_texCoord).rgb;
-      vec3 blurredColor = texture(u_blurredInputFrame, v_texCoord).rgb;
-      float personMask = texture(u_personMask, v_texCoord).a;
-      personMask = smoothstep(u_coverage.x, u_coverage.y, personMask);
-      outColor = vec4(mix(blurredColor, color, personMask), 1.0);
-    }
-  `
-
-  const { width: outputWidth, height: outputHeight } = canvas
-
-  const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexShaderSource)
-  const fragmentShader = compileShader(
-    gl,
-    gl.FRAGMENT_SHADER,
-    fragmentShaderSource
-  )
-  const program = createPiplelineStageProgram(
-    gl,
-    vertexShader,
-    fragmentShader,
-    positionBuffer,
-    texCoordBuffer
-  )
-  const inputFrameLocation = gl.getUniformLocation(program, 'u_inputFrame')
-  const personMaskLocation = gl.getUniformLocation(program, 'u_personMask')
-  const blurredInputFrame = gl.getUniformLocation(
-    program,
-    'u_blurredInputFrame'
-  )
-  const coverageLocation = gl.getUniformLocation(program, 'u_coverage')
-
-  gl.useProgram(program)
-  gl.uniform1i(inputFrameLocation, 0)
-  gl.uniform1i(personMaskLocation, 1)
-  gl.uniform1i(blurredInputFrame, 2)
-  gl.uniform2f(coverageLocation, 0, 1)
-
-  function render() {
-    gl.viewport(0, 0, outputWidth, outputHeight)
-    gl.useProgram(program)
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null)
-    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
-  }
-
-  function updateCoverage(coverage: [number, number]) {
-    gl.useProgram(program)
-    gl.uniform2f(coverageLocation, coverage[0], coverage[1])
-  }
-
-  function cleanUp() {
-    gl.deleteProgram(program)
-    gl.deleteShader(fragmentShader)
-    gl.deleteShader(vertexShader)
-  }
-
-  return {
-    render,
-    updateCoverage,
-    cleanUp,
-  }
-}
diff --git a/lib/processors/webgl2/pipelines/backgroundImageStage.ts b/lib/processors/webgl2/pipelines/backgroundImageStage.ts
deleted file mode 100644
index 452b957..0000000
--- a/lib/processors/webgl2/pipelines/backgroundImageStage.ts
+++ /dev/null
@@ -1,221 +0,0 @@
-import { BlendMode } from '../helpers/postProcessingHelper'
-import {
-  compileShader,
-  createPiplelineStageProgram,
-  createTexture,
-  glsl,
-} from '../helpers/webglHelper'
-
-export type BackgroundImageStage = {
-  render(): void
-  updateCoverage(coverage: [number, number]): void
-  updateLightWrapping(lightWrapping: number): void
-  updateBlendMode(blendMode: BlendMode): void
-  cleanUp(): void
-}
-
-export function buildBackgroundImageStage(
-  gl: WebGL2RenderingContext,
-  positionBuffer: WebGLBuffer,
-  texCoordBuffer: WebGLBuffer,
-  personMaskTexture: WebGLTexture,
-  backgroundImage: HTMLImageElement | null,
-  canvas: HTMLCanvasElement
-): BackgroundImageStage {
-  const vertexShaderSource = glsl`#version 300 es
-
-    uniform vec2 u_backgroundScale;
-    uniform vec2 u_backgroundOffset;
-
-    in vec2 a_position;
-    in vec2 a_texCoord;
-
-    out vec2 v_texCoord;
-    out vec2 v_backgroundCoord;
-
-    void main() {
-      // Flipping Y is required when rendering to canvas
-      gl_Position = vec4(a_position * vec2(1.0, -1.0), 0.0, 1.0);
-      v_texCoord = a_texCoord;
-      v_backgroundCoord = a_texCoord * u_backgroundScale + u_backgroundOffset;
-    }
-  `
-
-  const fragmentShaderSource = glsl`#version 300 es
-
-    precision highp float;
-
-    uniform sampler2D u_inputFrame;
-    uniform sampler2D u_personMask;
-    uniform sampler2D u_background;
-    uniform vec2 u_coverage;
-    uniform float u_lightWrapping;
-    uniform float u_blendMode;
-
-    in vec2 v_texCoord;
-    in vec2 v_backgroundCoord;
-
-    out vec4 outColor;
-
-    vec3 screen(vec3 a, vec3 b) {
-      return 1.0 - (1.0 - a) * (1.0 - b);
-    }
-
-    vec3 linearDodge(vec3 a, vec3 b) {
-      return a + b;
-    }
-
-    void main() {
-      vec3 frameColor = texture(u_inputFrame, v_texCoord).rgb;
-      vec3 backgroundColor = texture(u_background, v_backgroundCoord).rgb;
-      float personMask = texture(u_personMask, v_texCoord).a;
-      float lightWrapMask = 1.0 - max(0.0, personMask - u_coverage.y) / (1.0 - u_coverage.y);
-      vec3 lightWrap = u_lightWrapping * lightWrapMask * backgroundColor;
-      frameColor = u_blendMode * linearDodge(frameColor, lightWrap) +
-        (1.0 - u_blendMode) * screen(frameColor, lightWrap);
-      personMask = smoothstep(u_coverage.x, u_coverage.y, personMask);
-      outColor = vec4(frameColor * personMask + backgroundColor * (1.0 - personMask), 1.0);
-    }
-  `
-
-  const { width: outputWidth, height: outputHeight } = canvas
-  const outputRatio = outputWidth / outputHeight
-
-  const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexShaderSource)
-  const fragmentShader = compileShader(
-    gl,
-    gl.FRAGMENT_SHADER,
-    fragmentShaderSource
-  )
-  const program = createPiplelineStageProgram(
-    gl,
-    vertexShader,
-    fragmentShader,
-    positionBuffer,
-    texCoordBuffer
-  )
-  const backgroundScaleLocation = gl.getUniformLocation(
-    program,
-    'u_backgroundScale'
-  )
-  const backgroundOffsetLocation = gl.getUniformLocation(
-    program,
-    'u_backgroundOffset'
-  )
-  const inputFrameLocation = gl.getUniformLocation(program, 'u_inputFrame')
-  const personMaskLocation = gl.getUniformLocation(program, 'u_personMask')
-  const backgroundLocation = gl.getUniformLocation(program, 'u_background')
-  const coverageLocation = gl.getUniformLocation(program, 'u_coverage')
-  const lightWrappingLocation = gl.getUniformLocation(
-    program,
-    'u_lightWrapping'
-  )
-  const blendModeLocation = gl.getUniformLocation(program, 'u_blendMode')
-
-  gl.useProgram(program)
-  gl.uniform2f(backgroundScaleLocation, 1, 1)
-  gl.uniform2f(backgroundOffsetLocation, 0, 0)
-  gl.uniform1i(inputFrameLocation, 0)
-  gl.uniform1i(personMaskLocation, 1)
-  gl.uniform2f(coverageLocation, 0, 1)
-  gl.uniform1f(lightWrappingLocation, 0)
-  gl.uniform1f(blendModeLocation, 0)
-
-  let backgroundTexture: WebGLTexture | null = null
-  // TODO Find a better to handle background being loaded
-  if (backgroundImage?.complete) {
-    updateBackgroundImage(backgroundImage)
-  } else if (backgroundImage) {
-    backgroundImage.onload = () => {
-      updateBackgroundImage(backgroundImage)
-    }
-  }
-
-  function render() {
-    gl.viewport(0, 0, outputWidth, outputHeight)
-    gl.useProgram(program)
-    gl.activeTexture(gl.TEXTURE1)
-    gl.bindTexture(gl.TEXTURE_2D, personMaskTexture)
-    if (backgroundTexture !== null) {
-      gl.activeTexture(gl.TEXTURE2)
-      gl.bindTexture(gl.TEXTURE_2D, backgroundTexture)
-      // TODO Handle correctly the background not loaded yet
-      gl.uniform1i(backgroundLocation, 2)
-    }
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null)
-    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
-  }
-
-  function updateBackgroundImage(backgroundImage: HTMLImageElement) {
-    backgroundTexture = createTexture(
-      gl,
-      gl.RGBA8,
-      backgroundImage.naturalWidth,
-      backgroundImage.naturalHeight,
-      gl.LINEAR,
-      gl.LINEAR
-    )
-    gl.texSubImage2D(
-      gl.TEXTURE_2D,
-      0,
-      0,
-      0,
-      backgroundImage.naturalWidth,
-      backgroundImage.naturalHeight,
-      gl.RGBA,
-      gl.UNSIGNED_BYTE,
-      backgroundImage
-    )
-
-    let xOffset = 0
-    let yOffset = 0
-    let backgroundWidth = backgroundImage.naturalWidth
-    let backgroundHeight = backgroundImage.naturalHeight
-    const backgroundRatio = backgroundWidth / backgroundHeight
-    if (backgroundRatio < outputRatio) {
-      backgroundHeight = backgroundWidth / outputRatio
-      yOffset = (backgroundImage.naturalHeight - backgroundHeight) / 2
-    } else {
-      backgroundWidth = backgroundHeight * outputRatio
-      xOffset = (backgroundImage.naturalWidth - backgroundWidth) / 2
-    }
-
-    const xScale = backgroundWidth / backgroundImage.naturalWidth
-    const yScale = backgroundHeight / backgroundImage.naturalHeight
-    xOffset /= backgroundImage.naturalWidth
-    yOffset /= backgroundImage.naturalHeight
-
-    gl.uniform2f(backgroundScaleLocation, xScale, yScale)
-    gl.uniform2f(backgroundOffsetLocation, xOffset, yOffset)
-  }
-
-  function updateCoverage(coverage: [number, number]) {
-    gl.useProgram(program)
-    gl.uniform2f(coverageLocation, coverage[0], coverage[1])
-  }
-
-  function updateLightWrapping(lightWrapping: number) {
-    gl.useProgram(program)
-    gl.uniform1f(lightWrappingLocation, lightWrapping)
-  }
-
-  function updateBlendMode(blendMode: BlendMode) {
-    gl.useProgram(program)
-    gl.uniform1f(blendModeLocation, blendMode === 'screen' ? 0 : 1)
-  }
-
-  function cleanUp() {
-    gl.deleteTexture(backgroundTexture)
-    gl.deleteProgram(program)
-    gl.deleteShader(fragmentShader)
-    gl.deleteShader(vertexShader)
-  }
-
-  return {
-    render,
-    updateCoverage,
-    updateLightWrapping,
-    updateBlendMode,
-    cleanUp,
-  }
-}
diff --git a/lib/processors/webgl2/pipelines/fastBilateralFilterStage.ts b/lib/processors/webgl2/pipelines/fastBilateralFilterStage.ts
deleted file mode 100644
index e8f863e..0000000
--- a/lib/processors/webgl2/pipelines/fastBilateralFilterStage.ts
+++ /dev/null
@@ -1,222 +0,0 @@
-import {
-  inputResolutions,
-  SegmentationConfig,
-} from '../helpers/segmentationHelper'
-import {
-  compileShader,
-  createPiplelineStageProgram,
-  glsl,
-} from '../helpers/webglHelper'
-
-export function buildFastBilateralFilterStage(
-  gl: WebGL2RenderingContext,
-  vertexShader: WebGLShader,
-  positionBuffer: WebGLBuffer,
-  texCoordBuffer: WebGLBuffer,
-  inputTexture: WebGLTexture,
-  segmentationConfig: SegmentationConfig,
-  outputTexture: WebGLTexture,
-  canvas: HTMLCanvasElement
-) {
-  // NOTE(mmalavalli): This is a faster approximation of the joint bilateral filter.
-  // For a given pixel, instead of calculating the space and color weights of all
-  // the pixels within the filter kernel, which would have a complexity of O(r^2),
-  // we calculate the space and color weights of only those pixels which form two
-  // diagonal lines between the two pairs of opposite corners of the filter kernel,
-  // which would have a complexity of O(r). This improves the overall complexity
-  // of this stage from O(w x h x r^2) to O(w x h x r), where:
-  // w => width of the output video frame
-  // h => height of the output video frame
-  // r => radius of the joint bilateral filter kernel
-  const fragmentShaderSource = glsl`#version 300 es
-
-    precision highp float;
-
-    uniform sampler2D u_inputFrame;
-    uniform sampler2D u_segmentationMask;
-    uniform vec2 u_texelSize;
-    uniform float u_step;
-    uniform float u_radius;
-    uniform float u_offset;
-    uniform float u_sigmaTexel;
-    uniform float u_sigmaColor;
-
-    in vec2 v_texCoord;
-
-    out vec4 outColor;
-
-    float gaussian(float x, float sigma) {
-      return exp(-0.5 * x * x / sigma / sigma);
-    }
-
-    float calculateSpaceWeight(vec2 coord) {
-      float x = distance(v_texCoord, coord);
-      float sigma = u_sigmaTexel;
-      return gaussian(x, sigma);
-    }
-
-    float calculateColorWeight(vec2 coord) {
-      vec3 centerColor = texture(u_inputFrame, v_texCoord).rgb;
-      vec3 coordColor = texture(u_inputFrame, coord).rgb;
-      float x = distance(centerColor, coordColor);
-      float sigma = u_sigmaColor;
-      return gaussian(x, sigma);
-    }
-
-    void main() {
-      vec3 centerColor = texture(u_inputFrame, v_texCoord).rgb;
-      float newVal = 0.0;
-      float totalWeight = 0.0;
-
-      vec2 leftTopCoord = vec2(v_texCoord + vec2(-u_radius, -u_radius) * u_texelSize);
-      vec2 rightTopCoord = vec2(v_texCoord + vec2(u_radius, -u_radius) * u_texelSize);
-      vec2 leftBottomCoord = vec2(v_texCoord + vec2(-u_radius, u_radius) * u_texelSize);
-      vec2 rightBottomCoord = vec2(v_texCoord + vec2(u_radius, u_radius) * u_texelSize);
-
-      float leftTopSegAlpha = texture(u_segmentationMask, leftTopCoord).a;
-      float rightTopSegAlpha = texture(u_segmentationMask, rightTopCoord).a;
-      float leftBottomSegAlpha = texture(u_segmentationMask, leftBottomCoord).a;
-      float rightBottomSegAlpha = texture(u_segmentationMask, rightBottomCoord).a;
-      float totalSegAlpha = leftTopSegAlpha + rightTopSegAlpha + leftBottomSegAlpha + rightBottomSegAlpha;
-
-      if (totalSegAlpha <= 0.0) {
-        newVal = 0.0;
-      } else if (totalSegAlpha >= 4.0) {
-        newVal = 1.0;
-      } else {
-        for (float i = 0.0; i <= u_radius - u_offset; i += u_step) {
-          vec2 shift = vec2(i, i) * u_texelSize;
-          vec2 coord = vec2(v_texCoord + shift);
-          float spaceWeight = calculateSpaceWeight(coord);
-          float colorWeight = calculateColorWeight(coord);
-          float weight = spaceWeight * colorWeight;
-          float alpha = texture(u_segmentationMask, coord).a;
-          totalWeight += weight;
-          newVal += weight * alpha;
-
-          if (i != 0.0) {
-            shift = vec2(i, -i) * u_texelSize;
-            coord = vec2(v_texCoord + shift);
-            colorWeight = calculateColorWeight(coord);
-            weight = spaceWeight * colorWeight;
-            alpha = texture(u_segmentationMask, coord).a;
-            totalWeight += weight;
-            newVal += weight * texture(u_segmentationMask, coord).a;
-            
-            shift = vec2(-i, i) * u_texelSize;
-            coord = vec2(v_texCoord + shift);
-            colorWeight = calculateColorWeight(coord);
-            weight = spaceWeight * colorWeight;
-            alpha = texture(u_segmentationMask, coord).a;
-            totalWeight += weight;
-            newVal += weight * texture(u_segmentationMask, coord).a;
-            
-            shift = vec2(-i, -i) * u_texelSize;
-            coord = vec2(v_texCoord + shift);
-            colorWeight = calculateColorWeight(coord);
-            weight = spaceWeight * colorWeight;
-            alpha = texture(u_segmentationMask, coord).a;
-            totalWeight += weight;
-            newVal += weight * texture(u_segmentationMask, coord).a;          
-          }
-        }
-        newVal /= totalWeight;
-      }
-
-      outColor = vec4(vec3(0.0), newVal);
-    }
-  `
-
-  const [segmentationWidth, segmentationHeight] = inputResolutions[
-    segmentationConfig.inputResolution
-  ]
-  const { width: outputWidth, height: outputHeight } = canvas
-  const texelWidth = 1 / outputWidth
-  const texelHeight = 1 / outputHeight
-
-  const fragmentShader = compileShader(
-    gl,
-    gl.FRAGMENT_SHADER,
-    fragmentShaderSource
-  )
-  const program = createPiplelineStageProgram(
-    gl,
-    vertexShader,
-    fragmentShader,
-    positionBuffer,
-    texCoordBuffer
-  )
-  const inputFrameLocation = gl.getUniformLocation(program, 'u_inputFrame')
-  const segmentationMaskLocation = gl.getUniformLocation(
-    program,
-    'u_segmentationMask'
-  )
-  const texelSizeLocation = gl.getUniformLocation(program, 'u_texelSize')
-  const stepLocation = gl.getUniformLocation(program, 'u_step')
-  const radiusLocation = gl.getUniformLocation(program, 'u_radius')
-  const offsetLocation = gl.getUniformLocation(program, 'u_offset')
-  const sigmaTexelLocation = gl.getUniformLocation(program, 'u_sigmaTexel')
-  const sigmaColorLocation = gl.getUniformLocation(program, 'u_sigmaColor')
-
-  const frameBuffer = gl.createFramebuffer()
-  gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer)
-  gl.framebufferTexture2D(
-    gl.FRAMEBUFFER,
-    gl.COLOR_ATTACHMENT0,
-    gl.TEXTURE_2D,
-    outputTexture,
-    0
-  )
-
-  gl.useProgram(program)
-  gl.uniform1i(inputFrameLocation, 0)
-  gl.uniform1i(segmentationMaskLocation, 1)
-  gl.uniform2f(texelSizeLocation, texelWidth, texelHeight)
-
-  // Ensures default values are configured to prevent infinite
-  // loop in fragment shader
-  updateSigmaSpace(0)
-  updateSigmaColor(0)
-
-  function render() {
-    gl.viewport(0, 0, outputWidth, outputHeight)
-    gl.useProgram(program)
-    gl.activeTexture(gl.TEXTURE1)
-    gl.bindTexture(gl.TEXTURE_2D, inputTexture)
-    gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer)
-    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
-  }
-
-  function updateSigmaSpace(sigmaSpace: number) {
-    sigmaSpace *= Math.max(
-      outputWidth / segmentationWidth,
-      outputHeight / segmentationHeight
-    )
-
-    const kSparsityFactor = 0.66 // Higher is more sparse.
-    const sparsity = Math.max(1, Math.sqrt(sigmaSpace) * kSparsityFactor)
-    const step = sparsity
-    const radius = sigmaSpace
-    const offset = step > 1 ? step * 0.5 : 0
-    const sigmaTexel = Math.max(texelWidth, texelHeight) * sigmaSpace
-
-    gl.useProgram(program)
-    gl.uniform1f(stepLocation, step)
-    gl.uniform1f(radiusLocation, radius)
-    gl.uniform1f(offsetLocation, offset)
-    gl.uniform1f(sigmaTexelLocation, sigmaTexel)
-  }
-
-  function updateSigmaColor(sigmaColor: number) {
-    gl.useProgram(program)
-    gl.uniform1f(sigmaColorLocation, sigmaColor)
-  }
-
-  function cleanUp() {
-    gl.deleteFramebuffer(frameBuffer)
-    gl.deleteProgram(program)
-    gl.deleteShader(fragmentShader)
-  }
-
-  return { render, updateSigmaSpace, updateSigmaColor, cleanUp }
-}
diff --git a/lib/processors/webgl2/pipelines/loadSegmentationStage.ts b/lib/processors/webgl2/pipelines/loadSegmentationStage.ts
deleted file mode 100644
index bef6398..0000000
--- a/lib/processors/webgl2/pipelines/loadSegmentationStage.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import {
-  inputResolutions,
-  SegmentationConfig,
-} from '../helpers/segmentationHelper'
-import {
-  compileShader,
-  createPiplelineStageProgram,
-  createTexture,
-  glsl,
-} from '../helpers/webglHelper'
-
-export function buildLoadSegmentationStage(
-  gl: WebGL2RenderingContext,
-  vertexShader: WebGLShader,
-  positionBuffer: WebGLBuffer,
-  texCoordBuffer: WebGLBuffer,
-  segmentationConfig: SegmentationConfig,
-  outputTexture: WebGLTexture
-) {
-  const fragmentShaderSource = glsl`#version 300 es
-
-    precision highp float;
-
-    uniform sampler2D u_inputSegmentation;
-
-    in vec2 v_texCoord;
-
-    out vec4 outColor;
-
-    void main() {
-      float segmentation = texture(u_inputSegmentation, v_texCoord).a;
-      outColor = vec4(vec3(0.0), segmentation);
-    }
-  `
-  const [segmentationWidth, segmentationHeight] = inputResolutions[
-    segmentationConfig.inputResolution
-  ]
-  const fragmentShader = compileShader(
-    gl,
-    gl.FRAGMENT_SHADER,
-    fragmentShaderSource
-  )
-  const program = createPiplelineStageProgram(
-    gl,
-    vertexShader,
-    fragmentShader,
-    positionBuffer,
-    texCoordBuffer
-  )
-  const inputLocation = gl.getUniformLocation(program, 'u_inputSegmentation')
-  const inputTexture = createTexture(
-    gl,
-    gl.RGBA8,
-    segmentationWidth,
-    segmentationHeight
-  )
-
-  const frameBuffer = gl.createFramebuffer()
-  gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer)
-  gl.framebufferTexture2D(
-    gl.FRAMEBUFFER,
-    gl.COLOR_ATTACHMENT0,
-    gl.TEXTURE_2D,
-    outputTexture,
-    0
-  )
-
-  gl.useProgram(program)
-  gl.uniform1i(inputLocation, 1)
-
-  function render(segmentationData: Uint8ClampedArray) {
-    gl.viewport(0, 0, segmentationWidth, segmentationHeight)
-    gl.useProgram(program)
-    gl.activeTexture(gl.TEXTURE1)
-    gl.bindTexture(gl.TEXTURE_2D, inputTexture)
-    gl.texSubImage2D(
-      gl.TEXTURE_2D,
-      0,
-      0,
-      0,
-      segmentationWidth,
-      segmentationHeight,
-      gl.RGBA,
-      gl.UNSIGNED_BYTE,
-      segmentationData
-    )
-    gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer)
-    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
-  }
-
-  function cleanUp() {
-    gl.deleteFramebuffer(frameBuffer)
-    gl.deleteTexture(inputTexture)
-    gl.deleteProgram(program)
-    gl.deleteShader(fragmentShader)
-  }
-
-  return { render, cleanUp }
-}
diff --git a/lib/processors/webgl2/pipelines/webgl2Pipeline.ts b/lib/processors/webgl2/pipelines/webgl2Pipeline.ts
deleted file mode 100644
index 40203ff..0000000
--- a/lib/processors/webgl2/pipelines/webgl2Pipeline.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-import { BackgroundConfig } from '../helpers/backgroundHelper'
-import { PostProcessingConfig } from '../helpers/postProcessingHelper'
-import {
-  inputResolutions,
-  SegmentationConfig,
-} from '../helpers/segmentationHelper'
-import { SourcePlayback } from '../helpers/sourceHelper'
-import { compileShader, createTexture, glsl } from '../helpers/webglHelper'
-import {
-  buildBackgroundBlurStage,
-} from './backgroundBlurStage'
-import {
-  BackgroundImageStage,
-  buildBackgroundImageStage,
-} from './backgroundImageStage'
-import { buildFastBilateralFilterStage } from './fastBilateralFilterStage'
-import { buildLoadSegmentationStage } from './loadSegmentationStage'
-
-export function buildWebGL2Pipeline(
-  sourcePlayback: SourcePlayback,
-  backgroundImage: HTMLImageElement | null,
-  backgroundConfig: BackgroundConfig,
-  segmentationConfig: SegmentationConfig,
-  canvas: HTMLCanvasElement,
-  benchmark: any,
-  debounce: boolean
-) {
-  let shouldUpscaleCurrentMask = true
-
-  const vertexShaderSource = glsl`#version 300 es
-
-    in vec2 a_position;
-    in vec2 a_texCoord;
-
-    out vec2 v_texCoord;
-
-    void main() {
-      gl_Position = vec4(a_position, 0.0, 1.0);
-      v_texCoord = a_texCoord;
-    }
-  `
-
-  const { width: outputWidth, height: outputHeight } = canvas;
-  const [segmentationWidth, segmentationHeight] = inputResolutions[
-    segmentationConfig.inputResolution
-  ]
-
-  const gl = canvas.getContext('webgl2')!
-
-  const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexShaderSource)
-
-  const vertexArray = gl.createVertexArray()
-  gl.bindVertexArray(vertexArray)
-
-  const positionBuffer = gl.createBuffer()!
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
-  gl.bufferData(
-    gl.ARRAY_BUFFER,
-    new Float32Array([-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0]),
-    gl.STATIC_DRAW
-  )
-
-  const texCoordBuffer = gl.createBuffer()!
-  gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer)
-  gl.bufferData(
-    gl.ARRAY_BUFFER,
-    new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 1.0]),
-    gl.STATIC_DRAW
-  )
-
-  // We don't use texStorage2D here because texImage2D seems faster
-  // to upload video texture than texSubImage2D even though the latter
-  // is supposed to be the recommended way:
-  // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#use_texstorage_to_create_textures
-  const inputFrameTexture = gl.createTexture()
-  gl.bindTexture(gl.TEXTURE_2D, inputFrameTexture)
-  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.NEAREST)
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
-
-  // TODO Rename segmentation and person mask to be more specific
-  const segmentationTexture = createTexture(
-    gl,
-    gl.RGBA8,
-    segmentationWidth,
-    segmentationHeight
-  )!
-  const personMaskTexture = createTexture(
-    gl,
-    gl.RGBA8,
-    outputWidth,
-    outputHeight
-  )!
-  const loadSegmentationStage = buildLoadSegmentationStage(
-    gl,
-    vertexShader,
-    positionBuffer,
-    texCoordBuffer,
-    segmentationConfig,
-    segmentationTexture
-  )
-  const fastBilateralFilterStage = buildFastBilateralFilterStage(
-    gl,
-    vertexShader,
-    positionBuffer,
-    texCoordBuffer,
-    segmentationTexture,
-    segmentationConfig,
-    personMaskTexture,
-    canvas
-  )
-  const backgroundStage =
-    backgroundConfig.type === 'blur'
-      ? buildBackgroundBlurStage(
-          gl,
-          vertexShader,
-          positionBuffer,
-          texCoordBuffer,
-          personMaskTexture,
-          canvas
-        )
-      : buildBackgroundImageStage(
-          gl,
-          positionBuffer,
-          texCoordBuffer,
-          personMaskTexture,
-          backgroundImage,
-          canvas
-        )
-
-  async function sampleInputFrame() {
-    gl.clearColor(0, 0, 0, 0)
-    gl.clear(gl.COLOR_BUFFER_BIT)
-
-    gl.activeTexture(gl.TEXTURE0)
-    gl.bindTexture(gl.TEXTURE_2D, inputFrameTexture)
-
-    // texImage2D seems faster than texSubImage2D to upload
-    // video texture
-    gl.texImage2D(
-      gl.TEXTURE_2D,
-      0,
-      gl.RGBA,
-      gl.RGBA,
-      gl.UNSIGNED_BYTE,
-      sourcePlayback.htmlElement
-    )
-
-    gl.bindVertexArray(vertexArray)
-  }
-
-  async function render(segmentationData: Uint8ClampedArray) {
-    benchmark.start('imageCompositionDelay')
-    if (shouldUpscaleCurrentMask) {
-      loadSegmentationStage.render(segmentationData)
-    }
-    fastBilateralFilterStage.render()
-    backgroundStage.render()
-    if (debounce) {
-      shouldUpscaleCurrentMask = !shouldUpscaleCurrentMask
-    }
-    benchmark.end('imageCompositionDelay')
-  }
-
-  function updatePostProcessingConfig(
-    postProcessingConfig: PostProcessingConfig
-  ) {
-    const {
-      blendMode,
-      coverage,
-      lightWrapping,
-      jointBilateralFilter = {}
-    } = postProcessingConfig
-
-    const {
-      sigmaColor,
-      sigmaSpace
-    } = jointBilateralFilter
-
-    if (typeof sigmaColor === 'number') {
-      fastBilateralFilterStage.updateSigmaColor(sigmaColor)
-    }
-    if (typeof sigmaSpace === 'number') {
-      fastBilateralFilterStage.updateSigmaSpace(sigmaSpace)
-    }
-    if (Array.isArray(coverage)) {
-      if (backgroundConfig.type === 'blur' || backgroundConfig.type === 'image') {
-        backgroundStage.updateCoverage(coverage)
-      }
-    }
-    if (backgroundConfig.type === 'image') {
-      const backgroundImageStage = backgroundStage as BackgroundImageStage
-      if (typeof lightWrapping === 'number') {
-        backgroundImageStage.updateLightWrapping(lightWrapping)
-      }
-      if (typeof blendMode === 'string') {
-        backgroundImageStage.updateBlendMode(blendMode)
-      }
-    } else if (backgroundConfig.type !== 'blur') {
-      // TODO Handle no background in a separate pipeline path
-      const backgroundImageStage = backgroundStage as BackgroundImageStage
-      backgroundImageStage.updateCoverage([0, 0.9999])
-      backgroundImageStage.updateLightWrapping(0)
-    }
-  }
-
-  function cleanUp() {
-    backgroundStage.cleanUp()
-    fastBilateralFilterStage.cleanUp()
-    loadSegmentationStage.cleanUp()
-
-    gl.deleteTexture(personMaskTexture)
-    gl.deleteTexture(segmentationTexture)
-    gl.deleteTexture(inputFrameTexture)
-    gl.deleteBuffer(texCoordBuffer)
-    gl.deleteBuffer(positionBuffer)
-    gl.deleteVertexArray(vertexArray)
-    gl.deleteShader(vertexShader)
-  }
-
-  return { render, sampleInputFrame, updatePostProcessingConfig, cleanUp }
-}
diff --git a/lib/types.ts b/lib/types.ts
index 1ddb96d..f400a9d 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -7,18 +7,10 @@
     createTwilioTFLiteModule: () => Promise<any>;
     createTwilioTFLiteSIMDModule: () => Promise<any>;
     OffscreenCanvas: typeof OffscreenCanvas;
-    Twilio: Object & { VideoProcessors?: any };
+    Twilio: object & { VideoProcessors?: any };
   }
 }
 
-/**
- * @private
- */
-export enum WebGL2PipelineType {
-  Blur = 'blur',
-  Image = 'image',
-}
-
 /**
  * @private
  */
@@ -36,6 +28,18 @@ export interface Dimensions {
   width: number;
 }
 
+/**
+ * @private
+ */
+export type BilateralFilterConfig = {
+  sigmaSpace?: number
+};
+
+/**
+ * @private
+ */
+export type InputFrame = OffscreenCanvas | HTMLCanvasElement | VideoFrame | ImageBitmap;
+
 /**
  * ImageFit specifies the positioning of an image inside a viewport.
  */
@@ -63,24 +67,3 @@ export enum ImageFit {
    */
   None = 'None'
 }
-
-/**
- * Specifies which pipeline to use when processing video frames.
- */
-export enum Pipeline {
-  /**
-   * Use canvas 2d rendering context. Some browsers such as Safari do not
-   * have full support of this feature. Please test your application to make sure it works as intented. See
-   * [browser compatibility page](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#browser_compatibility)
-   * for reference.
-   */
-  Canvas2D = 'Canvas2D',
-
-  /**
-   * Use canvas webgl2 rendering context. Major browsers have support for this feature. However, this does not work
-   * on some older versions of browsers. Please test your application to make sure it works as intented. See
-   * [browser compatibility page](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext#browser_compatibility)
-   * for reference.
-   */
-  WebGL2 = 'WebGL2'
-}
diff --git a/lib/utils/Benchmark.ts b/lib/utils/Benchmark.ts
index ef841dc..d59db58 100644
--- a/lib/utils/Benchmark.ts
+++ b/lib/utils/Benchmark.ts
@@ -50,6 +50,16 @@ export class Benchmark {
     return (timingCache.length / totalDelay) * 1000;
   }
 
+  merge(benchmark: Benchmark) {
+    const { _timingCache, _timings } = benchmark;
+    _timingCache.forEach(
+      (cache, name) => this._timingCache.set(name, cache)
+    );
+    _timings.forEach(
+      (timing, name) => this._timings.set(name, timing)
+    );
+  }
+
   start(name: string) {
     let timing = this._timings.get(name);
     if (!timing) {
diff --git a/lib/utils/CorsWorker.ts b/lib/utils/CorsWorker.ts
new file mode 100644
index 0000000..3bf0cc0
--- /dev/null
+++ b/lib/utils/CorsWorker.ts
@@ -0,0 +1,47 @@
+declare function importScripts(path: string): any;
+
+const fixWorkerBasePathForFetch = (basePath: string) => {
+  const fetchOrig = fetch;
+  // @ts-ignore
+  fetch = (url: string, init?: RequestInit) => // eslint-disable-line no-global-assign
+    fetchOrig(`${basePath}${url}`, init);
+};
+
+const fixWorkerBasePathForImportScripts = (basePath: string) => {
+  const importScriptsOrig = importScripts;
+  // @ts-ignore
+  importScripts = (url: string) =>
+    importScriptsOrig(`${basePath}${url}`);
+};
+
+export class CorsWorker {
+  readonly workerPromise: Promise<Worker>;
+
+  constructor(url: string) {
+    if (!/:\/\//.test(url) || new RegExp(`^${window.location.origin}`).test(url)) {
+      this.workerPromise = this._loadSameOrigin(url);
+    } else {
+      this.workerPromise = this._loadCrossOrigin(url);
+    }
+  }
+
+  private async _loadCrossOrigin(url: string): Promise<Worker> {
+    const response = await fetch(url);
+    const code = await response.text();
+    const type = 'application/javascript';
+    const basePath = `${url.split('/').slice(0, -1).join('/')}/`;
+    const dataUrl = [
+      `data:${type},`,
+      encodeURIComponent(`(${fixWorkerBasePathForFetch})("${basePath}");`),
+      encodeURIComponent(`(${fixWorkerBasePathForImportScripts})("${basePath}");`),
+      encodeURIComponent(code),
+    ].join('');
+    const dataBlob = new Blob([`importScripts("${dataUrl}")`], { type });
+    const workerUrl = URL.createObjectURL(dataBlob);
+    return new Worker(workerUrl);
+  }
+
+  private async _loadSameOrigin(url: string): Promise<Worker> {
+    return new Worker(url);
+  }
+}
diff --git a/lib/utils/TwilioTFLite.ts b/lib/utils/TwilioTFLite.ts
index 46a03b6..8c35098 100644
--- a/lib/utils/TwilioTFLite.ts
+++ b/lib/utils/TwilioTFLite.ts
@@ -1,5 +1,10 @@
+declare const WorkerGlobalScope: any;
 declare function createTwilioTFLiteModule(): Promise<any>;
 declare function createTwilioTFLiteSIMDModule(): Promise<any>;
+declare function importScripts(path: string): any;
+
+const isWebWorker = typeof WorkerGlobalScope !== 'undefined'
+  && self instanceof WorkerGlobalScope;
 
 const loadedScripts = new Set<string>();
 let model: ArrayBuffer;
@@ -25,6 +30,12 @@ export class TwilioTFLite {
     if (this._tflite) {
       return;
     }
+    if (isWebWorker) {
+      // NOTE(mmalavalli): In a web worker, paths to other dependencies
+      // are determined relative to the assets path, so no need to append
+      // it to the file names of the dependencies.
+      assetsPath = '';
+    }
     const [, modelResponse]: [void, Response] = await Promise.all([
       this._loadWasmModule(
         assetsPath,
@@ -77,6 +88,11 @@ export class TwilioTFLite {
     if (loadedScripts.has(path)) {
       return;
     }
+    if (isWebWorker) {
+      importScripts(path);
+      loadedScripts.add(path);
+      return;
+    }
     return new Promise((resolve, reject) => {
       const script = document.createElement('script');
       script.onload = () => {
diff --git a/lib/utils/support.ts b/lib/utils/support.ts
index a1dff00..dcf4091 100644
--- a/lib/utils/support.ts
+++ b/lib/utils/support.ts
@@ -1,5 +1,3 @@
-declare const chrome: any;
-
 /**
  * @private
  */
@@ -22,11 +20,36 @@ export function isBrowserSupported() {
  * @private
  */
 export function isChromiumImageBitmap() {
-  return typeof chrome === 'object'
-    && /Chrome/.test(navigator.userAgent)
+  return /Chrome/.test(navigator.userAgent)
     && typeof createImageBitmap === 'function';
 }
 
+/**
+ * @private
+ */
+export const isCanvasBlurSupported = (() => {
+  const blackPixel = [0, 0, 0, 255];
+  const whitePixel = [255, 255, 255, 255];
+
+  const inputImageData =  new ImageData(new Uint8ClampedArray([
+    ...blackPixel, ...blackPixel, ...blackPixel,
+    ...blackPixel, ...whitePixel, ...blackPixel,
+    ...blackPixel, ...blackPixel, ...blackPixel
+  ]), 3, 3);
+
+  const canvas = getCanvas();
+  const context = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+  canvas.width = 3;
+  canvas.height = 3;
+  context.putImageData(inputImageData, 0, 0);
+  context.filter = 'blur(1px)';
+  context.drawImage(canvas, 0, 0);
+
+  const { data } = context.getImageData(0, 0, 3, 3);
+  return data[0] > 0;
+})();
+
 /**
  * Check if the current browser is officially supported by twilio-video-procesors.js.
  * This is set to `true` for browsers that supports canvas
diff --git a/package.json b/package.json
index 25d7af2..84da69c 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@twilio/video-processors",
   "title": "Twilio Video Processors",
   "description": "Twilio Video Processors JavaScript Library",
-  "version": "2.2.1-dev",
+  "version": "3.0.0-dev",
   "homepage": "https://github.com/twilio/twilio-video-processors.js#readme",
   "author": "Charlie Santos <csantos@twilio.com>",
   "contributors": [
@@ -29,15 +29,18 @@
   "main": "./es5/index.js",
   "types": "./es5/index.d.ts",
   "scripts": {
-    "build": "npm-run-all clean build:es5 build:js build:js-min build:js-assets docs",
+    "build": "npm-run-all clean build:es5 build:js build:js-min build:js-assets build:js-workers docs",
     "build:js": "rimraf ./dist && node ./scripts/build.js ./LICENSE.md ./dist/build/twilio-video-processors.js",
     "build:js-min": "uglifyjs ./dist/build/twilio-video-processors.js -o ./dist/build/twilio-video-processors.min.js --comments \"/^! twilio-video-processors.js/\" -b beautify=false,ascii_only=true",
     "build:js-assets": "cp -r ./assets/* ./dist/build/",
+    "build:js-workers": "npm-run-all build:js-workers:gaussian-blur-background build:js-workers:virtual-background",
+    "build:js-workers:gaussian-blur-background": "node ./scripts/build.js ./LICENSE.md ./dist/build/twilio-gaussian-blur-background-processor-pipeline-worker.js ./es5/processors/background/pipelines/backgroundprocessorpipeline/GaussianBlurBackgroundProcessorPipeline.worker.js",
+    "build:js-workers:virtual-background": "node ./scripts/build.js ./LICENSE.md ./dist/build/twilio-virtual-background-processor-pipeline-worker.js ./es5/processors/background/pipelines/backgroundprocessorpipeline/VirtualBackgroundProcessorPipeline.worker.js",
     "build:es5": "npm run build:version && tsc",
     "build:version": "node ./scripts/version.js",
     "docs": "npm run build:version && rimraf ./dist/docs && typedoc --excludePrivate --excludeProtected --disableSources",
     "clean": "rimraf ./dist ./es5 ./coverage ./.nyc_output lib/utils/version.ts",
-    "lint": "tslint -c ./tslint.json --project ./tsconfig.json -t stylish",
+    "lint": "eslint ./lib",
     "test": "npm-run-all lint build test:unit test:integration",
     "test:unit": "npm run build:version && rimraf ./coverage/unit ./.nyc_output && nyc mocha -r ts-node/register ./tests/unit/index.ts",
     "test:integration": "npm run build:version && rimraf ./coverage/integration && karma start",
@@ -45,10 +48,13 @@
     "watch": "npm run build:version && nodemon"
   },
   "devDependencies": {
+    "@eslint/js": "^9.8.0",
     "@types/mocha": "^8.2.1",
     "@types/node": "^14.14.31",
     "@types/sinon": "^9.0.10",
     "browserify": "^17.0.0",
+    "eslint": "^9.8.0",
+    "globals": "^15.9.0",
     "karma": "^6.1.1",
     "karma-chrome-launcher": "^3.1.0",
     "karma-env-preprocessor": "^0.1.1",
@@ -63,13 +69,16 @@
     "sinon": "^9.2.4",
     "ts-node": "^9.1.1",
     "tsify": "^5.0.2",
-    "tslint": "^6.1.3",
     "twilio-release-tool": "^1.0.2",
     "typedoc": "0.25.0",
     "typedoc-plugin-as-member-of": "^1.0.2",
     "typescript": "5.2.2",
+    "typescript-eslint": "^8.0.1",
     "uglify-js": "^3.17.4",
     "vinyl-fs": "^3.0.3",
     "vinyl-source-stream": "^2.0.0"
+  },
+  "dependencies": {
+    "comlink": "^4.4.1"
   }
 }
diff --git a/tests/integration/images/output/background_webgl.png b/tests/integration/images/output/background_webgl.png
deleted file mode 100644
index a86bec9..0000000
Binary files a/tests/integration/images/output/background_webgl.png and /dev/null differ
diff --git a/tests/integration/images/output/blur_webgl.png b/tests/integration/images/output/blur_webgl.png
deleted file mode 100644
index 6fa06bc..0000000
Binary files a/tests/integration/images/output/blur_webgl.png and /dev/null differ
diff --git a/tests/integration/spec/Benchmark.ts b/tests/integration/spec/Benchmark.ts
index 9b6b274..da6e745 100644
--- a/tests/integration/spec/Benchmark.ts
+++ b/tests/integration/spec/Benchmark.ts
@@ -1,19 +1,25 @@
 import * as assert from 'assert';
-import { GaussianBlurBackgroundProcessor, Pipeline, VirtualBackgroundProcessor } from '../../../lib';
+import { GaussianBlurBackgroundProcessor, VirtualBackgroundProcessor } from '../../../lib';
 import { loadImage } from '../util';
 
 describe('Benchmark', function() {
   this.timeout(30000);
+
+  const options = {
+    assetsPath: '/assets',
+    useWebWorker: false
+  };
+
   let processor: GaussianBlurBackgroundProcessor | VirtualBackgroundProcessor;
 
   [{
     name: 'GaussianBlurBackgroundProcessor',
-    initProcessor: async () => new GaussianBlurBackgroundProcessor({ assetsPath: '/assets', pipeline: Pipeline.Canvas2D }),
+    initProcessor: async () => new GaussianBlurBackgroundProcessor(options),
   },{
     name: 'VirtualBackgroundProcessor',
     initProcessor: async () => {
       const backgroundImage = await loadImage('/images/input/input_background.jpg');
-      return new VirtualBackgroundProcessor({ assetsPath: '/assets', backgroundImage, pipeline: Pipeline.Canvas2D });
+      return new VirtualBackgroundProcessor({ ...options, backgroundImage });
     },
   }].forEach(({ name, initProcessor }) => {
     it(`should not exceed max delays for ${name}`, async () => {
@@ -51,10 +57,10 @@ describe('Benchmark', function() {
         maxValue: 2
       },{
         stat: 'inputImageResizeDelay',
-        maxValue: 5
+        maxValue: 20
       },{
         stat: 'processFrameDelay',
-        maxValue: 20
+        maxValue: 30
       },{
         stat: 'segmentationDelay',
         maxValue: 10
diff --git a/tests/integration/spec/GaussianBlurBackgroundProcessor.ts b/tests/integration/spec/GaussianBlurBackgroundProcessor.ts
index a05517e..4406546 100644
--- a/tests/integration/spec/GaussianBlurBackgroundProcessor.ts
+++ b/tests/integration/spec/GaussianBlurBackgroundProcessor.ts
@@ -1,5 +1,5 @@
 import * as assert from 'assert';
-import { GaussianBlurBackgroundProcessor, GaussianBlurBackgroundProcessorOptions, Pipeline } from '../../../lib';
+import { GaussianBlurBackgroundProcessor, GaussianBlurBackgroundProcessorOptions } from '../../../lib';
 import { compareImages, getImageFromCanvas, loadImage } from '../util';
 
 describe('GaussianBlurBackgroundProcessor', function() {
@@ -9,7 +9,8 @@ describe('GaussianBlurBackgroundProcessor', function() {
     const options: GaussianBlurBackgroundProcessorOptions = {
       assetsPath: '',
       blurFilterRadius: 10,
-      maskBlurRadius: 3
+      maskBlurRadius: 3,
+      useWebWorker: false
     };
     const processor = new GaussianBlurBackgroundProcessor(options);
     assert.strictEqual(processor.blurFilterRadius, 10);
@@ -29,7 +30,12 @@ describe('GaussianBlurBackgroundProcessor', function() {
       outputCanvas.width = inputImage.width;
       inputCanvas.getContext('2d')!.drawImage(inputImage, 0, 0);
 
-      const processor = new GaussianBlurBackgroundProcessor({ ...options, assetsPath: '/assets' });
+      const processor = new GaussianBlurBackgroundProcessor({
+        ...options,
+        assetsPath: '/assets',
+        useWebWorker: false
+      });
+
       await processor.loadModel();
 
       const processCount = options.processCount || 1;
@@ -49,41 +55,31 @@ describe('GaussianBlurBackgroundProcessor', function() {
       return getImageFromCanvas(outputCanvas);
     };
 
-    describe('with Canvas2D pipeline', () => {
-      [{
-        name: 'using default configuration',
-        expectedImageName: 'blur_default',
-      },{
-        name: 'using non default blurFilterRadius',
-        expectedImageName: 'blur_filter_radius_30',
-        options: { blurFilterRadius: 30 },
-      },{
-        name: 'using non default maskBlurRadius',
-        expectedImageName: 'blur_mask_blur_100',
-        options: { maskBlurRadius: 100 },
-      }].forEach(({ name, options, expectedImageName }) => {
-        it(`when ${name}`, async () => {
-          const outputImageResult = await runTest({ ...options, pipeline: Pipeline.Canvas2D });
-          const expectedOutputImage = await loadImage(`/images/output/${expectedImageName}.png`);
-          await compareImages(outputImageResult, expectedOutputImage);
+    [{
+      name: 'using default configuration',
+      expectedImageName: 'blur_default',
+    },{
+      name: 'using non default blurFilterRadius',
+      expectedImageName: 'blur_filter_radius_30',
+      options: { blurFilterRadius: 30 },
+    },{
+      name: 'using non default maskBlurRadius',
+      expectedImageName: 'blur_mask_blur_100',
+      options: { maskBlurRadius: 100 },
+    }].forEach(({ name, options, expectedImageName }) => {
+      it(`when ${name}`, async () => {
+        const outputImageResult = await runTest(options);
+        const expectedOutputImage = await loadImage(`/images/output/${expectedImageName}.png`);
+        const Rembrandt = (window as any).Rembrandt;
+        // WebGL renders pixels with slight variation per run. Let's put some thresholds
+        // to account for those. See http://rembrandtjs.com for more information
+        await compareImages(outputImageResult, expectedOutputImage, {
+          thresholdType: Rembrandt.THRESHOLD_PERCENT,
+          maxThreshold: 0.01,
+          maxDelta: 20,
+          maxOffset: 0,
         });
       });
     });
-
-    it('with WebGL2 pipeline', async () => {
-      // It takes at about 5 process frame calls to render the GPU contents out to the canvas
-      const outputImageResult = await runTest({ processCount: 5 });
-      const expectedOutputImage = await loadImage('/images/output/blur_webgl.png');
-      const Rembrandt = (window as any).Rembrandt;
-
-      // WebGL renders pixels with slight variation per run. Let's put some thresholds
-      // to account for those. See http://rembrandtjs.com for more information
-      await compareImages(outputImageResult, expectedOutputImage, {
-        thresholdType: Rembrandt.THRESHOLD_PERCENT,
-        maxThreshold: 0.01,
-        maxDelta: 20,
-        maxOffset: 0,
-      });
-    });
   });
 });
diff --git a/tests/integration/spec/VirtualBackgroundProcessor.ts b/tests/integration/spec/VirtualBackgroundProcessor.ts
index fc9add0..d09fef0 100644
--- a/tests/integration/spec/VirtualBackgroundProcessor.ts
+++ b/tests/integration/spec/VirtualBackgroundProcessor.ts
@@ -1,7 +1,6 @@
 import * as assert from 'assert';
-import { ImageFit, VirtualBackgroundProcessor, VirtualBackgroundProcessorOptions } from '../../../lib/index';
-import { compareImages, getImageFromCanvas, loadImage, pause } from '../util';
-import { Pipeline } from '../../../lib/index';
+import { ImageFit, VirtualBackgroundProcessor, VirtualBackgroundProcessorOptions } from '../../../lib';
+import { compareImages, getImageFromCanvas, loadImage } from '../util';
 
 describe('VirtualBackgroundProcessor', function() {
   this.timeout(60000);
@@ -12,7 +11,8 @@ describe('VirtualBackgroundProcessor', function() {
       assetsPath: '',
       backgroundImage: img,
       fitType: ImageFit.Contain,
-      maskBlurRadius: 3
+      maskBlurRadius: 3,
+      useWebWorker: false
     };
     const processor = new VirtualBackgroundProcessor(options);
     assert.strictEqual(processor.maskBlurRadius, 3);
@@ -34,7 +34,13 @@ describe('VirtualBackgroundProcessor', function() {
       outputCanvas.width = inputImage.width;
       inputCanvas.getContext('2d')!.drawImage(inputImage, 0, 0);
 
-      const processor = new VirtualBackgroundProcessor({ ...options, assetsPath: '/assets', backgroundImage });
+      const processor = new VirtualBackgroundProcessor({
+        ...options,
+        assetsPath: '/assets',
+        backgroundImage,
+        useWebWorker: false
+      });
+
       await processor.loadModel();
 
       const processCount = options.processCount || 1;
@@ -44,7 +50,6 @@ describe('VirtualBackgroundProcessor', function() {
           if (counter >= processCount) {
             return resolve(null);
           }
-          console.log('rendering...');
           processor.processFrame(inputCanvas, outputCanvas).then(() => {
             counter++;
             setTimeout(render, 0);
@@ -56,53 +61,43 @@ describe('VirtualBackgroundProcessor', function() {
       return getImageFromCanvas(outputCanvas);
     };
 
-    describe('with Canvas2D pipeline', () => {
-      [{
-        name: 'using default configuration',
-        expectedImageName: 'background_default',
-      },{
-        name: 'fitType is None',
-        options: { fitType: ImageFit.None },
-        expectedImageName: 'background_none',
-      },{
-        name: 'fitType is Fill',
-        options: { fitType: ImageFit.Fill },
-        expectedImageName: 'background_fill',
-      },{
-        name: 'fitType is Cover',
-        options: { fitType: ImageFit.Cover },
-        expectedImageName: 'background_cover',
-      },{
-        name: 'fitType is Contain',
-        options: { fitType: ImageFit.Contain },
-        expectedImageName: 'background_contain',
-      },{
-        name: 'maskBlurRadius is not default',
-        options: { maskBlurRadius: 30 },
-        expectedImageName: 'background_mask_blur_30',
-      }].forEach(({ name, options, expectedImageName }) => {
-        it(`when ${name}`, async () => {
-          const outputImageResult = await runTest({ ...options, pipeline: Pipeline.Canvas2D });
-          const expectedOutputImage = await loadImage(`/images/output/${expectedImageName}.png`);
-          await compareImages(outputImageResult, expectedOutputImage);
+    [{
+      name: 'using default configuration',
+      expectedImageName: 'background_default',
+    },{
+      name: 'fitType is None',
+      options: { fitType: ImageFit.None },
+      expectedImageName: 'background_none',
+    },{
+      name: 'fitType is Fill',
+      options: { fitType: ImageFit.Fill },
+      expectedImageName: 'background_fill',
+    },{
+      name: 'fitType is Cover',
+      options: { fitType: ImageFit.Cover },
+      expectedImageName: 'background_cover',
+    },{
+      name: 'fitType is Contain',
+      options: { fitType: ImageFit.Contain },
+      expectedImageName: 'background_contain',
+    },{
+      name: 'maskBlurRadius is not default',
+      options: { maskBlurRadius: 30 },
+      expectedImageName: 'background_mask_blur_30',
+    }].forEach(({ name, options, expectedImageName }) => {
+      it(`when ${name}`, async () => {
+        const outputImageResult = await runTest(options);
+        const expectedOutputImage = await loadImage(`/images/output/${expectedImageName}.png`);
+        const Rembrandt = (window as any).Rembrandt;
+        // WebGL renders pixels with slight variation per run. Let's put some thresholds
+        // to account for those. See http://rembrandtjs.com for more information
+        await compareImages(outputImageResult, expectedOutputImage, {
+          thresholdType: Rembrandt.THRESHOLD_PERCENT,
+          maxThreshold: 0.01,
+          maxDelta: 20,
+          maxOffset: 0,
         });
       });
     });
-
-    it('with WebGL2 pipeline', async () => {
-      // It takes at about 5 process frame calls to render the GPU contents out to the canvas
-      const outputImageResult = await runTest({ processCount: 5 });
-      const expectedOutputImage = await loadImage('/images/output/background_webgl.png');
-      const Rembrandt = (window as any).Rembrandt;
-
-      // WebGL renders pixels with slight variation per run. Let's put some thresholds
-      // to account for those. See http://rembrandtjs.com for more information
-      await compareImages(outputImageResult, expectedOutputImage, {
-        thresholdType: Rembrandt.THRESHOLD_PERCENT,
-        maxThreshold: 0.01,
-        maxDelta: 20,
-        maxOffset: 0,
-      });
-    });
   });
 });
diff --git a/tests/integration/spec/exports.ts b/tests/integration/spec/exports.ts
index f5ed221..34c7c0d 100644
--- a/tests/integration/spec/exports.ts
+++ b/tests/integration/spec/exports.ts
@@ -1,6 +1,6 @@
 import * as assert from 'assert';
-import * as VideoProcessors from '../../../lib/index';
-import { GaussianBlurBackgroundProcessorOptions, VirtualBackgroundProcessorOptions } from '../../../lib/index';
+import * as VideoProcessors from '../../../lib';
+import { GaussianBlurBackgroundProcessorOptions, VirtualBackgroundProcessorOptions } from '../../../lib';
 
 describe('exports', () => {
   context('interfaces', () => {
@@ -28,18 +28,17 @@ describe('exports', () => {
       'GaussianBlurBackgroundProcessor',
       'ImageFit',
       'isSupported',
-      'Pipeline',
       'version',
       'VirtualBackgroundProcessor'
     ];
     let moduleExports: any;
     let windowExports: any;
-  
+
     beforeEach(() => {
       moduleExports = {...VideoProcessors};
       windowExports = {...window.Twilio.VideoProcessors};
     });
-  
+
     it('should have correct exports', () => {
       propertyNames.forEach((prop: string) => {
         assert(typeof moduleExports[prop] !== 'undefined');
diff --git a/tests/integration/spec/version.ts b/tests/integration/spec/version.ts
index 1567b11..d25a36b 100644
--- a/tests/integration/spec/version.ts
+++ b/tests/integration/spec/version.ts
@@ -1,5 +1,5 @@
 import * as assert from 'assert';
-import { version } from '../../../lib/index';
+import { version } from '../../../lib';
 
 const packageVersion = require('../../../package.json').version;
 
diff --git a/tests/unit/index.ts b/tests/unit/index.ts
index ad62782..18495a4 100644
--- a/tests/unit/index.ts
+++ b/tests/unit/index.ts
@@ -1,13 +1,20 @@
 import { Canvas } from './mocks/Canvas';
 import { ImageData } from './mocks/ImageData';
 
+const createImageBitmap = async () => new ImageData(1, 1);
+
+const navigator = {
+  userAgent : 'foo'
+};
+
 const root = global as any;
 root.ImageData = root.ImageData || ImageData;
 root.OffscreenCanvas = root.OffscreenCanvas || Canvas;
+root.createImageBitmap = root.createImageBitmap || createImageBitmap;
+root.navigator = root.navigator || navigator;
 root.window = root.window || {
-  navigator : {
-    userAgent : 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36'
-  }
+  createImageBitmap,
+  navigator
 };
 root.document = root.document || {
   createElement(name: string) {
diff --git a/tests/unit/mocks/Canvas.ts b/tests/unit/mocks/Canvas.ts
index b3f953f..c40980e 100644
--- a/tests/unit/mocks/Canvas.ts
+++ b/tests/unit/mocks/Canvas.ts
@@ -1,3 +1,5 @@
+import { ImageData } from './ImageData';
+
 export class Canvas {
   drawing: any;
   height: number;
@@ -12,6 +14,12 @@ export class Canvas {
     return {
       drawImage: (inputFrame: OffscreenCanvas | HTMLCanvasElement, x: number, y: number, width: number, height: number) => {
         this.drawing = { inputFrame, x, y, width, height };
+      },
+      getImageData: () => {
+        return new ImageData(this.width, this.height);
+      },
+      putImageData: (imageData: ImageData) => {
+        /* noop */
       }
     };
   }
diff --git a/tests/unit/mocks/ImageData.ts b/tests/unit/mocks/ImageData.ts
index 1c8fb04..3bb1fe3 100644
--- a/tests/unit/mocks/ImageData.ts
+++ b/tests/unit/mocks/ImageData.ts
@@ -1,8 +1,10 @@
 export class ImageData {
+  data: Uint8ClampedArray;
   height: number;
   width: number;
 
   constructor(width: number, height: number) {
+    this.data = new Uint8ClampedArray(width * height);
     this.width = width;
     this.height = height;
   }
diff --git a/tests/unit/spec/processors/background/BackgroundProcessor.ts b/tests/unit/spec/processors/background/BackgroundProcessor.ts
index 404b59b..25a8545 100644
--- a/tests/unit/spec/processors/background/BackgroundProcessor.ts
+++ b/tests/unit/spec/processors/background/BackgroundProcessor.ts
@@ -1,29 +1,24 @@
 import * as assert from 'assert';
 import * as sinon from 'sinon';
 import { BackgroundProcessor } from '../../../../../lib/processors/background/BackgroundProcessor';
-import {
-  WASM_INFERENCE_DIMENSIONS,
-  MASK_BLUR_RADIUS,
-} from '../../../../../lib/constants';
+import { MASK_BLUR_RADIUS } from '../../../../../lib/constants';
 import { TwilioTFLite } from '../../../../../lib/utils/TwilioTFLite';
-import { WebGL2PipelineType } from '../../../../../lib/types';
+import { BackgroundProcessorPipeline } from '../../../../../lib/processors/background/pipelines/backgroundprocessorpipeline';
 
 class MyBackgroundProcessor extends BackgroundProcessor {
   tflite: TwilioTFLite;
 
   constructor(options?: any) {
-    super(options);
+    const backgroundProcessorPipelineStub = sinon.createStubInstance(BackgroundProcessorPipeline) as any;
+    backgroundProcessorPipelineStub.setMaskBlurRadius.returns(new Promise<void>(resolve => resolve()));
+    super(backgroundProcessorPipelineStub, options);
     // @ts-ignore
     BackgroundProcessor._tflite = new TwilioTFLite();
     // @ts-ignore
     this.tflite = BackgroundProcessor._tflite;
   }
 
-  protected _getWebGL2PipelineType(): WebGL2PipelineType {
-    return WebGL2PipelineType.Blur;
-  }
-
-  protected _setBackground(inputFrame: OffscreenCanvas): void {
+  protected _setBackground(inputFrame: any): void {
     /* noop */
   }
 }
@@ -44,48 +39,6 @@ describe('BackgroundProcessor', () => {
     assert.throws(() => new MyBackgroundProcessor());
   });
 
-  describe('createPersonMask', () => {
-    let processor: any;
-    let runInference: any;
-    let tflite: any;
-
-    [true, false].forEach((debounce) => {
-      describe(`when ${debounce ? '' : 'not '}in debounce mode`, () => {
-        beforeEach(async () => {
-          processor = new MyBackgroundProcessor({
-            assetsPath: '',
-            debounce
-          });
-          processor._currentMask = null;
-          processor._resizeInputFrame = sinon.stub();
-          tflite = processor.tflite!;
-          runInference = sinon.stub(tflite, 'runInference').returns(new ImageData(1, 1));
-          runInference.resetHistory();
-          const personMask = await processor._createPersonMask();
-          if (debounce) {
-            processor._currentMask = personMask;
-          }
-        });
-
-        it(`should run resizing and inference steps for the current input frame and ${debounce ? 'not ' : ''}the next input frame`, async () => {
-          sinon.assert.calledOnce(processor._resizeInputFrame);
-          sinon.assert.calledOnce(runInference);
-          processor._resizeInputFrame.resetHistory();
-          runInference.resetHistory();
-          await processor._createPersonMask();
-          if (debounce) {
-            sinon.assert.notCalled(processor._resizeInputFrame);
-            sinon.assert.notCalled(runInference);
-
-          } else {
-            sinon.assert.calledOnce(processor._resizeInputFrame);
-            sinon.assert.calledOnce(runInference);
-          }
-        });
-      });
-    });
-  });
-
   describe('assetsPath', () => {
     [
       null,
@@ -117,24 +70,6 @@ describe('BackgroundProcessor', () => {
     });
   });
 
-  describe('debounce', () => {
-    [
-      null,
-      undefined,
-      {},
-      { debounce: true },
-      { debounce: false }
-    ].forEach((option: any) => {
-      const useDefault = !option || !('debounce' in option);
-      const param = option ? JSON.stringify(option) : option;
-      it(`should set debounce to ${useDefault ? 'default' : option.debounce} if option is ${param}`, () => {
-        const processor: any = new MyBackgroundProcessor({ ...option, assetsPath: 'foo' });
-        const expected = useDefault ? true : option.debounce;
-        assert.deepStrictEqual(processor._debounce, expected);
-      });
-    });
-  });
-
   describe('maskBlurRadius', () => {
     [
       null,
@@ -164,45 +99,4 @@ describe('BackgroundProcessor', () => {
       }
     });
   });
-
-  describe('pipeline', () => {
-    [
-      null,
-      undefined,
-      {},
-      { pipeline: 'Canvas2D' },
-      { pipeline: 'WebGL2' }
-    ].forEach((option: any) => {
-      const useDefault = !option || !('pipeline' in option);
-      const param = option ? JSON.stringify(option) : option;
-      it(`should set pipeline to ${useDefault ? 'default' : option.pipeline} if option is ${param}`, () => {
-        const processor: any = new MyBackgroundProcessor({ ...option, assetsPath: 'foo' });
-        const expected = useDefault ? 'WebGL2' : option.pipeline;
-        assert.deepStrictEqual(processor._pipeline, expected);
-      });
-    });
-  });
-
-  describe('inferenceDimensions', () => {
-    [
-      null,
-      undefined,
-      {},
-      { inferenceDimensions: null },
-      { inferenceDimensions: undefined },
-      { inferenceDimensions: {} },
-      { inferenceDimensions: { foo: 'foo' } },
-      { inferenceDimensions: { height: 0, width: 1 } },
-      { inferenceDimensions: { height: 1, width: 0 } },
-      { inferenceDimensions: { height: 1, width: 1 } }
-    ].forEach((option: any) => {
-      const useDefault = !option || !option.inferenceDimensions;
-      const param = option && option.inferenceDimensions ? JSON.stringify(option) : option;
-      it(`should set inferenceDimensions to ${useDefault ? 'default' : option.inferenceDimensions} if option is ${param}`, () => {
-        const processor: any = new MyBackgroundProcessor({ ...option, assetsPath: 'foo' });
-        const expected = useDefault ? WASM_INFERENCE_DIMENSIONS : option.inferenceDimensions;
-        assert.deepStrictEqual(processor._inferenceDimensions, expected);
-      });
-    });
-  });
 });
diff --git a/tests/unit/spec/processors/background/GaussianBlurBackgroundProcessor.ts b/tests/unit/spec/processors/background/GaussianBlurBackgroundProcessor.ts
index 8edf2cd..1d5c9ad 100644
--- a/tests/unit/spec/processors/background/GaussianBlurBackgroundProcessor.ts
+++ b/tests/unit/spec/processors/background/GaussianBlurBackgroundProcessor.ts
@@ -1,6 +1,6 @@
 import * as assert from 'assert';
 import * as sinon from 'sinon';
-import { GaussianBlurBackgroundProcessor } from '../../../../../lib/processors/background/GaussianBlurBackgroundProcessor';
+import { GaussianBlurBackgroundProcessor } from '../../../../../lib';
 import { BLUR_FILTER_RADIUS } from '../../../../../lib/constants';
 
 describe('GaussianBlurBackgroundProcessor', () => {
diff --git a/tests/unit/spec/processors/background/VirtualBackgroundProcessor.ts b/tests/unit/spec/processors/background/VirtualBackgroundProcessor.ts
index f884940..ee09bae 100644
--- a/tests/unit/spec/processors/background/VirtualBackgroundProcessor.ts
+++ b/tests/unit/spec/processors/background/VirtualBackgroundProcessor.ts
@@ -1,6 +1,6 @@
 import * as assert from 'assert';
 import * as sinon from 'sinon';
-import { VirtualBackgroundProcessor } from '../../../../../lib/processors/background/VirtualBackgroundProcessor';
+import { VirtualBackgroundProcessor } from '../../../../../lib';
 
 describe('VirtualBackgroundProcessor', () => {
   let consoleWarnStub: any;
@@ -65,7 +65,7 @@ describe('VirtualBackgroundProcessor', () => {
   });
 
   describe('_getFitPosition', () => {
-    const options = { assetsPath: 'foo', backgroundImage: { complete: true, naturalHeight: 1 }} as any;
+    const options = { assetsPath: 'foo', backgroundImage: { complete: true, naturalHeight: 1 }, useWebWorker: false } as any;
     let processor: VirtualBackgroundProcessor;
 
     beforeEach(() => {
@@ -104,7 +104,8 @@ describe('VirtualBackgroundProcessor', () => {
       expected: { x: 550, y: 0, w: 180, h: 720 }
     }].forEach(({ input, expected }) => {
       it(`should return correct position when parameters are ${JSON.stringify(input)}`, () => {
-        const output = (processor['_getFitPosition'] as any)(...input);
+        // @ts-ignore
+        const output = (processor._backgroundProcessorPipeline._getFitPosition as any)(...input);
         assert.deepStrictEqual(output, expected);
       });
     });
diff --git a/tslint.json b/tslint.json
deleted file mode 100644
index 522454f..0000000
--- a/tslint.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "defaultSeverity": "error",
-  "extends": ["tslint:recommended"],
-  "linterOptions": {
-    "exclude": ["lib/processors/webgl2/**/*"]
-  },
-  "rules": {
-    "arrow-parens": false,
-    "ban-types": false,
-    "interface-name": false,
-    "max-line-length": [true, 200],
-    "member-access": [true, "no-public"],
-    "member-ordering": [true, {
-      "order": "statics-first",
-      "alphabetize": true
-    }],
-    "no-empty": {
-      "severity": "warning"
-    },
-    "no-bitwise": false,
-    "no-console": false,
-    "no-namespace": false,
-    "no-string-literal": false,
-    "no-unused-variable": true,
-    "no-var-requires": false,
-    "quotemark": [true, "single", "avoid-escape", "avoid-template"],
-    "semicolon": true,
-    "variable-name": [true, "allow-leading-underscore", "allow-pascal-case"],
-    "unified-signatures": false
-  },
-  "rulesDirectory": []
-}