@lightningjs/renderer 2.6.2 → 2.7.1

package/src/core/CoreNode.ts

@@ -783,6 +783,21 @@ export class CoreNode extends EventEmitter {
       if (this.textureOptions.preload) {
         texture.ctxTexture.load();
       }
+
+      texture.on('loaded', this.onTextureLoaded);
+      texture.on('failed', this.onTextureFailed);
+      texture.on('freed', this.onTextureFreed);
+
+      // If the parent is a render texture, the initial texture status
+      // will be set to freed until the texture is processed by the
+      // Render RTT nodes. So we only need to listen fo changes and
+      // no need to check the texture.state until we restructure how
+      // textures are being processed.
+      if (this.parentHasRenderTexture) {
+        this.notifyParentRTTOfUpdate();
+        return;
+      }
+
       if (texture.state === 'loaded') {
         assertTruthy(texture.dimensions);
         this.onTextureLoaded(texture, texture.dimensions);
@@ -792,9 +807,6 @@ export class CoreNode extends EventEmitter {
       } else if (texture.state === 'freed') {
         this.onTextureFreed(texture);
       }
-      texture.on('loaded', this.onTextureLoaded);
-      texture.on('failed', this.onTextureFailed);
-      texture.on('freed', this.onTextureFreed);
     });
   }
 
@@ -822,9 +834,8 @@ export class CoreNode extends EventEmitter {
     this.stage.requestRender();
 
     // If parent has a render texture, flag that we need to update
-    // @todo: Reserve type for RTT updates
     if (this.parentHasRenderTexture) {
-      this.setRTTUpdates(1);
+      this.notifyParentRTTOfUpdate();
     }
 
     this.emit('loaded', {
@@ -839,6 +850,11 @@ export class CoreNode extends EventEmitter {
   };
 
   private onTextureFailed: TextureFailedEventHandler = (_, error) => {
+    // If parent has a render texture, flag that we need to update
+    if (this.parentHasRenderTexture) {
+      this.notifyParentRTTOfUpdate();
+    }
+
     this.emit('failed', {
       type: 'texture',
       error,
@@ -846,6 +862,11 @@ export class CoreNode extends EventEmitter {
   };
 
   private onTextureFreed: TextureFreedEventHandler = () => {
+    // If parent has a render texture, flag that we need to update
+    if (this.parentHasRenderTexture) {
+      this.notifyParentRTTOfUpdate();
+    }
+
     this.emit('freed', {
       type: 'texture',
     } satisfies NodeTextureFreedPayload);
@@ -866,24 +887,10 @@ export class CoreNode extends EventEmitter {
     const parent = this.props.parent;
     if (!parent) return;
 
-    // Inform the parent if it doesn’t already have a child update
     if ((parent.updateType & UpdateType.Children) === 0) {
+      // Inform the parent if it doesn’t already have a child update
       parent.setUpdateType(UpdateType.Children);
     }
-
-    if (this.parentHasRenderTexture === false) return;
-
-    if (this.rtt === false) {
-      if ((parent.updateType & UpdateType.RenderTexture) === 0) {
-        this.setRTTUpdates(type);
-        parent.setUpdateType(UpdateType.RenderTexture);
-      }
-    }
-
-    // If this node has outstanding RTT updates, propagate them
-    if (this.hasRTTupdates) {
-      this.setRTTUpdates(type);
-    }
   }
 
   sortChildren() {
@@ -988,24 +995,11 @@ export class CoreNode extends EventEmitter {
     const parent = this.props.parent;
     let renderState = null;
 
-    if (this.updateType & UpdateType.ParentRenderTexture) {
-      let p = this.parent;
-      while (p) {
-        if (p.rtt) {
-          this.parentHasRenderTexture = true;
-        }
-        p = p.parent;
-      }
-    }
-
-    // If we have render texture updates and not already running a full update
-    if (
-      this.updateType ^ UpdateType.All &&
-      this.updateType & UpdateType.RenderTexture
-    ) {
-      for (let i = 0, length = this.children.length; i < length; i++) {
-        this.children[i]?.setUpdateType(UpdateType.All);
-      }
+    // Handle specific RTT updates at this node level
+    if (this.updateType & UpdateType.RenderTexture && this.rtt) {
+      // Only the RTT node itself triggers `renderToTexture`
+      this.hasRTTupdates = true;
+      this.stage.renderer?.renderToTexture(this);
     }
 
     if (this.updateType & UpdateType.Global) {
@@ -1130,11 +1124,7 @@ export class CoreNode extends EventEmitter {
       return;
     }
 
-    if (
-      this.updateType & UpdateType.Children &&
-      this.children.length > 0 &&
-      this.rtt === false
-    ) {
+    if (this.updateType & UpdateType.Children && this.children.length > 0) {
       for (let i = 0, length = this.children.length; i < length; i++) {
         const child = this.children[i] as CoreNode;
 
@@ -1148,6 +1138,13 @@ export class CoreNode extends EventEmitter {
       }
     }
 
+    // If the node has an RTT parent and requires a texture re-render, inform the RTT parent
+    // if (this.parentHasRenderTexture && this.updateType & UpdateType.RenderTexture) {
+    // @TODO have a more scoped down updateType for RTT updates
+    if (this.parentHasRenderTexture && this.updateType > 0) {
+      this.notifyParentRTTOfUpdate();
+    }
+
     // Sorting children MUST happen after children have been updated so
     // that they have the oppotunity to update their calculated zIndex.
     if (this.updateType & UpdateType.ZIndexSortedChildren) {
@@ -1168,6 +1165,31 @@ export class CoreNode extends EventEmitter {
     this.childUpdateType = 0;
   }
 
+  private notifyParentRTTOfUpdate() {
+    if (this.parent === null) {
+      return;
+    }
+
+    let rttNode: CoreNode | null = this.parent;
+    // Traverse up to find the RTT root node
+    while (rttNode && !rttNode.rtt) {
+      rttNode = rttNode.parent;
+    }
+
+    if (!rttNode) {
+      return;
+    }
+
+    // If an RTT node is found, mark it for re-rendering
+    rttNode.hasRTTupdates = true;
+    rttNode.setUpdateType(UpdateType.RenderTexture);
+
+    // if rttNode is nested, also make it update its RTT parent
+    if (rttNode.parentHasRenderTexture === true) {
+      rttNode.notifyParentRTTOfUpdate();
+    }
+  }
+
   //check if CoreNode is renderable based on props
   hasRenderableProperties(): boolean {
     if (this.props.texture) {
@@ -1940,8 +1962,9 @@ export class CoreNode extends EventEmitter {
         UpdateType.Children | UpdateType.ZIndexSortedChildren,
       );
 
+      // If the new parent has an RTT enabled, apply RTT inheritance
       if (newParent.rtt || newParent.parentHasRenderTexture) {
-        this.setRTTUpdates(UpdateType.All);
+        this.applyRTTInheritance(newParent);
       }
     }
     this.updateScaleRotateTransform();
@@ -1963,43 +1986,77 @@ export class CoreNode extends EventEmitter {
   }
 
   set rtt(value: boolean) {
-    if (this.props.rtt === true) {
-      this.props.rtt = value;
-
-      // unload texture if we used to have a render texture
-      if (value === false && this.texture !== null) {
-        this.unloadTexture();
-        this.setUpdateType(UpdateType.All);
-        for (let i = 0, length = this.children.length; i < length; i++) {
-          this.children[i]!.parentHasRenderTexture = false;
-        }
-        this.stage.renderer?.removeRTTNode(this);
-        return;
-      }
+    if (this.props.rtt === value) {
+      return;
     }
+    this.props.rtt = value;
 
-    // if the new value is false and we didnt have rtt previously, we don't need to do anything
-    if (value === false) {
-      return;
+    if (value) {
+      this.initRenderTexture();
+      this.markChildrenWithRTT();
+    } else {
+      this.cleanupRenderTexture();
     }
 
-    // load texture
+    this.setUpdateType(UpdateType.RenderTexture);
+
+    if (this.parentHasRenderTexture) {
+      this.notifyParentRTTOfUpdate();
+    }
+  }
+  private initRenderTexture() {
     this.texture = this.stage.txManager.loadTexture('RenderTexture', {
       width: this.width,
       height: this.height,
     });
     this.textureOptions.preload = true;
+    this.stage.renderer?.renderToTexture(this); // Only this RTT node
+  }
 
-    this.props.rtt = true;
-    this.hasRTTupdates = true;
-    this.setUpdateType(UpdateType.All);
+  private cleanupRenderTexture() {
+    this.unloadTexture();
+    this.clearRTTInheritance();
 
-    for (let i = 0, length = this.children.length; i < length; i++) {
-      this.children[i]!.setUpdateType(UpdateType.All);
+    this.stage.renderer?.removeRTTNode(this);
+    this.hasRTTupdates = false;
+    this.texture = null;
+  }
+
+  private markChildrenWithRTT(node: CoreNode | null = null) {
+    const parent = node || this;
+
+    for (const child of parent.children) {
+      child.setUpdateType(UpdateType.All);
+      child.parentHasRenderTexture = true;
+      child.markChildrenWithRTT();
+    }
+  }
+
+  // Apply RTT inheritance when a node has an RTT-enabled parent
+  private applyRTTInheritance(parent: CoreNode) {
+    if (parent.rtt) {
+      // Only the RTT node should be added to `renderToTexture`
+      parent.setUpdateType(UpdateType.RenderTexture);
     }
 
-    // Store RTT nodes in a separate list
-    this.stage.renderer?.renderToTexture(this);
+    // Propagate `parentHasRenderTexture` downwards
+    this.markChildrenWithRTT(parent);
+  }
+
+  // Clear RTT inheritance when detaching from an RTT chain
+  private clearRTTInheritance() {
+    // if this node is RTT itself stop the propagation important for nested RTT nodes
+    // for the initial RTT node this is already handled in `set rtt`
+    if (this.rtt) {
+      return;
+    }
+
+    for (const child of this.children) {
+      // force child to update everything as the RTT inheritance has changed
+      child.parentHasRenderTexture = false;
+      child.setUpdateType(UpdateType.All);
+      child.clearRTTInheritance();
+    }
   }
 
   get shader(): BaseShaderController {
@@ -2158,11 +2215,6 @@ export class CoreNode extends EventEmitter {
     this.childUpdateType |= UpdateType.RenderBounds | UpdateType.Children;
   }
 
-  setRTTUpdates(type: number) {
-    this.hasRTTupdates = true;
-    this.parent?.setRTTUpdates(type);
-  }
-
   animate(
     props: Partial<CoreNodeAnimateProps>,
     settings: Partial<AnimationSettings>,

package/src/core/lib/WebGlContextWrapper.ts

@@ -299,7 +299,7 @@ export class WebGlContextWrapper {
     internalformat: GLint,
     format: GLenum,
     type: GLenum,
-    source: TexImageSource,
+    source: TexImageSource | Uint8Array,
   ): void;
   texImage2D(
     level: any,

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

@@ -30,9 +30,10 @@ import {
   type QuadOptions,
 } from '../CoreRenderer.js';
 import { CanvasCoreTexture } from './CanvasCoreTexture.js';
-import { getRadius } from './internal/C2DShaderUtils.js';
+import { getBorder, getRadius, strokeLine } from './internal/C2DShaderUtils.js';
 import {
   formatRgba,
+  parseColorRgba,
   parseColor,
   type IParsedColor,
 } from './internal/ColorUtils.js';
@@ -133,7 +134,9 @@ export class CanvasCoreRenderer extends CoreRenderer {
     const hasTransform = ta !== 1;
     const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
     const hasGradient = colorTl !== colorTr || colorTl !== colorBr;
-    const radius = quad.shader ? getRadius(quad) : 0;
+    const hasQuadShader = Boolean(quad.shader);
+    const radius = hasQuadShader ? getRadius(quad) : 0;
+    const border = hasQuadShader ? getBorder(quad) : undefined;
 
     if (hasTransform || hasClipping || radius) {
       ctx.save();
@@ -211,6 +214,92 @@ export class CanvasCoreRenderer extends CoreRenderer {
       ctx.fillRect(tx, ty, width, height);
     }
 
+    if (border && border.width) {
+      const borderWidth = border.width;
+      const borderInnerWidth = border.width / 2;
+      const borderColor = formatRgba(parseColorRgba(border.color ?? 0));
+
+      ctx.beginPath();
+      ctx.lineWidth = borderWidth;
+      ctx.strokeStyle = borderColor;
+      ctx.globalAlpha = alpha;
+      if (radius) {
+        ctx.roundRect(
+          tx + borderInnerWidth,
+          ty + borderInnerWidth,
+          width - borderWidth,
+          height - borderWidth,
+          radius,
+        );
+        ctx.stroke();
+      } else {
+        ctx.strokeRect(
+          tx + borderInnerWidth,
+          ty + borderInnerWidth,
+          width - borderWidth,
+          height - borderWidth,
+        );
+      }
+      ctx.globalAlpha = 1;
+    } else if (hasQuadShader) {
+      const borderTop = getBorder(quad, 'Top');
+      const borderRight = getBorder(quad, 'Right');
+      const borderBottom = getBorder(quad, 'Bottom');
+      const borderLeft = getBorder(quad, 'Left');
+
+      if (borderTop) {
+        strokeLine(
+          ctx,
+          tx,
+          ty,
+          width,
+          height,
+          borderTop.width,
+          borderTop.color,
+          'Top',
+        );
+      }
+
+      if (borderRight) {
+        strokeLine(
+          ctx,
+          tx,
+          ty,
+          width,
+          height,
+          borderRight.width,
+          borderRight.color,
+          'Right',
+        );
+      }
+
+      if (borderBottom) {
+        strokeLine(
+          ctx,
+          tx,
+          ty,
+          width,
+          height,
+          borderBottom.width,
+          borderBottom.color,
+          'Bottom',
+        );
+      }
+
+      if (borderLeft) {
+        strokeLine(
+          ctx,
+          tx,
+          ty,
+          width,
+          height,
+          borderLeft.width,
+          borderLeft.color,
+          'Left',
+        );
+      }
+    }
+
     if (hasTransform || hasClipping || radius) {
       ctx.restore();
     }

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

@@ -18,20 +18,121 @@
  */
 
 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): number {
+export function getRadius(quad: QuadOptions): RadiusEffectProps['radius'] {
   if (quad.shader instanceof UnsupportedShader) {
     const shType = quad.shader.shType;
     if (shType === ROUNDED_RECTANGLE_SHADER_TYPE) {
       return (quad.shaderProps?.radius as number) ?? 0;
+    } else if (shType === 'DynamicShader') {
+      const effects = quad.shaderProps?.effects as
+        | EffectDescUnion[]
+        | undefined;
+
+      if (effects) {
+        const effect = effects.find((effect: EffectDescUnion) => {
+          return effect.type === 'radius' && effect?.props?.radius;
+        });
+
+        return (effect && effect.type === 'radius' && effect.props.radius) || 0;
+      }
     }
   }
   return 0;
 }
+
+/**
+ * Extract `RoundedRectangle` shader radius to apply as a clipping */
+export function getBorder(
+  quad: QuadOptions,
+  direction: '' | Direction = '',
+): BorderEffectProps | undefined {
+  if (quad.shader instanceof UnsupportedShader) {
+    const shType = quad.shader.shType;
+    if (shType === 'DynamicShader') {
+      const effects = quad.shaderProps?.effects as
+        | EffectDescUnion[]
+        | undefined;
+
+      if (effects && effects.length) {
+        const effect = effects.find((effect: EffectDescUnion) => {
+          return (
+            effect.type === `border${direction}` &&
+            effect.props &&
+            effect.props.width
+          );
+        });
+
+        return effect && effect.props;
+      }
+    }
+  }
+
+  return undefined;
+}
+
+export function strokeLine(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  lineWidth = 0,
+  color: number | undefined,
+  direction: Direction,
+) {
+  if (!lineWidth) {
+    return;
+  }
+
+  let sx,
+    sy = 0;
+  let ex,
+    ey = 0;
+
+  switch (direction) {
+    case 'Top':
+      sx = x;
+      sy = y;
+      ex = width + x;
+      ey = y;
+      break;
+    case 'Right':
+      sx = x + width;
+      sy = y;
+      ex = x + width;
+      ey = y + height;
+      break;
+    case 'Bottom':
+      sx = x;
+      sy = y + height;
+      ex = x + width;
+      ey = y + height;
+      break;
+    case 'Left':
+      sx = x;
+      sy = y;
+      ex = x;
+      ey = y + height;
+      break;
+  }
+  ctx.beginPath();
+  ctx.lineWidth = lineWidth;
+  ctx.strokeStyle = formatRgba(parseColorRgba(color ?? 0));
+  ctx.moveTo(sx, sy);
+  ctx.lineTo(ex, ey);
+  ctx.stroke();
+}

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

@@ -47,6 +47,20 @@ export function parseColor(abgr: number): IParsedColor {
   return { isWhite: false, a, r, g, b };
 }
 
+/**
+ * Extract color components
+ */
+export function parseColorRgba(rgba: number): IParsedColor {
+  if (rgba === 0xffffffff) {
+    return WHITE;
+  }
+  const r = (rgba >>> 24) & 0xff;
+  const g = (rgba >>> 16) & 0xff & 0xff;
+  const b = (rgba >>> 8) & 0xff & 0xff;
+  const a = (rgba & 0xff & 0xff) / 255;
+  return { isWhite: false, r, g, b, a };
+}
+
 /**
  * Format a parsed color into a rgba CSS color
  */

package/src/core/renderers/canvas/shaders/UnsupportedShader.ts

@@ -27,9 +27,9 @@ export class UnsupportedShader extends CoreShader {
   constructor(shType: string) {
     super();
     this.shType = shType;
-    if (shType !== ROUNDED_RECTANGLE_SHADER_TYPE) {
-      console.warn('Unsupported shader:', shType);
-    }
+    // if (shType !== ROUNDED_RECTANGLE_SHADER_TYPE) {
+    //   console.warn('Unsupported shader:', shType);
+    // }
   }
 
   bindRenderOp(): void {

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

@@ -34,6 +34,12 @@ export class WebGlCoreCtxSubTexture extends WebGlCoreCtxTexture {
 
   override async onLoadRequest(): Promise<Dimensions> {
     const props = await (this.textureSource as SubTexture).getTextureData();
+
+    if (props.data instanceof Uint8Array) {
+      // its a 1x1 Color Texture
+      return { width: 1, height: 1 };
+    }
+
     return {
       width: props.data?.width || 0,
       height: props.data?.height || 0,

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

@@ -88,7 +88,10 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     this._nativeCtxTexture = this.createNativeCtxTexture();
     if (this._nativeCtxTexture === null) {
       this._state = 'failed';
-      this.textureSource.setState('failed', new Error('Could not create WebGL Texture'));
+      this.textureSource.setState(
+        'failed',
+        new Error('Could not create WebGL Texture'),
+      );
       console.error('Could not create WebGL Texture');
       return;
     }
@@ -201,6 +204,29 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
 
       this.setTextureMemUse(view.byteLength);
+    } else if (textureData.data && textureData.data instanceof Uint8Array) {
+      // Color Texture
+      width = 1;
+      height = 1;
+
+      glw.bindTexture(this._nativeCtxTexture);
+      glw.pixelStorei(
+        glw.UNPACK_PREMULTIPLY_ALPHA_WEBGL,
+        !!textureData.premultiplyAlpha,
+      );
+
+      glw.texImage2D(
+        0,
+        glw.RGBA,
+        width,
+        height,
+        0,
+        glw.RGBA,
+        glw.UNSIGNED_BYTE,
+        textureData.data,
+      );
+
+      this.setTextureMemUse(width * height * 4);
     } else {
       console.error(
         `WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`,