@remotion/effects 4.0.463 → 4.0.465

package/README.md

@@ -1,7 +1,18 @@
 # @remotion/effects
 
-Experimental presets for Remotion canvas effect hooks
+Effects that can be applied to Remotion-based canvas components
+
+[![NPM Downloads](https://img.shields.io/npm/dm/@remotion/effects.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/@remotion/effects?minimal=true)
+
+## Installation
+
+```bash
+npm install @remotion/effects --save-exact
+```
+
+When installing a Remotion package, make sure to align the version of all `remotion` and `@remotion/*` packages to the same version.
+Remove the `^` character from the version number to use the exact version.
 
 ## Usage
 
-This is an internal package and has no documentation.
+See the [documentation](https://www.remotion.dev/docs/effects/api) for more information.

package/dist/blur/blur-runtime.d.ts

@@ -26,6 +26,9 @@ type ApplyBlurParams = {
     readonly width: number;
     readonly height: number;
     readonly radius: number;
+    readonly horizontal: boolean;
+    readonly vertical: boolean;
+    readonly flipSourceY: boolean;
 };
-export declare const applyBlur: ({ state, source, width, height, radius, }: ApplyBlurParams) => void;
+export declare const applyBlur: ({ state, source, width, height, radius, horizontal, vertical, flipSourceY, }: ApplyBlurParams) => void;
 export {};

package/dist/blur/index.d.ts

@@ -1,5 +1,9 @@
 export type BlurParams = {
     readonly radius: number;
+    /** Apply blur along the horizontal axis. Defaults to `true`. */
+    readonly horizontal?: boolean;
+    /** Apply blur along the vertical axis. Defaults to `true`. */
+    readonly vertical?: boolean;
 };
 export declare const blur: (params: BlurParams & {
     readonly disabled?: boolean | undefined;

package/dist/blur.d.ts

@@ -0,0 +1 @@
+export { blur, type BlurParams } from './blur/index.js';

package/dist/effect-internals.d.ts

@@ -0,0 +1,8 @@
+export declare const EffectInternals: {
+    readonly halftone: (params?: (import("./halftone.js").HalftoneParams & {
+        readonly disabled?: boolean | undefined;
+    }) | undefined) => import("remotion").EffectDescriptor<unknown>;
+    readonly tint: (params: import("./tint.js").TintParams & {
+        readonly disabled?: boolean | undefined;
+    }) => import("remotion").EffectDescriptor<unknown>;
+};

package/dist/esm/blur.mjs

@@ -1,23 +1,24 @@
-var __defProp = Object.defineProperty;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: __exportSetter.bind(all, name)
-    });
+// src/blur/index.ts
+import { Internals as Internals2 } from "remotion";
+
+// src/validate-effect-param.ts
+var assertEffectParamsObject = (params, effectLabel) => {
+  if (params === null || typeof params !== "object") {
+    throw new TypeError(`${effectLabel} effect requires a parameters object, but got ${JSON.stringify(params)}`);
+  }
+};
+var assertRequiredFiniteNumber = (value, name) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new TypeError(`"${name}" must be a finite number, but got ${JSON.stringify(value)}`);
+  }
+};
+var assertRequiredColor = (value, name) => {
+  if (typeof value !== "string" || value.length === 0) {
+    throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
+  }
 };
 
-// src/blur/index.ts
-var exports_blur = {};
-__export(exports_blur, {
-  blur: () => blur
-});
+// src/blur/blur-runtime.ts
 import { Internals } from "remotion";
 
 // src/blur/blur-shaders.ts
@@ -73,6 +74,7 @@ var BLUR_FS_HORIZONTAL = buildFs("horizontal");
 var BLUR_FS_VERTICAL = buildFs("vertical");
 
 // src/blur/blur-runtime.ts
+var { createWebGL2ContextError } = Internals;
 var compileShader = (gl, type, source) => {
   const shader = gl.createShader(type);
   if (!shader) {
@@ -135,10 +137,9 @@ var setupBlur = (target) => {
     preserveDrawingBuffer: true
   });
   if (!gl) {
-    throw new Error("Failed to acquire WebGL2 context for blur effect");
+    throw createWebGL2ContextError("blur effect");
   }
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
   const programHorizontal = createProgram(gl, BLUR_VS, BLUR_FS_HORIZONTAL);
   const programVertical = createProgram(gl, BLUR_VS, BLUR_FS_VERTICAL);
   const vao = gl.createVertexArray();
@@ -245,12 +246,31 @@ var drawFullscreenQuad = (state) => {
   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
   gl.bindVertexArray(null);
 };
+var uploadBlurSource = ({
+  gl,
+  textureSource,
+  source,
+  textureIntermediate,
+  width,
+  height,
+  flipSourceY
+}) => {
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+  gl.bindTexture(gl.TEXTURE_2D, textureSource);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+  gl.bindTexture(gl.TEXTURE_2D, textureIntermediate);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+};
 var applyBlur = ({
   state,
   source,
   width,
   height,
-  radius
+  radius,
+  horizontal,
+  vertical,
+  flipSourceY
 }) => {
   const {
     gl,
@@ -261,32 +281,72 @@ var applyBlur = ({
     framebuffer
   } = state;
   gl.viewport(0, 0, width, height);
-  gl.bindTexture(gl.TEXTURE_2D, textureSource);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
-  gl.bindTexture(gl.TEXTURE_2D, textureIntermediate);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-  gl.bindTexture(gl.TEXTURE_2D, null);
-  gl.clearColor(0, 0, 0, 0);
-  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-  gl.activeTexture(gl.TEXTURE0);
-  gl.bindTexture(gl.TEXTURE_2D, textureSource);
-  gl.useProgram(programHorizontal);
-  setBlurUniforms({
+  uploadBlurSource({
     gl,
-    uniforms: state.horizontal,
-    radius,
+    textureSource,
+    source,
+    textureIntermediate,
     width,
-    height
+    height,
+    flipSourceY
   });
-  drawFullscreenQuad(state);
+  gl.clearColor(0, 0, 0, 0);
+  if (!horizontal && !vertical) {
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, textureSource);
+    gl.useProgram(programVertical);
+    setBlurUniforms({
+      gl,
+      uniforms: state.vertical,
+      radius: 0,
+      width,
+      height
+    });
+    drawFullscreenQuad(state);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.useProgram(null);
+    return;
+  }
+  if (horizontal && vertical) {
+    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, textureSource);
+    gl.useProgram(programHorizontal);
+    setBlurUniforms({
+      gl,
+      uniforms: state.horizontal,
+      radius,
+      width,
+      height
+    });
+    drawFullscreenQuad(state);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.bindTexture(gl.TEXTURE_2D, textureIntermediate);
+    gl.useProgram(programVertical);
+    setBlurUniforms({
+      gl,
+      uniforms: state.vertical,
+      radius,
+      width,
+      height
+    });
+    drawFullscreenQuad(state);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.useProgram(null);
+    return;
+  }
   gl.bindFramebuffer(gl.FRAMEBUFFER, null);
   gl.clear(gl.COLOR_BUFFER_BIT);
-  gl.bindTexture(gl.TEXTURE_2D, textureIntermediate);
-  gl.useProgram(programVertical);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, textureSource);
+  gl.useProgram(horizontal ? programHorizontal : programVertical);
   setBlurUniforms({
     gl,
-    uniforms: state.vertical,
+    uniforms: horizontal ? state.horizontal : state.vertical,
     radius,
     width,
     height
@@ -297,38 +357,62 @@ var applyBlur = ({
 };
 
 // src/blur/index.ts
-var { createEffect } = Internals;
+var { createEffect } = Internals2;
+var resolveBlurParams = (params) => ({
+  radius: params.radius,
+  horizontal: params.horizontal ?? true,
+  vertical: params.vertical ?? true
+});
 var blurSchema = {
   radius: {
     type: "number",
     min: 0,
     max: 100,
     step: 1,
-    default: 10,
-    description: "Blur radius"
+    default: undefined,
+    description: "Blur"
+  },
+  horizontal: {
+    type: "boolean",
+    default: true,
+    description: "Horizontal"
+  },
+  vertical: {
+    type: "boolean",
+    default: true,
+    description: "Vertical"
   }
 };
+var validateBlurParams = (params) => {
+  assertEffectParamsObject(params, "Blur");
+  assertRequiredFiniteNumber(params.radius, "radius");
+};
 var blur = createEffect({
   type: "remotion/blur",
   label: "Blur",
   backend: "webgl2",
-  calculateKey: (params) => String(params.radius),
+  calculateKey: (params) => {
+    const r = resolveBlurParams(params);
+    return `${r.radius}-${r.horizontal ? 1 : 0}-${r.vertical ? 1 : 0}`;
+  },
   setup: (target) => setupBlur(target),
-  apply: ({ source, width, height, params, state }) => {
+  apply: ({ source, width, height, params, state, flipSourceY }) => {
+    const r = resolveBlurParams(params);
     applyBlur({
       state,
       source,
       width,
       height,
-      radius: params.radius
+      radius: r.radius,
+      horizontal: r.horizontal,
+      vertical: r.vertical,
+      flipSourceY
     });
   },
   cleanup: (state) => cleanupBlur(state),
-  schema: blurSchema
+  schema: blurSchema,
+  validateParams: validateBlurParams
 });
-
-// src/entrypoints/blur.ts
-var { blur: blur2 } = exports_blur;
 export {
-  blur2 as blur
+  blur
 };

package/dist/esm/halftone.mjs

@@ -1,21 +1,17 @@
 var __defProp = Object.defineProperty;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 
 // src/halftone.ts
 import { Internals } from "remotion";
-var { createEffect } = Internals;
+var { createEffect, createWebGL2ContextError } = Internals;
 var SHADE_OUTSIDE_DOT_SCALE = 0.5;
 var halftoneSchema = {
   dotSize: {
@@ -219,7 +215,7 @@ var halftone = createEffect({
       preserveDrawingBuffer: true
     });
     if (!gl) {
-      throw new Error("Failed to acquire WebGL2 context for halftone effect");
+      throw createWebGL2ContextError("halftone effect");
     }
     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
@@ -347,7 +343,8 @@ var halftone = createEffect({
     gl.deleteVertexArray(vao);
     gl.deleteTexture(texture);
   },
-  schema: halftoneSchema
+  schema: halftoneSchema,
+  validateParams: () => {}
 });
 export {
   halftoneSchema,