@solidtv/renderer 1.0.0

package/src/core/shaders/templates/RadialGradientTemplate.ts

@@ -0,0 +1,66 @@
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+
+/**
+ * Properties of the {@link RadialGradient} shader
+ */
+export interface RadialGradientProps {
+  /**
+   * Array of colors to be used in the RadialGradient shader
+   *
+   * @default [0xff000000, 0xffffffff]
+   */
+  colors: number[];
+  /**
+   * Array of color stops
+   */
+  stops: number[];
+  /**
+   * radial width of the RadialGradientEffect
+   *
+   * @remarks from the center to the outer edge of the gradient
+   */
+  w: number;
+  /**
+   * radial height of the RadialGradientEffect
+   * if not defined uses the width value
+   * @remarks from the center to the outer edge of the gradient
+   */
+  h: number;
+  /**
+   * center point of where the RadialGradientEffect is drawn
+   */
+  pivot: [number, number];
+}
+
+export const RadialGradientTemplate: CoreShaderType<RadialGradientProps> = {
+  props: {
+    colors: {
+      default: [0x000000ff, 0xffffffff],
+      resolve(value) {
+        if (value !== undefined && value.length > 0) {
+          return value;
+        }
+        return ([] as number[]).concat(this.default);
+      },
+    },
+    stops: {
+      default: [0, 1],
+      resolve(value, props) {
+        if (value !== undefined && value.length === props.colors.length) {
+          return value;
+        }
+        if (value === undefined) {
+          value = [];
+        }
+        const len = props.colors.length;
+        for (let i = 0; i < len; i++) {
+          value[i] = i * (1 / (len - 1));
+        }
+        return value;
+      },
+    },
+    w: 50,
+    h: 50,
+    pivot: [0.5, 0.5],
+  },
+};

package/src/core/shaders/templates/RoundedTemplate.ts

@@ -0,0 +1,81 @@
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import { validateArrayLength4 } from '../utils.js';
+
+/**
+ * Properties of the {@link RoundedRectangle} shader
+ */
+export interface RoundedProps {
+  /**
+   * Corner radius, in pixels, to cut out of the corners
+   *
+   * @defaultValue 0
+   */
+  radius: number | number[];
+  /**
+   * sets top-left corner
+   */
+  'top-left': number;
+  /**
+   * sets top-right corner
+   */
+  'top-right': number;
+  /**
+   * sets bottom-right corner
+   */
+  'bottom-right': number;
+  /**
+   * sets bottom-left corner
+   */
+  'bottom-left': number;
+}
+
+export const RoundedTemplate: CoreShaderType<RoundedProps> = {
+  props: {
+    radius: {
+      default: [0, 0, 0, 0],
+      resolve(value) {
+        if (value !== undefined) {
+          return validateArrayLength4(value);
+        }
+        return ([] as number[]).concat(this.default);
+      },
+    },
+    'top-left': {
+      default: 0,
+      set(value, props) {
+        (props.radius as Vec4)[0] = value;
+      },
+      get(props) {
+        return (props.radius as Vec4)[0];
+      },
+    },
+    'top-right': {
+      default: 0,
+      set(value, props) {
+        (props.radius as Vec4)[1] = value;
+      },
+      get(props) {
+        return (props.radius as Vec4)[1];
+      },
+    },
+    'bottom-right': {
+      default: 0,
+      set(value, props) {
+        (props.radius as Vec4)[2] = value;
+      },
+      get(props) {
+        return (props.radius as Vec4)[2];
+      },
+    },
+    'bottom-left': {
+      default: 0,
+      set(value, props) {
+        (props.radius as Vec4)[3] = value;
+      },
+      get(props) {
+        return (props.radius as Vec4)[3];
+      },
+    },
+  },
+};

package/src/core/shaders/templates/RoundedWithBorderAndShadowTemplate.ts

@@ -0,0 +1,21 @@
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+import { getBorderProps, type BorderProps } from './BorderTemplate.js';
+import { RoundedTemplate, type RoundedProps } from './RoundedTemplate.js';
+import type { PrefixedType } from '../utils.js';
+import { getShadowProps, type ShadowProps } from './ShadowTemplate.js';
+
+export type RoundedWithBorderAndShadowProps = RoundedProps &
+  PrefixedType<BorderProps, 'border'> &
+  PrefixedType<ShadowProps, 'shadow'>;
+
+const props = Object.assign(
+  {},
+  RoundedTemplate.props,
+  getBorderProps('border'),
+  getShadowProps('shadow'),
+) as RoundedWithBorderAndShadowProps;
+
+export const RoundedWithBorderAndShadowTemplate: CoreShaderType<RoundedWithBorderAndShadowProps> =
+  {
+    props,
+  };

package/src/core/shaders/templates/RoundedWithBorderTemplate.ts

@@ -0,0 +1,23 @@
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+import { getBorderProps, type BorderProps } from './BorderTemplate.js';
+import { RoundedTemplate, type RoundedProps } from './RoundedTemplate.js';
+import type { PrefixedType } from '../utils.js';
+
+export type RoundedWithBorderProps = RoundedProps &
+  PrefixedType<BorderProps, 'border'> & {
+    'border-fill': number;
+  };
+
+const props = Object.assign(
+  {},
+  RoundedTemplate.props,
+  getBorderProps('border'),
+  {
+    'border-fill': 0x00000000,
+  },
+) as RoundedWithBorderProps;
+
+export const RoundedWithBorderTemplate: CoreShaderType<RoundedWithBorderProps> =
+  {
+    props,
+  };

package/src/core/shaders/templates/RoundedWithShadowTemplate.ts

@@ -0,0 +1,18 @@
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+import { RoundedTemplate, type RoundedProps } from './RoundedTemplate.js';
+import type { PrefixedType } from '../utils.js';
+import { getShadowProps, type ShadowProps } from './ShadowTemplate.js';
+
+export type RoundedWithShadowProps = RoundedProps &
+  PrefixedType<ShadowProps, 'shadow'>;
+
+const props = Object.assign(
+  {},
+  RoundedTemplate.props,
+  getShadowProps('shadow'),
+) as RoundedWithShadowProps;
+
+export const RoundedWithShadowTemplate: CoreShaderType<RoundedWithShadowProps> =
+  {
+    props,
+  };

package/src/core/shaders/templates/ShadowTemplate.ts

@@ -0,0 +1,89 @@
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+import type { PrefixedType } from '../utils.js';
+
+export interface ShadowProps {
+  /**
+   * Shadow Color
+   *
+   * @default 0x000000ff
+   */
+  color: number;
+  /**
+   * Shadow Projection [offsetX, offsetY, blur, spread]
+   *
+   * @default [0, 0, 5, 5]
+   */
+  projection: [number, number, number, number];
+  /**
+   * OffsetX of Shadow (center)
+   */
+  x: number;
+  /**
+   * OffsetY of Shadow (center)
+   */
+  y: number;
+  /**
+   * Blur along the edges of the Shadow
+   */
+  blur: number;
+  /**
+   * Spread of the shadow compared to node
+   */
+  spread: number;
+}
+
+export function getShadowProps<P extends string>(
+  prefix?: P,
+): PrefixedType<ShadowProps, P> {
+  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];
+      },
+    },
+  } as PrefixedType<ShadowProps, P>;
+}
+
+type PlainShadowProps = PrefixedType<ShadowProps>;
+
+export const ShadowTemplate: CoreShaderType<ShadowProps> = {
+  props: getShadowProps() as PlainShadowProps,
+};

package/src/core/shaders/utils.ts

@@ -0,0 +1,30 @@
+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)) {
+    return [value, value, value, value];
+  }
+  assertTruthy(value);
+  if (value.length === 4) {
+    return value as Vec4;
+  }
+  if (value.length === 3) {
+    value[3] = value[0]!;
+    return value as Vec4;
+  }
+  if (value.length === 2) {
+    value[2] = value[0]!;
+    value[3] = value[1]!;
+    return value as Vec4;
+  }
+  value[0] = value[0] || 0;
+  value[1] = value[0];
+  value[2] = value[0];
+  value[3] = value[0];
+  return value as 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/src/core/shaders/webgl/Border.ts

@@ -0,0 +1,158 @@
+import {
+  BorderTemplate,
+  type BorderProps,
+} from '../templates/BorderTemplate.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+
+export const Border: WebGlShaderType<BorderProps> = {
+  props: BorderTemplate.props,
+  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_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;
+    }
+  `,
+};

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

@@ -0,0 +1,52 @@
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+
+export const Default: WebGlShaderType = {
+  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);
+    }
+  `,
+};

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

@@ -0,0 +1,58 @@
+import { calcFactoredRadiusArray } from '../../lib/utils.js';
+import {
+  HolePunchTemplate,
+  type HolePunchProps,
+} from '../templates/HolePunchTemplate.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+
+export const HolePunch: WebGlShaderType<HolePunchProps> = {
+  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 as Vec4, props.w, props.h),
+    );
+  },
+  getCacheMarkers(props: HolePunchProps) {
+    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));
+    }
+  `,
+};