git_clone/thorvg
1
0
Fork 0
mirror of https://github.com/thorvg/thorvg.git synced 2025-06-09 06:04:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

wg_engine: Lottie extensions

Browse source 
[issues 1479: LottieExtensions](#1479)

LottieExtensions example supports
Supports multiple color stops for gradient fill (redial and linear)
This commit is contained in:
Sergii Liebodkin 2024-04-01 16:41:39 +03:00 • committed by Hermet Park
parent 8bc1daac38
commit 712fc3cfea
2 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/renderer/wg_engine/tvgWgShaderSrc.cpp
View file

@ -124,7 +124,8 @@ struct BlendSettigs {
}; };
// LinearGradient // 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 { struct LinearGradient {
nStops : u32, nStops : u32,
spread : u32, spread : u32,
@ -132,7 +133,7 @@ struct LinearGradient {
dummy1 : u32, dummy1 : u32,
gradStartPos : vec2f, gradStartPos : vec2f,
gradEndPos : vec2f, gradEndPos : vec2f,
stopPoints : vec4f, stopPoints : array<vec4f, MAX_LINEAR_GRADIENT_STOPS_PACKED>,
stopColors : array<vec4f, MAX_LINEAR_GRADIENT_STOPS> 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; let last: i32 = i32(uLinearGradient.nStops) - 1;
// closer than first stop // closer than first stop
if (t <= uLinearGradient.stopPoints[0]) { if (t <= uLinearGradient.stopPoints[0][0]) {
color = uLinearGradient.stopColors[0]; color = uLinearGradient.stopColors[0];
} }
// further than last stop // further than last stop
if (t >= uLinearGradient.stopPoints[last]) { if (t >= uLinearGradient.stopPoints[last/4][last%4]) {
color = uLinearGradient.stopColors[last]; color = uLinearGradient.stopColors[last];
} }
// look in the middle // look in the middle
for (var i = 0i; i < last; i++) { for (var i = 0i; i < last; i++) {
let strt = uLinearGradient.stopPoints[i]; let strt = uLinearGradient.stopPoints[i/4][i%4];
let stop = uLinearGradient.stopPoints[i+1]; let stop = uLinearGradient.stopPoints[(i+1)/4][(i+1)%4];
if ((t > strt) && (t < stop)) { if ((t > strt) && (t < stop)) {
let step: f32 = (t - strt) / (stop - strt); let step: f32 = (t - strt) / (stop - strt);
color = mix(uLinearGradient.stopColors[i], uLinearGradient.stopColors[i+1], step); color = mix(uLinearGradient.stopColors[i], uLinearGradient.stopColors[i+1], step);
@ -225,7 +226,8 @@ struct BlendSettigs {
}; };
// RadialGradient // 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 { struct RadialGradient {
nStops : u32, nStops : u32,
spread : u32, spread : u32,
@ -233,7 +235,7 @@ struct RadialGradient {
dummy1 : u32, dummy1 : u32,
centerPos : vec2f, centerPos : vec2f,
radius : vec2f, radius : vec2f,
stopPoints : vec4f, stopPoints : array<vec4f, MAX_RADIAL_GRADIENT_STOPS_PACKED>,
stopColors : array<vec4f, MAX_RADIAL_GRADIENT_STOPS> 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; let last: i32 = i32(uRadialGradient.nStops) - 1;
// closer than first stop // closer than first stop
if (t <= uRadialGradient.stopPoints[0]) { if (t <= uRadialGradient.stopPoints[0][0]) {
color = uRadialGradient.stopColors[0]; color = uRadialGradient.stopColors[0];
} }
// further than last stop // further than last stop
if (t >= uRadialGradient.stopPoints[last]) { if (t >= uRadialGradient.stopPoints[last/4][last%4]) {
color = uRadialGradient.stopColors[last]; color = uRadialGradient.stopColors[last];
} }
// look in the middle // look in the middle
for (var i = 0i; i < last; i++) { for (var i = 0i; i < last; i++) {
let strt = uRadialGradient.stopPoints[i]; let strt = uRadialGradient.stopPoints[i/4][i%4];
let stop = uRadialGradient.stopPoints[i+1]; let stop = uRadialGradient.stopPoints[(i+1)/4][(i+1)%4];
if ((t > strt) && (t < stop)) { if ((t > strt) && (t < stop)) {
let step: f32 = (t - strt) / (stop - strt); let step: f32 = (t - strt) / (stop - strt);
color = mix(uRadialGradient.stopColors[i], uRadialGradient.stopColors[i+1], step); color = mix(uRadialGradient.stopColors[i], uRadialGradient.stopColors[i+1], step);

4
src/renderer/wg_engine/tvgWgShaderTypes.h
View file

@ -82,7 +82,7 @@ struct WgShaderTypeSolidColor
// stopPoints : vec4f, // stopPoints : vec4f,
// stopColors : array<vec4f, MAX_LINEAR_GRADIENT_STOPS> // stopColors : array<vec4f, MAX_LINEAR_GRADIENT_STOPS>
// }; // };
#define MAX_LINEAR_GRADIENT_STOPS 4 #define MAX_LINEAR_GRADIENT_STOPS 32
struct WgShaderTypeLinearGradient struct WgShaderTypeLinearGradient
{ {
uint32_t nStops{}; uint32_t nStops{};
@ -109,7 +109,7 @@ struct WgShaderTypeLinearGradient
// stopPoints : vec4f, // stopPoints : vec4f,
// stopColors : array<vec4f, MAX_RADIAL_GRADIENT_STOPS> // stopColors : array<vec4f, MAX_RADIAL_GRADIENT_STOPS>
// }; // };
#define MAX_RADIAL_GRADIENT_STOPS 4 #define MAX_RADIAL_GRADIENT_STOPS 32
struct WgShaderTypeRadialGradient struct WgShaderTypeRadialGradient
{ {
uint32_t nStops{}; uint32_t nStops{};