gl-transitions 1.74.0 → 1.76.0

package/msl/wipeLeft.metal

@@ -0,0 +1,105 @@
+// wipeLeft — MSL, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/wipeLeft.glsl
+// Author: Jake Nelson
+// License: MIT
+// Description: A hard-edged wipe from right to left
+// Bindings and uniform layout: see the gl-transitions package README
+
+// language: metal1.0
+#include <metal_stdlib>
+#include <simd/simd.h>
+
+using metal::uint;
+
+struct Uniforms {
+    float progress;
+    float ratio;
+};
+
+metal::float4 getToColor(
+    thread metal::float2& uv,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to
+) {
+    float _e14 = uv[0u];
+    float _e16 = uv[1u];
+    metal::float4 _e19 = _to.sample(_sampler, metal::float2(_e14, 1.0 - _e16), metal::level(0.0));
+    return _e19;
+}
+
+metal::float4 getFromColor(
+    thread metal::float2& uv_1,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler
+) {
+    float _e14 = uv_1[0u];
+    float _e16 = uv_1[1u];
+    metal::float4 _e19 = _from.sample(_sampler, metal::float2(_e14, 1.0 - _e16), metal::level(0.0));
+    return _e19;
+}
+
+metal::float4 transition(
+    thread metal::float2& uv_2,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms
+) {
+    metal::float2 p = {};
+    metal::float4 a = {};
+    metal::float2 param = {};
+    metal::float4 b = {};
+    metal::float2 param_1 = {};
+    metal::float2 _e18 = uv_2;
+    p = _e18 / metal::float2(1.0, 1.0);
+    metal::float2 _e20 = p;
+    param = _e20;
+    metal::float4 _e21 = getFromColor(param, _from, _sampler);
+    a = _e21;
+    metal::float2 _e22 = p;
+    param_1 = _e22;
+    metal::float4 _e23 = getToColor(param_1, _sampler, _to);
+    b = _e23;
+    metal::float4 _e24 = a;
+    metal::float4 _e25 = b;
+    float _e27 = p[0u];
+    float _e30 = uniforms.progress;
+    return metal::mix(_e24, _e25, metal::float4(metal::step(1.0 - _e27, _e30)));
+}
+
+void main_1(
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms,
+    thread metal::float4& _fragColor,
+    thread metal::float2& _uv_1
+) {
+    metal::float2 param_2 = {};
+    metal::float2 _e13 = _uv_1;
+    param_2 = _e13;
+    metal::float4 _e14 = transition(param_2, _from, _sampler, _to, uniforms);
+    _fragColor = _e14;
+    return;
+}
+
+struct main_Input {
+    metal::float2 _uv [[user(loc0), center_perspective]];
+};
+struct main_Output {
+    metal::float4 member [[color(0)]];
+};
+fragment main_Output main_(
+  main_Input varyings [[stage_in]]
+, metal::texture2d<float, metal::access::sample> _from [[texture(0)]]
+, metal::sampler _sampler [[sampler(0)]]
+, metal::texture2d<float, metal::access::sample> _to [[texture(1)]]
+, constant Uniforms& uniforms [[buffer(0)]]
+) {
+    metal::float4 _fragColor = {};
+    metal::float2 _uv_1 = {};
+    const auto _uv = varyings._uv;
+    _uv_1 = _uv;
+    main_1(_from, _sampler, _to, uniforms, _fragColor, _uv_1);
+    metal::float4 _e3 = _fragColor;
+    return main_Output { _e3 };
+}

package/msl/wipeRight.metal

@@ -0,0 +1,105 @@
+// wipeRight — MSL, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/wipeRight.glsl
+// Author: Jake Nelson
+// License: MIT
+// Description: A hard-edged wipe from left to right
+// Bindings and uniform layout: see the gl-transitions package README
+
+// language: metal1.0
+#include <metal_stdlib>
+#include <simd/simd.h>
+
+using metal::uint;
+
+struct Uniforms {
+    float progress;
+    float ratio;
+};
+
+metal::float4 getToColor(
+    thread metal::float2& uv,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to
+) {
+    float _e14 = uv[0u];
+    float _e16 = uv[1u];
+    metal::float4 _e19 = _to.sample(_sampler, metal::float2(_e14, 1.0 - _e16), metal::level(0.0));
+    return _e19;
+}
+
+metal::float4 getFromColor(
+    thread metal::float2& uv_1,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler
+) {
+    float _e14 = uv_1[0u];
+    float _e16 = uv_1[1u];
+    metal::float4 _e19 = _from.sample(_sampler, metal::float2(_e14, 1.0 - _e16), metal::level(0.0));
+    return _e19;
+}
+
+metal::float4 transition(
+    thread metal::float2& uv_2,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms
+) {
+    metal::float2 p = {};
+    metal::float4 a = {};
+    metal::float2 param = {};
+    metal::float4 b = {};
+    metal::float2 param_1 = {};
+    metal::float2 _e18 = uv_2;
+    p = _e18 / metal::float2(1.0, 1.0);
+    metal::float2 _e20 = p;
+    param = _e20;
+    metal::float4 _e21 = getFromColor(param, _from, _sampler);
+    a = _e21;
+    metal::float2 _e22 = p;
+    param_1 = _e22;
+    metal::float4 _e23 = getToColor(param_1, _sampler, _to);
+    b = _e23;
+    metal::float4 _e24 = a;
+    metal::float4 _e25 = b;
+    float _e27 = p[0u];
+    float _e30 = uniforms.progress;
+    return metal::mix(_e24, _e25, metal::float4(metal::step(0.0 + _e27, _e30)));
+}
+
+void main_1(
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms,
+    thread metal::float4& _fragColor,
+    thread metal::float2& _uv_1
+) {
+    metal::float2 param_2 = {};
+    metal::float2 _e13 = _uv_1;
+    param_2 = _e13;
+    metal::float4 _e14 = transition(param_2, _from, _sampler, _to, uniforms);
+    _fragColor = _e14;
+    return;
+}
+
+struct main_Input {
+    metal::float2 _uv [[user(loc0), center_perspective]];
+};
+struct main_Output {
+    metal::float4 member [[color(0)]];
+};
+fragment main_Output main_(
+  main_Input varyings [[stage_in]]
+, metal::texture2d<float, metal::access::sample> _from [[texture(0)]]
+, metal::sampler _sampler [[sampler(0)]]
+, metal::texture2d<float, metal::access::sample> _to [[texture(1)]]
+, constant Uniforms& uniforms [[buffer(0)]]
+) {
+    metal::float4 _fragColor = {};
+    metal::float2 _uv_1 = {};
+    const auto _uv = varyings._uv;
+    _uv_1 = _uv;
+    main_1(_from, _sampler, _to, uniforms, _fragColor, _uv_1);
+    metal::float4 _e3 = _fragColor;
+    return main_Output { _e3 };
+}

package/msl/wipeUp.metal

@@ -0,0 +1,105 @@
+// wipeUp — MSL, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/wipeUp.glsl
+// Author: Jake Nelson
+// License: MIT
+// Description: A hard-edged wipe from bottom to top
+// Bindings and uniform layout: see the gl-transitions package README
+
+// language: metal1.0
+#include <metal_stdlib>
+#include <simd/simd.h>
+
+using metal::uint;
+
+struct Uniforms {
+    float progress;
+    float ratio;
+};
+
+metal::float4 getToColor(
+    thread metal::float2& uv,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to
+) {
+    float _e14 = uv[0u];
+    float _e16 = uv[1u];
+    metal::float4 _e19 = _to.sample(_sampler, metal::float2(_e14, 1.0 - _e16), metal::level(0.0));
+    return _e19;
+}
+
+metal::float4 getFromColor(
+    thread metal::float2& uv_1,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler
+) {
+    float _e14 = uv_1[0u];
+    float _e16 = uv_1[1u];
+    metal::float4 _e19 = _from.sample(_sampler, metal::float2(_e14, 1.0 - _e16), metal::level(0.0));
+    return _e19;
+}
+
+metal::float4 transition(
+    thread metal::float2& uv_2,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms
+) {
+    metal::float2 p = {};
+    metal::float4 a = {};
+    metal::float2 param = {};
+    metal::float4 b = {};
+    metal::float2 param_1 = {};
+    metal::float2 _e18 = uv_2;
+    p = _e18 / metal::float2(1.0, 1.0);
+    metal::float2 _e20 = p;
+    param = _e20;
+    metal::float4 _e21 = getFromColor(param, _from, _sampler);
+    a = _e21;
+    metal::float2 _e22 = p;
+    param_1 = _e22;
+    metal::float4 _e23 = getToColor(param_1, _sampler, _to);
+    b = _e23;
+    metal::float4 _e24 = a;
+    metal::float4 _e25 = b;
+    float _e27 = p[1u];
+    float _e30 = uniforms.progress;
+    return metal::mix(_e24, _e25, metal::float4(metal::step(0.0 + _e27, _e30)));
+}
+
+void main_1(
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms,
+    thread metal::float4& _fragColor,
+    thread metal::float2& _uv_1
+) {
+    metal::float2 param_2 = {};
+    metal::float2 _e13 = _uv_1;
+    param_2 = _e13;
+    metal::float4 _e14 = transition(param_2, _from, _sampler, _to, uniforms);
+    _fragColor = _e14;
+    return;
+}
+
+struct main_Input {
+    metal::float2 _uv [[user(loc0), center_perspective]];
+};
+struct main_Output {
+    metal::float4 member [[color(0)]];
+};
+fragment main_Output main_(
+  main_Input varyings [[stage_in]]
+, metal::texture2d<float, metal::access::sample> _from [[texture(0)]]
+, metal::sampler _sampler [[sampler(0)]]
+, metal::texture2d<float, metal::access::sample> _to [[texture(1)]]
+, constant Uniforms& uniforms [[buffer(0)]]
+) {
+    metal::float4 _fragColor = {};
+    metal::float2 _uv_1 = {};
+    const auto _uv = varyings._uv;
+    _uv_1 = _uv;
+    main_1(_from, _sampler, _to, uniforms, _fragColor, _uv_1);
+    metal::float4 _e3 = _fragColor;
+    return main_Output { _e3 };
+}

package/msl/x_axis_translation.metal

@@ -0,0 +1,110 @@
+// x_axis_translation — MSL, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/x_axis_translation.glsl
+// Author: lizhongjian
+// License: MIT
+// Description: The outgoing image slides to the right, uncovering a crossfade to the incoming one
+// Bindings and uniform layout: see the gl-transitions package README
+
+// language: metal1.0
+#include <metal_stdlib>
+#include <simd/simd.h>
+
+using metal::uint;
+
+struct Uniforms {
+    float progress;
+    float ratio;
+};
+
+metal::float4 getToColor(
+    thread metal::float2& uv,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to
+) {
+    float _e13 = uv[0u];
+    float _e15 = uv[1u];
+    metal::float4 _e18 = _to.sample(_sampler, metal::float2(_e13, 1.0 - _e15), metal::level(0.0));
+    return _e18;
+}
+
+metal::float4 getFromColor(
+    thread metal::float2& uv_1,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler
+) {
+    float _e13 = uv_1[0u];
+    float _e15 = uv_1[1u];
+    metal::float4 _e18 = _from.sample(_sampler, metal::float2(_e13, 1.0 - _e15), metal::level(0.0));
+    return _e18;
+}
+
+metal::float4 transition(
+    thread metal::float2& uv_2,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms
+) {
+    metal::float2 newUV = {};
+    metal::float2 param = {};
+    metal::float2 param_1 = {};
+    metal::float2 param_2 = {};
+    metal::float2 _e16 = uv_2;
+    newUV = _e16;
+    float _e18 = uniforms.progress;
+    float _e20 = newUV[0u];
+    newUV[0u] = _e20 - _e18;
+    float _e24 = uv_2[0u];
+    float _e26 = uniforms.progress;
+    if (_e24 >= _e26) {
+        metal::float2 _e28 = newUV;
+        param = _e28;
+        metal::float4 _e29 = getFromColor(param, _from, _sampler);
+        return _e29;
+    }
+    metal::float2 _e30 = uv_2;
+    param_1 = _e30;
+    metal::float4 _e31 = getFromColor(param_1, _from, _sampler);
+    metal::float2 _e32 = uv_2;
+    param_2 = _e32;
+    metal::float4 _e33 = getToColor(param_2, _sampler, _to);
+    float _e35 = uniforms.progress;
+    return metal::mix(_e31, _e33, metal::float4(_e35));
+}
+
+void main_1(
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms,
+    thread metal::float4& _fragColor,
+    thread metal::float2& _uv_1
+) {
+    metal::float2 param_3 = {};
+    metal::float2 _e12 = _uv_1;
+    param_3 = _e12;
+    metal::float4 _e13 = transition(param_3, _from, _sampler, _to, uniforms);
+    _fragColor = _e13;
+    return;
+}
+
+struct main_Input {
+    metal::float2 _uv [[user(loc0), center_perspective]];
+};
+struct main_Output {
+    metal::float4 member [[color(0)]];
+};
+fragment main_Output main_(
+  main_Input varyings [[stage_in]]
+, metal::texture2d<float, metal::access::sample> _from [[texture(0)]]
+, metal::sampler _sampler [[sampler(0)]]
+, metal::texture2d<float, metal::access::sample> _to [[texture(1)]]
+, constant Uniforms& uniforms [[buffer(0)]]
+) {
+    metal::float4 _fragColor = {};
+    metal::float2 _uv_1 = {};
+    const auto _uv = varyings._uv;
+    _uv_1 = _uv;
+    main_1(_from, _sampler, _to, uniforms, _fragColor, _uv_1);
+    metal::float4 _e3 = _fragColor;
+    return main_Output { _e3 };
+}

package/msl/zoomInOut.metal

@@ -0,0 +1,125 @@
+// zoomInOut — MSL, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/zoomInOut.glsl
+// Author: OllyOllyOlly
+// License: MIT
+// Description: Zooms into the outgoing image until it blurs into a flat color, then out to the incoming one
+// Bindings and uniform layout: see the gl-transitions package README
+
+// language: metal1.0
+#include <metal_stdlib>
+#include <simd/simd.h>
+
+using metal::uint;
+
+struct Uniforms {
+    float progress;
+    float ratio;
+};
+
+metal::float4 getToColor(
+    thread metal::float2& uv,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to
+) {
+    float _e17 = uv[0u];
+    float _e19 = uv[1u];
+    metal::float4 _e22 = _to.sample(_sampler, metal::float2(_e17, 1.0 - _e19), metal::level(0.0));
+    return _e22;
+}
+
+metal::float4 getFromColor(
+    thread metal::float2& uv_1,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler
+) {
+    float _e17 = uv_1[0u];
+    float _e19 = uv_1[1u];
+    metal::float4 _e22 = _from.sample(_sampler, metal::float2(_e17, 1.0 - _e19), metal::level(0.0));
+    return _e22;
+}
+
+metal::float2 zoom(
+    thread metal::float2& uv_2,
+    thread float& amount
+) {
+    metal::float2 _e17 = uv_2;
+    float _e20 = amount;
+    return metal::float2(0.5) + ((_e17 - metal::float2(0.5)) * (1.0 - _e20));
+}
+
+metal::float4 transition(
+    thread metal::float2& uv_3,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms
+) {
+    float zoomFrom = {};
+    float zoomTo = {};
+    float crossfade = {};
+    metal::float2 param = {};
+    float param_1 = {};
+    metal::float2 param_2 = {};
+    metal::float2 param_3 = {};
+    float param_4 = {};
+    metal::float2 param_5 = {};
+    float _e26 = uniforms.progress;
+    zoomFrom = metal::smoothstep(0.0, 1.0, _e26 * 2.0);
+    float _e30 = uniforms.progress;
+    zoomTo = metal::smoothstep(0.0, 1.0, (1.0 - _e30) * 2.0);
+    float _e35 = uniforms.progress;
+    crossfade = metal::smoothstep(0.4, 0.6, _e35);
+    metal::float2 _e37 = uv_3;
+    param = _e37;
+    float _e38 = zoomFrom;
+    param_1 = _e38;
+    metal::float2 _e39 = zoom(param, param_1);
+    param_2 = _e39;
+    metal::float4 _e40 = getFromColor(param_2, _from, _sampler);
+    metal::float2 _e41 = uv_3;
+    param_3 = _e41;
+    float _e42 = zoomTo;
+    param_4 = _e42;
+    metal::float2 _e43 = zoom(param_3, param_4);
+    param_5 = _e43;
+    metal::float4 _e44 = getToColor(param_5, _sampler, _to);
+    float _e45 = crossfade;
+    return metal::mix(_e40, _e44, metal::float4(_e45));
+}
+
+void main_1(
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms,
+    thread metal::float4& _fragColor,
+    thread metal::float2& _uv_1
+) {
+    metal::float2 param_6 = {};
+    metal::float2 _e16 = _uv_1;
+    param_6 = _e16;
+    metal::float4 _e17 = transition(param_6, _from, _sampler, _to, uniforms);
+    _fragColor = _e17;
+    return;
+}
+
+struct main_Input {
+    metal::float2 _uv [[user(loc0), center_perspective]];
+};
+struct main_Output {
+    metal::float4 member [[color(0)]];
+};
+fragment main_Output main_(
+  main_Input varyings [[stage_in]]
+, metal::texture2d<float, metal::access::sample> _from [[texture(0)]]
+, metal::sampler _sampler [[sampler(0)]]
+, metal::texture2d<float, metal::access::sample> _to [[texture(1)]]
+, constant Uniforms& uniforms [[buffer(0)]]
+) {
+    metal::float4 _fragColor = {};
+    metal::float2 _uv_1 = {};
+    const auto _uv = varyings._uv;
+    _uv_1 = _uv;
+    main_1(_from, _sampler, _to, uniforms, _fragColor, _uv_1);
+    metal::float4 _e3 = _fragColor;
+    return main_Output { _e3 };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gl-transitions",
-  "version": "1.74.0",
+  "version": "1.76.0",
   "description": "The open collection of GL Transitions",
   "main": "index.js",
   "license": "MIT",

package/skills/gl-transitions/SKILL.md

@@ -0,0 +1,46 @@
+---
+name: gl-transitions
+description: Adds image and video transitions (fades, wipes, zooms, glitches, page curls...) from gl-transitions, an open collection of 125 GLSL shaders also compiled to SkSL. Use when the user wants a transition between two images, video clips, slides or scenes in WebGL, Skia (CanvasKit, React Native Skia), FFmpeg or editly, or names a gl-transition.
+---
+
+# gl-transitions
+
+Each transition is a GLSL function `vec4 transition(vec2 uv)` that blends an outgoing image into an incoming one as `progress` goes from 0 to 1. The npm package `gl-transitions` ships every transition as GLSL, as SkSL, and as a catalog (`gl-transitions.json`) with descriptions, tags and typed parameters.
+
+## 1. Pick a transition
+
+Read `references/catalog.md` (by tag, then one line per transition). If it is missing, fetch `https://cdn.jsdelivr.net/npm/gl-transitions@1/skills/gl-transitions/references/catalog.md`.
+
+- Match the user's words against descriptions and tags (`wipe`, `zoom`, `glitch`, `3d`...). Offer 2 or 3 candidates when the request is vague, with their preview link `https://gl-transitions.com/editor/<name>`.
+- Prefer transitions without extra textures: `displacement` and `luma` need an additional image from the host.
+- Names are case-sensitive and stable (`crosswarp`, `CrossZoom`, `cube`).
+
+## 2. Get the source
+
+| Need | Where |
+|---|---|
+| JS/TS project | `npm install gl-transitions`, then `import transitions from "gl-transitions"` and `transitions.find((t) => t.name === "cube")` (`glsl`, `params`, `textures`; typed in `index.d.ts`) |
+| GLSL file | `node_modules/gl-transitions/transitions/<name>.glsl` or `https://cdn.jsdelivr.net/npm/gl-transitions@1/transitions/<name>.glsl` |
+| SkSL file | `node_modules/gl-transitions/sksl/<name>.sksl` or `https://cdn.jsdelivr.net/npm/gl-transitions@1/sksl/<name>.sksl` |
+
+Pin the exact version (`gl-transitions@1.x.y`) in production URLs.
+
+## 3. Wire it into the host
+
+The host defines `progress`, `ratio`, `getFromColor(uv)`, `getToColor(uv)` and one uniform per parameter. **Always set every parameter**, to its `default` from the catalog unless the user chose a value: an unset uniform is 0 and breaks most transitions.
+
+| Host | Status | Read |
+|---|---|---|
+| WebGL / WebGL 2, regl, raw GLSL | Works today | `references/webgl.md` |
+| CanvasKit (web, Node), React Native Skia, other Skia | Works today with the shipped SkSL | `references/skia.md` |
+| editly (Node video editing) | Works today: built in | `references/video.md` |
+| FFmpeg | Works with the third-party `ffmpeg-gl-transition` filter (custom FFmpeg build) | `references/video.md` |
+| Remotion | No adapter yet (planned: `@gl-transitions/remotion`); possible for images and videos with the WebGL recipe | `references/video.md` |
+| three.js, PixiJS, WGSL/WebGPU, Metal, Android, Flutter, Unity, Godot | Planned, not available yet | Use the WebGL recipe where GLSL is accepted |
+
+## 4. Check the result
+
+- At `progress = 0` the output must be the outgoing image, at `progress = 1` the incoming one (the specification; a few transitions are off by a pixel or a slight blur at the ends, e.g. `AdvancedMosaic`, `tangentMotionBlur`). Render both ends and one middle frame.
+- An upside-down result means the image rows are flipped: `uv` has its origin at the bottom left (see each reference).
+- A black or frozen result usually means a parameter was left unset or an extra texture is missing.
+- Credit the author and license from the catalog when the user ships the result (most are MIT).