@lightningjs/renderer 2.13.0 → 3.0.0-beta1

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);
+    }
+  `,
+};

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,78 @@
+/*
+ * 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() {
+    this.uniform2f('u_pos', this.props!.x, this.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.uniform4fa(
+      'u_radius',
+      calcFactoredRadiusArray(
+        this.props!.radius as Vec4,
+        this.props!.width,
+        this.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,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 { 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() {
+    this.uniform1f('u_angle', this.props!.angle - (Math.PI / 180) * 90);
+    this.uniform1fv('u_stops', new Float32Array(this.props!.stops));
+    const colors: number[] = [];
+    for (let i = 0; i < this.props!.colors.length; i++) {
+      const norm = getNormalizedRgbaComponents(this.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));
+    }
+  `;
+  },
+};

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

@@ -0,0 +1,84 @@
+/*
+ * 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 { CoreNode } from '../../CoreNode.js';
+import { getNormalizedRgbaComponents } from '../../lib/utils.js';
+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';
+
+export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
+  props: RadialGradientTemplate.props,
+  update(node: CoreNode) {
+    this.uniform2f(
+      'u_projection',
+      this.props!.pivot[0] * node.width,
+      this.props!.pivot[1] * node.height,
+    );
+    this.uniform2f('u_size', this.props!.width * 0.5, this.props!.height * 0.5);
+    this.uniform1fv('u_stops', new Float32Array(this.props!.stops));
+    const colors: number[] = [];
+    for (let i = 0; i < this.props!.colors.length; i++) {
+      const norm = getNormalizedRgbaComponents(this.props!.colors[i]!);
+      colors.push(norm[0], norm[1], norm[2], norm[3]);
+    }
+    this.uniform4fv('u_colors', new Float32Array(colors));
+  },
+  getCacheMarkers(props: RadialGradientProps) {
+    return `colors:${props.colors.length}`;
+  },
+  fragment(renderer: WebGlRenderer, props: RadialGradientProps) {
+    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 vec2 u_projection;
+    uniform vec2 u_size;
+    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;
+      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));
+    }
+  `;
+  },
+};