@lightningtv/renderer 2.16.1

package/src/core/renderers/canvas/CanvasCoreTexture.ts

@@ -0,0 +1,153 @@
+/*
+ * 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 { Dimensions } from '../../../common/CommonTypes.js';
+import { assertTruthy } from '../../../utils.js';
+import { CoreContextTexture } from '../CoreContextTexture.js';
+import { formatRgba, type IParsedColor } from './internal/ColorUtils.js';
+
+export class CanvasCoreTexture extends CoreContextTexture {
+  protected image:
+    | ImageBitmap
+    | HTMLCanvasElement
+    | HTMLImageElement
+    | undefined;
+  protected tintCache:
+    | {
+        key: string;
+        image: HTMLCanvasElement;
+      }
+    | undefined;
+
+  async load(): Promise<void> {
+    this.textureSource.setState('loading');
+
+    try {
+      const size = await this.onLoadRequest();
+      this.textureSource.setState('loaded', size);
+      this.textureSource.freeTextureData();
+      this.updateMemSize();
+    } catch (err) {
+      this.textureSource.setState('failed', err as Error);
+      this.textureSource.freeTextureData();
+      throw err;
+    }
+  }
+
+  free(): void {
+    this.image = undefined;
+    this.tintCache = undefined;
+    this.textureSource.setState('freed');
+    this.setTextureMemUse(0);
+    this.textureSource.freeTextureData();
+  }
+
+  updateMemSize(): void {
+    // Counting memory usage for:
+    // - main image
+    // - tinted image
+    const mult = this.tintCache ? 8 : 4;
+    if (this.textureSource.dimensions) {
+      const { width, height } = this.textureSource.dimensions;
+      this.setTextureMemUse(width * height * mult);
+    }
+  }
+
+  hasImage(): boolean {
+    return this.image !== undefined;
+  }
+
+  getImage(
+    color: IParsedColor,
+  ): ImageBitmap | HTMLCanvasElement | HTMLImageElement {
+    const image = this.image;
+    assertTruthy(image, 'Attempt to get unloaded image texture');
+
+    if (color.isWhite) {
+      if (this.tintCache) {
+        this.tintCache = undefined;
+        this.updateMemSize();
+      }
+      return image;
+    }
+    const key = formatRgba(color);
+    if (this.tintCache?.key === key) {
+      return this.tintCache.image;
+    }
+
+    const tintedImage = this.tintTexture(image, key);
+    this.tintCache = {
+      key,
+      image: tintedImage,
+    };
+    this.updateMemSize();
+    return tintedImage;
+  }
+
+  protected tintTexture(
+    source: ImageBitmap | HTMLCanvasElement | HTMLImageElement,
+    color: string,
+  ) {
+    const { width, height } = source;
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      // fill with target color
+      ctx.fillStyle = color;
+      ctx.globalCompositeOperation = 'copy';
+      ctx.fillRect(0, 0, width, height);
+
+      // multiply with image, resulting in non-transparent tinted image
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.drawImage(source, 0, 0, width, height, 0, 0, width, height);
+
+      // apply original image alpha
+      ctx.globalCompositeOperation = 'destination-in';
+      ctx.drawImage(source, 0, 0, width, height, 0, 0, width, height);
+    }
+    return canvas;
+  }
+
+  private async onLoadRequest(): Promise<Dimensions> {
+    assertTruthy(this.textureSource?.textureData?.data, 'Texture data is null');
+    const { data } = this.textureSource.textureData;
+
+    // TODO: canvas from text renderer should be able to provide the canvas directly
+    // instead of having to re-draw it into a new canvas...
+    if (data instanceof ImageData) {
+      const canvas = document.createElement('canvas');
+      canvas.width = data.width;
+      canvas.height = data.height;
+      const ctx = canvas.getContext('2d');
+      if (ctx) ctx.putImageData(data, 0, 0);
+      this.image = canvas;
+      return { width: data.width, height: data.height };
+    } else if (
+      (typeof ImageBitmap !== 'undefined' && data instanceof ImageBitmap) ||
+      data instanceof HTMLImageElement
+    ) {
+      this.image = data;
+      return { width: data.width, height: data.height };
+    }
+
+    return { width: 0, height: 0 };
+  }
+}

package/src/core/renderers/canvas/internal/C2DShaderUtils.ts

@@ -0,0 +1,231 @@
+/*
+ * 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 { QuadOptions } from '../../CoreRenderer.js';
+import type { BorderEffectProps } from '../../webgl/shaders/effects/BorderEffect.js';
+import type { RadiusEffectProps } from '../../webgl/shaders/effects/RadiusEffect.js';
+import type { EffectDescUnion } from '../../webgl/shaders/effects/ShaderEffect.js';
+import {
+  ROUNDED_RECTANGLE_SHADER_TYPE,
+  UnsupportedShader,
+} from '../shaders/UnsupportedShader.js';
+import { formatRgba, parseColorRgba } from './ColorUtils.js';
+
+type Direction = 'Top' | 'Right' | 'Bottom' | 'Left';
+
+/**
+ * Extract `RoundedRectangle` shader radius to apply as a clipping
+ */
+export function getRadius(quad: QuadOptions): RadiusEffectProps['radius'] {
+  if (quad.shader instanceof UnsupportedShader) {
+    const shType = quad.shader.shType;
+    if (shType === ROUNDED_RECTANGLE_SHADER_TYPE) {
+      return (quad.shaderProps?.radius as number) ?? 0;
+    } else if (shType === 'DynamicShader') {
+      const effects = quad.shaderProps?.effects as
+        | EffectDescUnion[]
+        | undefined;
+
+      if (effects) {
+        const effect = effects.find((effect: EffectDescUnion) => {
+          return effect.type === 'radius' && effect?.props?.radius;
+        });
+
+        return (effect && effect.type === 'radius' && effect.props.radius) || 0;
+      }
+    }
+  }
+  return 0;
+}
+
+/**
+ * Extract `RoundedRectangle` shader radius to apply as a clipping */
+export function getBorder(
+  quad: QuadOptions,
+  direction: '' | Direction = '',
+): BorderEffectProps | undefined {
+  if (quad.shader instanceof UnsupportedShader) {
+    const shType = quad.shader.shType;
+    if (shType === 'DynamicShader') {
+      const effects = quad.shaderProps?.effects as
+        | EffectDescUnion[]
+        | undefined;
+
+      if (effects && effects.length) {
+        const effect = effects.find((effect: EffectDescUnion) => {
+          return (
+            effect.type === `border${direction}` &&
+            effect.props &&
+            effect.props.width
+          );
+        });
+
+        return effect && effect.props;
+      }
+    }
+  }
+
+  return undefined;
+}
+
+export function roundRect(
+  this: CanvasRenderingContext2D | Path2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number | DOMPointInit | (number | DOMPointInit)[],
+) {
+  const context = Object.getPrototypeOf(this) as Path2D;
+  if (!context.roundRect) {
+    const fixOverlappingCorners = (radii: {
+      topLeft: number;
+      topRight: number;
+      bottomRight: number;
+      bottomLeft: number;
+    }) => {
+      const maxRadius = Math.min(width / 2, height / 2);
+      const totalHorizontal =
+        radii.topLeft + radii.topRight + radii.bottomRight + radii.bottomLeft;
+
+      if (totalHorizontal > width || totalHorizontal > height) {
+        const scale =
+          maxRadius /
+          Math.max(
+            radii.topLeft,
+            radii.topRight,
+            radii.bottomRight,
+            radii.bottomLeft,
+          );
+        radii.topLeft *= scale;
+        radii.topRight *= scale;
+        radii.bottomRight *= scale;
+        radii.bottomLeft *= scale;
+      }
+    };
+    const radii =
+      typeof radius === 'number'
+        ? {
+            topLeft: radius,
+            topRight: radius,
+            bottomRight: radius,
+            bottomLeft: radius,
+          }
+        : { topLeft: 0, topRight: 0, bottomRight: 0, bottomLeft: 0, ...radius };
+
+    fixOverlappingCorners(radii);
+
+    this.moveTo(x + radii.topLeft, y);
+    this.lineTo(x + width - radii.topRight, y);
+    this.ellipse(
+      x + width - radii.topRight,
+      y + radii.topRight,
+      radii.topRight,
+      radii.topRight,
+      0,
+      1.5 * Math.PI,
+      2 * Math.PI,
+    );
+    this.lineTo(x + width, y + height - radii.bottomRight);
+    this.ellipse(
+      x + width - radii.bottomRight,
+      y + height - radii.bottomRight,
+      radii.bottomRight,
+      radii.bottomRight,
+      0,
+      0,
+      0.5 * Math.PI,
+    );
+    this.lineTo(x + radii.bottomLeft, y + height);
+    this.ellipse(
+      x + radii.bottomLeft,
+      y + height - radii.bottomLeft,
+      radii.bottomLeft,
+      radii.bottomLeft,
+      0,
+      0.5 * Math.PI,
+      Math.PI,
+    );
+    this.lineTo(x, y + radii.topLeft);
+    this.ellipse(
+      x + radii.topLeft,
+      y + radii.topLeft,
+      radii.topLeft,
+      radii.topLeft,
+      0,
+      Math.PI,
+      1.5 * Math.PI,
+    );
+  } else {
+    this.roundRect(x, y, width, height, radius);
+  }
+}
+
+export function strokeLine(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  lineWidth = 0,
+  color: number | undefined,
+  direction: Direction,
+) {
+  if (!lineWidth) {
+    return;
+  }
+
+  let sx,
+    sy = 0;
+  let ex,
+    ey = 0;
+
+  switch (direction) {
+    case 'Top':
+      sx = x;
+      sy = y;
+      ex = width + x;
+      ey = y;
+      break;
+    case 'Right':
+      sx = x + width;
+      sy = y;
+      ex = x + width;
+      ey = y + height;
+      break;
+    case 'Bottom':
+      sx = x;
+      sy = y + height;
+      ex = x + width;
+      ey = y + height;
+      break;
+    case 'Left':
+      sx = x;
+      sy = y;
+      ex = x;
+      ey = y + height;
+      break;
+  }
+  ctx.beginPath();
+  ctx.lineWidth = lineWidth;
+  ctx.strokeStyle = formatRgba(parseColorRgba(color ?? 0));
+  ctx.moveTo(sx, sy);
+  ctx.lineTo(ex, ey);
+  ctx.stroke();
+}

package/src/core/renderers/canvas/internal/ColorUtils.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 interface IParsedColor {
+  isWhite: boolean;
+  a: number;
+  r: number;
+  g: number;
+  b: number;
+}
+
+const WHITE: IParsedColor = {
+  isWhite: true,
+  a: 1,
+  r: 0xff,
+  g: 0xff,
+  b: 0xff,
+};
+
+/**
+ * Extract color components
+ */
+export function parseColor(abgr: number): IParsedColor {
+  if (abgr === 0xffffffff) {
+    return WHITE;
+  }
+  const a = ((abgr >>> 24) & 0xff) / 255;
+  const b = (abgr >>> 16) & 0xff & 0xff;
+  const g = (abgr >>> 8) & 0xff & 0xff;
+  const r = abgr & 0xff & 0xff;
+  return { isWhite: false, a, r, g, b };
+}
+
+/**
+ * Extract color components
+ */
+export function parseColorRgba(rgba: number): IParsedColor {
+  if (rgba === 0xffffffff) {
+    return WHITE;
+  }
+  const r = (rgba >>> 24) & 0xff;
+  const g = (rgba >>> 16) & 0xff & 0xff;
+  const b = (rgba >>> 8) & 0xff & 0xff;
+  const a = (rgba & 0xff & 0xff) / 255;
+  return { isWhite: false, r, g, b, a };
+}
+
+/**
+ * Format a parsed color into a rgba CSS color
+ */
+export function formatRgba({ a, r, g, b }: IParsedColor): string {
+  return `rgba(${r},${g},${b},${a})`;
+}

package/src/core/renderers/canvas/shaders/UnsupportedShader.ts

@@ -0,0 +1,48 @@
+/*
+ * 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 { CoreShader } from '../../CoreShader.js';
+
+export const ROUNDED_RECTANGLE_SHADER_TYPE = 'RoundedRectangle';
+
+export class UnsupportedShader extends CoreShader {
+  public shType: string;
+
+  constructor(shType: string) {
+    super();
+    this.shType = shType;
+    // if (shType !== ROUNDED_RECTANGLE_SHADER_TYPE) {
+    //   console.warn('Unsupported shader:', shType);
+    // }
+  }
+
+  bindRenderOp(): void {
+    // noop
+  }
+  protected bindProps(): void {
+    // noop
+  }
+
+  attach(): void {
+    // noop
+  }
+  detach(): void {
+    // noop
+  }
+}

package/src/core/renderers/webgl/WebGlCoreCtxRenderTexture.ts

@@ -0,0 +1,91 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2024 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 { Dimensions } from '../../../common/CommonTypes.js';
+import { assertTruthy } from '../../../utils.js';
+import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
+import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { RenderTexture } from '../../textures/RenderTexture.js';
+import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
+
+export class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
+  declare textureSource: RenderTexture;
+
+  public framebuffer: WebGLFramebuffer | null = null;
+
+  constructor(
+    glw: WebGlContextWrapper,
+    memManager: TextureMemoryManager,
+    textureSource: RenderTexture,
+  ) {
+    super(glw, memManager, textureSource);
+  }
+
+  override async onLoadRequest(): Promise<Dimensions> {
+    const { glw } = this;
+    const nativeTexture = (this._nativeCtxTexture =
+      this.createNativeCtxTexture());
+
+    if (!nativeTexture) {
+      throw new Error('Failed to create native texture for RenderTexture');
+    }
+
+    const { width, height } = this.textureSource;
+
+    // Create Framebuffer object
+    this.framebuffer = glw.createFramebuffer();
+
+    // Set the dimensions of the render texture
+    glw.texImage2D(
+      0,
+      glw.RGBA,
+      width,
+      height,
+      0,
+      glw.RGBA,
+      glw.UNSIGNED_BYTE,
+      null,
+    );
+
+    // Update the texture memory manager
+    this.setTextureMemUse(width * height * 4);
+
+    // Bind the framebuffer
+    glw.bindFramebuffer(this.framebuffer);
+
+    // Attach the texture to the framebuffer
+    glw.framebufferTexture2D(glw.COLOR_ATTACHMENT0, nativeTexture, 0);
+
+    // Unbind the framebuffer
+    glw.bindFramebuffer(null);
+
+    return {
+      width,
+      height,
+    };
+  }
+
+  override free(): void {
+    super.free();
+
+    // Delete the framebuffer
+    this.glw.deleteFramebuffer(this.framebuffer);
+    this.framebuffer = null;
+  }
+}

package/src/core/renderers/webgl/WebGlCoreCtxSubTexture.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 { Dimensions } from '../../../common/CommonTypes.js';
+import { assertTruthy } from '../../../utils.js';
+import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
+import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { SubTexture } from '../../textures/SubTexture.js';
+import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
+
+export class WebGlCoreCtxSubTexture extends WebGlCoreCtxTexture {
+  constructor(
+    glw: WebGlContextWrapper,
+    memManager: TextureMemoryManager,
+    textureSource: SubTexture,
+  ) {
+    super(glw, memManager, textureSource);
+  }
+
+  override async onLoadRequest(): Promise<Dimensions> {
+    const props = (this.textureSource as SubTexture).textureData;
+    assertTruthy(props, 'SubTexture must have texture data');
+
+    if (props.data instanceof Uint8Array) {
+      // its a 1x1 Color Texture
+      return { width: 1, height: 1 };
+    }
+
+    return {
+      width: props.data?.width || 0,
+      height: props.data?.height || 0,
+    };
+  }
+}