@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta20

package/src/core/shaders/webgl/Default.ts

@@ -57,15 +57,15 @@ export const Default: WebGlShaderType = {
     varying vec2 v_nodeCoords;
 
     void main() {
-      vec2 normalized = a_position * u_pixelRatio;
-      vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
+      vec2 normalized = a_position * u_pixelRatio / u_resolution;
+      vec2 zero_two = normalized * 2.0;
+      vec2 clip_space = zero_two - 1.0;
 
       v_color = a_color;
-      v_nodeCoords = a_nodeCoords;
       v_textureCoords = a_textureCoords;
+      v_nodeCoords = a_nodeCoords;
 
-      gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
-      gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
+      gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
     }
   `,
   fragment: `
@@ -82,8 +82,7 @@ export const Default: WebGlShaderType = {
     varying vec2 v_textureCoords;
 
     void main() {
-      vec4 color = texture2D(u_texture, v_textureCoords);
-      gl_FragColor = vec4(v_color) * texture2D(u_texture, v_textureCoords);
+      gl_FragColor = v_color * texture2D(u_texture, v_textureCoords);
     }
   `,
 };

package/src/core/shaders/webgl/HolePunch.ts

@@ -26,17 +26,14 @@ import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
 export const HolePunch: WebGlShaderType<HolePunchProps> = {
   props: HolePunchTemplate.props,
   update() {
-    this.uniform2f('u_pos', this.props!.x, this.props!.y);
+    const props = this.props!;
+    this.uniform2f('u_pos', props.x, props.y);
     //precalculate to halfSize once instead of for every pixel
-    this.uniform2f('u_size', this.props!.width * 0.5, this.props!.height * 0.5);
+    this.uniform2f('u_size', props.w * 0.5, props.h * 0.5);
 
     this.uniform4fa(
       'u_radius',
-      calcFactoredRadiusArray(
-        this.props!.radius as Vec4,
-        this.props!.width,
-        this.props!.height,
-      ),
+      calcFactoredRadiusArray(props.radius as Vec4, props.w, props.h),
     );
   },
   getCacheMarkers(props: HolePunchProps) {

package/src/core/shaders/webgl/LinearGradient.ts

@@ -27,11 +27,12 @@ import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
 export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
   props: LinearGradientTemplate.props,
   update() {
-    this.uniform1f('u_angle', this.props!.angle - (Math.PI / 180) * 90);
-    this.uniform1fv('u_stops', new Float32Array(this.props!.stops));
+    const props = this.props!;
+    this.uniform1f('u_angle', props.angle - (Math.PI / 180) * 90);
+    this.uniform1fv('u_stops', new Float32Array(props.stops));
     const colors: number[] = [];
-    for (let i = 0; i < this.props!.colors.length; i++) {
-      const norm = getNormalizedRgbaComponents(this.props!.colors[i]!);
+    for (let i = 0; i < props.colors.length; i++) {
+      const norm = getNormalizedRgbaComponents(props.colors[i]!);
       colors.push(norm[0], norm[1], norm[2], norm[3]);
     }
     this.uniform4fv('u_colors', new Float32Array(colors));
@@ -48,6 +49,8 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
     # endif
 
     #define PI 3.14159265359
+    #define MAX_STOPS ${props.colors.length}
+    #define LAST_STOP ${props.colors.length - 1}
 
     uniform float u_alpha;
     uniform vec2 u_dimensions;
@@ -55,8 +58,8 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
     uniform sampler2D u_texture;
 
     uniform float u_angle;
-    uniform float u_stops[${props.stops.length}];
-    uniform vec4 u_colors[${props.colors.length}];
+    uniform float u_stops[MAX_STOPS];
+    uniform vec4 u_colors[MAX_STOPS];
 
     varying vec4 v_color;
     varying vec2 v_textureCoords;
@@ -65,6 +68,27 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
       return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
     }
 
+    vec4 getGradientColor(float dist) {
+      dist = clamp(dist, 0.0, 1.0);
+
+      if(dist <= u_stops[0]) {
+        return u_colors[0];
+      }
+
+      if(dist >= u_stops[LAST_STOP]) {
+        return u_colors[LAST_STOP];
+      }
+
+      for(int i = 0; i < LAST_STOP; i++) {
+        float left = u_stops[i];
+        float right = u_stops[i + 1];
+        if(dist >= left && dist <= right) {
+          float lDist = smoothstep(left, right, dist);
+          return mix(u_colors[i], u_colors[i + 1], lDist);
+        }
+      }
+    }
+
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
       float a = u_angle;
@@ -73,8 +97,9 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
       vec2 t = calcPoint(lineDist * 0.5, a + PI);
       vec2 gradVec = t - f;
       float dist = dot(v_textureCoords.xy * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
-      ${genGradientColors(props.stops.length)}
-      gl_FragColor = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
+      vec4 colorOut = getGradientColor(dist);
+      vec3 blendedRGB = mix(color.rgb, colorOut.rgb, clamp(colorOut.a, 0.0, 1.0));
+      gl_FragColor = vec4(blendedRGB, color.a);
     }
   `;
   },

package/src/core/shaders/webgl/RadialGradient.ts

@@ -21,23 +21,23 @@ import {
   RadialGradientTemplate,
   type RadialGradientProps,
 } from '../templates/RadialGradientTemplate.js';
-import { genGradientColors } from '../../renderers/webgl/internal/ShaderUtils.js';
-import type { WebGlRenderer } from '../../renderers/webgl/WebGlRenderer.js';
 import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+import type { WebGlRenderer } from '../../renderers/webgl/WebGlRenderer.js';
 
 export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
   props: RadialGradientTemplate.props,
   update(node: CoreNode) {
+    const props = this.props!;
     this.uniform2f(
       'u_projection',
-      this.props!.pivot[0] * node.width,
-      this.props!.pivot[1] * node.height,
+      props.pivot[0] * node.w,
+      props.pivot[1] * node.h,
     );
-    this.uniform2f('u_size', this.props!.width * 0.5, this.props!.height * 0.5);
-    this.uniform1fv('u_stops', new Float32Array(this.props!.stops));
+    this.uniform2f('u_size', props.w, props.h);
+    this.uniform1fv('u_stops', new Float32Array(props.stops));
     const colors: number[] = [];
-    for (let i = 0; i < this.props!.colors.length; i++) {
-      const norm = getNormalizedRgbaComponents(this.props!.colors[i]!);
+    for (let i = 0; i < props.colors.length; i++) {
+      const norm = getNormalizedRgbaComponents(props.colors[i]!);
       colors.push(norm[0], norm[1], norm[2], norm[3]);
     }
     this.uniform4fv('u_colors', new Float32Array(colors));
@@ -47,38 +47,62 @@ export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
   },
   fragment(renderer: WebGlRenderer, props: RadialGradientProps) {
     return `
-    # ifdef GL_FRAGMENT_PRECISION_HIGH
-    precision highp float;
-    # else
-    precision mediump float;
-    # endif
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
 
-    #define PI 3.14159265359
+      #define MAX_STOPS ${props.colors.length}
+      #define LAST_STOP ${props.colors.length - 1}
 
-    uniform float u_alpha;
-    uniform vec2 u_dimensions;
+      uniform float u_alpha;
+      uniform vec2 u_dimensions;
 
-    uniform sampler2D u_texture;
+      uniform sampler2D u_texture;
 
-    uniform vec2 u_projection;
-    uniform vec2 u_size;
-    uniform float u_stops[${props.stops.length}];
-    uniform vec4 u_colors[${props.colors.length}];
+      uniform vec2 u_projection;
+      uniform vec2 u_size;
 
-    varying vec4 v_color;
-    varying vec2 v_textureCoords;
+      uniform float u_stops[MAX_STOPS];
+      uniform vec4 u_colors[MAX_STOPS];
 
-    vec2 calcPoint(float d, float angle) {
-      return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
-    }
+      varying vec4 v_color;
+      varying vec2 v_textureCoords;
+      varying vec2 v_nodeCoords;
 
-    void main() {
-      vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      vec2 point = v_textureCoords.xy * u_dimensions;
-      float dist = length((point - u_projection) / u_size);
-      ${genGradientColors(props.stops.length)}
-      gl_FragColor = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
-    }
-  `;
+      vec4 getGradientColor(float dist) {
+        dist = clamp(dist, 0.0, 1.0);
+
+        if(dist <= u_stops[0]) {
+          return u_colors[0];
+        }
+
+        if(dist >= u_stops[LAST_STOP]) {
+          return u_colors[LAST_STOP];
+        }
+
+        for(int i = 0; i < LAST_STOP; i++) {
+          float left = u_stops[i];
+          float right = u_stops[i + 1];
+          if(dist >= left && dist <= right) {
+            float lDist = smoothstep(left, right, dist);
+            return mix(u_colors[i], u_colors[i + 1], lDist);
+          }
+        }
+
+        return u_colors[LAST_STOP];
+      }
+
+      void main() {
+        vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
+        vec2 point = v_nodeCoords.xy * u_dimensions;
+        float dist = length((point - u_projection) / u_size);
+
+        vec4 colorOut = getGradientColor(dist);
+        vec3 blendedRGB = mix(color.rgb, colorOut.rgb, clamp(colorOut.a, 0.0, 1.0));
+        gl_FragColor = vec4(blendedRGB, color.a);
+      }
+    `;
   },
 };

package/src/core/shaders/webgl/Rounded.ts

@@ -34,11 +34,7 @@ export const Rounded: WebGlShaderType<RoundedProps> = {
   update(node: CoreNode) {
     this.uniform4fa(
       'u_radius',
-      calcFactoredRadiusArray(
-        this.props!.radius as Vec4,
-        node.width,
-        node.height,
-      ),
+      calcFactoredRadiusArray(this.props!.radius as Vec4, node.w, node.h),
     );
   },
   vertex: `
@@ -84,6 +80,7 @@ export const Rounded: WebGlShaderType<RoundedProps> = {
     uniform vec2 u_resolution;
     uniform vec2 u_dimensions;
     uniform float u_alpha;
+    uniform float u_pixelRatio;
     uniform sampler2D u_texture;
 
     //custom uniforms
@@ -107,7 +104,8 @@ export const Rounded: WebGlShaderType<RoundedProps> = {
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
       float boxDist = roundedBox(boxUv, halfDimensions, u_radius);
 
-      float roundedAlpha = 1.0 - smoothstep(0.0, 1.0, boxDist);
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float roundedAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, boxDist);
 
       vec4 resColor = vec4(0.0);
       resColor = mix(resColor, color, roundedAlpha);

package/src/core/shaders/webgl/RoundedWithBorder.ts

@@ -16,34 +16,80 @@
  */
 
 import type { CoreNode } from '../../CoreNode.js';
-import { calcFactoredRadiusArray, valuesAreEqual } from '../../lib/utils.js';
+import { calcFactoredRadiusArray } from '../../lib/utils.js';
 import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
 import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
 import {
   RoundedWithBorderTemplate,
   type RoundedWithBorderProps,
 } from '../templates/RoundedWithBorderTemplate.js';
-import { Rounded } from './Rounded.js';
 
 export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
   props: RoundedWithBorderTemplate.props,
   update(node: CoreNode) {
-    this.uniformRGBA('u_border_color', this.props!['border-color']);
-    this.uniform4fa('u_border_width', this.props!['border-width'] as Vec4);
-    this.uniform1i(
-      'u_border_asym',
-      valuesAreEqual(this.props!['border-width'] as number[]) ? 0 : 1,
-    );
+    this.uniformRGBA('u_borderColor', this.props!['border-color']);
+    this.uniform4fa('u_borderWidth', this.props!['border-w'] as Vec4);
+
     this.uniform4fa(
       'u_radius',
-      calcFactoredRadiusArray(
-        this.props!.radius as Vec4,
-        node.width,
-        node.height,
-      ),
+      calcFactoredRadiusArray(this.props!.radius as Vec4, node.w, node.h),
     );
   },
-  vertex: Rounded.vertex,
+  vertex: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    attribute vec2 a_position;
+    attribute vec2 a_textureCoords;
+    attribute vec4 a_color;
+    attribute vec2 a_nodeCoords;
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform vec2 u_dimensions;
+
+    uniform vec4 u_radius;
+    uniform vec4 u_borderWidth;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    varying vec4 v_innerRadius;
+    varying vec2 v_innerSize;
+    varying vec2 v_halfDimensions;
+    varying float v_borderZero;
+
+    void main() {
+      vec2 normalized = a_position * u_pixelRatio;
+      vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
+
+      v_color = a_color;
+      v_nodeCoords = a_nodeCoords;
+      v_textureCoords = a_textureCoords;
+
+      v_halfDimensions = u_dimensions * 0.5;
+
+      v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0;
+
+      if(v_borderZero == 0.0) {
+        v_innerRadius = vec4(
+          max(0.0, u_radius.x - max(u_borderWidth.x, u_borderWidth.w) - 0.5),
+          max(0.0, u_radius.y - max(u_borderWidth.x, u_borderWidth.y) - 0.5),
+          max(0.0, u_radius.z - max(u_borderWidth.z, u_borderWidth.y) - 0.5),
+          max(0.0, u_radius.w - max(u_borderWidth.z, u_borderWidth.w) - 0.5)
+        );
+
+        v_innerSize = (vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]) + 1.0, u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) - 2.0) * 0.5;
+      }
+
+      gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
+      gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
+    }
+  `,
   fragment: `
     # ifdef GL_FRAGMENT_PRECISION_HIGH
     precision highp float;
@@ -59,14 +105,18 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
 
     uniform vec4 u_radius;
 
-    uniform vec4 u_border_width;
-    uniform vec4 u_border_color;
-    uniform int u_border_asym;
+    uniform vec4 u_borderWidth;
+    uniform vec4 u_borderColor;
 
     varying vec4 v_color;
     varying vec2 v_textureCoords;
     varying vec2 v_nodeCoords;
 
+    varying vec2 v_halfDimensions;
+    varying vec4 v_innerRadius;
+    varying vec2 v_innerSize;
+    varying float v_borderZero;
+
     float roundedBox(vec2 p, vec2 s, vec4 r) {
       r.xy = (p.x > 0.0) ? r.yz : r.xw;
       r.x = (p.y > 0.0) ? r.y : r.x;
@@ -74,40 +124,28 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
     }
 
-    float asymBorderWidth(vec2 p, float d, vec4 r, vec4 w) {
-      r.x = (r.x - (max(w.w, w.x) - min(w.w, w.x))) * 0.5;
-      r.y = (r.y - (max(w.y, w.x) - min(w.y, w.x))) * 0.5;
-      r.z = (r.z - (max(w.y, w.z) - min(w.y, w.z))) * 0.5;
-      r.w = (r.w - (max(w.w, w.z) - min(w.w, w.z))) * 0.5;
-
-      p.x += w.y > w.w ? (w.y - w.w) * 0.5 : -(w.w - w.y) * 0.5;
-      p.y += w.z > w.x ? (w.z - w.x) * 0.5 : -(w.x - w.z) * 0.5;
-
-      vec2 size = vec2(u_dimensions.x - (w[3] + w[1]), u_dimensions.y - (w[0] + w[2])) * 0.5;
-      float borderDist = roundedBox(p, size + u_pixelRatio, r);
-      return 1.0 - smoothstep(0.0, u_pixelRatio, max(-borderDist, d));
-    }
-
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      vec2 halfDimensions = (u_dimensions * 0.5);
 
-      vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
-      float boxDist = roundedBox(boxUv, halfDimensions, u_radius);
+      vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
+      float outerDist = roundedBox(boxUv, v_halfDimensions, u_radius);
 
-      float roundedAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
-      float borderAlpha = 0.0;
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
 
-      if(u_border_asym == 1) {
-        borderAlpha = asymBorderWidth(boxUv, boxDist, u_radius, u_border_width);
-      }
-      else {
-        borderAlpha = 1.0 - smoothstep(u_border_width[0] - u_pixelRatio, u_border_width[0], abs(boxDist));
+      if(v_borderZero == 1.0) {
+        gl_FragColor = mix(vec4(0.0), color, outerAlpha) * u_alpha;
+        return;
       }
 
-      vec4 resColor = vec4(0.0);
-      resColor = mix(resColor, color, min(color.a, roundedAlpha));
-      resColor = mix(resColor, u_border_color, min(u_border_color.a, min(borderAlpha, roundedAlpha)));
+      boxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
+      boxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
+
+      float innerDist = roundedBox(boxUv, v_innerSize, v_innerRadius);
+      float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
+
+      vec4 resColor = mix(u_borderColor, color, innerAlpha);
+      resColor = mix(vec4(0.0), resColor, outerAlpha);
       gl_FragColor = resColor * u_alpha;
     }
   `,

package/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts

@@ -16,40 +16,91 @@
  */
 
 import type { CoreNode } from '../../CoreNode.js';
-import { calcFactoredRadiusArray, valuesAreEqual } from '../../lib/utils.js';
+import { calcFactoredRadiusArray } from '../../lib/utils.js';
 import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
 import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
 import {
   RoundedWithBorderAndShadowTemplate,
   type RoundedWithBorderAndShadowProps,
 } from '../templates/RoundedWithBorderAndShadowTemplate.js';
-import { Shadow } from './Shadow.js';
 
 export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndShadowProps> =
   {
     props: RoundedWithBorderAndShadowTemplate.props,
     update(node: CoreNode) {
-      this.uniformRGBA('u_border_color', this.props!['border-color']);
-      this.uniform4fa('u_border_width', this.props!['border-width'] as Vec4);
+      const props = this.props!;
+      this.uniformRGBA('u_borderColor', props['border-color']);
+      this.uniform4fa('u_borderWidth', props['border-w'] as Vec4);
 
-      this.uniform1i(
-        'u_border_asym',
-        valuesAreEqual(this.props!['border-width'] as number[]) ? 0 : 1,
-      );
-
-      this.uniformRGBA('u_shadow_color', this.props!['shadow-color']);
-      this.uniform4fa('u_shadow', this.props!['shadow-projection']);
+      this.uniformRGBA('u_shadowColor', props['shadow-color']);
+      this.uniform4fa('u_shadow', props['shadow-projection']);
 
       this.uniform4fa(
         'u_radius',
-        calcFactoredRadiusArray(
-          this.props!.radius as Vec4,
-          node.width,
-          node.height,
-        ),
+        calcFactoredRadiusArray(props.radius as Vec4, node.w, node.h),
       );
     },
-    vertex: Shadow.vertex as string,
+    vertex: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    attribute vec2 a_position;
+    attribute vec2 a_textureCoords;
+    attribute vec4 a_color;
+    attribute vec2 a_nodeCoords;
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform float u_rtt;
+    uniform vec2 u_dimensions;
+
+    uniform vec4 u_shadow;
+    uniform vec4 u_radius;
+    uniform vec4 u_borderWidth;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    varying vec4 v_innerRadius;
+    varying vec2 v_innerSize;
+    varying vec2 v_halfDimensions;
+    varying float v_borderZero;
+
+    void main() {
+      vec2 screenSpace = vec2(2.0 / u_resolution.x,  -2.0 / u_resolution.y);
+      vec2 outerEdge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
+
+      vec2 shadowEdge = outerEdge * ((u_shadow.w * 2.0)+ u_shadow.z) + u_shadow.xy;
+      vec2 normVertexPos = a_position * u_pixelRatio;
+
+      vec2 vertexPos = (a_position + outerEdge + shadowEdge) * u_pixelRatio;
+      gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
+
+      v_halfDimensions = u_dimensions * 0.5;
+
+      v_color = a_color;
+      v_nodeCoords = a_nodeCoords + (screenSpace + shadowEdge) / (u_dimensions);
+      v_textureCoords = a_textureCoords + (screenSpace + shadowEdge) / (u_dimensions);
+
+      v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0;
+
+
+      if(v_borderZero == 0.0) {
+        v_innerRadius = vec4(
+          max(0.0, u_radius.x - max(u_borderWidth.x, u_borderWidth.w) - 0.5),
+          max(0.0, u_radius.y - max(u_borderWidth.x, u_borderWidth.y) - 0.5),
+          max(0.0, u_radius.z - max(u_borderWidth.z, u_borderWidth.y) - 0.5),
+          max(0.0, u_radius.w - max(u_borderWidth.z, u_borderWidth.w) - 0.5)
+        );
+
+        v_innerSize = (vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]) - 1.0, u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) - 2.0) * 0.5;
+      }
+    }
+  `,
     fragment: `
     # ifdef GL_FRAGMENT_PRECISION_HIGH
     precision highp float;
@@ -65,16 +116,20 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
     uniform float u_rtt;
 
     uniform vec4 u_radius;
-    uniform vec4 u_border_width;
-    uniform vec4 u_border_color;
-    uniform int u_border_asym;
-    uniform vec4 u_shadow_color;
+    uniform vec4 u_borderWidth;
+    uniform vec4 u_borderColor;
+    uniform vec4 u_shadowColor;
     uniform vec4 u_shadow;
 
     varying vec4 v_color;
     varying vec2 v_textureCoords;
     varying vec2 v_nodeCoords;
 
+    varying vec2 v_halfDimensions;
+    varying vec4 v_innerRadius;
+    varying vec2 v_innerSize;
+    varying float v_borderZero;
+
     float roundedBox(vec2 p, vec2 s, vec4 r) {
       r.xy = (p.x > 0.0) ? r.yz : r.xw;
       r.x = (p.y > 0.0) ? r.y : r.x;
@@ -82,20 +137,6 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
     }
 
-    float asymBorderWidth(vec2 p, float d, vec4 r, vec4 w) {
-      r.x = (r.x - (max(w.w, w.x) - min(w.w, w.x))) * 0.5;
-      r.y = (r.y - (max(w.y, w.x) - min(w.y, w.x))) * 0.5;
-      r.z = (r.z - (max(w.y, w.z) - min(w.y, w.z))) * 0.5;
-      r.w = (r.w - (max(w.w, w.z) - min(w.w, w.z))) * 0.5;
-
-      p.x += w.y > w.w ? (w.y - w.w) * 0.5 : -(w.w - w.y) * 0.5;
-      p.y += w.z > w.x ? (w.z - w.x) * 0.5 : -(w.x - w.z) * 0.5;
-
-      vec2 size = vec2(u_dimensions.x - (w[3] + w[1]), u_dimensions.y - (w[0] + w[2])) * 0.5;
-      float borderDist = roundedBox(p, size, r);
-      return 1.0 - smoothstep(0.0, u_pixelRatio, max(-borderDist, d));
-    }
-
     float shadowBox(vec2 p, vec2 s, vec4 r) {
       r.xy = (p.x > 0.0) ? r.yz : r.xw;
       r.x = (p.y > 0.0) ? r.y : r.x;
@@ -106,27 +147,29 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
 
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      vec2 halfDimensions = (u_dimensions * 0.5);
 
-      vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
-      float outerBoxDist = roundedBox(boxUv, halfDimensions, u_radius);
+      vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
+      float outerDist = roundedBox(boxUv, v_halfDimensions - 1.0, u_radius);
 
-      float roundedAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, outerBoxDist);
-      float borderAlpha = 0.0;
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
 
-      if(u_border_asym == 1) {
-        borderAlpha = asymBorderWidth(boxUv, outerBoxDist, u_radius, u_border_width);
-      }
-      else {
-        borderAlpha = 1.0 - smoothstep(u_border_width[0], u_border_width[0], abs(outerBoxDist));
+      float shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w, u_radius + u_shadow.z);
+      vec4 shadow = mix(vec4(0.0), u_shadowColor, shadowAlpha);
+
+      if(v_borderZero == 1.0) {
+        gl_FragColor = mix(shadow, color, outerAlpha) * u_alpha;
+        return;
       }
 
-      float shadowAlpha = shadowBox(boxUv - u_shadow.xy, halfDimensions + u_shadow.w, u_radius + u_shadow.z);
+      boxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
+      boxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
+
+      float innerDist = roundedBox(boxUv, v_innerSize, v_innerRadius);
+      float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
 
-      vec4 resColor = vec4(0.0);
-      resColor = mix(resColor, u_shadow_color, shadowAlpha);
-      resColor = mix(resColor, color, min(color.a, roundedAlpha));
-      resColor = mix(resColor, u_border_color, min(u_border_color.a, min(borderAlpha, roundedAlpha)));
+      vec4 resColor = mix(u_borderColor, color, innerAlpha);
+      resColor = mix(shadow, resColor, outerAlpha);
       gl_FragColor = resColor * u_alpha;
     }
   `,