@lightningtv/renderer 3.0.0-beta1

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

@@ -0,0 +1,81 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+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[];
+  /**
+   * Width of the RadialGradientEffect
+   */
+  width: number;
+  /**
+   * height of the RadialGradientEffect
+   *
+   * @remarks if not defined uses the width value
+   */
+  height: 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;
+      },
+    },
+    width: 50,
+    height: 50,
+    pivot: [0.5, 0.5],
+  },
+};

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

@@ -0,0 +1,98 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
+import { validateArrayLength4 } from './shaderUtils.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,38 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+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 './shaderUtils.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,35 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+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 './shaderUtils.js';
+
+export type RoundedWithBorderProps = RoundedProps &
+  PrefixedType<BorderProps, 'border'>;
+
+const props = Object.assign(
+  {},
+  RoundedTemplate.props,
+  getBorderProps('border'),
+) as RoundedWithBorderProps;
+
+export const RoundedWithBorderTemplate: CoreShaderType<RoundedWithBorderProps> =
+  {
+    props,
+  };

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

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+import { RoundedTemplate, type RoundedProps } from './RoundedTemplate.js';
+import type { PrefixedType } from './shaderUtils.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,106 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { CoreShaderType } from '../../renderers/CoreShaderNode.js';
+import type { PrefixedType } from './shaderUtils.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/templates/shaderUtils.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+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,96 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { valuesAreEqual } from '../../lib/utils.js';
+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() {
+    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);
+  },
+  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_width;
+    uniform vec4 u_color;
+
+    uniform int u_asymWidth;
+
+    varying vec4 v_color;
+    varying vec2 v_position;
+    varying vec2 v_textureCoords;
+
+    float box(vec2 p, vec2 s) {
+      vec2 q = abs(p) - (s - (4.0 - u_pixelRatio));
+      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);
+
+      float boxAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
+      float borderAlpha = 0.0;
+
+      if(u_asymWidth == 1) {
+        borderAlpha = asymBorderWidth(boxUv, boxDist, u_width);
+      }
+      else {
+        borderAlpha = 1.0 - smoothstep(u_width[0], u_width[0], abs(boxDist));
+      }
+
+      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;
+    }
+  `,
+};

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

@@ -0,0 +1,89 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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;
+      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;
+
+      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;
+    # else
+    precision mediump float;
+    # endif
+
+    uniform vec2 u_resolution;
+    uniform sampler2D u_texture;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+
+    void main() {
+      vec4 color = texture2D(u_texture, v_textureCoords);
+      gl_FragColor = vec4(v_color) * texture2D(u_texture, v_textureCoords);
+    }
+  `,
+};