fabric 5.3.0 → 6.0.0-beta1

package/src/filters/Vibrance.ts

@@ -0,0 +1,103 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+
+/**
+ * Vibrance filter class
+ * @example
+ * const filter = new Vibrance({
+ *   vibrance: 1
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export class Vibrance extends BaseFilter {
+  /**
+   * Vibrance value, from -1 to 1.
+   * Increases/decreases the saturation of more muted colors with less effect on saturated colors.
+   * A value of 0 has no effect.
+   *
+   * @param {Number} vibrance
+   * @default
+   */
+  declare vibrance: number;
+
+  /**
+   * Apply the Vibrance operation to a Uint8ClampedArray representing the pixels of an image.
+   *
+   * @param {Object} options
+   * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered.
+   */
+  applyTo2d({ imageData: { data } }: T2DPipelineState) {
+    if (this.vibrance === 0) {
+      return;
+    }
+    const adjust = -this.vibrance;
+    for (let i = 0; i < data.length; i += 4) {
+      const max = Math.max(data[i], data[i + 1], data[i + 2]);
+      const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      const amt = ((Math.abs(max - avg) * 2) / 255) * adjust;
+      data[i] += max !== data[i] ? (max - data[i]) * amt : 0;
+      data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * amt : 0;
+      data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * amt : 0;
+    }
+  }
+
+  /**
+   * Return WebGL uniform locations for this filter's shader.
+   *
+   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
+   * @param {WebGLShaderProgram} program This filter's compiled shader program.
+   */
+  getUniformLocations(
+    gl: WebGLRenderingContext,
+    program: WebGLProgram
+  ): TWebGLUniformLocationMap {
+    return {
+      uVibrance: gl.getUniformLocation(program, 'uVibrance'),
+    };
+  }
+
+  /**
+   * Send data from this filter to its shader program's uniforms.
+   *
+   * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader.
+   * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects
+   */
+  sendUniformData(
+    gl: WebGLRenderingContext,
+    uniformLocations: TWebGLUniformLocationMap
+  ) {
+    gl.uniform1f(uniformLocations.uVibrance, -this.vibrance);
+  }
+
+  static async fromObject(object: any) {
+    return new Vibrance(object);
+  }
+}
+
+export const vibranceDefaultValues: Partial<TClassProperties<Vibrance>> = {
+  type: 'Vibrance',
+  fragmentSource: `
+    precision highp float;
+    uniform sampler2D uTexture;
+    uniform float uVibrance;
+    varying vec2 vTexCoord;
+    void main() {
+      vec4 color = texture2D(uTexture, vTexCoord);
+      float max = max(color.r, max(color.g, color.b));
+      float avg = (color.r + color.g + color.b) / 3.0;
+      float amt = (abs(max - avg) * 2.0) * uVibrance;
+      color.r += max != color.r ? (max - color.r) * amt : 0.00;
+      color.g += max != color.g ? (max - color.g) * amt : 0.00;
+      color.b += max != color.b ? (max - color.b) * amt : 0.00;
+      gl_FragColor = color;
+    }
+  `,
+  vibrance: 0,
+  mainParameter: 'vibrance',
+};
+
+Object.assign(Vibrance.prototype, vibranceDefaultValues);
+classRegistry.setClass(Vibrance);

package/src/filters/WebGLFilterBackend.ts

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

package/src/filters/WebGLProbe.ts

@@ -0,0 +1,62 @@
+import { getEnv } from '../env';
+import { createCanvasElement } from '../util/misc/dom';
+
+export enum WebGLPrecision {
+  low = 'lowp',
+  medium = 'mediump',
+  high = 'highp',
+}
+
+/**
+ * Lazy initialize WebGL constants
+ */
+class WebGLProbe {
+  declare maxTextureSize?: number;
+
+  declare webGLPrecision: WebGLPrecision | undefined;
+
+  /**
+   * Tests if webgl supports certain precision
+   * @param {WebGL} Canvas WebGL context to test on
+   * @param {WebGLPrecision} Precision to test can be any of following
+   * @returns {Boolean} Whether the user's browser WebGL supports given precision.
+   */
+  private testPrecision(
+    gl: WebGLRenderingContext,
+    precision: WebGLPrecision
+  ): boolean {
+    const fragmentSource = `precision ${precision} float;\nvoid main(){}`;
+    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+    if (!fragmentShader) {
+      return false;
+    }
+    gl.shaderSource(fragmentShader, fragmentSource);
+    gl.compileShader(fragmentShader);
+    return !!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS);
+  }
+
+  /**
+   * query browser for WebGL
+   * @returns config object if true
+   */
+  queryWebGL() {
+    if (getEnv().isLikelyNode) {
+      return;
+    }
+    const canvas = createCanvasElement();
+    const gl = canvas.getContext('webgl');
+    if (gl) {
+      this.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
+      this.webGLPrecision = Object.values(WebGLPrecision).find((precision) =>
+        this.testPrecision(gl, precision)
+      );
+      console.log(`fabric: max texture size ${this.maxTextureSize}`);
+    }
+  }
+
+  isSupported(textureSize: number) {
+    return this.maxTextureSize && this.maxTextureSize >= textureSize;
+  }
+}
+
+export const webGLProbe = new WebGLProbe();

package/src/filters/typedefs.ts

@@ -0,0 +1,65 @@
+import type { WebGLFilterBackend } from './WebGLFilterBackend';
+import type { Canvas2dFilterBackend } from './Canvas2dFilterBackend';
+
+export type TProgramCache = any;
+
+export type TTextureCache = any;
+
+export type TPipelineResources = {
+  blendImage?: HTMLCanvasElement;
+  blurLayer1?: HTMLCanvasElement;
+  blurLayer2?: HTMLCanvasElement;
+} & Record<string, unknown>;
+
+export type TWebGLPipelineState = {
+  filterBackend: WebGLFilterBackend;
+  originalWidth: number;
+  originalHeight: number;
+  sourceWidth: number;
+  sourceHeight: number;
+  destinationWidth: number;
+  destinationHeight: number;
+  context: WebGLRenderingContext;
+  sourceTexture: WebGLTexture | null;
+  targetTexture: WebGLTexture | null;
+  originalTexture: WebGLTexture;
+  passes: number;
+  webgl: boolean;
+  aPosition: Float32Array;
+  programCache: TProgramCache;
+  pass: number;
+  targetCanvas: HTMLCanvasElement;
+};
+
+export type T2DPipelineState = {
+  sourceWidth: number;
+  sourceHeight: number;
+  filterBackend: Canvas2dFilterBackend;
+  canvasEl: HTMLCanvasElement;
+  imageData: ImageData;
+  originalEl: CanvasImageSource;
+  originalImageData?: ImageData;
+  ctx: CanvasRenderingContext2D;
+  helpLayer?: HTMLCanvasElement;
+};
+
+export type TWebGLUniformLocationMap = Record<
+  string,
+  WebGLUniformLocation | null
+>;
+
+export type TWebGLAttributeLocationMap = Record<string, number>;
+
+export type TWebGLProgramCacheItem = {
+  program: WebGLProgram;
+  attributeLocations: TWebGLAttributeLocationMap;
+  uniformLocations: TWebGLUniformLocationMap;
+};
+
+export type TApplyFilterArgs = {};
+
+export const isWebGLPipelineState = (
+  options: TWebGLPipelineState | T2DPipelineState
+): options is TWebGLPipelineState => {
+  return (options as TWebGLPipelineState).webgl !== undefined;
+};