@lightningjs/renderer 2.13.1 → 3.0.0-beta2

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

package/src/core/renderers/canvas/{CanvasCoreTexture.ts → CanvasTexture.ts}

@@ -22,7 +22,7 @@ import { assertTruthy } from '../../../utils.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
 import { formatRgba, type IParsedColor } from './internal/ColorUtils.js';
 
-export class CanvasCoreTexture extends CoreContextTexture {
+export class CanvasTexture extends CoreContextTexture {
   protected image:
     | ImageBitmap
     | HTMLCanvasElement
@@ -64,8 +64,11 @@ export class CanvasCoreTexture extends CoreContextTexture {
     // - tinted image
     const mult = this.tintCache ? 8 : 4;
     if (this.textureSource.dimensions) {
-      const { width, height } = this.textureSource.dimensions;
-      this.setTextureMemUse(width * height * mult);
+      this.setTextureMemUse(
+        this.textureSource.dimensions.width *
+          this.textureSource.dimensions.height *
+          mult,
+      );
     }
   }
 

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

@@ -18,20 +18,10 @@
  */
 
 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;
@@ -54,8 +44,6 @@ export function getRadius(quad: QuadOptions): RadiusEffectProps['radius'] {
   return 0;
 }
 
-/**
- * Extract `RoundedRectangle` shader radius to apply as a clipping */
 export function getBorder(
   quad: QuadOptions,
   direction: '' | Direction = '',
@@ -229,3 +217,4 @@ export function strokeLine(
   ctx.lineTo(ex, ey);
   ctx.stroke();
 }
+*/

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

@@ -47,6 +47,22 @@ export function parseColor(abgr: number): IParsedColor {
   return { isWhite: false, a, r, g, b };
 }
 
+export function parseToAbgrString(abgr: number) {
+  const a = ((abgr >>> 24) & 0xff) / 255;
+  const b = (abgr >>> 16) & 0xff & 0xff;
+  const g = (abgr >>> 8) & 0xff & 0xff;
+  const r = abgr & 0xff & 0xff;
+  return `rgba(${r},${g},${b},${a})`;
+}
+
+export function parseToRgbaString(rgba: number) {
+  const r = (rgba >>> 24) & 0xff;
+  const g = (rgba >>> 16) & 0xff & 0xff;
+  const b = (rgba >>> 8) & 0xff & 0xff;
+  const a = (rgba & 0xff & 0xff) / 255;
+  return `rgba(${r},${g},${b},${a})`;
+}
+
 /**
  * Extract color components
  */

package/src/core/renderers/webgl/{WebGlCoreCtxRenderTexture.ts → WebGlCtxRenderTexture.ts}

@@ -22,9 +22,9 @@ 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';
+import { WebGlCtxTexture } from './WebGlCtxTexture.js';
 
-export class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
+export class WebGlCtxRenderTexture extends WebGlCtxTexture {
   declare textureSource: RenderTexture;
 
   public framebuffer: WebGLFramebuffer | null = null;

package/src/core/renderers/webgl/{WebGlCoreCtxSubTexture.ts → WebGlCtxSubTexture.ts}

@@ -22,9 +22,9 @@ 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';
+import { WebGlCtxTexture } from './WebGlCtxTexture.js';
 
-export class WebGlCoreCtxSubTexture extends WebGlCoreCtxTexture {
+export class WebGlCtxSubTexture extends WebGlCtxTexture {
   constructor(
     glw: WebGlContextWrapper,
     memManager: TextureMemoryManager,

package/src/core/renderers/webgl/{WebGlCoreCtxTexture.ts → WebGlCtxTexture.ts}

@@ -39,7 +39,7 @@ const TRANSPARENT_TEXTURE_DATA = new Uint8Array([0, 0, 0, 0]);
  * and trigger the loading/uploading of the texture's data if it hasn't been
  * loaded yet.
  */
-export class WebGlCoreCtxTexture extends CoreContextTexture {
+export class WebGlCtxTexture extends CoreContextTexture {
   protected _nativeCtxTexture: WebGLTexture | null = null;
   private _w = 0;
   private _h = 0;

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

@@ -0,0 +1,161 @@
+/*
+ * 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 { QuadOptions } from '../CoreRenderer.js';
+import type { CoreTextNode } from '../../CoreTextNode.js';
+import type { RectWithValid } from '../../lib/utils.js';
+import type { Dimensions } from '../../../common/CommonTypes.js';
+
+type ReqQuad =
+  | 'alpha'
+  | 'shader'
+  | 'parentHasRenderTexture'
+  | 'rtt'
+  | 'clippingRect'
+  | 'height'
+  | 'width';
+type RenderOpQuadOptions = Pick<QuadOptions, ReqQuad> &
+  Partial<Omit<QuadOptions, ReqQuad>> & {
+    sdfShaderProps?: Record<string, unknown>;
+    sdfBuffers?: BufferCollection;
+  };
+
+/**
+ * Can render multiple quads with multiple textures (up to vertex shader texture limit)
+ *
+ */
+export class WebGlRenderOp extends CoreRenderOp {
+  numQuads = 0;
+  textures: WebGlCtxTexture[] = [];
+
+  /**
+   * need to improve this when TextRenderers are refactored
+   */
+  readonly sdfShaderProps: Record<string, unknown> | undefined;
+  readonly sdfNode: CoreTextNode | undefined;
+  readonly maxTextures: number;
+  readonly buffers: BufferCollection;
+  readonly shader: WebGlShaderNode;
+  readonly width: number;
+  readonly height: number;
+  readonly clippingRect: RectWithValid;
+  readonly rtt: boolean;
+  readonly parentHasRenderTexture: boolean;
+  readonly framebufferDimensions?: Dimensions;
+  readonly alpha: number;
+  readonly pixelRatio: number;
+
+  constructor(
+    readonly renderer: WebGlRenderer,
+    quad: RenderOpQuadOptions,
+    readonly bufferIdx: number,
+  ) {
+    super();
+    this.buffers = quad.sdfBuffers || renderer.quadBufferCollection;
+    this.shader = quad.shader as WebGlShaderNode;
+    this.width = quad.width;
+    this.height = quad.height;
+    this.clippingRect = quad.clippingRect;
+    this.parentHasRenderTexture = quad.parentHasRenderTexture;
+    this.framebufferDimensions = quad.framebufferDimensions;
+    this.rtt = quad.rtt;
+    this.alpha = quad.alpha;
+    this.pixelRatio =
+      this.parentHasRenderTexture === true ? 1 : renderer.stage.pixelRatio;
+
+    /**
+     * related to line 51
+     */
+    this.sdfShaderProps = quad.sdfShaderProps;
+
+    this.maxTextures = this.shader.program.supportsIndexedTextures
+      ? (renderer.glw.getParameter(
+          renderer.glw.MAX_VERTEX_TEXTURE_IMAGE_UNITS,
+        ) as number)
+      : 1;
+  }
+
+  addTexture(texture: WebGlCtxTexture): number {
+    const { textures, maxTextures } = this;
+    let existingIdx = -1;
+    const texturesLength = textures.length;
+    for (let i = 0; i < texturesLength; i++) {
+      const t = textures[i];
+      if (t === texture) {
+        existingIdx = i;
+        break;
+      }
+    }
+
+    if (existingIdx !== -1) {
+      return existingIdx;
+    }
+
+    if (texturesLength >= maxTextures) {
+      return 0xffffffff;
+    }
+    this.textures.push(texture);
+    return texturesLength;
+  }
+
+  draw() {
+    const { glw, options, stage } = this.renderer;
+
+    stage.shManager.useShader(this.shader.program);
+    this.shader.program.bindRenderOp(this);
+
+    // TODO: Reduce calculations required
+    const quadIdx = (this.bufferIdx / 32) * 6 * 2;
+    // Clipping
+    if (this.clippingRect.valid === true) {
+      const clipX = Math.round(this.clippingRect.x * this.pixelRatio);
+      const clipWidth = Math.round(this.clippingRect.width * this.pixelRatio);
+      const clipHeight = Math.round(this.clippingRect.height * this.pixelRatio);
+      let clipY = Math.round(
+        options.canvas.height -
+          clipHeight -
+          this.clippingRect.y * this.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.height - this.height
+          : 0;
+      }
+
+      glw.setScissorTest(true);
+      glw.scissor(clipX, clipY, clipWidth, clipHeight);
+    } else {
+      glw.setScissorTest(false);
+    }
+
+    glw.drawElements(
+      glw.TRIANGLES,
+      6 * this.numQuads,
+      glw.UNSIGNED_SHORT,
+      quadIdx,
+    );
+  }
+}