fabric/dist/src/filters/WebGLFilterBackend.mjs.map

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

{"version":3,"file":"WebGLFilterBackend.mjs","names":[],"sources":["../../../src/filters/WebGLFilterBackend.ts"],"sourcesContent":["import { config } from '../config';\nimport { createCanvasElementFor } from '../util/misc/dom';\nimport type {\n  TWebGLPipelineState,\n  TProgramCache,\n  TTextureCache,\n  TPipelineResources,\n} from './typedefs';\nimport type { BaseFilter } from './BaseFilter';\n\nexport class WebGLFilterBackend {\n  declare tileSize: number;\n\n  /**\n   * Define ...\n   **/\n  aPosition: Float32Array = new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]);\n\n  /**\n   * If GLPut data is the fastest operation, or if forced, this buffer will be used\n   * to transfer the data back in the 2d logic\n   **/\n  declare imageBuffer?: ArrayBuffer;\n\n  declare canvas: HTMLCanvasElement;\n\n  /**\n   * The Webgl context that will execute the operations for filtering\n   **/\n  declare gl: WebGLRenderingContext;\n\n  /**\n   * Keyed map for shader cache\n   **/\n  declare programCache: TProgramCache;\n\n  /**\n   * Keyed map for texture cache\n   **/\n  declare textureCache: TTextureCache;\n\n  /**\n   * Contains GPU info for debug\n   **/\n  declare gpuInfo: any;\n\n  /**\n   * Experimental. This object is a sort of repository of help layers used to avoid\n   * of recreating them during frequent filtering. If you are previewing a filter with\n   * a slider you probably do not want to create help layers every filter step.\n   * in this object there will be appended some canvases, created once, resized sometimes\n   * cleared never. Clearing is left to the developer.\n   **/\n  resources: TPipelineResources = {};\n\n  constructor({ tileSize = config.textureSize } = {}) {\n    this.tileSize = tileSize;\n    this.setupGLContext(tileSize, tileSize);\n    this.captureGPUInfo();\n  }\n\n  /**\n   * Setup a WebGL context suitable for filtering, and bind any needed event handlers.\n   */\n  setupGLContext(width: number, height: number): void {\n    this.dispose();\n    this.createWebGLCanvas(width, height);\n  }\n\n  /**\n   * Create a canvas element and associated WebGL context and attaches them as\n   * class properties to the GLFilterBackend class.\n   */\n  createWebGLCanvas(width: number, height: number): void {\n    const canvas = createCanvasElementFor({ width, height });\n    const glOptions = {\n        alpha: true,\n        premultipliedAlpha: false,\n        depth: false,\n        stencil: false,\n        antialias: false,\n      },\n      gl = canvas.getContext('webgl', glOptions) as WebGLRenderingContext;\n\n    if (!gl) {\n      return;\n    }\n    gl.clearColor(0, 0, 0, 0);\n    // this canvas can fire webglcontextlost and webglcontextrestored\n    this.canvas = canvas;\n    this.gl = gl;\n  }\n\n  /**\n   * Attempts to apply the requested filters to the source provided, drawing the filtered output\n   * to the provided target canvas.\n   *\n   * @param {Array} filters The filters to apply.\n   * @param {TexImageSource} source The source to be filtered.\n   * @param {Number} width The width of the source input.\n   * @param {Number} height The height of the source input.\n   * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn.\n   * @param {String|undefined} cacheKey A key used to cache resources related to the source. If\n   * omitted, caching will be skipped.\n   */\n  applyFilters(\n    filters: BaseFilter<string>[],\n    source: TexImageSource,\n    width: number,\n    height: number,\n    targetCanvas: HTMLCanvasElement,\n    cacheKey?: string,\n  ): TWebGLPipelineState | undefined {\n    const gl = this.gl;\n    const ctx = targetCanvas.getContext('2d');\n    if (!gl || !ctx) {\n      return;\n    }\n    let cachedTexture;\n    if (cacheKey) {\n      cachedTexture = this.getCachedTexture(cacheKey, source);\n    }\n    const pipelineState: TWebGLPipelineState = {\n      originalWidth:\n        (source as HTMLImageElement).width ||\n        (source as HTMLImageElement).naturalWidth ||\n        0,\n      originalHeight:\n        (source as HTMLImageElement).height ||\n        (source as HTMLImageElement).naturalHeight ||\n        0,\n      sourceWidth: width,\n      sourceHeight: height,\n      destinationWidth: width,\n      destinationHeight: height,\n      context: gl,\n      sourceTexture: this.createTexture(\n        gl,\n        width,\n        height,\n        !cachedTexture ? source : undefined,\n      ),\n      targetTexture: this.createTexture(gl, width, height),\n      originalTexture:\n        cachedTexture ||\n        this.createTexture(\n          gl,\n          width,\n          height,\n          !cachedTexture ? source : undefined,\n        ),\n      passes: filters.length,\n      webgl: true,\n      aPosition: this.aPosition,\n      programCache: this.programCache,\n      pass: 0,\n      filterBackend: this,\n      targetCanvas: targetCanvas,\n    };\n    const tempFbo = gl.createFramebuffer();\n    gl.bindFramebuffer(gl.FRAMEBUFFER, tempFbo);\n    filters.forEach((filter: any) => {\n      filter && filter.applyTo(pipelineState);\n    });\n    resizeCanvasIfNeeded(pipelineState);\n    this.copyGLTo2D(gl, pipelineState);\n    gl.bindTexture(gl.TEXTURE_2D, null);\n    gl.deleteTexture(pipelineState.sourceTexture);\n    gl.deleteTexture(pipelineState.targetTexture);\n    gl.deleteFramebuffer(tempFbo);\n    ctx.setTransform(1, 0, 0, 1, 0, 0);\n    return pipelineState;\n  }\n\n  /**\n   * Detach event listeners, remove references, and clean up caches.\n   */\n  dispose() {\n    if (this.canvas) {\n      // we are disposing, we don't care about the fact\n      // that the canvas shouldn't be null.\n      // @ts-expect-error disposing\n      this.canvas = null;\n      // @ts-expect-error disposing\n      this.gl = null;\n    }\n    this.clearWebGLCaches();\n  }\n\n  /**\n   * Wipe out WebGL-related caches.\n   */\n  clearWebGLCaches() {\n    this.programCache = {};\n    this.textureCache = {};\n  }\n\n  /**\n   * Create a WebGL texture object.\n   *\n   * Accepts specific dimensions to initialize the texture to or a source image.\n   *\n   * @param {WebGLRenderingContext} gl The GL context to use for creating the texture.\n   * @param {number} width The width to initialize the texture at.\n   * @param {number} height The height to initialize the texture.\n   * @param {TexImageSource} textureImageSource A source for the texture data.\n   * @param {number} filter gl.NEAREST default or gl.LINEAR filters for the texture.\n   * This filter is very useful for LUTs filters. If you need interpolation use gl.LINEAR\n   * @returns {WebGLTexture}\n   */\n  createTexture(\n    gl: WebGLRenderingContext,\n    width: number,\n    height: number,\n    textureImageSource?: TexImageSource,\n    filter?:\n      | WebGLRenderingContextBase['NEAREST']\n      | WebGLRenderingContextBase['LINEAR'],\n  ): WebGLTexture {\n    const {\n      NEAREST,\n      TEXTURE_2D,\n      RGBA,\n      UNSIGNED_BYTE,\n      CLAMP_TO_EDGE,\n      TEXTURE_MAG_FILTER,\n      TEXTURE_MIN_FILTER,\n      TEXTURE_WRAP_S,\n      TEXTURE_WRAP_T,\n    } = gl;\n    const texture = gl.createTexture();\n    gl.bindTexture(TEXTURE_2D, texture);\n    gl.texParameteri(TEXTURE_2D, TEXTURE_MAG_FILTER, filter || NEAREST);\n    gl.texParameteri(TEXTURE_2D, TEXTURE_MIN_FILTER, filter || NEAREST);\n    gl.texParameteri(TEXTURE_2D, TEXTURE_WRAP_S, CLAMP_TO_EDGE);\n    gl.texParameteri(TEXTURE_2D, TEXTURE_WRAP_T, CLAMP_TO_EDGE);\n    if (textureImageSource) {\n      gl.texImage2D(\n        TEXTURE_2D,\n        0,\n        RGBA,\n        RGBA,\n        UNSIGNED_BYTE,\n        textureImageSource,\n      );\n    } else {\n      gl.texImage2D(\n        TEXTURE_2D,\n        0,\n        RGBA,\n        width,\n        height,\n        0,\n        RGBA,\n        UNSIGNED_BYTE,\n        null,\n      );\n    }\n    // disabled because website and issues with different typescript version\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    return texture!;\n  }\n\n  /**\n   * Can be optionally used to get a texture from the cache array\n   *\n   * If an existing texture is not found, a new texture is created and cached.\n   *\n   * @param {String} uniqueId A cache key to use to find an existing texture.\n   * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source to use to create the\n   * texture cache entry if one does not already exist.\n   */\n  getCachedTexture(\n    uniqueId: string,\n    textureImageSource: TexImageSource,\n    filter?:\n      | WebGLRenderingContextBase['NEAREST']\n      | WebGLRenderingContextBase['LINEAR'],\n  ): WebGLTexture | null {\n    const { textureCache } = this;\n    if (textureCache[uniqueId]) {\n      return textureCache[uniqueId];\n    } else {\n      const texture = this.createTexture(\n        this.gl,\n        (textureImageSource as HTMLImageElement).width,\n        (textureImageSource as HTMLImageElement).height,\n        textureImageSource,\n        filter,\n      );\n      if (texture) {\n        textureCache[uniqueId] = texture;\n      }\n      return texture;\n    }\n  }\n\n  /**\n   * Clear out cached resources related to a source image that has been\n   * filtered previously.\n   *\n   * @param {String} cacheKey The cache key provided when the source image was filtered.\n   */\n  evictCachesForKey(cacheKey: string) {\n    if (this.textureCache[cacheKey]) {\n      this.gl.deleteTexture(this.textureCache[cacheKey]);\n      delete this.textureCache[cacheKey];\n    }\n  }\n\n  /**\n   * Copy an input WebGL canvas on to an output 2D canvas.\n   *\n   * The WebGL canvas is assumed to be upside down, with the top-left pixel of the\n   * desired output image appearing in the bottom-left corner of the WebGL canvas.\n   *\n   * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from.\n   * @param {Object} pipelineState The 2D target canvas to copy on to.\n   */\n  copyGLTo2D(gl: WebGLRenderingContext, pipelineState: TWebGLPipelineState) {\n    const glCanvas = gl.canvas,\n      targetCanvas = pipelineState.targetCanvas,\n      ctx = targetCanvas.getContext('2d');\n    if (!ctx) {\n      return;\n    }\n    ctx.translate(0, targetCanvas.height); // move it down again\n    ctx.scale(1, -1); // vertical flip\n    // where is my image on the big glcanvas?\n    const sourceY = glCanvas.height - targetCanvas.height;\n    ctx.drawImage(\n      glCanvas,\n      0,\n      sourceY,\n      targetCanvas.width,\n      targetCanvas.height,\n      0,\n      0,\n      targetCanvas.width,\n      targetCanvas.height,\n    );\n  }\n\n  /**\n   * Copy an input WebGL canvas on to an output 2D canvas using 2d canvas' putImageData\n   * API. Measurably faster than using ctx.drawImage in Firefox (version 54 on OSX Sierra).\n   *\n   * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from.\n   * @param {HTMLCanvasElement} targetCanvas The 2D target canvas to copy on to.\n   * @param {Object} pipelineState The 2D target canvas to copy on to.\n   */\n  copyGLTo2DPutImageData(\n    this: Required<WebGLFilterBackend>,\n    gl: WebGLRenderingContext,\n    pipelineState: TWebGLPipelineState,\n  ) {\n    const targetCanvas = pipelineState.targetCanvas,\n      ctx = targetCanvas.getContext('2d'),\n      dWidth = pipelineState.destinationWidth,\n      dHeight = pipelineState.destinationHeight,\n      numBytes = dWidth * dHeight * 4;\n    if (!ctx) {\n      return;\n    }\n    const u8 = new Uint8Array(this.imageBuffer, 0, numBytes);\n    const u8Clamped = new Uint8ClampedArray(this.imageBuffer, 0, numBytes);\n\n    gl.readPixels(0, 0, dWidth, dHeight, gl.RGBA, gl.UNSIGNED_BYTE, u8);\n    const imgData = new ImageData(u8Clamped, dWidth, dHeight);\n    ctx.putImageData(imgData, 0, 0);\n  }\n\n  /**\n   * Attempt to extract GPU information strings from a WebGL context.\n   *\n   * Useful information when debugging or blacklisting specific GPUs.\n   *\n   * @returns {Object} A GPU info object with renderer and vendor strings.\n   */\n  captureGPUInfo() {\n    if (this.gpuInfo) {\n      return this.gpuInfo;\n    }\n    const gl = this.gl,\n      gpuInfo = { renderer: '', vendor: '' };\n    if (!gl) {\n      return gpuInfo;\n    }\n    const ext = gl.getExtension('WEBGL_debug_renderer_info');\n    if (ext) {\n      const renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL);\n      const vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL);\n      if (renderer) {\n        gpuInfo.renderer = renderer.toLowerCase();\n      }\n      if (vendor) {\n        gpuInfo.vendor = vendor.toLowerCase();\n      }\n    }\n    this.gpuInfo = gpuInfo;\n    return gpuInfo;\n  }\n}\n\nfunction resizeCanvasIfNeeded(pipelineState: TWebGLPipelineState): void {\n  const targetCanvas = pipelineState.targetCanvas,\n    width = targetCanvas.width,\n    height = targetCanvas.height,\n    dWidth = pipelineState.destinationWidth,\n    dHeight = pipelineState.destinationHeight;\n\n  if (width !== dWidth || height !== dHeight) {\n    targetCanvas.width = dWidth;\n    targetCanvas.height = dHeight;\n  }\n}\n"],"mappings":"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"}