fabric 5.3.0 → 6.0.0-beta1

package/src/filters/Convolute.ts

@@ -0,0 +1,341 @@
+import type { TClassProperties } from '../typedefs';
+import { AbstractBaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+
+/**
+ * Adapted from <a href="http://www.html5rocks.com/en/tutorials/canvas/imagefilters/">html5rocks article</a>
+ * @example <caption>Sharpen filter</caption>
+ * const filter = new Convolute({
+ *   matrix: [ 0, -1,  0,
+ *            -1,  5, -1,
+ *             0, -1,  0 ]
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ * @example <caption>Blur filter</caption>
+ * const filter = new Convolute({
+ *   matrix: [ 1/9, 1/9, 1/9,
+ *             1/9, 1/9, 1/9,
+ *             1/9, 1/9, 1/9 ]
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ * @example <caption>Emboss filter</caption>
+ * const filter = new Convolute({
+ *   matrix: [ 1,   1,  1,
+ *             1, 0.7, -1,
+ *            -1,  -1, -1 ]
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ * @example <caption>Emboss filter with opaqueness</caption>
+ * const filter = new Convolute({
+ *   opaque: true,
+ *   matrix: [ 1,   1,  1,
+ *             1, 0.7, -1,
+ *            -1,  -1, -1 ]
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ * canvas.renderAll();
+ */
+export class Convolute extends AbstractBaseFilter<Record<string, string>> {
+  /*
+   * Opaque value (true/false)
+   */
+  declare opaque: boolean;
+
+  /*
+   * matrix for the filter, max 9x9
+   */
+  declare matrix: number[];
+
+  getCacheKey() {
+    return `${this.type}_${Math.sqrt(this.matrix.length)}_${
+      this.opaque ? 1 : 0
+    }`;
+  }
+
+  getFragmentSource() {
+    return this.fragmentSource[this.getCacheKey()];
+  }
+
+  /**
+   * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image.
+   *
+   * @param {Object} options
+   * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered.
+   */
+  applyTo2d(options: T2DPipelineState) {
+    const imageData = options.imageData,
+      data = imageData.data,
+      weights = this.matrix,
+      side = Math.round(Math.sqrt(weights.length)),
+      halfSide = Math.floor(side / 2),
+      sw = imageData.width,
+      sh = imageData.height,
+      output = options.ctx.createImageData(sw, sh),
+      dst = output.data,
+      // go through the destination image pixels
+      alphaFac = this.opaque ? 1 : 0;
+    let r, g, b, a, dstOff, scx, scy, srcOff, wt, x, y, cx, cy;
+
+    for (y = 0; y < sh; y++) {
+      for (x = 0; x < sw; x++) {
+        dstOff = (y * sw + x) * 4;
+        // calculate the weighed sum of the source image pixels that
+        // fall under the convolution matrix
+        r = 0;
+        g = 0;
+        b = 0;
+        a = 0;
+
+        for (cy = 0; cy < side; cy++) {
+          for (cx = 0; cx < side; cx++) {
+            scy = y + cy - halfSide;
+            scx = x + cx - halfSide;
+
+            // eslint-disable-next-line max-depth
+            if (scy < 0 || scy >= sh || scx < 0 || scx >= sw) {
+              continue;
+            }
+
+            srcOff = (scy * sw + scx) * 4;
+            wt = weights[cy * side + cx];
+
+            r += data[srcOff] * wt;
+            g += data[srcOff + 1] * wt;
+            b += data[srcOff + 2] * wt;
+            // eslint-disable-next-line max-depth
+            if (!alphaFac) {
+              a += data[srcOff + 3] * wt;
+            }
+          }
+        }
+        dst[dstOff] = r;
+        dst[dstOff + 1] = g;
+        dst[dstOff + 2] = b;
+        if (!alphaFac) {
+          dst[dstOff + 3] = a;
+        } else {
+          dst[dstOff + 3] = data[dstOff + 3];
+        }
+      }
+    }
+    options.imageData = output;
+  }
+
+  /**
+   * 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 {
+      uMatrix: gl.getUniformLocation(program, 'uMatrix'),
+      uOpaque: gl.getUniformLocation(program, 'uOpaque'),
+      uHalfSize: gl.getUniformLocation(program, 'uHalfSize'),
+      uSize: gl.getUniformLocation(program, 'uSize'),
+    };
+  }
+
+  /**
+   * 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.uniform1fv(uniformLocations.uMatrix, this.matrix);
+  }
+
+  /**
+   * Returns object representation of an instance
+   * @return {Object} Object representation of an instance
+   */
+  toObject() {
+    return {
+      ...super.toObject(),
+      opaque: this.opaque,
+      matrix: [...this.matrix],
+    };
+  }
+
+  static async fromObject(object: any) {
+    return new Convolute(object);
+  }
+}
+
+export const convoluteDefaultValues: Partial<TClassProperties<Convolute>> = {
+  type: 'Convolute',
+  opaque: false,
+  matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0],
+  fragmentSource: {
+    Convolute_3_1: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform float uMatrix[9];
+      uniform float uStepW;
+      uniform float uStepH;
+      varying vec2 vTexCoord;
+      void main() {
+        vec4 color = vec4(0, 0, 0, 0);
+        for (float h = 0.0; h < 3.0; h+=1.0) {
+          for (float w = 0.0; w < 3.0; w+=1.0) {
+            vec2 matrixPos = vec2(uStepW * (w - 1), uStepH * (h - 1));
+            color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 3.0 + w)];
+          }
+        }
+        gl_FragColor = color;
+      }
+      `,
+    Convolute_3_0: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform float uMatrix[9];
+      uniform float uStepW;
+      uniform float uStepH;
+      varying vec2 vTexCoord;
+      void main() {
+        vec4 color = vec4(0, 0, 0, 1);
+        for (float h = 0.0; h < 3.0; h+=1.0) {
+          for (float w = 0.0; w < 3.0; w+=1.0) {
+            vec2 matrixPos = vec2(uStepW * (w - 1.0), uStepH * (h - 1.0));
+            color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 3.0 + w)];
+          }
+        }
+        float alpha = texture2D(uTexture, vTexCoord).a;
+        gl_FragColor = color;
+        gl_FragColor.a = alpha;
+      }
+      `,
+    Convolute_5_1: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform float uMatrix[25];
+      uniform float uStepW;
+      uniform float uStepH;
+      varying vec2 vTexCoord;
+      void main() {
+        vec4 color = vec4(0, 0, 0, 0);
+        for (float h = 0.0; h < 5.0; h+=1.0) {
+          for (float w = 0.0; w < 5.0; w+=1.0) {
+            vec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));
+            color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 5.0 + w)];
+          }
+        }
+        gl_FragColor = color;
+      }
+      `,
+    Convolute_5_0: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform float uMatrix[25];
+      uniform float uStepW;
+      uniform float uStepH;
+      varying vec2 vTexCoord;
+      void main() {
+        vec4 color = vec4(0, 0, 0, 1);
+        for (float h = 0.0; h < 5.0; h+=1.0) {
+          for (float w = 0.0; w < 5.0; w+=1.0) {
+            vec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));
+            color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 5.0 + w)];
+          }
+        }
+        float alpha = texture2D(uTexture, vTexCoord).a;
+        gl_FragColor = color;
+        gl_FragColor.a = alpha;
+      }
+      `,
+    Convolute_7_1: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform float uMatrix[49];
+      uniform float uStepW;
+      uniform float uStepH;
+      varying vec2 vTexCoord;
+      void main() {
+        vec4 color = vec4(0, 0, 0, 0);
+        for (float h = 0.0; h < 7.0; h+=1.0) {
+          for (float w = 0.0; w < 7.0; w+=1.0) {
+            vec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));
+            color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 7.0 + w)];
+          }
+        }
+        gl_FragColor = color;
+      }
+      `,
+    Convolute_7_0: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform float uMatrix[49];
+      uniform float uStepW;
+      uniform float uStepH;
+      varying vec2 vTexCoord;
+      void main() {
+        vec4 color = vec4(0, 0, 0, 1);
+        for (float h = 0.0; h < 7.0; h+=1.0) {
+          for (float w = 0.0; w < 7.0; w+=1.0) {
+            vec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));
+            color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 7.0 + w)];
+          }
+        }
+        float alpha = texture2D(uTexture, vTexCoord).a;
+        gl_FragColor = color;
+        gl_FragColor.a = alpha;
+      }
+      `,
+    Convolute_9_1: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform float uMatrix[81];
+      uniform float uStepW;
+      uniform float uStepH;
+      varying vec2 vTexCoord;
+      void main() {
+        vec4 color = vec4(0, 0, 0, 0);
+        for (float h = 0.0; h < 9.0; h+=1.0) {
+          for (float w = 0.0; w < 9.0; w+=1.0) {
+            vec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));
+            color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 9.0 + w)];
+          }
+        }
+        gl_FragColor = color;
+      }
+      `,
+    Convolute_9_0: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform float uMatrix[81];
+      uniform float uStepW;
+      uniform float uStepH;
+      varying vec2 vTexCoord;
+      void main() {
+        vec4 color = vec4(0, 0, 0, 1);
+        for (float h = 0.0; h < 9.0; h+=1.0) {
+          for (float w = 0.0; w < 9.0; w+=1.0) {
+            vec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));
+            color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 9.0 + w)];
+          }
+        }
+        float alpha = texture2D(uTexture, vTexCoord).a;
+        gl_FragColor = color;
+        gl_FragColor.a = alpha;
+      }
+      `,
+  },
+};
+
+Object.assign(Convolute.prototype, convoluteDefaultValues);
+classRegistry.setClass(Convolute);

package/src/filters/FilterBackend.ts

@@ -0,0 +1,32 @@
+import { config } from '../config';
+import { Canvas2dFilterBackend } from './Canvas2dFilterBackend';
+import { WebGLFilterBackend } from './WebGLFilterBackend';
+import { webGLProbe } from './WebGLProbe';
+
+export type FilterBackend = WebGLFilterBackend | Canvas2dFilterBackend;
+
+let filterBackend: FilterBackend;
+
+/**
+ * Verifies if it is possible to initialize webgl or fallback on a canvas2d filtering backend
+ */
+export function initFilterBackend(): FilterBackend {
+  webGLProbe.queryWebGL();
+  if (config.enableGLFiltering && webGLProbe.isSupported(config.textureSize)) {
+    return new WebGLFilterBackend({ tileSize: config.textureSize });
+  } else {
+    return new Canvas2dFilterBackend();
+  }
+}
+
+/**
+ * Get the current fabricJS filter backend  or initialize one if not avaialble yet
+ * @param [strict] pass `true` to create the backend if it wasn't created yet (default behavior),
+ * pass `false` to get the backend ref without mutating it
+ */
+export function getFilterBackend(strict = true): FilterBackend {
+  if (!filterBackend && strict) {
+    filterBackend = initFilterBackend();
+  }
+  return filterBackend;
+}

package/src/filters/Gamma.ts

@@ -0,0 +1,127 @@
+import type { TClassProperties } from '../typedefs';
+import { BaseFilter, BaseFilterOptions } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+
+export type GammaInput = [number, number, number];
+
+/**
+ * Gamma filter class
+ * @example
+ * const filter = new Gamma({
+ *   gamma: [1, 0.5, 2.1]
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export class Gamma extends BaseFilter {
+  /**
+   * Gamma array value, from 0.01 to 2.2.
+   * @param {Array} gamma
+   * @default
+   */
+  declare gamma: GammaInput;
+  declare rgbValues?: {
+    r: Uint8Array;
+    g: Uint8Array;
+    b: Uint8Array;
+  };
+
+  constructor({
+    gamma,
+    ...options
+  }: Partial<BaseFilterOptions> & { gamma?: GammaInput } = {}) {
+    super(options);
+    this.gamma = gamma || [1, 1, 1];
+  }
+
+  /**
+   * Apply the Gamma operation to a Uint8Array representing the pixels of an image.
+   *
+   * @param {Object} options
+   * @param {ImageData} options.imageData The Uint8Array to be filtered.
+   */
+  applyTo2d({ imageData: { data } }: T2DPipelineState) {
+    const gamma = this.gamma,
+      rInv = 1 / gamma[0],
+      gInv = 1 / gamma[1],
+      bInv = 1 / gamma[2];
+
+    if (!this.rgbValues) {
+      this.rgbValues = {
+        r: new Uint8Array(256),
+        g: new Uint8Array(256),
+        b: new Uint8Array(256),
+      };
+    }
+
+    // This is an optimization - pre-compute a look-up table for each color channel
+    // instead of performing these pow calls for each pixel in the image.
+    for (let i = 0; i < 256; i++) {
+      this.rgbValues.r[i] = Math.pow(i / 255, rInv) * 255;
+      this.rgbValues.g[i] = Math.pow(i / 255, gInv) * 255;
+      this.rgbValues.b[i] = Math.pow(i / 255, bInv) * 255;
+    }
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = this.rgbValues.r[data[i]];
+      data[i + 1] = this.rgbValues.g[data[i + 1]];
+      data[i + 2] = this.rgbValues.b[data[i + 2]];
+    }
+  }
+
+  /**
+   * 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 {
+      uGamma: gl.getUniformLocation(program, 'uGamma'),
+    };
+  }
+
+  /**
+   * 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.uniform3fv(uniformLocations.uGamma, this.gamma);
+  }
+
+  static async fromObject(object: any) {
+    return new Gamma(object);
+  }
+}
+
+export const gammaDefaultValues: Partial<TClassProperties<Gamma>> = {
+  type: 'Gamma',
+  fragmentSource: `
+    precision highp float;
+    uniform sampler2D uTexture;
+    uniform vec3 uGamma;
+    varying vec2 vTexCoord;
+    void main() {
+      vec4 color = texture2D(uTexture, vTexCoord);
+      vec3 correction = (1.0 / uGamma);
+      color.r = pow(color.r, correction.r);
+      color.g = pow(color.g, correction.g);
+      color.b = pow(color.b, correction.b);
+      gl_FragColor = color;
+      gl_FragColor.rgb *= color.a;
+    }
+  `,
+  mainParameter: 'gamma',
+  gamma: [1, 1, 1],
+};
+
+Object.assign(Gamma.prototype, gammaDefaultValues);
+classRegistry.setClass(Gamma);

package/src/filters/Grayscale.ts

@@ -0,0 +1,137 @@
+import type { TClassProperties } from '../typedefs';
+import { AbstractBaseFilter } from './BaseFilter';
+import type { T2DPipelineState, TWebGLUniformLocationMap } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+
+/**
+ * Grayscale image filter class
+ * @example
+ * const filter = new Grayscale();
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+export class Grayscale extends AbstractBaseFilter<Record<string, string>> {
+  declare mode: 'average' | 'lightness' | 'luminosity';
+
+  /**
+   * Apply the Grayscale operation to a Uint8Array representing the pixels of an image.
+   *
+   * @param {Object} options
+   * @param {ImageData} options.imageData The Uint8Array to be filtered.
+   */
+  applyTo2d({ imageData: { data } }: T2DPipelineState) {
+    for (let i = 0, value: number; i < data.length; i += 4) {
+      switch (this.mode) {
+        case 'average':
+          value = (data[i] + data[i + 1] + data[i + 2]) / 3;
+          break;
+        case 'lightness':
+          value =
+            (Math.min(data[i], data[i + 1], data[i + 2]) +
+              Math.max(data[i], data[i + 1], data[i + 2])) /
+            2;
+          break;
+        case 'luminosity':
+          value = 0.21 * data[i] + 0.72 * data[i + 1] + 0.07 * data[i + 2];
+          break;
+      }
+
+      data[i] = value;
+      data[i + 1] = value;
+      data[i + 2] = value;
+    }
+  }
+
+  getCacheKey() {
+    return `${this.type}_${this.mode}`;
+  }
+
+  getFragmentSource() {
+    return this.fragmentSource[this.mode];
+  }
+
+  /**
+   * 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 {
+      uMode: gl.getUniformLocation(program, 'uMode'),
+    };
+  }
+
+  /**
+   * 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
+  ) {
+    const mode = 1;
+    gl.uniform1i(uniformLocations.uMode, mode);
+  }
+
+  /**
+   * Grayscale filter isNeutralState implementation
+   * The filter is never neutral
+   * on the image
+   **/
+  isNeutralState() {
+    return false;
+  }
+
+  static async fromObject(object: any) {
+    return new Grayscale(object);
+  }
+}
+
+export const grayscaleDefaultValues: Partial<TClassProperties<Grayscale>> = {
+  type: 'Grayscale',
+  fragmentSource: {
+    average: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      varying vec2 vTexCoord;
+      void main() {
+        vec4 color = texture2D(uTexture, vTexCoord);
+        float average = (color.r + color.b + color.g) / 3.0;
+        gl_FragColor = vec4(average, average, average, color.a);
+      }
+      `,
+    lightness: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform int uMode;
+      varying vec2 vTexCoord;
+      void main() {
+        vec4 col = texture2D(uTexture, vTexCoord);
+        float average = (max(max(col.r, col.g),col.b) + min(min(col.r, col.g),col.b)) / 2.0;
+        gl_FragColor = vec4(average, average, average, col.a);
+      }
+      `,
+    luminosity: `
+      precision highp float;
+      uniform sampler2D uTexture;
+      uniform int uMode;
+      varying vec2 vTexCoord;
+      void main() {
+        vec4 col = texture2D(uTexture, vTexCoord);
+        float average = 0.21 * col.r + 0.72 * col.g + 0.07 * col.b;
+        gl_FragColor = vec4(average, average, average, col.a);
+      }
+      `,
+  },
+  mode: 'average',
+  mainParameter: 'mode',
+};
+
+Object.assign(Grayscale.prototype, grayscaleDefaultValues);
+classRegistry.setClass(Grayscale);

package/src/filters/HueRotation.ts

@@ -0,0 +1,66 @@
+import type { TClassProperties } from '../typedefs';
+import { cos } from '../util/misc/cos';
+import { sin } from '../util/misc/sin';
+import { ColorMatrix } from './ColorMatrix';
+import type { TWebGLPipelineState, T2DPipelineState } from './typedefs';
+import { classRegistry } from '../util/class_registry';
+
+/**
+ * HueRotation filter class
+ * @example
+ * const filter = new HueRotation({
+ *   rotation: -0.5
+ * });
+ * object.filters.push(filter);
+ * object.applyFilters();
+ */
+// @ts-expect-error fromObject
+export class HueRotation extends ColorMatrix {
+  /**
+   * HueRotation value, from -1 to 1.
+   */
+  declare rotation: number;
+
+  calculateMatrix() {
+    const rad = this.rotation * Math.PI,
+      cosine = cos(rad),
+      sine = sin(rad),
+      aThird = 1 / 3,
+      aThirdSqtSin = Math.sqrt(aThird) * sine,
+      OneMinusCos = 1 - cosine;
+    this.matrix = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
+    this.matrix[0] = cosine + OneMinusCos / 3;
+    this.matrix[1] = aThird * OneMinusCos - aThirdSqtSin;
+    this.matrix[2] = aThird * OneMinusCos + aThirdSqtSin;
+    this.matrix[5] = aThird * OneMinusCos + aThirdSqtSin;
+    this.matrix[6] = cosine + aThird * OneMinusCos;
+    this.matrix[7] = aThird * OneMinusCos - aThirdSqtSin;
+    this.matrix[10] = aThird * OneMinusCos - aThirdSqtSin;
+    this.matrix[11] = aThird * OneMinusCos + aThirdSqtSin;
+    this.matrix[12] = cosine + aThird * OneMinusCos;
+  }
+
+  isNeutralState() {
+    this.calculateMatrix();
+    return super.isNeutralState();
+  }
+
+  applyTo(options: TWebGLPipelineState | T2DPipelineState) {
+    this.calculateMatrix();
+    super.applyTo(options);
+  }
+
+  static async fromObject(object: any) {
+    return new HueRotation(object);
+  }
+}
+
+export const hueRotationDefaultValues: Partial<TClassProperties<HueRotation>> =
+  {
+    type: 'HueRotation',
+    rotation: 0,
+    mainParameter: 'rotation',
+  };
+
+Object.assign(HueRotation.prototype, hueRotationDefaultValues);
+classRegistry.setClass(HueRotation);