@lightningjs/renderer 2.16.0 → 3.0.0-beta10

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 '../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,46 @@
+/*
+ * 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,116 @@
+/*
+ * 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(node) {
+    this.uniform4fa('u_borderWidth', this.props!.width as Vec4);
+    this.uniformRGBA('u_borderColor', this.props!.color);
+  },
+  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 vec2 v_innerSize;
+    varying vec2 v_halfDimensions;
+
+    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_innerSize = vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]), u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) * 0.5 - 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;
+    # 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;
+
+    varying vec4 v_color;
+    varying vec2 v_nodeCoords;
+    varying vec2 v_textureCoords;
+
+    varying vec2 v_innerSize;
+    varying vec2 v_halfDimensions;
+
+    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;
+      vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
+
+      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 : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
+
+      float innerDist = box(boxUv, v_innerSize);
+      float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
+
+      vec4 resColor = mix(u_borderColor, color, innerAlpha);
+      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);
+    }
+  `,
+};

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

@@ -0,0 +1,129 @@
+/*
+ * 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
+ */
+
+/*
+ * 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.
+ */
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+
+export const DefaultBatched: WebGlShaderType = {
+  supportsIndexedTextures: true,
+
+  // override bindTextures(texture: WebGlCoreCtxTexture[]) {
+  //   const { renderer, glw } = this;
+  //   if (
+  //     texture.length > renderer.system.parameters.MAX_VERTEX_TEXTURE_IMAGE_UNITS
+  //   ) {
+  //     throw new Error(
+  //       `DefaultShaderBatched: Cannot bind more than ${renderer.system.parameters.MAX_VERTEX_TEXTURE_IMAGE_UNITS} textures`,
+  //     );
+  //   }
+  //   texture.forEach((t, i) => {
+  //     glw.activeTexture(i);
+  //     glw.bindTexture(t.ctxTexture);
+  //   });
+  //   const samplers = Array.from(Array(texture.length).keys());
+  //   this.glw.uniform1iv('u_textures[0]', samplers);
+  // }
+
+  vertex: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    attribute vec2 a_textureCoords;
+    attribute vec2 a_position;
+    attribute vec4 a_color;
+    attribute float a_textureIndex;
+    attribute float a_depth;
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying float v_textureIndex;
+
+    void main(){
+      vec2 normalized = a_position * u_pixelRatio / u_resolution;
+      vec2 zero_two = normalized * 2.0;
+      vec2 clip_space = zero_two - 1.0;
+
+      // pass to fragment
+      v_color = a_color;
+      v_textureCoords = a_textureCoords;
+      v_textureIndex = a_textureIndex;
+
+      // flip y
+      gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
+    }
+  `,
+  fragment(renderer) {
+    const textureUnits =
+      renderer.system.parameters.MAX_VERTEX_TEXTURE_IMAGE_UNITS;
+    return `
+    #define txUnits ${textureUnits}
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
+
+      uniform vec2 u_resolution;
+      uniform sampler2D u_image;
+      uniform sampler2D u_textures[txUnits];
+
+      varying vec4 v_color;
+      varying vec2 v_textureCoords;
+      varying float v_textureIndex;
+
+      vec4 sampleFromTexture(sampler2D textures[${textureUnits}], int idx, vec2 uv) {
+        ${Array.from(Array(textureUnits).keys())
+          .map(
+            (idx) => `
+          ${idx !== 0 ? 'else ' : ''}if (idx == ${idx}) {
+            return texture2D(textures[${idx}], uv);
+          }
+        `,
+          )
+          .join('')}
+        return texture2D(textures[0], uv);
+      }
+
+      void main(){
+        gl_FragColor = vec4(v_color) * sampleFromTexture(u_textures, int(v_textureIndex), v_textureCoords);
+      }
+    `;
+  },
+};

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

@@ -0,0 +1,75 @@
+/*
+ * 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 { 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.width * 0.5, props.height * 0.5);
+
+    this.uniform4fa(
+      'u_radius',
+      calcFactoredRadiusArray(props.radius as Vec4, props.width, props.height),
+    );
+  },
+  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));
+    }
+  `,
+};

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

@@ -0,0 +1,82 @@
+/*
+ * 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 { getNormalizedRgbaComponents } from '../../lib/utils.js';
+import {
+  LinearGradientTemplate,
+  type LinearGradientProps,
+} from '../templates/LinearGradientTemplate.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';
+
+export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
+  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: number[] = [];
+    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: LinearGradientProps) {
+    return `colors:${props.colors.length}`;
+  },
+  fragment(renderer: WebGlRenderer, props: LinearGradientProps) {
+    return `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    #define PI 3.14159265359
+
+    uniform float u_alpha;
+    uniform vec2 u_dimensions;
+
+    uniform sampler2D u_texture;
+
+    uniform float u_angle;
+    uniform float u_stops[${props.stops.length}];
+    uniform vec4 u_colors[${props.colors.length}];
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+
+    vec2 calcPoint(float d, float angle) {
+      return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
+    }
+
+    void main() {
+      vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
+      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(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));
+    }
+  `;
+  },
+};