@lightningjs/renderer 2.13.0 → 3.0.0-beta1

package/src/core/renderers/CoreShaderNode.ts

@@ -0,0 +1,171 @@
+import { deepClone } from '../../utils.js';
+import { UpdateType, type CoreNode } from '../CoreNode.js';
+import type { Stage } from '../Stage.js';
+
+export interface AdvShaderProp<T = any, Props = Record<string, unknown>> {
+  /**
+   * default value
+   */
+  default: T;
+  resolve?: (this: AdvShaderProp<T, Props>, value: T, props: Props) => T;
+  transform?: (start: T, end: T, progress: number) => T;
+}
+
+export type AdvancedShaderProp<T = any, Props = Record<string, unknown>> =
+  | (AdvShaderProp<T, Props> & {
+      set: (value: T, props: Props) => void;
+      get: (props: Props) => T;
+    })
+  | (AdvShaderProp<T, Props> & { set?: never; get?: never });
+
+export type ShaderProp<T, Props> = T | AdvancedShaderProp<T, Props>;
+
+export type ShaderProps<Props> = {
+  [K in keyof Props]: ShaderProp<Props[K], Props>;
+};
+
+export function isAdvancedShaderProp(obj: any): obj is AdvancedShaderProp {
+  return obj !== null && typeof obj === 'object' && obj.default !== undefined;
+}
+
+export function resolveShaderProps(
+  props: Record<string, unknown>,
+  propsConfig: ShaderProps<Record<string, unknown>>,
+) {
+  for (const key in propsConfig) {
+    if (!isAdvancedShaderProp(propsConfig[key]) && props[key] === undefined) {
+      props[key] = propsConfig[key];
+      continue;
+    }
+
+    const pConfig = propsConfig[key]! as AdvancedShaderProp;
+    const hasValue = props[key] !== undefined;
+
+    if (pConfig.resolve !== undefined) {
+      props[key] = pConfig.resolve!(props[key], props);
+      continue;
+    }
+    if (hasValue && pConfig.set !== undefined) {
+      pConfig.set(props[key], props);
+      continue;
+    }
+    if (hasValue) {
+      continue;
+    }
+
+    if (props[key] === undefined && pConfig.get === undefined) {
+      props[key] = deepClone(pConfig.default);
+      continue;
+    }
+    props[key] = pConfig.get!(props);
+  }
+}
+
+/**
+ * CoreShaderType is a template for ShaderTypes the renderer.
+ * You could view a ShaderType as a configuration object that contains methods,
+ * and values that you can use to alter the way a node is drawn by the Renderer.
+ */
+export interface CoreShaderType<
+  Props extends object = Record<string, unknown>,
+> {
+  /**
+   * Values you use to draw the Shader
+   */
+  props?: ShaderProps<Props>;
+  /**
+   * used for making a cache key to check for reusability, currently only used for webgl ShaderTypes but might be needed for other types of renderer
+   */
+  getCacheMarkers?: (props: Props) => string;
+}
+
+/**
+ * CoreShaderNode is a base class that manages the shader prop values.
+ * When a prop is being updated the CoreShaderNode will notify either the associated CoreNode,
+ * or the Stage that there has been a change and a new render of the scene.
+ */
+export class CoreShaderNode<Props extends object = Record<string, unknown>> {
+  readonly stage: Stage;
+  readonly shaderType: CoreShaderType<Props>;
+  protected propsConfig: ShaderProps<Props> | undefined;
+  protected resolvedProps: Props | undefined = undefined;
+  protected definedProps: Props | undefined = undefined;
+  protected node: CoreNode | null = null;
+  update: (() => void) | undefined = undefined;
+
+  constructor(
+    readonly shaderKey: string,
+    type: CoreShaderType<Props>,
+    stage: Stage,
+    props?: Props,
+  ) {
+    this.stage = stage;
+    this.shaderType = type;
+
+    if (props !== undefined) {
+      /**
+       * props are already resolved by shadermanager
+       */
+      this.resolvedProps = props;
+      this.defineProps(props);
+    }
+  }
+
+  private defineProps(props: Props) {
+    const definedProps = {};
+    for (const key in props) {
+      const propConfig = this.shaderType.props![key];
+      const isAdvancedProp = isAdvancedShaderProp(propConfig);
+
+      Object.defineProperty(definedProps, key, {
+        get: () => {
+          return this.resolvedProps![key as keyof Props];
+        },
+        set: (value) => {
+          // this.resolvedProps![key as keyof Props] = value;
+          if (isAdvancedProp === true && propConfig.resolve !== undefined) {
+            this.resolvedProps![key] = propConfig.resolve(
+              value,
+              this.resolvedProps as Record<string, unknown>,
+            );
+          } else if (isAdvancedProp === true && propConfig.set !== undefined) {
+            propConfig.set(
+              value,
+              this.resolvedProps as Record<string, unknown>,
+            );
+          } else {
+            this.resolvedProps![key] = value;
+          }
+
+          if (this.update !== undefined && this.node !== null) {
+            this.node.setUpdateType(UpdateType.RecalcUniforms);
+          } else {
+            this.stage.requestRender();
+          }
+        },
+      });
+    }
+    this.definedProps = definedProps as Props;
+  }
+
+  attachNode(node: CoreNode) {
+    this.node = node;
+  }
+
+  getResolvedProps() {
+    return this.resolvedProps;
+  }
+
+  get props(): Props | undefined {
+    return this.definedProps;
+  }
+
+  set props(props: Props | undefined) {
+    if (props === undefined) {
+      return;
+    }
+    for (const key in props) {
+      this.props![key] = props[key];
+    }
+  }
+}

package/src/core/renderers/{canvas/shaders/UnsupportedShader.ts → CoreShaderProgram.ts}

@@ -1,48 +1,23 @@
-/*
- * 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
-  }
-}
+/*
+ * 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 CoreShaderProgram {
+  attach?: () => void;
+  detach?: () => void;
+}

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

@@ -0,0 +1,299 @@
+/*
+ * 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 { CoreNode } from '../../CoreNode.js';
+import { SubTexture } from '../../textures/SubTexture.js';
+import { TextureType, type Texture } from '../../textures/Texture.js';
+import type { CoreContextTexture } from '../CoreContextTexture.js';
+import {
+  CoreRenderer,
+  type CoreRendererOptions,
+  type QuadOptions,
+} from '../CoreRenderer.js';
+import { CanvasTexture } from './CanvasTexture.js';
+import {
+  parseColor,
+  parseToAbgrString,
+  parseToRgbaString,
+} from './internal/ColorUtils.js';
+import { assertTruthy } from '../../../utils.js';
+import { CanvasShaderNode, type CanvasShaderType } from './CanvasShaderNode.js';
+import type { CoreShaderType } from '../CoreShaderNode.js';
+
+export class CanvasRenderer extends CoreRenderer {
+  private context: CanvasRenderingContext2D;
+  private canvas: HTMLCanvasElement;
+  private pixelRatio: number;
+  private clearColor: string;
+  public renderToTextureActive = false;
+  activeRttNode: CoreNode | null = null;
+
+  private parsedColorCache: Map<number, string> = new Map();
+
+  constructor(options: CoreRendererOptions) {
+    super(options);
+
+    this.mode = 'canvas';
+
+    const { canvas } = options;
+    this.canvas = canvas as HTMLCanvasElement;
+    this.context = canvas.getContext('2d') as CanvasRenderingContext2D;
+    this.pixelRatio = this.stage.pixelRatio;
+    this.clearColor = this.getParsedColor(this.stage.clearColor);
+  }
+
+  reset(): void {
+    this.canvas.width = this.canvas.width; // quick reset canvas
+
+    const ctx = this.context;
+
+    if (this.clearColor) {
+      ctx.fillStyle = this.clearColor;
+      ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    ctx.scale(this.pixelRatio, this.pixelRatio);
+  }
+
+  render(): void {
+    // noop
+  }
+
+  addQuad(quad: QuadOptions): void {
+    const ctx = this.context;
+    const { tx, ty, ta, tb, tc, td, clippingRect } = quad;
+    let texture = quad.texture;
+    const textureType = texture?.type;
+    assertTruthy(textureType, 'Texture type is not defined');
+
+    // The Canvas2D renderer only supports image and color textures
+    if (
+      textureType !== TextureType.image &&
+      textureType !== TextureType.color &&
+      textureType !== TextureType.subTexture &&
+      textureType !== TextureType.noise
+    ) {
+      return;
+    }
+
+    if (texture) {
+      if (texture instanceof SubTexture) {
+        texture = texture.parentTexture;
+      }
+
+      if (texture.state === 'freed') {
+        return;
+      }
+      if (texture.state !== 'loaded') {
+        return;
+      }
+    }
+
+    const hasTransform = ta !== 1;
+    const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
+    const hasShader = quad.shader !== null;
+
+    let saveAndRestore = hasTransform === true || hasClipping === true;
+    if (hasShader === true) {
+      saveAndRestore =
+        saveAndRestore || (quad.shader as CanvasShaderNode).applySNR;
+    }
+
+    if (saveAndRestore) {
+      ctx.save();
+    }
+
+    if (hasClipping === true) {
+      const path = new Path2D();
+      const { x, y, width, height } = clippingRect;
+      path.rect(x, y, width, height);
+      ctx.clip(path);
+    }
+
+    if (hasTransform === true) {
+      // Quad transform:
+      // | ta tb tx |
+      // | tc td ty |
+      // | 0  0  1  |
+      // C2D transform:
+      // | a  c  e  |
+      // | b  d  f  |
+      // | 0  0  1  |
+      const scale = this.pixelRatio;
+      ctx.setTransform(ta, tc, tb, td, tx * scale, ty * scale);
+      ctx.scale(scale, scale);
+      ctx.translate(-tx, -ty);
+    }
+
+    if (hasShader === true) {
+      let renderContext: (() => void) | null = () => {
+        this.renderContext(quad);
+      };
+      (quad.shader as CanvasShaderNode).render(ctx, quad, renderContext);
+      renderContext = null;
+    } else {
+      this.renderContext(quad);
+    }
+
+    if (saveAndRestore) {
+      ctx.restore();
+    }
+  }
+
+  renderContext(quad: QuadOptions) {
+    const color = quad.colorTl;
+    const textureType = quad.texture?.type;
+    if (
+      (textureType === TextureType.image ||
+        textureType === TextureType.subTexture ||
+        textureType === TextureType.noise) &&
+      quad.texture?.ctxTexture
+    ) {
+      const tintColor = parseColor(color);
+      const image = (quad.texture.ctxTexture as CanvasTexture).getImage(
+        tintColor,
+      );
+      this.context.globalAlpha = tintColor.a ?? quad.alpha;
+      if (textureType === TextureType.subTexture) {
+        this.context.drawImage(
+          image,
+          (quad.texture as SubTexture).props.x,
+          (quad.texture as SubTexture).props.y,
+          (quad.texture as SubTexture).props.width,
+          (quad.texture as SubTexture).props.height,
+          quad.tx,
+          quad.ty,
+          quad.width,
+          quad.height,
+        );
+      } else {
+        try {
+          this.context.drawImage(
+            image,
+            quad.tx,
+            quad.ty,
+            quad.width,
+            quad.height,
+          );
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (error) {
+          // noop
+        }
+      }
+      this.context.globalAlpha = 1;
+      return;
+    }
+    const hasGradient =
+      quad.colorTl !== quad.colorTr || quad.colorTl !== quad.colorBr;
+    if (textureType === TextureType.color && hasGradient) {
+      let endX: number = quad.tx;
+      let endY: number = quad.ty;
+      let endColor: number;
+      if (quad.colorTl === quad.colorTr) {
+        // vertical
+        endX = quad.tx;
+        endY = quad.ty + quad.height;
+        endColor = quad.colorBr;
+      } else {
+        // horizontal
+        endX = quad.tx + quad.width;
+        endY = quad.ty;
+        endColor = quad.colorTr;
+      }
+      const gradient = this.context.createLinearGradient(
+        quad.tx,
+        quad.ty,
+        endX,
+        endY,
+      );
+      gradient.addColorStop(0, this.getParsedColor(color));
+      gradient.addColorStop(1, this.getParsedColor(endColor));
+      this.context.fillStyle = gradient;
+      this.context.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+    } else if (textureType === TextureType.color) {
+      this.context.fillStyle = this.getParsedColor(color);
+      this.context.fillRect(quad.tx, quad.ty, quad.width, quad.height);
+    }
+  }
+
+  createShaderNode(
+    shaderKey: string,
+    shaderType: Readonly<CanvasShaderType>,
+    props?: Record<string, any>,
+  ) {
+    return new CanvasShaderNode(shaderKey, shaderType, this.stage, props);
+  }
+
+  createShaderProgram(shaderConfig) {
+    return null;
+  }
+
+  override supportsShaderType(shaderType: Readonly<CanvasShaderType>): boolean {
+    return shaderType.render !== undefined;
+  }
+
+  createCtxTexture(textureSource: Texture): CoreContextTexture {
+    return new CanvasTexture(this.stage.txMemManager, textureSource);
+  }
+
+  renderRTTNodes(): void {
+    // noop
+  }
+
+  removeRTTNode(node: CoreNode): void {
+    // noop
+  }
+
+  renderToTexture(node: CoreNode): void {
+    // noop
+  }
+  getBufferInfo(): null {
+    return null;
+  }
+
+  getQuadCount(): null {
+    return null;
+  }
+
+  getParsedColor(color: number, isRGBA: boolean = false) {
+    let out = this.parsedColorCache.get(color);
+    if (out !== undefined) {
+      return out;
+    }
+    if (isRGBA) {
+      out = parseToRgbaString(color);
+    } else {
+      out = parseToAbgrString(color);
+    }
+    this.parsedColorCache.set(color, out);
+    return out;
+  }
+
+  /**
+   * Updates the clear color of the canvas renderer.
+   *
+   * @param color - The color to set as the clear color.
+   */
+  updateClearColor(color: number) {
+    this.clearColor = this.getParsedColor(color);
+  }
+
+  override getDefaultShaderNode() {
+    return null;
+  }
+}

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

@@ -0,0 +1,99 @@
+/*
+ * 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 type { Stage } from '../../Stage.js';
+import type { QuadOptions } from '../CoreRenderer.js';
+import { CoreShaderNode, type CoreShaderType } from '../CoreShaderNode.js';
+import type { CanvasRenderer } from './CanvasRenderer.js';
+
+export type CanvasShaderType<
+  T extends object = Record<string, unknown>,
+  C extends object = Record<string, unknown>,
+> = CoreShaderType<T> & {
+  render: (
+    this: CanvasShaderNode<T, C>,
+    ctx: CanvasRenderingContext2D,
+    quad: QuadOptions,
+    renderContext: () => void,
+  ) => void;
+  update?: (this: CanvasShaderNode<T, C>, node: CoreNode) => void;
+  /**
+   * Set this to true when using ctx functions that scale, clip, rotate, etc..
+   */
+  saveAndRestore?: boolean;
+};
+
+export class CanvasShaderNode<
+  Props extends object = Record<string, unknown>,
+  Computed extends object = Record<string, unknown>,
+> extends CoreShaderNode<Props> {
+  private updater: ((node: CoreNode, props?: Props) => void) | undefined =
+    undefined;
+  private valueKey: string = '';
+  computed: Partial<Computed> = {};
+  applySNR: boolean;
+  render: CanvasShaderType<Props>['render'];
+
+  constructor(
+    shaderKey: string,
+    config: CanvasShaderType<Props>,
+    stage: Stage,
+    props?: Props,
+  ) {
+    super(shaderKey, config, stage, props);
+    this.applySNR = config.saveAndRestore || false;
+    this.render = config.render;
+    if (config.update !== undefined) {
+      this.updater = config.update!;
+      if (this.props === undefined) {
+        this.updater!(this.node as CoreNode, this.props);
+        return;
+      }
+
+      this.update = () => {
+        const prevKey = this.valueKey;
+        this.valueKey = '';
+        for (const key in this.resolvedProps) {
+          this.valueKey += `${key}:${this.resolvedProps[key]!};`;
+        }
+
+        if (prevKey === this.valueKey) {
+          return;
+        }
+
+        if (prevKey.length > 0) {
+          this.stage.shManager.mutateShaderValueUsage(prevKey, -1);
+        }
+
+        const computed = this.stage.shManager.getShaderValues(
+          this.valueKey,
+        ) as Record<string, unknown>;
+        if (computed !== undefined) {
+          this.computed = computed as Computed;
+        }
+        this.computed = {};
+        this.updater!(this.node as CoreNode);
+        this.stage.shManager.setShaderValues(this.valueKey, this.computed);
+      };
+    }
+  }
+
+  toColorString(rgba: number) {
+    return (this.stage.renderer as CanvasRenderer).getParsedColor(rgba, true);
+  }
+}