Add Wipe Transition with four direction variants

Signed-off-by: Javiya Vivekkumar Dineshbhai <vivek.javiya@collabora.com>
Change-Id: I3c2fa516d94ce3990d800c25bd95286fc1666445

browser/Makefile.am

@@ -414,6 +414,7 @@ COOL_JS_LST =\
 	src/slideshow/SlideShowPresenter.ts \
 	src/slideshow/transition/Transition2d.ts \
 	src/slideshow/transition/FadeTransition.ts \
+	src/slideshow/transition/WipeTransition.ts \
 	src/dom/PosAnimation.js \
 	src/map/anim/Map.PanAnimation.js \
 	src/dom/PosAnimation.Timer.js \

browser/src/slideshow/transition/WipeTransition.ts

@@ -0,0 +1,104 @@
+/*
+ * Copyright the Collabora Online contributors.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+class WipeTransition extends Transition2d {
+	private direction: number = 0;
+	constructor(
+		canvas: HTMLCanvasElement,
+		vertexShaderSource: string,
+		fragmentShaderSource: string,
+		image1: HTMLImageElement,
+		image2: HTMLImageElement,
+	) {
+		super(canvas, vertexShaderSource, fragmentShaderSource, image1, image2);
+		this.prepareTransition();
+		this.animationTime = 1500;
+	}
+
+	public renderUniformValue(): void {
+		this.gl.uniform1i(
+			this.gl.getUniformLocation(this.program, 'direction'),
+			this.direction,
+		);
+	}
+
+	public start(direction: number): void {
+		this.direction = direction;
+		this.startTransition();
+	}
+}
+
+app.definitions.WipeTransition = function (
+	canvas: HTMLCanvasElement,
+	image1: HTMLImageElement,
+	image2: HTMLImageElement,
+) {
+	const vertexShaderSource = `#version 300 es
+in vec4 a_position;
+in vec2 a_texCoord;
+out vec2 v_texCoord;
+
+void main() {
+    gl_Position = a_position;
+    v_texCoord = a_texCoord;
+}
+`;
+
+	const fragmentShaderSource = `#version 300 es
+precision mediump float;
+
+uniform sampler2D leavingSlideTexture;
+uniform sampler2D enteringSlideTexture;
+uniform float time;
+uniform int direction; // 1: Left to Right, 2: Right to Left, 3: Top to Bottom, 4: Bottom to Top
+
+in vec2 v_texCoord;
+out vec4 outColor;
+
+void main() {
+    vec2 uv = v_texCoord;
+    float progress = time;
+
+    if (direction == 1) {
+        if (uv.x < progress) {
+            outColor = texture(enteringSlideTexture, uv);
+        } else {
+            outColor = texture(leavingSlideTexture, uv);
+        }
+    } else if (direction == 2) {
+        if (uv.x > 1.0 - progress) {
+            outColor = texture(enteringSlideTexture, uv);
+        } else {
+            outColor = texture(leavingSlideTexture, uv);
+        }
+    } else if (direction == 3) {
+        if (uv.y < progress) {
+            outColor = texture(enteringSlideTexture, uv);
+        } else {
+            outColor = texture(leavingSlideTexture, uv);
+        }
+    } else if (direction == 4) {
+        if (uv.y > 1.0 - progress) {
+            outColor = texture(enteringSlideTexture, uv);
+        } else {
+            outColor = texture(leavingSlideTexture, uv);
+        }
+    }
+}
+`;
+
+	return new WipeTransition(
+		canvas,
+		vertexShaderSource,
+		fragmentShaderSource,
+		image1,
+		image2,
+	);
+};

browser/src/slideshow/transition/shader/2dVertexShader.glsl

@@ -1,9 +0,0 @@
-#version 300 es
-in vec4 a_position;
-in vec2 a_texCoord;
-out vec2 v_texCoord;
-
-void main() {
-    gl_Position = a_position;
-    v_texCoord = a_texCoord;
-}

browser/src/slideshow/transition/shader/fadeFragmentShader.glsl

@@ -1,36 +0,0 @@
-#version 300 es
-precision mediump float;
-
-uniform sampler2D leavingSlideTexture;
-uniform sampler2D enteringSlideTexture;
-uniform float time;
-uniform int effectType; // 0: Fade through black, 1: Fade through white, 2: Smooth fade
-
-in vec2 v_texCoord;
-out vec4 outColor;
-
-void main() {
-    vec4 color0 = texture(leavingSlideTexture, v_texCoord);
-    vec4 color1 = texture(enteringSlideTexture, v_texCoord);
-    vec4 transitionColor;
-
-    if (effectType == 0) {
-        // Fade through black
-        transitionColor = vec4(0.0, 0.0, 0.0, 1.0);
-    } else if (effectType == 1) {
-        // Fade through white
-        transitionColor = vec4(1.0, 1.0, 1.0, 1.0);
-    }
-
-    if (effectType == 2) {
-        // Smooth fade
-        float smoothTime = smoothstep(0.0, 1.0, time);
-        outColor = mix(color0, color1, smoothTime);
-    } else {
-        if (time < 0.5) {
-            outColor = mix(color0, transitionColor, time * 2.0);
-        } else {
-            outColor = mix(transitionColor, color1, (time - 0.5) * 2.0);
-        }
-    }
-}