fix stacking gradients

Author: jfboeve

examples/tests/dynamic-shader.ts

@@ -40,7 +40,7 @@ export default async function ({ renderer }: ExampleSettings) {
             angle: 220,
             colors: [
               0xff0000ff, 0x00ff00ff, 0xff0000ff, 0x0000ffff, 0xffff00ff,
-              0xff0000ff,
+              0xff000000,
             ],
           },
         },
@@ -210,7 +210,7 @@ export default async function ({ renderer }: ExampleSettings) {
         {
           type: 'radialGradient',
           props: {
-            colors: [0xff0000ff, 0x00ff00ff, 0x0000ffff],
+            colors: [0xff0000ff, 0x00ff00ff, 0x00000000],
             stops: [0.1, 0.4, 1.0],
             height: 200,
             width: 1000,

src/core/renderers/webgl/shaders/effects/LinearGradientEffect.ts

@@ -176,7 +176,7 @@ export class LinearGradientEffect extends ShaderEffect {
         stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
         colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
       }
-      return colorOut;
+      return mix(maskColor, colorOut, colorOut.a);
     `;
   };
 }

src/core/renderers/webgl/shaders/effects/RadialGradientEffect.ts

@@ -153,7 +153,7 @@ export class RadialGradientEffect extends ShaderEffect {
         stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
         colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
       }
-      return colorOut;
+      return mix(maskColor, colorOut, colorOut.a);
     `;
   };
 }