@solidtv/renderer 1.0.0

package/dist/src/core/shaders/templates/ShadowTemplate.js

@@ -0,0 +1,50 @@
+export function getShadowProps(prefix) {
+    const pf = prefix && prefix.length > 0 ? `${prefix}-` : '';
+    const projection = pf + 'projection';
+    return {
+        [pf + 'color']: 0x000000ff,
+        [projection]: {
+            default: [0, 0, 5, 5],
+        },
+        [pf + 'x']: {
+            default: 0,
+            set(value, props) {
+                props[projection][0] = value;
+            },
+            get(props) {
+                return props[projection][0];
+            },
+        },
+        [pf + 'y']: {
+            default: 0,
+            set(value, props) {
+                props[projection][1] = value;
+            },
+            get(props) {
+                return props[projection][1];
+            },
+        },
+        [pf + 'blur']: {
+            default: 10,
+            set(value, props) {
+                props[projection][2] = value;
+            },
+            get(props) {
+                return props[projection][2];
+            },
+        },
+        [pf + 'spread']: {
+            default: 10,
+            set(value, props) {
+                props[projection][3] = value;
+            },
+            get(props) {
+                return props[projection][3];
+            },
+        },
+    };
+}
+export const ShadowTemplate = {
+    props: getShadowProps(),
+};
+//# sourceMappingURL=ShadowTemplate.js.map

package/dist/src/core/shaders/templates/ShadowTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowTemplate.js","sourceRoot":"","sources":["../../../../../src/core/shaders/templates/ShadowTemplate.ts"],"names":[],"mappings":"AAkCA,MAAM,UAAU,cAAc,CAC5B,MAAU;IAEV,MAAM,EAAE,GAAG,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3D,MAAM,UAAU,GAAG,EAAE,GAAG,YAAY,CAAC;IAErC,OAAO;QACL,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,UAAU;QAC1B,CAAC,UAAU,CAAC,EAAE;YACZ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;SACtB;QACD,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE;YACV,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACd,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YAC/B,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9B,CAAC;SACF;QACD,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE;YACV,OAAO,EAAE,CAAC;YACV,GAAG,CAAC,KAAK,EAAE,KAAK;gBACd,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YAC/B,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9B,CAAC;SACF;QACD,CAAC,EAAE,GAAG,MAAM,CAAC,EAAE;YACb,OAAO,EAAE,EAAE;YACX,GAAG,CAAC,KAAK,EAAE,KAAK;gBACd,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YAC/B,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9B,CAAC;SACF;QACD,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE;YACf,OAAO,EAAE,EAAE;YACX,GAAG,CAAC,KAAK,EAAE,KAAK;gBACd,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YAC/B,CAAC;YACD,GAAG,CAAC,KAAK;gBACP,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9B,CAAC;SACF;KAC8B,CAAC;AACpC,CAAC;AAID,MAAM,CAAC,MAAM,cAAc,GAAgC;IACzD,KAAK,EAAE,cAAc,EAAsB;CAC5C,CAAC"}

package/dist/src/core/shaders/utils.d.ts

@@ -0,0 +1,5 @@
+import type { Vec4 } from '../renderers/webgl/internal/ShaderUtils.js';
+export declare const validateArrayLength4: (value: number | number[]) => Vec4;
+export type PrefixedType<T, P extends string | undefined = undefined> = {
+    [Key in keyof T as P extends string ? `${P}-${string & Key}` : Key]: T[Key];
+};

package/dist/src/core/shaders/utils.js

@@ -0,0 +1,25 @@
+import { assertTruthy } from '../../utils.js';
+export const validateArrayLength4 = (value) => {
+    if (!Array.isArray(value)) {
+        return [value, value, value, value];
+    }
+    assertTruthy(value);
+    if (value.length === 4) {
+        return value;
+    }
+    if (value.length === 3) {
+        value[3] = value[0];
+        return value;
+    }
+    if (value.length === 2) {
+        value[2] = value[0];
+        value[3] = value[1];
+        return value;
+    }
+    value[0] = value[0] || 0;
+    value[1] = value[0];
+    value[2] = value[0];
+    value[3] = value[0];
+    return value;
+};
+//# sourceMappingURL=utils.js.map

package/dist/src/core/shaders/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/core/shaders/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAQ,EAAE;IACrE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1B,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IACtC,CAAC;IACD,YAAY,CAAC,KAAK,CAAC,CAAC;IACpB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,KAAa,CAAC;IACvB,CAAC;IACD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAE,CAAC;QACrB,OAAO,KAAa,CAAC;IACvB,CAAC;IACD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAE,CAAC;QACrB,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAE,CAAC;QACrB,OAAO,KAAa,CAAC;IACvB,CAAC;IACD,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACzB,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACpB,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACpB,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACpB,OAAO,KAAa,CAAC;AACvB,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+import { type BorderProps } from '../templates/BorderTemplate.js';
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+export declare const Border: WebGlShaderType<BorderProps>;

package/dist/src/core/shaders/webgl/Border.js

@@ -0,0 +1,153 @@
+import { BorderTemplate, } from '../templates/BorderTemplate.js';
+export const Border = {
+    props: BorderTemplate.props,
+    update(node) {
+        this.uniform4fa('u_borderWidth', this.props.w);
+        this.uniformRGBA('u_borderColor', this.props.color);
+        this.uniform1f('u_borderGap', this.props.gap);
+        this.uniform1f('u_borderAlign', this.props.align);
+    },
+    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_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;
+    # else
+    precision mediump float;
+    # endif
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform float u_alpha;
+
+    uniform vec2 u_dimensions;
+    uniform sampler2D u_texture;
+
+    uniform vec4 u_borderWidth;
+    uniform vec4 u_borderColor;
+    uniform float u_borderGap;
+
+    varying vec4 v_color;
+    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;
+      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0)));
+    }
+
+    void main() {
+      vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
+      vec4 resultColor = vec4(0.0);
+      vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
+
+      float outerDist = box(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth);
+      float innerDist = box(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth);
+
+      if(u_borderGap == 0.0) {
+        float outerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, outerDist);
+        float innerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist);
+        resultColor = mix(resultColor, u_borderColor, outerAlpha * u_borderColor.a);
+        resultColor = mix(resultColor, color, innerAlpha);
+        gl_FragColor = resultColor * u_alpha;
+        return;
+      }
+
+      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;
+    }
+  `,
+};
+//# sourceMappingURL=Border.js.map

package/dist/src/core/shaders/webgl/Border.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Border.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/Border.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AAIxC,MAAM,CAAC,MAAM,MAAM,GAAiC;IAClD,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,CAAC,IAAI;QACT,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,CAAS,CAAC,CAAC;QACxD,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC,CAAC;QACrD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC,KAAM,CAAC,GAAa,CAAC,CAAC;QACzD,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,KAAe,CAAC,CAAC;IAC/D,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DT;CACF,CAAC"}

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

@@ -0,0 +1,2 @@
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+export declare const Default: WebGlShaderType;

package/dist/src/core/shaders/webgl/Default.js

@@ -0,0 +1,51 @@
+export const Default = {
+    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;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    void main() {
+      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_textureCoords = a_textureCoords;
+      v_nodeCoords = a_nodeCoords;
+
+      gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
+    }
+  `,
+    fragment: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    uniform vec2 u_resolution;
+    uniform sampler2D u_texture;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+
+    void main() {
+      gl_FragColor = v_color * texture2D(u_texture, v_textureCoords);
+    }
+  `,
+};
+//# sourceMappingURL=Default.js.map

package/dist/src/core/shaders/webgl/Default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Default.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/Default.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAoB;IACtC,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;GAgBT;CACF,CAAC"}

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

@@ -0,0 +1,3 @@
+import { type HolePunchProps } from '../templates/HolePunchTemplate.js';
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+export declare const HolePunch: WebGlShaderType<HolePunchProps>;

package/dist/src/core/shaders/webgl/HolePunch.js

@@ -0,0 +1,49 @@
+import { calcFactoredRadiusArray } from '../../lib/utils.js';
+import { HolePunchTemplate, } from '../templates/HolePunchTemplate.js';
+export const HolePunch = {
+    props: HolePunchTemplate.props,
+    update() {
+        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', props.w * 0.5, props.h * 0.5);
+        this.uniform4fa('u_radius', calcFactoredRadiusArray(props.radius, props.w, props.h));
+    },
+    getCacheMarkers(props) {
+        return `radiusArray:${Array.isArray(props.radius)}`;
+    },
+    fragment: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    uniform float u_alpha;
+    uniform float u_pixelRatio;
+    uniform vec2 u_dimensions;
+    uniform sampler2D u_texture;
+
+    uniform vec2 u_size;
+    uniform vec2 u_pos;
+
+    uniform vec4 u_radius;
+
+    uniform vec4 u_color;
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+
+    void main() {
+      vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
+      vec2 p = (v_textureCoords.xy * u_dimensions.xy - u_pos) - u_size;
+      vec4 r = u_radius;
+      r.xy = (p.x > 0.0) ? r.yz : r.xw;
+      r.x = (p.y > 0.0) ? r.y : r.x;
+      p = abs(p) - u_size + r.x;
+      float dist = min(max(p.x, p.y), 0.0) + length(max(p, 0.0)) - r.x + 2.0;
+      float roundedAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, dist);
+      gl_FragColor = mix(color, vec4(0.0), min(color.a, roundedAlpha));
+    }
+  `,
+};
+//# sourceMappingURL=HolePunch.js.map

package/dist/src/core/shaders/webgl/HolePunch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HolePunch.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/HolePunch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EACL,iBAAiB,GAElB,MAAM,mCAAmC,CAAC;AAI3C,MAAM,CAAC,MAAM,SAAS,GAAoC;IACxD,KAAK,EAAE,iBAAiB,CAAC,KAAK;IAC9B,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;QAC1C,0DAA0D;QAC1D,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QAEvD,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,KAAK,CAAC,MAAc,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAChE,CAAC;IACJ,CAAC;IACD,eAAe,CAAC,KAAqB;QACnC,OAAO,eAAe,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IACtD,CAAC;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCT;CACF,CAAC"}

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

@@ -0,0 +1,3 @@
+import { type LinearGradientProps } from '../templates/LinearGradientTemplate.js';
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+export declare const LinearGradient: WebGlShaderType<LinearGradientProps>;

package/dist/src/core/shaders/webgl/LinearGradient.js

@@ -0,0 +1,114 @@
+import { getNormalizedRgbaComponents } from '../../lib/utils.js';
+import { LinearGradientTemplate, } from '../templates/LinearGradientTemplate.js';
+export const LinearGradient = {
+    props: LinearGradientTemplate.props,
+    update() {
+        const props = this.props;
+        this.uniform1f('u_angle', props.angle - (Math.PI / 180) * 90);
+        this.uniform1fv('u_stops', new Float32Array(props.stops));
+        const colors = [];
+        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));
+    },
+    getCacheMarkers(props) {
+        return `colors:${props.colors.length}`;
+    },
+    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;
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform vec2 u_dimensions;
+    uniform float u_angle;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying float v_dist;
+
+    const float PI = 3.14159265359;
+
+    vec2 calcPoint(float d, float angle) {
+      return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
+    }
+
+    void main() {
+      vec2 normalized = a_position * u_pixelRatio / u_resolution;
+      vec2 zero_two = normalized * 2.0;
+      vec2 clip_space = zero_two - 1.0;
+
+      gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
+
+      v_color = a_color;
+      v_textureCoords = a_textureCoords;
+
+      float a = u_angle;
+      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, a + PI);
+      vec2 gradVec = t - f;
+      float dist = dot(a_textureCoords * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
+      v_dist = dist;
+    }
+  `,
+    fragment(renderer, props) {
+        return `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    #define MAX_STOPS ${props.colors.length}
+    #define LAST_STOP ${props.colors.length - 1}
+
+    uniform sampler2D u_texture;
+    uniform float u_stops[MAX_STOPS];
+    uniform vec4 u_colors[MAX_STOPS];
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying float v_dist;
+
+    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;
+      vec4 colorOut = getGradientColor(v_dist);
+      vec3 blendedRGB = mix(color.rgb, colorOut.rgb, clamp(colorOut.a, 0.0, 1.0));
+      gl_FragColor = vec4(blendedRGB, color.a);
+    }
+  `;
+    },
+};
+//# sourceMappingURL=LinearGradient.js.map

package/dist/src/core/shaders/webgl/LinearGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/LinearGradient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAC;AAIhD,MAAM,CAAC,MAAM,cAAc,GAAyC;IAClE,KAAK,EAAE,sBAAsB,CAAC,KAAK;IACnC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;QAC9D,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1D,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,IAAI,GAAG,2BAA2B,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,CAAC;QACD,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IACxD,CAAC;IACD,eAAe,CAAC,KAA0B;QACxC,OAAO,UAAU,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CP;IACD,QAAQ,CAAC,QAAuB,EAAE,KAA0B;QAC1D,OAAO;;;;;;;wBAOa,KAAK,CAAC,MAAM,CAAC,MAAM;wBACnB,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsC5C,CAAC;IACF,CAAC;CACF,CAAC"}

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

@@ -0,0 +1,3 @@
+import { type RadialGradientProps } from '../templates/RadialGradientTemplate.js';
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+export declare const RadialGradient: WebGlShaderType<RadialGradientProps>;

package/dist/src/core/shaders/webgl/RadialGradient.js

@@ -0,0 +1,81 @@
+import { getNormalizedRgbaComponents } from '../../lib/utils.js';
+import { RadialGradientTemplate, } from '../templates/RadialGradientTemplate.js';
+export const RadialGradient = {
+    props: RadialGradientTemplate.props,
+    update(node) {
+        const props = this.props;
+        this.uniform2f('u_projection', props.pivot[0] * node.w, props.pivot[1] * node.h);
+        this.uniform2f('u_size', props.w, props.h);
+        this.uniform1fv('u_stops', new Float32Array(props.stops));
+        const colors = [];
+        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));
+    },
+    getCacheMarkers(props) {
+        return `colors:${props.colors.length}`;
+    },
+    fragment(renderer, props) {
+        return `
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
+
+      #define MAX_STOPS ${props.colors.length}
+      #define LAST_STOP ${props.colors.length - 1}
+
+      uniform float u_alpha;
+      uniform vec2 u_dimensions;
+
+      uniform sampler2D u_texture;
+
+      uniform vec2 u_projection;
+      uniform vec2 u_size;
+
+      uniform float u_stops[MAX_STOPS];
+      uniform vec4 u_colors[MAX_STOPS];
+
+      varying vec4 v_color;
+      varying vec2 v_textureCoords;
+      varying vec2 v_nodeCoords;
+
+      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);
+      }
+    `;
+    },
+};
+//# sourceMappingURL=RadialGradient.js.map

package/dist/src/core/shaders/webgl/RadialGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RadialGradient.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAC;AAIhD,MAAM,CAAC,MAAM,cAAc,GAAyC;IAClE,KAAK,EAAE,sBAAsB,CAAC,KAAK;IACnC,MAAM,CAAC,IAAc;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,CACZ,cAAc,EACd,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EACvB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CACxB,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1D,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,IAAI,GAAG,2BAA2B,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,CAAC;QACD,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IACxD,CAAC;IACD,eAAe,CAAC,KAA0B;QACxC,OAAO,UAAU,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IACD,QAAQ,CAAC,QAAuB,EAAE,KAA0B;QAC1D,OAAO;;;;;;;0BAOe,KAAK,CAAC,MAAM,CAAC,MAAM;0BACnB,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiD5C,CAAC;IACJ,CAAC;CACF,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+import { type RoundedProps } from '../templates/RoundedTemplate.js';
+/**
+ * Similar to the {@link DefaultShader} but cuts out 4 rounded rectangle corners
+ * as defined by the specified corner {@link RoundedProps.radius}
+ */
+export declare const Rounded: WebGlShaderType<RoundedProps>;