@lightningjs/renderer 3.0.0-beta9 → 3.0.0

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

@@ -1,96 +1,95 @@
-/*
- * 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 = this.createValueKey();
-
-        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);
-  }
-}
+/*
+ * 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 { normalizeCanvasColor } from '../../lib/colorCache.js';
+import type { Stage } from '../../Stage.js';
+import { CoreShaderNode, type CoreShaderType } from '../CoreShaderNode.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,
+    node: CoreNode,
+    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 = this.createValueKey();
+
+        if (prevKey === this.valueKey) {
+          return;
+        }
+
+        if (prevKey.length > 0) {
+          stage.shManager.mutateShaderValueUsage(prevKey, -1);
+        }
+
+        const computed = 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);
+        stage.shManager.setShaderValues(this.valueKey, this.computed);
+      };
+    }
+  }
+
+  toColorString(rgba: number) {
+    return normalizeCanvasColor(rgba, true);
+  }
+}

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

@@ -1,156 +1,160 @@
-/*
- * 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 CanvasTexture extends CoreContextTexture {
-  protected image:
-    | ImageBitmap
-    | HTMLCanvasElement
-    | HTMLImageElement
-    | undefined;
-  protected tintCache:
-    | {
-        key: string;
-        image: HTMLCanvasElement;
-      }
-    | undefined;
-
-  load(): void {
-    this.textureSource.setState('loading');
-
-    this.onLoadRequest()
-      .then((size) => {
-        this.textureSource.setState('loaded', size);
-        this.textureSource.freeTextureData();
-        this.updateMemSize();
-      })
-      .catch((err) => {
-        this.textureSource.setState('failed', err as Error);
-        this.textureSource.freeTextureData();
-      });
-  }
-
-  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) {
-      this.setTextureMemUse(
-        this.textureSource.dimensions.width *
-          this.textureSource.dimensions.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 };
-  }
-}
+/*
+ * 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 { formatRgba, type IParsedColor } from '../../lib/colorParser.js';
+import { CoreContextTexture } from '../CoreContextTexture.js';
+
+export class CanvasTexture 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;
+    }
+  }
+
+  release(): void {
+    this.image = undefined;
+    this.tintCache = undefined;
+  }
+
+  free(): void {
+    this.release();
+    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) {
+      this.setTextureMemUse(
+        this.textureSource.dimensions.w *
+          this.textureSource.dimensions.h *
+          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 { w: data.width, h: data.height };
+    } else if (
+      (typeof ImageBitmap !== 'undefined' && data instanceof ImageBitmap) ||
+      data instanceof HTMLImageElement
+    ) {
+      this.image = data;
+      return { w: data.width, h: data.height };
+    }
+
+    return { w: 0, h: 0 };
+  }
+}

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

@@ -0,0 +1,106 @@
+/*
+ * 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 { CoreRenderOp } from '../CoreRenderOp.js';
+import type { WebGlCtxTexture } from './WebGlCtxTexture.js';
+import type { WebGlRenderer } from './WebGlRenderer.js';
+import type { BufferCollection } from './internal/BufferCollection.js';
+import type { WebGlShaderNode } from './WebGlShaderNode.js';
+import type { RectWithValid } from '../../lib/utils.js';
+import type { Dimensions } from '../../../common/CommonTypes.js';
+import type { Stage } from '../../Stage.js';
+
+/**
+ * Can render multiple quads with multiple textures (up to vertex shader texture limit)
+ *
+ */
+export class SdfRenderOp extends CoreRenderOp {
+  public numQuads = 0;
+  public readonly isCoreNode = false as const;
+  public renderOpTextures: WebGlCtxTexture[] = [];
+  public time: number = 0;
+  readonly stage: Stage;
+
+  constructor(
+    readonly renderer: WebGlRenderer,
+    readonly shader: WebGlShaderNode,
+    readonly sdfShaderProps: Record<string, unknown>,
+    readonly quadBufferCollection: BufferCollection,
+    readonly worldAlpha: number,
+    readonly clippingRect: RectWithValid,
+    readonly w: number,
+    readonly h: number,
+    readonly rtt: boolean,
+    readonly parentHasRenderTexture: boolean,
+    readonly framebufferDimensions: Dimensions | null,
+  ) {
+    super();
+    this.stage = renderer.stage;
+  }
+
+  addTexture(texture: WebGlCtxTexture): number {
+    const { renderOpTextures } = this;
+    const length = renderOpTextures.length;
+
+    // We only support 1 texture (atlas) for SDF for now, but following the pattern
+    for (let i = 0; i < length; i++) {
+      if (renderOpTextures[i] === texture) {
+        return i;
+      }
+    }
+
+    renderOpTextures.push(texture);
+    return length;
+  }
+
+  draw() {
+    const { glw, stage } = this.renderer;
+    const canvas = stage.platform!.canvas!;
+
+    stage.shManager.useShader(this.shader.program);
+    this.shader.program.bindRenderOp(this);
+
+    // Clipping
+    if (this.clippingRect.valid === true) {
+      const pixelRatio = this.parentHasRenderTexture ? 1 : stage.pixelRatio;
+      const clipX = Math.round(this.clippingRect.x * pixelRatio);
+      const clipWidth = Math.round(this.clippingRect.w * pixelRatio);
+      const clipHeight = Math.round(this.clippingRect.h * pixelRatio);
+      let clipY = Math.round(
+        canvas.height - clipHeight - this.clippingRect.y * pixelRatio,
+      );
+      // if parent has render texture, we need to adjust the scissor rect
+      // to be relative to the parent's framebuffer
+      if (this.parentHasRenderTexture) {
+        clipY = this.framebufferDimensions
+          ? this.framebufferDimensions.h - this.h
+          : 0;
+      }
+
+      glw.setScissorTest(true);
+      glw.scissor(clipX, clipY, clipWidth, clipHeight);
+    } else {
+      glw.setScissorTest(false);
+    }
+
+    // SDF rendering uses drawArrays with explicit triangle vertices (6 vertices per quad)
+    // Note: buffers should be bound by bindRenderOp -> bindBufferCollection
+    glw.drawArrays(glw.TRIANGLES, 0, 6 * this.numQuads);
+  }
+}