gl-transitions 1.74.0 → 1.76.0

package/glsl3/tangentMotionBlur.glsl

@@ -0,0 +1,139 @@
+// tangentMotionBlur — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/tangentMotionBlur.glsl
+
+// License: MIT
+// Author: chenkai
+// Description: The outgoing image is flung away along a curve with motion blur
+// Tags: motion-blur, rotate, slide
+// ported from https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/671116/
+
+float rand (vec2 co) {
+  return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
+}
+ 
+// motion blur for texture from
+vec4 motionBlurFrom(vec2 _st, vec2 speed) {
+    vec2 texCoord = _st.xy / vec2(1.0).xy;
+    vec3 color = vec3(0.0);
+    float total = 0.0;
+    float offset = rand(_st);
+    for (float t = 0.0; t <= 20.0; t++) {
+        float percent = (t + offset) / 20.0;
+        float weight = 4.0 * (percent - percent * percent);
+        vec2 newuv = texCoord + speed * percent;
+        newuv = fract(newuv);
+        color += getFromColor(newuv).rgb * weight;
+        total += weight;
+    }
+    return vec4(color / total, 1.0);
+}
+
+// motion blur for texture to
+vec4 motionBlurTo(vec2 _st, vec2 speed) {
+    vec2 texCoord = _st.xy / vec2(1.0).xy;
+    vec3 color = vec3(0.0);
+    float total = 0.0;
+    float offset = rand(_st);
+    for (float t = 0.0; t <= 20.0; t++) {
+        float percent = (t + offset) / 20.0;
+        float weight = 4.0 * (percent - percent * percent);
+        vec2 newuv = texCoord + speed * percent;
+        newuv = fract(newuv);
+        color += getToColor(newuv).rgb * weight;
+        total += weight;
+    }
+    return vec4(color / total, 1.0);
+}
+
+
+// bezier in gpu
+float A(float aA1, float aA2) {
+    return 1.0 - 3.0 * aA2 + 3.0 * aA1;
+}
+float B(float aA1, float aA2) {
+    return 3.0 * aA2 - 6.0 * aA1;
+}
+float C(float aA1) {
+    return 3.0 * aA1;
+}
+float GetSlope(float aT, float aA1, float aA2) {
+    return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
+}
+float CalcBezier(float aT, float aA1, float aA2) {
+    return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT;
+}
+float GetTForX(float aX, float mX1, float mX2) {
+    // iteration to solve
+    float aGuessT = aX;
+    for (int i = 0; i < 4; ++i) {
+        float currentSlope = GetSlope(aGuessT, mX1, mX2);
+        if (currentSlope == 0.0) return aGuessT;
+        float currentX = CalcBezier(aGuessT, mX1, mX2) - aX;
+        aGuessT -= currentX / currentSlope;
+    }
+    return aGuessT;
+}
+float KeySpline(float aX, float mX1, float mY1, float mX2, float mY2) {
+    if (mX1 == mY1 && mX2 == mY2) return aX; // linear
+    return CalcBezier(GetTForX(aX, mX1, mX2), mY1, mY2); // x to t, t to y
+}
+
+// norm distribution
+float normpdf(float x) {
+    float d = x - .5;
+    return exp(-20.*d*d);
+}
+
+vec2 rotateUv(vec2 uv, float angle, vec2 anchor, float zDirection) {
+    uv = uv - anchor; // anchor to origin
+    float s = sin(angle);
+	float c = cos(angle);
+	mat2 m = mat2(c, -s, s, c);
+    uv = m * uv;
+    uv += anchor; // anchor back
+    return uv;
+}
+
+
+
+vec4 transition (vec2 uv) {
+    
+    vec2 myst = uv;
+    float animationTime = progress; //getAnimationTime();
+    float easingTime = KeySpline(animationTime, .68,.01,.17,.98);
+    float blur = normpdf(easingTime);
+    float r = 0.;
+    float rotation = 180./180.*3.14159;
+    if (easingTime <= .5) {
+        r = rotation * easingTime;
+    } else {
+        r = -rotation + rotation * easingTime;
+    }
+
+    // rotation for current frame
+    vec2 mystCurrent = myst;
+    mystCurrent.y *= 1./ratio;
+    mystCurrent = rotateUv(mystCurrent, r, vec2(1., 0.), -1.);
+    mystCurrent.y *= ratio;
+    
+    // frame timeInterval by fps=30
+    float timeInterval = 0.0167*2.0;
+    if (easingTime <= .5) {
+        r = rotation * (easingTime+timeInterval);
+    } else {
+        r = -rotation + rotation * (easingTime+timeInterval);
+    }
+    
+    // rotation for next frame
+    vec2 mystNext = myst;
+    mystNext.y *= 1./ratio;
+    mystNext = rotateUv(mystNext, r, vec2(1., 0.), -1.);
+    mystNext.y *= ratio;
+    
+    // get speed at tagent direction
+    vec2 speed  = (mystNext - mystCurrent) / timeInterval * blur * 0.5;
+    if (easingTime <= .5) {
+        return motionBlurFrom(mystCurrent, speed);
+    } else {
+        return motionBlurTo(mystCurrent, speed);
+    }
+}

package/glsl3/undulatingBurnOut.glsl

@@ -0,0 +1,56 @@
+// undulatingBurnOut — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/undulatingBurnOut.glsl
+// License: MIT
+// Author: pthrasher
+// Description: A circle with a wavy edge burns out from the center to reveal the incoming image
+// Tags: circle, burn, wipe
+// adapted by gre from https://gist.github.com/pthrasher/8e6226b215548ba12734
+
+// @param Softness of the edge
+uniform float smoothness; // = 0.03
+// @param Center of the circle
+uniform vec2 center; // = vec2(0.5)
+// @color Color of the burning edge
+uniform vec3 color; // = vec3(0.0)
+
+const float M_PI = 3.14159265358979323846;
+
+float quadraticInOut(float t) {
+  float p = 2.0 * t * t;
+  return t < 0.5 ? p : -p + (4.0 * t) - 1.0;
+}
+
+float getGradient(float r, float dist) {
+  float d = r - dist;
+  return mix(
+    smoothstep(-smoothness, 0.0, r - dist * (1.0 + smoothness)),
+    -1.0 - step(0.005, d),
+    step(-0.005, d) * step(d, 0.01)
+  );
+}
+
+float getWave(vec2 p){
+  vec2 _p = p - center; // offset from center
+  float rads = atan(_p.y, _p.x);
+  float degs = degrees(rads) + 180.0;
+  vec2 range = vec2(0.0, M_PI * 30.0);
+  vec2 domain = vec2(0.0, 360.0);
+  float ratio = (M_PI * 30.0) / 360.0;
+  degs = degs * ratio;
+  float x = progress;
+  float magnitude = mix(0.02, 0.09, smoothstep(0.0, 1.0, x));
+  float offset = mix(40.0, 30.0, smoothstep(0.0, 1.0, x));
+  float ease_degs = quadraticInOut(sin(degs));
+  float deg_wave_pos = (ease_degs * magnitude) * sin(x * offset);
+  // The soft edge reaches `smoothness` beyond the radius and the burn band 0.005 inside it:
+  // start the radius below both so nothing but the outgoing image shows at progress 0
+  // (unchanged from progress 0.1 on).
+  return x - max(smoothness, 0.01) * (1.0 - smoothstep(0.0, 0.1, x)) + deg_wave_pos;
+}
+
+vec4 transition(vec2 p) {
+  float dist = distance(center, p);
+  float m = getGradient(getWave(p), dist);
+  vec4 cfrom = getFromColor(p);
+  vec4 cto = getToColor(p);
+  return mix(mix(cfrom, cto, m), mix(cfrom, vec4(color, 1.0), 0.75), step(m, -2.0));
+}

package/glsl3/wind.glsl

@@ -0,0 +1,25 @@
+// wind — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/wind.glsl
+// Author: gre
+// License: MIT
+// Description: A ragged left-to-right wipe, as if the image was blown away by the wind
+// Tags: wipe, horizontal, noise
+
+// @range(0, 1) Width of the ragged edge
+uniform float size; // = 0.2
+// @param Wipe from right to left instead
+uniform bool reversed; // = false
+
+float rand (vec2 co) {
+  return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
+}
+
+vec4 transition (vec2 uv) {
+  float x = reversed ? 1. - uv.x : uv.x;
+  float r = rand(vec2(0, uv.y));
+  float m = smoothstep(0.0, -size, x*(1.0-size) + size*r - (progress * (1.0 + size)));
+  return mix(
+    getFromColor(uv),
+    getToColor(uv),
+    m
+  );
+}

package/glsl3/windowblinds.glsl

@@ -0,0 +1,18 @@
+// windowblinds — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/windowblinds.glsl
+// Author: Fabien Benetou
+// License: MIT
+// Description: A crossfade through horizontal window blinds
+// Tags: blinds, stripes, blend
+
+vec4 transition (vec2 uv) {
+  float t = progress;
+  
+  if (mod(floor(uv.y*100.*progress),2.)==0.)
+    t*=2.-.5;
+  
+  return mix(
+    getFromColor(uv),
+    getToColor(uv),
+    mix(t, progress, smoothstep(0.8, 1.0, progress))
+  );
+}

package/glsl3/windowslice.glsl

@@ -0,0 +1,16 @@
+// windowslice — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/windowslice.glsl
+// Author: gre
+// License: MIT
+// Description: The incoming image appears through vertical slices that widen
+// Tags: slices, stripes, wipe
+
+// @param Number of slices
+uniform float count; // = 10.0
+// @param Softness of the slices' edges
+uniform float smoothness; // = 0.5
+
+vec4 transition (vec2 p) {
+  float pr = smoothstep(-smoothness, 0.0, p.x - progress * (1.0 + smoothness));
+  float s = step(pr, fract(count * p.x));
+  return mix(getFromColor(p), getToColor(p), s);
+}

package/glsl3/wipeDown.glsl

@@ -0,0 +1,12 @@
+// wipeDown — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/wipeDown.glsl
+// Author: Jake Nelson
+// License: MIT
+// Description: A hard-edged wipe from top to bottom
+// Tags: wipe, vertical
+
+vec4 transition(vec2 uv) {
+  vec2 p=uv.xy/vec2(1.0).xy;
+  vec4 a=getFromColor(p);
+  vec4 b=getToColor(p);
+  return mix(a, b, step(1.0-p.y,progress));
+}

package/glsl3/wipeLeft.glsl

@@ -0,0 +1,12 @@
+// wipeLeft — GLSL ES 3.00, 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
+// Tags: wipe, horizontal
+
+vec4 transition(vec2 uv) {
+  vec2 p=uv.xy/vec2(1.0).xy;
+  vec4 a=getFromColor(p);
+  vec4 b=getToColor(p);
+  return mix(a, b, step(1.0-p.x,progress));
+}

package/glsl3/wipeRight.glsl

@@ -0,0 +1,12 @@
+// wipeRight — GLSL ES 3.00, 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
+// Tags: wipe, horizontal
+
+vec4 transition(vec2 uv) {
+  vec2 p=uv.xy/vec2(1.0).xy;
+  vec4 a=getFromColor(p);
+  vec4 b=getToColor(p);
+  return mix(a, b, step(0.0+p.x,progress));
+}

package/glsl3/wipeUp.glsl

@@ -0,0 +1,12 @@
+// wipeUp — GLSL ES 3.00, 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
+// Tags: wipe, vertical
+
+vec4 transition(vec2 uv) {
+  vec2 p=uv.xy/vec2(1.0).xy;
+  vec4 a=getFromColor(p);
+  vec4 b=getToColor(p);
+  return mix(a, b, step(0.0+p.y,progress));
+}

package/glsl3/x_axis_translation.glsl

@@ -0,0 +1,21 @@
+// x_axis_translation — GLSL ES 3.00, 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
+// Tags: slide, horizontal, blend
+
+vec4 transition (vec2 uv) {
+  vec2 newUV = uv;
+  newUV.x -= progress;
+  if(uv.x >= progress)
+  {
+    return getFromColor(newUV);
+  }
+
+  
+  return mix(
+    getFromColor(uv),
+    getToColor(uv),
+    progress
+  );
+}

package/glsl3/zoomInOut.glsl

@@ -0,0 +1,20 @@
+// zoomInOut — GLSL ES 3.00, 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
+// Tags: zoom, blur
+
+vec2 zoom(vec2 uv, float amount) {
+  return 0.5 + ((uv - 0.5) * (1.0 - amount));
+}
+
+vec4 transition (vec2 uv) {
+  float zoomFrom = smoothstep(0.0, 1.0, progress * 2.0);
+  float zoomTo = smoothstep(0.0, 1.0, (1.0 - progress) * 2.0);
+  float crossfade = smoothstep(0.4, 0.6, progress);
+  return mix(
+    getFromColor(zoom(uv, zoomFrom)),
+    getToColor(zoom(uv, zoomTo)),
+    crossfade
+  );
+}

package/index.d.ts

@@ -41,5 +41,66 @@ export interface Transition {
   updatedAt?: string;
 }
 
+/** Uniform buffer and textures of `wgsl/<name>.wgsl` and `msl/<name>.metal`, from `layouts.json`. */
+export interface ShaderLayout {
+  /** `progress`, `ratio`, then the parameters; offsets in bytes (std140 / WGSL uniform layout). `bool` is stored as a 32-bit int. */
+  uniforms: { name: string; type: ParamType; offset: number }[];
+  /** Uniform buffer size in bytes, a multiple of 16. */
+  size: number;
+  /** Extra textures, bound after `from` and `to`. */
+  textures: string[];
+}
+
+/** Content of `layouts.json`, by transition name. */
+export type ShaderLayouts = { [name: string]: ShaderLayout };
+
+export type TargetId = "sksl" | "glsl3" | "wgsl" | "msl";
+
+/**
+ * Per transition and target, from `compatibility.json`. The target file is shipped
+ * for every status except `compile-error` and `unsupported`.
+ * - `match`: renders like the GLSL reference; `close`: up to 5% of pixels differ;
+ *   `noise-only`: same picture, different random noise grain
+ * - `differs`: renders differently (usually random patterns that legitimately differ)
+ * - `compiled`: accepted by the target's compiler, not rendered
+ * - `translated`: generated, but no compiler for the target was available in the build
+ * - `no-reference`: rendered, but no reference to compare with
+ * - `compile-error`, `unsupported`: not shipped for this target
+ */
+export type CompatibilityStatus =
+  | "match"
+  | "noise-only"
+  | "close"
+  | "differs"
+  | "compiled"
+  | "translated"
+  | "no-reference"
+  | "compile-error"
+  | "unsupported";
+
+export interface TargetCompatibility {
+  status: CompatibilityStatus;
+  /** Share of pixels that differ from the GLSL reference in the worst frame, 0 to 1. */
+  differingPixels?: number;
+  /** Uses hash noise (`fract(sin(x) * 43758.5453)`), which differs between implementations. */
+  hashNoise?: boolean;
+  /** First line of the compiler or converter error. */
+  error?: string;
+}
+
+/** Content of `compatibility.json`. */
+export interface Compatibility {
+  targets: {
+    [target in TargetId]?: {
+      language: string;
+      /** File of a transition in the package, `{name}` being its name. */
+      path: string;
+      /** Statuses come from rendering and comparing with the GLSL reference, not only compiling. */
+      rendered: boolean;
+    };
+  };
+  transitions: { [name: string]: { [target in TargetId]?: TargetCompatibility } };
+}
+
 declare const transitions: Transition[];
 export default transitions;