@lightningjs/renderer 3.0.0-beta1 → 3.0.0-beta11

package/src/core/platforms/web/WebPlatform.ts

@@ -0,0 +1,121 @@
+import { Platform } from '../Platform.js';
+import type { Stage } from '../../Stage.js';
+
+export class WebPlatform extends Platform {
+  ////////////////////////
+  // Platform-specific methods
+  ////////////////////////
+
+  override createCanvas(): HTMLCanvasElement {
+    const canvas = document.createElement('canvas');
+    return canvas;
+  }
+
+  override getElementById(id: string): HTMLElement | null {
+    return document.getElementById(id);
+  }
+
+  ////////////////////////
+  // Update loop
+  ////////////////////////
+
+  override startLoop(stage: Stage): void {
+    let isIdle = false;
+    let lastFrameTime = 0;
+
+    const runLoop = (currentTime: number = 0) => {
+      const targetFrameTime = stage.targetFrameTime;
+
+      // Check if we should throttle this frame
+      if (
+        targetFrameTime > 0 &&
+        currentTime - lastFrameTime < targetFrameTime
+      ) {
+        // Too early for next frame, schedule with setTimeout for precise timing
+        const delay = targetFrameTime - (currentTime - lastFrameTime);
+        setTimeout(() => requestAnimationFrame(runLoop), delay);
+        return;
+      }
+
+      stage.updateFrameTime();
+      stage.updateAnimations();
+
+      if (!stage.hasSceneUpdates()) {
+        // We still need to calculate the fps else it looks like the app is frozen
+        stage.calculateFps();
+
+        if (targetFrameTime > 0) {
+          // Use setTimeout for throttled idle frames
+          setTimeout(
+            () => requestAnimationFrame(runLoop),
+            Math.max(targetFrameTime, 16.666666666666668),
+          );
+        } else {
+          // Use standard idle timeout when not throttling
+          setTimeout(() => requestAnimationFrame(runLoop), 16.666666666666668);
+        }
+
+        if (!isIdle) {
+          stage.shManager.cleanup();
+          stage.eventBus.emit('idle');
+          isIdle = true;
+        }
+
+        if (stage.txMemManager.checkCleanup() === true) {
+          stage.txMemManager.cleanup(false);
+        }
+
+        stage.flushFrameEvents();
+        return;
+      }
+
+      isIdle = false;
+      stage.drawFrame();
+      stage.flushFrameEvents();
+
+      // Schedule next frame
+      if (targetFrameTime > 0) {
+        // Use setTimeout + rAF combination for precise FPS control
+        const nextFrameDelay = Math.max(
+          0,
+          targetFrameTime - (performance.now() - currentTime),
+        );
+        setTimeout(() => requestAnimationFrame(runLoop), nextFrameDelay);
+      } else {
+        // Use standard rAF when not throttling
+        requestAnimationFrame(runLoop);
+      }
+    };
+    requestAnimationFrame(runLoop);
+  }
+
+  ////////////////////////
+  // ImageBitmap
+  ////////////////////////
+
+  override createImageBitmap(
+    blob: ImageBitmapSource,
+    sxOrOptions?: number | ImageBitmapOptions,
+    sy?: number,
+    sw?: number,
+    sh?: number,
+    options?: ImageBitmapOptions,
+  ): Promise<ImageBitmap> {
+    if (typeof sxOrOptions === 'number') {
+      return createImageBitmap(
+        blob,
+        sxOrOptions,
+        sy ?? 0,
+        sw ?? 0,
+        sh ?? 0,
+        options,
+      );
+    } else {
+      return createImageBitmap(blob, sxOrOptions);
+    }
+  }
+
+  getTimeStamp(): number {
+    return performance ? performance.now() : Date.now();
+  }
+}

package/src/core/renderers/CoreContextTexture.ts

@@ -34,7 +34,7 @@ export abstract class CoreContextTexture {
     this.memManager.setTextureMemUse(this.textureSource, byteSize);
   }
 
-  abstract load(): void;
+  abstract load(): Promise<void>;
   abstract free(): void;
 
   get renderable(): boolean {

package/src/core/renderers/CoreRenderer.ts

@@ -25,7 +25,7 @@ import type { ContextSpy } from '../lib/ContextSpy.js';
 import type { RenderCoords } from '../lib/RenderCoords.js';
 import type { RectWithValid } from '../lib/utils.js';
 import type { CoreShaderProgram } from './CoreShaderProgram.js';
-import type { Texture } from '../textures/Texture.js';
+import type { Texture, TextureCoords } from '../textures/Texture.js';
 import { CoreContextTexture } from './CoreContextTexture.js';
 import type { CoreShaderType, CoreShaderNode } from './CoreShaderNode.js';
 
@@ -38,6 +38,7 @@ export interface QuadOptions {
   colorBr: number;
   texture: Texture | null;
   textureOptions: TextureOptions | null;
+  textureCoords: TextureCoords | undefined;
   zIndex: number;
   shader: CoreShaderNode | null;
   alpha: number;
@@ -51,7 +52,7 @@ export interface QuadOptions {
   renderCoords?: RenderCoords;
   rtt: boolean;
   parentHasRenderTexture: boolean;
-  framebufferDimensions: Dimensions;
+  framebufferDimensions: Dimensions | null;
 }
 
 export interface CoreRendererOptions {
@@ -103,5 +104,7 @@ export abstract class CoreRenderer {
   abstract renderToTexture(node: CoreNode): void;
   abstract getBufferInfo(): BufferInfo | null;
   abstract getQuadCount(): number | null;
+  abstract updateViewport(): void;
   abstract updateClearColor(color: number): void;
+  getTextureCoords?(node: CoreNode): TextureCoords;
 }

package/src/core/renderers/CoreShaderNode.ts

@@ -66,9 +66,7 @@ export function resolveShaderProps(
  * 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>,
-> {
+export interface CoreShaderType<Props extends object = any> {
   /**
    * Values you use to draw the Shader
    */
@@ -88,7 +86,7 @@ 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;
+  readonly resolvedProps: Props | undefined = undefined;
   protected definedProps: Props | undefined = undefined;
   protected node: CoreNode | null = null;
   update: (() => void) | undefined = undefined;
@@ -152,8 +150,14 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
     this.node = node;
   }
 
-  getResolvedProps() {
-    return this.resolvedProps;
+  createValueKey() {
+    let valueKey = '';
+    for (const key in this.resolvedProps) {
+      valueKey += `${key}:${this.resolvedProps[key]!};`;
+    }
+    valueKey += `node-width:${this.node!.width}`;
+    valueKey += `node-height:${this.node!.height}`;
+    return valueKey;
   }
 
   get props(): Props | undefined {

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

@@ -26,14 +26,10 @@ import {
   type QuadOptions,
 } from '../CoreRenderer.js';
 import { CanvasTexture } from './CanvasTexture.js';
-import {
-  parseColor,
-  parseToAbgrString,
-  parseToRgbaString,
-} from './internal/ColorUtils.js';
+import { parseColor } from '../../lib/colorParser.js';
 import { assertTruthy } from '../../../utils.js';
 import { CanvasShaderNode, type CanvasShaderType } from './CanvasShaderNode.js';
-import type { CoreShaderType } from '../CoreShaderNode.js';
+import { normalizeCanvasColor } from '../../lib/colorCache.js';
 
 export class CanvasRenderer extends CoreRenderer {
   private context: CanvasRenderingContext2D;
@@ -43,8 +39,6 @@ export class CanvasRenderer extends CoreRenderer {
   public renderToTextureActive = false;
   activeRttNode: CoreNode | null = null;
 
-  private parsedColorCache: Map<number, string> = new Map();
-
   constructor(options: CoreRendererOptions) {
     super(options);
 
@@ -54,7 +48,7 @@ export class CanvasRenderer extends CoreRenderer {
     this.canvas = canvas as HTMLCanvasElement;
     this.context = canvas.getContext('2d') as CanvasRenderingContext2D;
     this.pixelRatio = this.stage.pixelRatio;
-    this.clearColor = this.getParsedColor(this.stage.clearColor);
+    this.clearColor = normalizeCanvasColor(this.stage.clearColor);
   }
 
   reset(): void {
@@ -221,12 +215,12 @@ export class CanvasRenderer extends CoreRenderer {
         endX,
         endY,
       );
-      gradient.addColorStop(0, this.getParsedColor(color));
-      gradient.addColorStop(1, this.getParsedColor(endColor));
+      gradient.addColorStop(0, normalizeCanvasColor(color));
+      gradient.addColorStop(1, normalizeCanvasColor(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.fillStyle = normalizeCanvasColor(color);
       this.context.fillRect(quad.tx, quad.ty, quad.width, quad.height);
     }
   }
@@ -270,30 +264,20 @@ export class CanvasRenderer extends CoreRenderer {
     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);
+    this.clearColor = normalizeCanvasColor(color);
+  }
+
+  override updateViewport(): void {
+    // noop
   }
 
-  override getDefaultShaderNode() {
+  getDefaultShaderNode() {
     return null;
   }
 }

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

@@ -16,10 +16,10 @@
  */
 
 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';
-import type { CanvasRenderer } from './CanvasRenderer.js';
 
 export type CanvasShaderType<
   T extends object = Record<string, unknown>,
@@ -67,10 +67,7 @@ export class CanvasShaderNode<
 
       this.update = () => {
         const prevKey = this.valueKey;
-        this.valueKey = '';
-        for (const key in this.resolvedProps) {
-          this.valueKey += `${key}:${this.resolvedProps[key]!};`;
-        }
+        this.valueKey = this.createValueKey();
 
         if (prevKey === this.valueKey) {
           return;
@@ -94,6 +91,6 @@ export class CanvasShaderNode<
   }
 
   toColorString(rgba: number) {
-    return (this.stage.renderer as CanvasRenderer).getParsedColor(rgba, true);
+    return normalizeCanvasColor(rgba, true);
   }
 }

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

@@ -19,8 +19,8 @@
 
 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';
-import { formatRgba, type IParsedColor } from './internal/ColorUtils.js';
 
 export class CanvasTexture extends CoreContextTexture {
   protected image:
@@ -35,19 +35,19 @@ export class CanvasTexture extends CoreContextTexture {
       }
     | undefined;
 
-  load(): void {
+  async load(): Promise<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();
-      });
+    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 {
@@ -64,8 +64,11 @@ export class CanvasTexture 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/webgl/WebGlCtxRenderTexture.ts

@@ -41,6 +41,11 @@ export class WebGlCtxRenderTexture extends WebGlCtxTexture {
     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

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

@@ -18,11 +18,9 @@
  */
 
 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 { Texture } from '../../textures/Texture.js';
-import { isPowerOfTwo } from '../../utils.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
 import { isHTMLImageElement } from './internal/RendererUtils.js';
 
@@ -57,7 +55,6 @@ export class WebGlCtxTexture extends CoreContextTexture {
       this.load();
       return null;
     }
-    assertTruthy(this._nativeCtxTexture);
     return this._nativeCtxTexture;
   }
 
@@ -78,54 +75,65 @@ export class WebGlCtxTexture extends CoreContextTexture {
    * to force the texture to be pre-loaded prior to accessing the ctxTexture
    * property.
    */
-  load() {
-    // If the texture is already loading or loaded, don't load it again.
+  async load(): Promise<void> {
+    // If the texture is already loading or loaded, return resolved promise
     if (this.state === 'loading' || this.state === 'loaded') {
-      return;
+      return Promise.resolve();
     }
 
     this.state = 'loading';
     this.textureSource.setState('loading');
+
+    // Await the native texture creation to ensure GPU buffer is fully allocated
     this._nativeCtxTexture = this.createNativeCtxTexture();
 
     if (this._nativeCtxTexture === null) {
       this.state = 'failed';
-      this.textureSource.setState(
-        'failed',
-        new Error('Could not create WebGL Texture'),
-      );
+      const error = new Error('Could not create WebGL Texture');
+      this.textureSource.setState('failed', error);
       console.error('Could not create WebGL Texture');
-      return;
+      throw error;
     }
 
-    this.onLoadRequest()
-      .then(({ width, height }) => {
-        // If the texture has been freed while loading, return early.
-        if (this.state === 'freed') {
-          return;
-        }
-
-        this.state = 'loaded';
-        this._w = width;
-        this._h = height;
-        // Update the texture source's width and height so that it can be used
-        // for rendering.
-        this.textureSource.setState('loaded', { width, height });
-
-        // cleanup source texture data
-        this.textureSource.freeTextureData();
-      })
-      .catch((err) => {
-        // If the texture has been freed while loading, return early.
-        if (this.state === 'freed') {
-          return;
-        }
-
-        this.state = 'failed';
-        this.textureSource.setState('failed', err);
+    try {
+      const { width, height } = await this.onLoadRequest();
+
+      // If the texture has been freed while loading, return early.
+      // Type assertion needed because state could change during async operations
+      if ((this.state as string) === 'freed') {
+        return;
+      }
+
+      this.state = 'loaded';
+      this._w = width;
+      this._h = height;
+      // Update the texture source's width and height so that it can be used
+      // for rendering.
+      this.textureSource.setState('loaded', { width, height });
+
+      // cleanup source texture data next tick
+      // This is done using queueMicrotask to ensure it runs after the current
+      // event loop tick, allowing the texture to be fully loaded and bound
+      // to the GL context before freeing the source data.
+      // This is important to avoid issues with the texture data being
+      // freed while the texture is still being loaded or used.
+      queueMicrotask(() => {
         this.textureSource.freeTextureData();
-        console.error(err);
       });
+    } catch (err: unknown) {
+      // If the texture has been freed while loading, return early.
+      // Type assertion needed because state could change during async operations
+      if ((this.state as string) === 'freed') {
+        return;
+      }
+
+      this.state = 'failed';
+      const error = err instanceof Error ? err : new Error(String(err));
+      this.textureSource.setState('failed', error);
+      this.textureSource.freeTextureData();
+      console.error(err);
+      throw error; // Re-throw to propagate the error
+    }
   }
 
   /**
@@ -268,17 +276,17 @@ export class WebGlCtxTexture extends CoreContextTexture {
   }
 
   /**
-   * Create native context texture
+   * Create native context texture asynchronously
    *
    * @remarks
-   * When this method returns the returned texture will be bound to the GL context state.
+   * When this method resolves, the returned texture will be bound to the GL context state
+   * and fully ready for use. This ensures proper GPU resource allocation timing.
    *
-   * @param width
-   * @param height
-   * @returns
+   * @returns Promise that resolves to the native WebGL texture or null on failure
    */
-  protected createNativeCtxTexture() {
+  protected createNativeCtxTexture(): WebGLTexture | null {
     const { glw } = this;
+
     const nativeTexture = glw.createTexture();
     if (!nativeTexture) {
       return null;
@@ -296,6 +304,7 @@ export class WebGlCtxTexture extends CoreContextTexture {
     // texture wrapping method
     glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
     glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
+
     return nativeTexture;
   }
 }

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

@@ -24,6 +24,8 @@ 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'
@@ -44,7 +46,6 @@ type RenderOpQuadOptions = Pick<QuadOptions, ReqQuad> &
  *
  */
 export class WebGlRenderOp extends CoreRenderOp {
-  length = 0;
   numQuads = 0;
   textures: WebGlCtxTexture[] = [];
 
@@ -56,15 +57,32 @@ export class WebGlRenderOp extends CoreRenderOp {
   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 | null;
+  readonly alpha: number;
+  readonly pixelRatio: number;
 
   constructor(
     readonly renderer: WebGlRenderer,
-    readonly quad: RenderOpQuadOptions,
+    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
@@ -107,25 +125,21 @@ export class WebGlRenderOp extends CoreRenderOp {
     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.quad.clippingRect.valid) {
-      const { x, y, width, height } = this.quad.clippingRect;
-      const pixelRatio = this.quad.parentHasRenderTexture
-        ? 1
-        : stage.pixelRatio;
-      const canvasHeight = options.canvas.height;
-
-      const clipX = Math.round(x * pixelRatio);
-      const clipWidth = Math.round(width * pixelRatio);
-      const clipHeight = Math.round(height * pixelRatio);
-      let clipY = Math.round(canvasHeight - clipHeight - y * pixelRatio);
+    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.quad.parentHasRenderTexture) {
-        clipY = this.quad.framebufferDimensions
-          ? this.quad.framebufferDimensions.height - this.quad.height
+      if (this.parentHasRenderTexture) {
+        clipY = this.framebufferDimensions
+          ? this.framebufferDimensions.height - this.height
           : 0;
       }
 
@@ -135,11 +149,19 @@ export class WebGlRenderOp extends CoreRenderOp {
       glw.setScissorTest(false);
     }
 
-    glw.drawElements(
-      glw.TRIANGLES,
-      6 * this.numQuads,
-      glw.UNSIGNED_SHORT,
-      quadIdx,
-    );
+    // Check if this is SDF rendering (has sdfBuffers)
+    if (this.sdfShaderProps !== undefined) {
+      // SDF rendering uses drawArrays with explicit triangle vertices (6 vertices per quad)
+      glw.drawArrays(glw.TRIANGLES, 0, 6 * this.numQuads);
+    } else {
+      // Regular rendering uses drawElements with index buffer (4 vertices per quad)
+      const quadIdx = (this.bufferIdx / 32) * 6 * 2;
+      glw.drawElements(
+        glw.TRIANGLES,
+        6 * this.numQuads,
+        glw.UNSIGNED_SHORT,
+        quadIdx,
+      );
+    }
   }
 }