From 712fc3cfea33db60369ddd1d6cfe32b9475ddc7b Mon Sep 17 00:00:00 2001
From: Sergii Liebodkin <s.lebedkin@gmail.com>
Date: Mon, 1 Apr 2024 16:41:39 +0300
Subject: [PATCH] wg_engine: Lottie extensions [issues 1479:
 LottieExtensions](#1479)

LottieExtensions example supports
Supports multiple color stops for gradient fill (redial and linear)
---
 src/renderer/wg_engine/tvgWgShaderSrc.cpp | 26 ++++++++++++-----------
 src/renderer/wg_engine/tvgWgShaderTypes.h |  4 ++--
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/renderer/wg_engine/tvgWgShaderSrc.cpp b/src/renderer/wg_engine/tvgWgShaderSrc.cpp
index 6485517a..50bd1deb 100644
--- a/src/renderer/wg_engine/tvgWgShaderSrc.cpp
+++ b/src/renderer/wg_engine/tvgWgShaderSrc.cpp
@@ -124,7 +124,8 @@ struct BlendSettigs {
 };
 
 // LinearGradient
-const MAX_LINEAR_GRADIENT_STOPS = 4;
+const MAX_LINEAR_GRADIENT_STOPS = 32;
+const MAX_LINEAR_GRADIENT_STOPS_PACKED = MAX_LINEAR_GRADIENT_STOPS / 4;
 struct LinearGradient {
     nStops       : u32,
     spread       : u32,
@@ -132,7 +133,7 @@ struct LinearGradient {
     dummy1       : u32,
     gradStartPos : vec2f,
     gradEndPos   : vec2f,
-    stopPoints   : vec4f,
+    stopPoints   : array<vec4f, MAX_LINEAR_GRADIENT_STOPS_PACKED>,
     stopColors   : array<vec4f, MAX_LINEAR_GRADIENT_STOPS>
 };
 
@@ -183,19 +184,19 @@ fn fs_main(in: VertexOutput) -> @location(0) vec4f {
     let last: i32 = i32(uLinearGradient.nStops) - 1;
 
     // closer than first stop
-    if (t <= uLinearGradient.stopPoints[0]) {
+    if (t <= uLinearGradient.stopPoints[0][0]) {
         color = uLinearGradient.stopColors[0];
     }
     
     // further than last stop
-    if (t >= uLinearGradient.stopPoints[last]) {
+    if (t >= uLinearGradient.stopPoints[last/4][last%4]) {
         color = uLinearGradient.stopColors[last];
     }
 
     // look in the middle
     for (var i = 0i; i < last; i++) {
-        let strt = uLinearGradient.stopPoints[i];
-        let stop = uLinearGradient.stopPoints[i+1];
+        let strt = uLinearGradient.stopPoints[i/4][i%4];
+        let stop = uLinearGradient.stopPoints[(i+1)/4][(i+1)%4];
         if ((t > strt) && (t < stop)) {
             let step: f32 = (t - strt) / (stop - strt);
             color = mix(uLinearGradient.stopColors[i], uLinearGradient.stopColors[i+1], step);
@@ -225,7 +226,8 @@ struct BlendSettigs {
 };
 
 // RadialGradient
-const MAX_RADIAL_GRADIENT_STOPS = 4;
+const MAX_RADIAL_GRADIENT_STOPS = 32;
+const MAX_RADIAL_GRADIENT_STOPS_PACKED = MAX_RADIAL_GRADIENT_STOPS / 4;
 struct RadialGradient {
     nStops     : u32,
     spread     : u32,
@@ -233,7 +235,7 @@ struct RadialGradient {
     dummy1     : u32,
     centerPos  : vec2f,
     radius     : vec2f,
-    stopPoints : vec4f,
+    stopPoints : array<vec4f, MAX_RADIAL_GRADIENT_STOPS_PACKED>,
     stopColors : array<vec4f, MAX_RADIAL_GRADIENT_STOPS>
 };
 
@@ -278,19 +280,19 @@ fn fs_main(in: VertexOutput) -> @location(0) vec4f {
     let last: i32 = i32(uRadialGradient.nStops) - 1;
 
     // closer than first stop
-    if (t <= uRadialGradient.stopPoints[0]) {
+    if (t <= uRadialGradient.stopPoints[0][0]) {
         color = uRadialGradient.stopColors[0];
     }
     
     // further than last stop
-    if (t >= uRadialGradient.stopPoints[last]) {
+    if (t >= uRadialGradient.stopPoints[last/4][last%4]) {
         color = uRadialGradient.stopColors[last];
     }
 
     // look in the middle
     for (var i = 0i; i < last; i++) {
-        let strt = uRadialGradient.stopPoints[i];
-        let stop = uRadialGradient.stopPoints[i+1];
+        let strt = uRadialGradient.stopPoints[i/4][i%4];
+        let stop = uRadialGradient.stopPoints[(i+1)/4][(i+1)%4];
         if ((t > strt) && (t < stop)) {
             let step: f32 = (t - strt) / (stop - strt);
             color = mix(uRadialGradient.stopColors[i], uRadialGradient.stopColors[i+1], step);
diff --git a/src/renderer/wg_engine/tvgWgShaderTypes.h b/src/renderer/wg_engine/tvgWgShaderTypes.h
index e44e5178..cf28861c 100644
--- a/src/renderer/wg_engine/tvgWgShaderTypes.h
+++ b/src/renderer/wg_engine/tvgWgShaderTypes.h
@@ -82,7 +82,7 @@ struct WgShaderTypeSolidColor
 //     stopPoints   : vec4f,
 //     stopColors   : array<vec4f, MAX_LINEAR_GRADIENT_STOPS>
 // };
-#define MAX_LINEAR_GRADIENT_STOPS 4
+#define MAX_LINEAR_GRADIENT_STOPS 32
 struct WgShaderTypeLinearGradient
 {
     uint32_t nStops{};
@@ -109,7 +109,7 @@ struct WgShaderTypeLinearGradient
 //     stopPoints : vec4f,
 //     stopColors : array<vec4f, MAX_RADIAL_GRADIENT_STOPS>
 // };
-#define MAX_RADIAL_GRADIENT_STOPS 4
+#define MAX_RADIAL_GRADIENT_STOPS 32
 struct WgShaderTypeRadialGradient
 {
     uint32_t nStops{};