@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta21

package/src/core/shaders/{templates/shaderUtils.ts → utils.ts}

@@ -14,9 +14,8 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import { assertTruthy } from '../../../utils.js';
-import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import { assertTruthy } from '../../utils.js';
+import type { Vec4 } from '../renderers/webgl/internal/ShaderUtils.js';
 
 export const validateArrayLength4 = (value: number | number[]): Vec4 => {
   if (!Array.isArray(value)) {

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

@@ -14,8 +14,6 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import { valuesAreEqual } from '../../lib/utils.js';
 import {
   BorderTemplate,
   type BorderProps,
@@ -25,14 +23,93 @@ import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
 
 export const Border: WebGlShaderType<BorderProps> = {
   props: BorderTemplate.props,
-  update() {
-    this.uniform4fa('u_width', this.props!.width as Vec4);
-    this.uniform1i(
-      'u_asymWidth',
-      valuesAreEqual(this.props!.width as number[]) ? 0 : 1,
-    );
-    this.uniformRGBA('u_color', this.props!.color);
+  update(node) {
+    this.uniform4fa('u_borderWidth', this.props!.w as Vec4);
+    this.uniformRGBA('u_borderColor', this.props!.color);
+    this.uniform1f('u_borderGap', this.props!.gap as number);
+    this.uniform1f('u_borderAlign', this.props!.align as number);
   },
+  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;
+    uniform float u_borderGap;
+    uniform float u_borderAlign;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    varying vec2 v_innerSize;
+    varying vec2 v_outerSize;
+    varying vec2 v_outerBorderUv;
+    varying vec2 v_innerBorderUv;
+    varying vec2 v_halfDimensions;
+    varying float v_edgeWidth;
+
+    void main() {
+      vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
+      vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
+      v_edgeWidth = 1.0 / u_pixelRatio;
+
+      float borderTop = u_borderWidth.x;
+      float borderRight = u_borderWidth.y;
+      float borderBottom = u_borderWidth.z;
+      float borderLeft = u_borderWidth.w;
+
+      v_outerBorderUv = vec2(0.0);
+      v_innerBorderUv = vec2(0.0);
+
+      vec2 borderSize = vec2(borderRight + borderLeft, borderTop + borderBottom);
+      vec2 extraSize = borderSize * u_borderAlign;
+      float gapLeft = step(0.001, borderLeft) * u_borderGap;
+      float gapRight = step(0.001, borderRight) * u_borderGap;
+      float gapTop = step(0.001, borderTop) * u_borderGap;
+      float gapBottom = step(0.001, borderBottom) * u_borderGap;
+      vec2 gapSize = vec2(gapLeft + gapRight, gapTop + gapBottom);
+
+      v_outerSize = (u_dimensions + gapSize + extraSize) * 0.5;
+      v_innerSize = v_outerSize - borderSize * 0.5;
+
+      // Use sign() to avoid branching
+      vec2 borderDiff = vec2(borderRight - borderLeft, borderBottom - borderTop);
+      vec2 signDiff = sign(borderDiff);
+      borderDiff = abs(borderDiff);
+
+      vec2 gapDiff = vec2(gapRight - gapLeft, gapBottom - gapTop);
+      vec2 signGapDiff = sign(gapDiff);
+      gapDiff = abs(gapDiff);
+
+      v_outerBorderUv = -signDiff * borderDiff * u_borderAlign * 0.5 - signGapDiff * gapDiff * 0.5;
+      v_innerBorderUv = v_outerBorderUv + signDiff * borderDiff * 0.5;
+
+      vec2 edgeOffsetExtra = step(u_dimensions * 0.5, v_outerSize) * edge * (extraSize + u_borderGap);
+      vec2 borderEdge = edgeOffsetExtra;
+
+      vec2 vertexPos = (a_position + edge + borderEdge) * 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_color = a_color;
+      v_nodeCoords = a_nodeCoords + (screenSpace + borderEdge) / (u_dimensions);
+      v_textureCoords = a_textureCoords + (screenSpace + borderEdge) / (u_dimensions);
+
+      v_halfDimensions = u_dimensions * 0.5;
+    }
+  `,
   fragment: `
     # ifdef GL_FRAGMENT_PRECISION_HIGH
     precision highp float;
@@ -47,50 +124,50 @@ export const Border: WebGlShaderType<BorderProps> = {
     uniform vec2 u_dimensions;
     uniform sampler2D u_texture;
 
-    uniform vec4 u_width;
-    uniform vec4 u_color;
-
-    uniform int u_asymWidth;
+    uniform vec4 u_borderWidth;
+    uniform vec4 u_borderColor;
+    uniform float u_borderGap;
 
     varying vec4 v_color;
-    varying vec2 v_position;
+    varying vec2 v_nodeCoords;
     varying vec2 v_textureCoords;
 
+    varying vec2 v_innerSize;
+    varying vec2 v_outerSize;
+    varying vec2 v_outerBorderUv;
+    varying vec2 v_innerBorderUv;
+    varying vec2 v_halfDimensions;
+    varying float v_edgeWidth;
+
     float box(vec2 p, vec2 s) {
-      vec2 q = abs(p) - (s - (4.0 - u_pixelRatio));
+      vec2 q = abs(p) - s;
       return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0)));
     }
 
-    float asymBorderWidth(vec2 p, float d, vec4 w) {
-      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 = box(p, size + 2.0);
-      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_textureCoords.xy * u_dimensions - halfDimensions;
-      float boxDist = box(boxUv, halfDimensions);
+      vec4 resultColor = vec4(0.0);
+      vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
 
-      float boxAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
-      float borderAlpha = 0.0;
+      float outerDist = box(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth);
+      float innerDist = box(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth);
 
-      if(u_asymWidth == 1) {
-        borderAlpha = asymBorderWidth(boxUv, boxDist, u_width);
-      }
-      else {
-        borderAlpha = 1.0 - smoothstep(u_width[0], u_width[0], abs(boxDist));
+      if(u_borderGap == 0.0) {
+        resultColor = mix(resultColor, u_borderColor, 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, outerDist));
+        resultColor = mix(resultColor, color, 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist));
+        gl_FragColor = resultColor * u_alpha;
+        return;
       }
 
-      vec4 resColor = vec4(0.0);
-      resColor = mix(resColor, color, min(color.a, boxAlpha));
-      resColor = mix(resColor, u_color, min(u_color.a, min(borderAlpha, boxAlpha)));
-      gl_FragColor = resColor * u_alpha;
+      float nodeDist = box(boxUv, v_halfDimensions - v_edgeWidth);
+      float nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
+
+      float borderDist = max(-innerDist, outerDist);
+      float borderAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist);
+      resultColor = mix(resultColor, color, nodeAlpha);
+      resultColor = mix(resultColor, u_borderColor, borderAlpha * u_borderColor.a);
+
+      gl_FragColor = resultColor * u_alpha;
     }
   `,
 };

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);