DynamicShader: Fix mixing gradient colors with maskcolor (#37)

- Fixes issue with gradients that contained alpha lower than 1.

Author: frank-weindel

examples/tests/dynamic-shader.ts

@@ -154,20 +154,23 @@ export default async function ({ renderer }: ExampleSettings) {
     y: 100,
     width: 250,
     height: 500,
-    color: 0x00000000,
+    color: 0xff0000ff,
     shader: renderer.makeShader('DynamicShader', {
       effects: [
         {
-          type: 'radius',
+          type: 'linearGradient',
           props: {
-            radius: 100,
+            angle: 180,
+            stops: [0.4, 0.8],
+            colors: [0x0000ffff, '#00000000'],
           },
         },
         {
-          type: 'border',
+          type: 'linearGradient',
           props: {
-            width: 20,
-            color: 0x00ff00ff,
+            angle: -90,
+            stops: [0.1, 0.75],
+            colors: [0x0000ffff, '#00000000'],
           },
         },
       ],

src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -252,7 +252,7 @@ export class DynamicShader extends WebGlCoreShader {
     }
 
     //fill main functions
-    let currentMask = `mix(shaderColor, maskColor, clamp(-lng_DefaultMask, 0.0, 1.0))`;
+    let currentMask = `mix(shaderColor, maskColor, clamp(-(lng_DefaultMask), 0.0, 1.0))`;
     let drawEffects = `
 
     `;
@@ -399,6 +399,7 @@ export class DynamicShader extends WebGlCoreShader {
     uniform float u_alpha;
     uniform float u_radius;
     uniform sampler2D u_texture;
+    uniform float u_pixelRatio;
 
     ${uniforms}
 
@@ -410,17 +411,16 @@ export class DynamicShader extends WebGlCoreShader {
     ${effectMethods}
 
     void main() {
-      vec2 uv = v_textureCoordinate.xy * u_dimensions.xy;
       vec2 p = v_textureCoordinate.xy * u_dimensions - u_dimensions * 0.5;
-      vec2 d = abs(p) - u_dimensions * 0.5;
+      vec2 d = abs(p) - (u_dimensions) * 0.5;
       float lng_DefaultMask = min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
 
       vec4 shaderColor = vec4(0.0);
       float shaderMask = lng_DefaultMask;
 
       vec4 maskColor = texture2D(u_texture, v_textureCoordinate) * v_color;
 
-      shaderColor = mix(shaderColor, maskColor, clamp(-lng_DefaultMask, 0.0, 1.0));
+      shaderColor = mix(shaderColor, maskColor, clamp(-(lng_DefaultMask + 0.5), 0.0, 1.0));
 
       ${drawEffects}
 

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

@@ -165,18 +165,19 @@ export class LinearGradientEffect extends ShaderEffect {
       float d = angle - 90.0;
       float a = $degToRad(d);
       float lineDist = abs(u_dimensions.x * cos(a)) + abs(u_dimensions.y * sin(a));
+
       vec2 f = $calcPoint(lineDist * 0.5, a);
       vec2 t = $calcPoint(lineDist * 0.5, $degToRad(d + 180.0));
       vec2 gradVec = t - f;
-      float dist = dot((v_textureCoordinate.xy * u_dimensions) - f, gradVec) / dot(gradVec, gradVec);
+      float dist = dot(v_textureCoordinate.xy * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
 
       float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
-      vec4 colorOut = mix(colors[0], colors[1], stopCalc);
+      vec4 colorOut = $fromLinear(mix($toLinear(colors[0]), $toLinear(colors[1]), stopCalc));
       for(int i = 1; i < ${colors}-1; i++) {
         stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
         colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
       }
-      return mix(maskColor, colorOut, colorOut.a);
+      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
     `;
   };
 }

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 mix(maskColor, colorOut, colorOut.a);
+      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
     `;
   };
 }