etro 0.6.0 → 0.8.1

package/src/effect/channels.ts

@@ -0,0 +1,50 @@
+import { Dynamic } from '../util'
+import { Shader } from './shader'
+
+export interface ChannelsOptions {
+  factors?: Dynamic<{
+    r?: number,
+    g?: number,
+    b?: number
+  }>
+}
+
+/**
+ * Multiplies each channel by a different factor
+ */
+export class Channels extends Shader {
+  factors: Dynamic<{
+    r?: number,
+    b?: number,
+    g?: number
+  }>
+
+  /**
+   * @param factors - channel factors, each defaulting to 1
+   */
+  constructor (options: ChannelsOptions = {}) {
+    super({
+      fragmentSource: `
+        precision mediump float;
+
+        uniform sampler2D u_Source;
+        uniform vec4 u_Factors;
+
+        varying highp vec2 v_TextureCoord;
+
+        void main() {
+          vec4 color = texture2D(u_Source, v_TextureCoord);
+          gl_FragColor = clamp(u_Factors * color, 0.0, 1.0);
+        }
+      `,
+      uniforms: {
+        factors: { type: '4fv', defaultFloatComponent: 1 }
+      }
+    })
+
+    /**
+     * Channel factors, each defaulting to 1
+     */
+    this.factors = options.factors || {}
+  }
+}

package/src/effect/chroma-key.ts

@@ -0,0 +1,82 @@
+import { Dynamic, Color } from '../util'
+import { Shader } from './shader'
+
+export interface ChromaKeyOptions {
+  target?: Dynamic<Color>
+  threshold?: Dynamic<number>
+  interpolate?: Dynamic<boolean>
+  // smoothingSharpness
+}
+
+/**
+ * Reduces alpha for pixels which are close to a specified target color
+ */
+export class ChromaKey extends Shader {
+  target: Dynamic<Color>
+  threshold: Dynamic<number>
+  interpolate: Dynamic<boolean>
+
+  /**
+   * @param [target={r: 0, g: 0, b: 0, a: 1}] - the color to remove
+   * @param [threshold=0] - how much error to allow
+   * @param [interpolate=false] - <code>true</code> to interpolate
+   * the alpha channel, or <code>false</code> value for no smoothing (i.e. an
+   * alpha of either 0 or 255)
+   */
+  // TODO: Use <code>smoothingSharpness</code>
+  constructor (options: ChromaKeyOptions = {}) {
+    super({
+      fragmentSource: `
+        precision mediump float;
+
+        uniform sampler2D u_Source;
+        uniform vec3 u_Target;
+        uniform float u_Threshold;
+        uniform bool u_Interpolate;
+
+        varying highp vec2 v_TextureCoord;
+
+        void main() {
+          vec4 color = texture2D(u_Source, v_TextureCoord);
+          float alpha = color.a;
+          vec3 dist = abs(color.rgb - u_Target / 255.0);
+          if (!u_Interpolate) {
+            // Standard way that most video editors probably use (all-or-nothing method)
+            float thresh = u_Threshold / 255.0;
+            bool transparent = dist.r <= thresh && dist.g <= thresh && dist.b <= thresh;
+            if (transparent)
+              alpha = 0.0;
+          } else {
+            /*
+             better way IMHO:
+             Take the average of the absolute differences between the pixel and the target for each channel
+             */
+            float transparency = (dist.r + dist.g + dist.b) / 3.0;
+            // TODO: custom or variety of interpolation methods
+            alpha = transparency;
+          }
+          gl_FragColor = vec4(color.rgb, alpha);
+        }
+      `,
+      uniforms: {
+        target: '3fv',
+        threshold: '1f',
+        interpolate: '1i'
+      }
+    })
+    /**
+     * The color to remove
+     */
+    this.target = options.target || new Color(0, 0, 0)
+    /**
+     * How much error to allow
+     */
+    this.threshold = options.threshold || 0
+    /**
+     * <code>true<code> to interpolate the alpha channel, or <code>false<code>
+     * for no smoothing (i.e. 255 or 0 alpha)
+     */
+    this.interpolate = options.interpolate || false
+    // this.smoothingSharpness = smoothingSharpness;
+  }
+}

package/src/effect/contrast.ts

@@ -0,0 +1,42 @@
+import { Dynamic } from '../util'
+import { Shader } from './shader'
+
+export interface ContrastOptions {
+  contrast?: Dynamic<number>
+}
+
+/**
+ * Changes the contrast by multiplying the RGB channels by a constant
+ */
+export class Contrast extends Shader {
+  contrast: Dynamic<number>
+
+  /**
+   * @param [contrast=1] - the contrast multiplier
+   */
+  constructor (options: ContrastOptions = {}) {
+    super({
+      fragmentSource: `
+        precision mediump float;
+
+        uniform sampler2D u_Source;
+        uniform float u_Contrast;
+
+        varying highp vec2 v_TextureCoord;
+
+        void main() {
+          vec4 color = texture2D(u_Source, v_TextureCoord);
+          vec3 rgb = clamp(u_Contrast * (color.rgb - 0.5) + 0.5, 0.0, 1.0);
+          gl_FragColor = vec4(rgb, color.a);
+        }
+      `,
+      uniforms: {
+        contrast: '1f'
+      }
+    })
+    /**
+     * The contrast multiplier
+     */
+    this.contrast = options.contrast || 1
+  }
+}

package/src/effect/elliptical-mask.ts

@@ -0,0 +1,75 @@
+import { Movie } from '../movie'
+import { Dynamic, val } from '../util'
+import { Base } from './base'
+import { Visual } from '../layer/index'
+
+export class EllipticalMaskOptions {
+  x: Dynamic<number>
+  y: Dynamic<number>
+  radiusX: Dynamic<number>
+  radiusY: Dynamic<number>
+  rotation?: Dynamic<number>
+  startAngle?: Dynamic<number>
+  endAngle?: Dynamic<number>
+  anticlockwise?: Dynamic<boolean>
+}
+
+/**
+ * Preserves an ellipse of the layer and clears the rest
+ */
+// TODO: Parent layer mask effects will make more complex masks easier
+export class EllipticalMask extends Base {
+  x: Dynamic<number>
+  y: Dynamic<number>
+  radiusX: Dynamic<number>
+  radiusY: Dynamic<number>
+  rotation: Dynamic<number>
+  startAngle: Dynamic<number>
+  endAngle: Dynamic<number>
+  anticlockwise: Dynamic<boolean>
+
+  private _tmpCanvas
+  private _tmpCtx
+
+  constructor (options: EllipticalMaskOptions) {
+    super()
+    this.x = options.x
+    this.y = options.y
+    this.radiusX = options.radiusX
+    this.radiusY = options.radiusY
+    this.rotation = options.rotation || 0
+    this.startAngle = options.startAngle || 0
+    this.endAngle = options.endAngle !== undefined ? options.endAngle : 2 * Math.PI
+    this.anticlockwise = options.anticlockwise || false
+    // for saving image data before clearing
+    this._tmpCanvas = document.createElement('canvas')
+    this._tmpCtx = this._tmpCanvas.getContext('2d')
+  }
+
+  apply (target: Movie | Visual, reltime: number): void {
+    const ctx = target.cctx
+    const canvas = target.canvas
+    const x = val(this, 'x', reltime)
+    const y = val(this, 'y', reltime)
+    const radiusX = val(this, 'radiusX', reltime)
+    const radiusY = val(this, 'radiusY', reltime)
+    const rotation = val(this, 'rotation', reltime)
+    const startAngle = val(this, 'startAngle', reltime)
+    const endAngle = val(this, 'endAngle', reltime)
+    const anticlockwise = val(this, 'anticlockwise', reltime)
+    this._tmpCanvas.width = target.canvas.width
+    this._tmpCanvas.height = target.canvas.height
+    this._tmpCtx.drawImage(canvas, 0, 0)
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.save() // idk how to preserve clipping state without save/restore
+    // create elliptical path and clip
+    ctx.beginPath()
+    ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
+    ctx.closePath()
+    ctx.clip()
+    // render image with clipping state
+    ctx.drawImage(this._tmpCanvas, 0, 0)
+    ctx.restore()
+  }
+}

package/src/effect/gaussian-blur.ts

@@ -0,0 +1,232 @@
+import { val } from '../util'
+import { Stack } from './stack'
+import { Shader } from './shader'
+import { Movie } from '../movie'
+import { Visual } from '../layer'
+
+export interface GaussianBlurOptions {
+  radius: number
+}
+
+/**
+ * Applies a Gaussian blur
+ */
+// TODO: Improve performance
+// TODO: Make sure this is truly gaussian even though it doens't require a
+// standard deviation
+export class GaussianBlur extends Stack {
+  constructor (options: GaussianBlurOptions) {
+    // Divide into two shader effects (use the fact that gaussian blurring can
+    // be split into components for performance benefits)
+    super({
+      effects: [
+        new GaussianBlurHorizontal(options),
+        new GaussianBlurVertical(options)
+      ]
+    })
+  }
+}
+
+/**
+ * Shared class for both horizontal and vertical gaussian blur classes.
+ */
+// TODO: If radius == 0, don't affect the image (right now, the image goes black).
+class GaussianBlurComponent extends Shader {
+  radius: number
+  shape: HTMLCanvasElement
+
+  private _radiusCache: number
+
+  /**
+   * @param src - fragment source code (specific to which component -
+   * horizontal or vertical)
+   * @param radius - only integers are currently supported
+   */
+  constructor (options: {
+    fragmentSource: string,
+    radius: number
+  }) {
+    super({
+      fragmentSource: options.fragmentSource,
+      uniforms: {
+        radius: '1i'
+      },
+      textures: {
+        shape: { minFilter: 'NEAREST', magFilter: 'NEAREST' }
+      }
+    })
+    /**
+     */
+    this.radius = options.radius
+    this._radiusCache = undefined
+  }
+
+  apply (target: Movie | Visual, reltime: number): void {
+    const radiusVal = val(this, 'radius', reltime)
+    if (radiusVal !== this._radiusCache)
+      // Regenerate gaussian distribution canvas.
+      this.shape = GaussianBlurComponent._render1DKernel(
+        GaussianBlurComponent._gen1DKernel(radiusVal)
+      )
+
+    this._radiusCache = radiusVal
+
+    super.apply(target, reltime)
+  }
+
+  /**
+   * Render Gaussian kernel to a canvas for use in shader.
+   * @param kernel
+   * @private
+   *
+   * @return
+   */
+  private static _render1DKernel (kernel: number[]): HTMLCanvasElement {
+    // TODO: Use Float32Array instead of canvas.
+    // init canvas
+    const canvas = document.createElement('canvas')
+    canvas.width = kernel.length
+    canvas.height = 1 // 1-dimensional
+    const ctx = canvas.getContext('2d')
+
+    // draw to canvas
+    const imageData = ctx.createImageData(canvas.width, canvas.height)
+    for (let i = 0; i < kernel.length; i++) {
+      imageData.data[4 * i + 0] = 255 * kernel[i] // Use red channel to store distribution weights.
+      imageData.data[4 * i + 1] = 0 // Clear all other channels.
+      imageData.data[4 * i + 2] = 0
+      imageData.data[4 * i + 3] = 255
+    }
+    ctx.putImageData(imageData, 0, 0)
+
+    return canvas
+  }
+
+  private static _gen1DKernel (radius: number): number[] {
+    const pascal = GaussianBlurComponent._genPascalRow(2 * radius + 1)
+    // don't use `reduce` and `map` (overhead?)
+    let sum = 0
+    for (let i = 0; i < pascal.length; i++)
+      sum += pascal[i]
+
+    for (let i = 0; i < pascal.length; i++)
+      pascal[i] /= sum
+
+    return pascal
+  }
+
+  private static _genPascalRow (index: number): number[] {
+    if (index < 0)
+      throw new Error(`Invalid index ${index}`)
+
+    let currRow = [1]
+    for (let i = 1; i < index; i++) {
+      const nextRow = []
+      nextRow.length = currRow.length + 1
+      // edges are always 1's
+      nextRow[0] = nextRow[nextRow.length - 1] = 1
+      for (let j = 1; j < nextRow.length - 1; j++)
+        nextRow[j] = currRow[j - 1] + currRow[j]
+
+      currRow = nextRow
+    }
+    return currRow
+  }
+}
+GaussianBlurComponent.prototype.publicExcludes = Shader.prototype.publicExcludes.concat(['shape'])
+
+/**
+ * Horizontal component of gaussian blur
+ */
+export class GaussianBlurHorizontal extends GaussianBlurComponent {
+  /**
+   * @param radius
+   */
+  constructor (options: GaussianBlurOptions) {
+    super({
+      fragmentSource: `
+        #define MAX_RADIUS 250
+
+        precision mediump float;
+
+        uniform sampler2D u_Source;
+        uniform ivec2 u_Size;   // pixel dimensions of input and output
+        uniform sampler2D u_Shape;  // pseudo one-dimension of blur distribution (would be 1D but webgl doesn't support it)
+        uniform int u_Radius;   // TODO: support floating-point radii
+
+        varying highp vec2 v_TextureCoord;
+
+        void main() {
+          /*
+           * Ideally, totalWeight should end up being 1, but due to rounding errors, it sometimes ends up less than 1
+           * (I believe JS canvas stores values as integers, which rounds down for the majority of the Gaussian curve)
+           * So, normalize by accumulating all the weights and dividing by that.
+           */
+          float totalWeight = 0.0;
+          vec4 avg = vec4(0.0);
+          // GLSL can only use constants in for-loop declaration, so start at zero, and stop before 2 * u_Radius + 1,
+          // opposed to starting at -u_Radius and stopping _at_ +u_Radius.
+          for (int i = 0; i < 2 * MAX_RADIUS + 1; i++) {
+            if (i >= 2 * u_Radius + 1)
+              break;  // GLSL can only use constants in for-loop declaration, so we break here.
+            // (2 * u_Radius + 1) is the width of u_Shape, by definition
+            float weight = texture2D(u_Shape, vec2(float(i) / float(2 * u_Radius + 1), 0.5)).r;   // TODO: use single-channel format
+            totalWeight += weight;
+            vec4 sample = texture2D(u_Source, v_TextureCoord + vec2(i - u_Radius, 0.0) / vec2(u_Size));
+            avg += weight * sample;
+          }
+          gl_FragColor = avg / totalWeight;
+        }
+      `,
+      radius: options.radius
+    })
+  }
+}
+
+/**
+ * Vertical component of gaussian blur
+ */
+export class GaussianBlurVertical extends GaussianBlurComponent {
+  /**
+   * @param radius
+   */
+  constructor (options: GaussianBlurOptions) {
+    super({
+      fragmentSource: `
+        #define MAX_RADIUS 250
+
+        precision mediump float;
+
+        uniform sampler2D u_Source;
+        uniform ivec2 u_Size;   // pixel dimensions of input and output
+        uniform sampler2D u_Shape;  // pseudo one-dimension of blur distribution (would be 1D but webgl doesn't support it)
+        uniform int u_Radius;   // TODO: support floating-point radii
+
+        varying highp vec2 v_TextureCoord;
+
+        void main() {
+          /*
+           * Ideally, totalWeight should end up being 1, but due to rounding errors, it sometimes ends up less than 1
+           * (I believe JS canvas stores values as integers, which rounds down for the majority of the Gaussian curve)
+           * So, normalize by accumulating all the weights and dividing by that.
+           */
+          float totalWeight = 0.0;
+          vec4 avg = vec4(0.0);
+          // GLSL can only use constants in for-loop declaration, so start at zero, and stop before 2 * u_Radius + 1,
+          // opposed to starting at -u_Radius and stopping _at_ +u_Radius.
+          for (int i = 0; i < 2 * MAX_RADIUS + 1; i++) {
+            if (i >= 2 * u_Radius + 1)
+              break;  // GLSL can only use constants in for-loop declaration, so we break here.
+            // (2 * u_Radius + 1) is the width of u_Shape, by definition
+            float weight = texture2D(u_Shape, vec2(float(i) / float(2 * u_Radius + 1), 0.5)).r;   // TODO: use single-channel format
+            totalWeight += weight;
+            vec4 sample = texture2D(u_Source, v_TextureCoord + vec2(0.0, i - u_Radius) / vec2(u_Size));
+            avg += weight * sample;
+          }
+          gl_FragColor = avg / totalWeight;
+        }
+      `,
+      radius: options.radius
+    })
+  }
+}

package/src/effect/grayscale.ts

@@ -0,0 +1,34 @@
+import { Shader } from './shader'
+
+/**
+ * Converts the target to a grayscale image
+ */
+export class Grayscale extends Shader {
+  constructor () {
+    super({
+      fragmentSource: `
+        precision mediump float;
+
+        uniform sampler2D u_Source;
+        uniform vec4 u_Factors;
+
+        varying highp vec2 v_TextureCoord;
+
+        float max3(float x, float y, float z) {
+          return max(x, max(y, z));
+        }
+
+        float min3(float x, float y, float z) {
+          return min(x, min(y, z));
+        }
+
+        void main() {
+          vec4 color = texture2D(u_Source, v_TextureCoord);
+          // Desaturate
+          float value = (max3(color.r, color.g, color.b) + min3(color.r, color.g, color.b)) / 2.0;
+          gl_FragColor = vec4(value, value, value, color.a);
+        }
+      `
+    })
+  }
+}

package/src/effect/index.ts

@@ -0,0 +1,22 @@
+/**
+ * @module effect
+ */
+
+// TODO: Investigate why an effect might run once in the beginning even if its layer isn't at the beginning
+// TODO: Add audio effect support
+// TODO: implement directional blur
+// TODO: implement radial blur
+// TODO: implement zoom blur
+
+export * from './base'
+export * from './brightness'
+export * from './channels'
+export * from './chroma-key'
+export * from './contrast'
+export * from './elliptical-mask'
+export * from './gaussian-blur'
+export * from './grayscale'
+export * from './pixelate'
+export * from './shader'
+export * from './stack'
+export * from './transform'

package/src/effect/pixelate.ts

@@ -0,0 +1,58 @@
+import { Visual } from '../layer'
+import { Movie } from '../movie'
+import { val, Dynamic } from '../util'
+import { Shader } from './shader'
+
+export interface PixelateOptions {
+  pixelSize?: Dynamic<number>
+}
+
+/**
+ * Breaks the target up into squares of `pixelSize` by `pixelSize`
+ */
+// TODO: just resample with NEAREST interpolation? but how?
+export class Pixelate extends Shader {
+  pixelSize: Dynamic<number>
+
+  /**
+   * @param pixelSize
+   */
+  constructor (options: PixelateOptions = {}) {
+    super({
+      fragmentSource: `
+        precision mediump float;
+
+        uniform sampler2D u_Source;
+        uniform ivec2 u_Size;
+        uniform int u_PixelSize;
+
+        varying highp vec2 v_TextureCoord;
+
+        void main() {
+          int ps = u_PixelSize;
+
+          // Snap to nearest block's center
+          vec2 loc = vec2(u_Size) * v_TextureCoord; // pixel-space
+          vec2 snappedLoc = float(ps) * floor(loc / float(ps));
+          vec2 centeredLoc = snappedLoc + vec2(float(u_PixelSize) / 2.0 + 0.5);
+          vec2 clampedLoc = clamp(centeredLoc, vec2(0.0), vec2(u_Size));
+          gl_FragColor = texture2D(u_Source, clampedLoc / vec2(u_Size));
+        }
+      `,
+      uniforms: {
+        pixelSize: '1i'
+      }
+    })
+    /**
+     */
+    this.pixelSize = options.pixelSize || 1
+  }
+
+  apply (target: Movie | Visual, reltime: number): void {
+    const ps = val(this, 'pixelSize', reltime)
+    if (ps % 1 !== 0 || ps < 0)
+      throw new Error('Pixel size must be a nonnegative integer')
+
+    super.apply(target, reltime)
+  }
+}