@solidtv/renderer 1.0.0

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

@@ -0,0 +1,274 @@
+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 } from '../../lib/colorParser.js';
+import { CanvasShaderNode, type CanvasShaderType } from './CanvasShaderNode.js';
+import { normalizeCanvasColor } from '../../lib/colorCache.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;
+
+  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 = normalizeCanvasColor(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(node: CoreNode): void {
+    const ctx = this.context;
+    const { tx, ty, ta, tb, tc, td } = node.globalTransform!;
+    const clippingRect = node.clippingRect;
+    let texture = node.renderTexture;
+    // The Canvas2D renderer only supports image textures, no textures are used for color blocks
+    if (texture !== null) {
+      const textureType = texture.type;
+      if (
+        textureType !== TextureType.image &&
+        textureType !== TextureType.subTexture &&
+        textureType !== TextureType.color &&
+        textureType !== TextureType.noise
+      ) {
+        return;
+      }
+    }
+
+    const hasTransform = ta !== 1;
+    const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
+    const shader = node.props.shader;
+    const hasShader = shader !== null;
+
+    let saveAndRestore = hasTransform === true || hasClipping === true;
+    if (hasShader === true) {
+      saveAndRestore = saveAndRestore || (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(node);
+      };
+      const quad: QuadOptions = {
+        width: node.props.w,
+        height: node.props.h,
+        colorTl: node.premultipliedColorTl,
+        colorTr: node.premultipliedColorTr,
+        colorBl: node.premultipliedColorBl,
+        colorBr: node.premultipliedColorBr,
+        texture: texture,
+        textureOptions: node.props.textureOptions,
+        textureCoords: node.renderTextureCoords,
+        zIndex: node.zIndex, // zIndex usage?
+        shader: shader,
+        alpha: node.worldAlpha,
+        clippingRect: clippingRect,
+        tx,
+        ty,
+        ta,
+        tb,
+        tc,
+        td,
+        renderCoords: node.renderCoords,
+        rtt: node.props.rtt,
+        parentHasRenderTexture: node.parentHasRenderTexture,
+        framebufferDimensions: node.parentHasRenderTexture
+          ? node.parentFramebufferDimensions
+          : null,
+      };
+
+      (shader as CanvasShaderNode).render(ctx, quad, renderContext);
+      renderContext = null;
+    } else {
+      this.renderContext(node);
+    }
+
+    if (saveAndRestore) {
+      ctx.restore();
+    }
+  }
+
+  renderContext(node: CoreNode) {
+    const color = node.premultipliedColorTl;
+    const texture = node.renderTexture!;
+    const textureType = texture.type;
+    const tx = node.globalTransform!.tx;
+    const ty = node.globalTransform!.ty;
+    const width = node.props.w;
+    const height = node.props.h;
+
+    if (textureType !== TextureType.color) {
+      const tintColor = parseColor(color);
+      if (textureType !== TextureType.subTexture) {
+        const image = (texture.ctxTexture as CanvasTexture).getImage(tintColor);
+        this.context.globalAlpha = tintColor.a ?? node.worldAlpha;
+        this.context.drawImage(image, tx, ty, width, height);
+        this.context.globalAlpha = 1;
+        return;
+      }
+      const image = (
+        (texture as SubTexture).parentTexture.ctxTexture as CanvasTexture
+      ).getImage(tintColor);
+      const props = (texture as SubTexture).props;
+
+      this.context.globalAlpha = tintColor.a ?? node.worldAlpha;
+      this.context.drawImage(
+        image,
+        props.x,
+        props.y,
+        props.w,
+        props.h,
+        tx,
+        ty,
+        width,
+        height,
+      );
+      this.context.globalAlpha = 1;
+      return;
+    }
+    const hasGradient =
+      node.premultipliedColorTl !== node.premultipliedColorTr ||
+      node.premultipliedColorTl !== node.premultipliedColorBr;
+    if (hasGradient === true) {
+      let endX: number = tx;
+      let endY: number = ty;
+      let endColor: number;
+      if (node.premultipliedColorTl === node.premultipliedColorTr) {
+        // vertical
+        endX = tx;
+        endY = ty + height;
+        endColor = node.premultipliedColorBr;
+      } else {
+        // horizontal
+        endX = tx + width;
+        endY = ty;
+        endColor = node.premultipliedColorTr;
+      }
+      const gradient = this.context.createLinearGradient(tx, ty, endX, endY);
+      gradient.addColorStop(0, normalizeCanvasColor(color));
+      gradient.addColorStop(1, normalizeCanvasColor(endColor));
+      this.context.fillStyle = gradient;
+      this.context.fillRect(tx, ty, width, height);
+    } else {
+      this.context.fillStyle = normalizeCanvasColor(color);
+      this.context.fillRect(tx, ty, width, 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;
+  }
+
+  getRenderOpCount(): null {
+    return null;
+  }
+
+  /**
+   * Updates the clear color of the canvas renderer.
+   *
+   * @param color - The color to set as the clear color.
+   */
+  updateClearColor(color: number) {
+    this.clearColor = normalizeCanvasColor(color);
+  }
+
+  override updateViewport(): void {
+    // noop
+  }
+
+  getDefaultShaderNode() {
+    return null;
+  }
+}

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

@@ -0,0 +1,79 @@
+import type { CoreNode } from '../../CoreNode.js';
+import { normalizeCanvasColor } from '../../lib/colorCache.js';
+import type { Stage } from '../../Stage.js';
+import type { QuadOptions } from '../CoreRenderer.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,
+    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 normalizeCanvasColor(rgba, true);
+  }
+}

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

@@ -0,0 +1,141 @@
+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,103 @@
+import { CoreRenderOp } from '../CoreRenderOp.js';
+import { USE_RTT } from '../../../utils.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';
+
+/**
+ * A batched SDF text render operation.
+ *
+ * Rather than owning its own WebGL buffer, this op references a range
+ * inside the renderer's shared SDF vertex buffer. Multiple text nodes
+ * that share the same atlas texture and clipping state are merged into
+ * a single SdfRenderOp, producing one draw call for many strings.
+ */
+export class SdfRenderOp extends CoreRenderOp {
+  public numQuads = 0;
+  public readonly isCoreNode = false as const;
+  public renderOpTextures: WebGlCtxTexture[] = [];
+  public time: number = 0;
+  readonly stage: Stage;
+
+  /**
+   * Index of the first quad in the shared SDF buffer.
+   * Used to compute the byte offset into the element index buffer.
+   */
+  public startQuad = 0;
+
+  constructor(
+    readonly renderer: WebGlRenderer,
+    readonly shader: WebGlShaderNode,
+    readonly quadBufferCollection: BufferCollection,
+    public worldAlpha: number,
+    public clippingRect: RectWithValid,
+    readonly width: number,
+    readonly height: number,
+    readonly rtt: boolean,
+    public parentHasRenderTexture: boolean,
+    public framebufferDimensions: Dimensions | null,
+  ) {
+    super();
+    this.stage = renderer.stage;
+  }
+
+  addTexture(texture: WebGlCtxTexture): number {
+    const { renderOpTextures } = this;
+    const length = renderOpTextures.length;
+
+    for (let i = 0; i < length; i++) {
+      if (renderOpTextures[i] === texture) {
+        return i;
+      }
+    }
+
+    renderOpTextures.push(texture);
+    return length;
+  }
+
+  draw() {
+    const { glw, options, stage } = this.renderer;
+
+    stage.shManager.useShader(this.shader.program);
+    this.shader.program.bindRenderOp(this);
+
+    // Clipping
+    if (this.clippingRect.valid === true) {
+      const pixelRatio =
+        USE_RTT && this.parentHasRenderTexture ? 1 : stage.pixelRatio;
+      const clipX = Math.round(this.clippingRect.x * pixelRatio);
+      const clipWidth = Math.round(this.clippingRect.width * pixelRatio);
+      const clipHeight = Math.round(this.clippingRect.height * pixelRatio);
+      let clipY = Math.round(
+        options.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 (USE_RTT && this.parentHasRenderTexture) {
+        clipY = this.framebufferDimensions
+          ? this.framebufferDimensions.h - this.height
+          : 0;
+      }
+
+      glw.setScissorTest(true);
+      glw.scissor(clipX, clipY, clipWidth, clipHeight);
+    } else {
+      glw.setScissorTest(false);
+    }
+
+    // Draw the batch range from the shared SDF buffer using indexed rendering.
+    // 4 vertices per glyph, 6 indices per glyph (2 triangles).
+    // Byte offset into the shared Uint16 index buffer:
+    const byteOffset = this.startQuad * 6 * 2;
+    glw.drawElements(
+      glw.TRIANGLES,
+      6 * this.numQuads,
+      glw.UNSIGNED_SHORT,
+      byteOffset,
+    );
+  }
+}

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

@@ -0,0 +1,70 @@
+import type { Dimensions } from '../../../common/CommonTypes.js';
+import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
+import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { Bound } from '../../lib/utils.js';
+import type { RenderTexture } from '../../textures/RenderTexture.js';
+import { WebGlCtxTexture } from './WebGlCtxTexture.js';
+
+export class WebGlCtxRenderTexture extends WebGlCtxTexture {
+  declare textureSource: RenderTexture;
+
+  public framebuffer: WebGLFramebuffer | null = null;
+
+  override txCoords: Bound = {
+    x1: 0,
+    y1: 1,
+    x2: 1,
+    y2: 0,
+  };
+
+  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 { w, h } = this.textureSource;
+
+    // Create Framebuffer object
+    this.framebuffer = glw.createFramebuffer();
+
+    // Set the dimensions of the render texture
+    glw.texImage2D(0, glw.RGBA, w, h, 0, glw.RGBA, glw.UNSIGNED_BYTE, null);
+
+    // Update the texture memory manager
+    this.setTextureMemUse(w * h * 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 {
+      w,
+      h,
+    };
+  }
+
+  override free(): void {
+    super.free();
+
+    // Delete the framebuffer
+    this.glw.deleteFramebuffer(this.framebuffer);
+    this.framebuffer = null;
+  }
+}