From a0890604c84f4003e50a0ce249e162b871a0def1 Mon Sep 17 00:00:00 2001 From: Javiya Vivekkumar Dineshbhai Date: Thu, 4 Jul 2024 17:46:35 +0530 Subject: [PATCH] Add Wipe Transition with four direction variants Signed-off-by: Javiya Vivekkumar Dineshbhai Change-Id: I3c2fa516d94ce3990d800c25bd95286fc1666445 --- browser/Makefile.am | 1 + .../slideshow/transition/WipeTransition.ts | 104 ++++++++++++++++++ .../transition/shader/2dVertexShader.glsl | 9 -- .../transition/shader/fadeFragmentShader.glsl | 36 ------ 4 files changed, 105 insertions(+), 45 deletions(-) create mode 100644 browser/src/slideshow/transition/WipeTransition.ts delete mode 100644 browser/src/slideshow/transition/shader/2dVertexShader.glsl delete mode 100644 browser/src/slideshow/transition/shader/fadeFragmentShader.glsl diff --git a/browser/Makefile.am b/browser/Makefile.am index 2b727234b..6f4876479 100644 --- a/browser/Makefile.am +++ b/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 \ diff --git a/browser/src/slideshow/transition/WipeTransition.ts b/browser/src/slideshow/transition/WipeTransition.ts new file mode 100644 index 000000000..7e4ecb6a0 --- /dev/null +++ b/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, + ); +}; diff --git a/browser/src/slideshow/transition/shader/2dVertexShader.glsl b/browser/src/slideshow/transition/shader/2dVertexShader.glsl deleted file mode 100644 index 9254aefe3..000000000 --- a/browser/src/slideshow/transition/shader/2dVertexShader.glsl +++ /dev/null @@ -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; -} diff --git a/browser/src/slideshow/transition/shader/fadeFragmentShader.glsl b/browser/src/slideshow/transition/shader/fadeFragmentShader.glsl deleted file mode 100644 index 1e5e47ae4..000000000 --- a/browser/src/slideshow/transition/shader/fadeFragmentShader.glsl +++ /dev/null @@ -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); - } - } -}