@solidtv/renderer 1.0.5 → 1.0.7

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

@@ -59,6 +59,21 @@ export class WebGlRenderer extends CoreRenderer {
   fQuadBuffer: Float32Array;
   uiQuadBuffer: Uint32Array;
   renderOps: WebGlRenderOp[] = [];
+  /**
+   * Deferred queue for SDF text render ops, used when RENDER_TEXT_BATCHING is
+   * true. All text encountered during the frame is collected here and appended
+   * to renderOps at the end (see flushTextRenderOps). This guarantees that all
+   * text in a frame draws in a single contiguous run of draw calls, which is
+   * the whole point of text batching.
+   *
+   * Side effect by design: text always draws on top of any non-text quads that
+   * came after it in tree order (unless those quads carry an explicit zIndex,
+   * which forces an early flush in addQuad). This is intentional — UI text
+   * sitting above adjacent backgrounds/icons is the common case, and the
+   * batching win is only worth taking if we don't break the run with mid-frame
+   * flushes. If you need a non-text quad to land above earlier text, give it
+   * a non-zero zIndex.
+   */
   coreTextRenderOps: WebGlRenderOp[] = [];
 
   //// Render Op / Buffer Filling State
@@ -361,10 +376,22 @@ export class WebGlRenderer extends CoreRenderer {
     const f = this.fQuadBuffer;
     const u = this.uiQuadBuffer;
 
+    // Explicit zIndex on a non-text quad opts out of the text-batching
+    // ordering: flush deferred text now so this quad lands above any text
+    // that came earlier in tree order. See coreTextRenderOps for the
+    // intentional default behavior.
     if (RENDER_TEXT_BATCHING === true && node.props.zIndex) {
       this.flushTextRenderOps();
     }
 
+    // With batching off, SDF ops live inside renderOps interleaved with quad
+    // ops. A non-text quad inserted here would otherwise still let the next
+    // text node extend the previous SDF op (same atlas/clipping), drawing
+    // those glyphs at the earlier position and getting overdrawn by this quad.
+    if (RENDER_TEXT_BATCHING === false) {
+      this.curSdfRenderOp = null;
+    }
+
     const reuse = this.reuseRenderOp(node);
 
     // During RTT rendering, always use sequential allocation and write data
@@ -600,18 +627,16 @@ export class WebGlRenderer extends CoreRenderer {
 
     // Pre-compute the merged color (with alpha) packed as ABGR for
     // UNSIGNED_BYTE normalized attribute.
+    // NOTE: Do NOT premultiply RGB by alpha here — the SDF fragment shader
+    // already multiplies v_color.rgb by the computed opacity (which includes
+    // v_color.a).
     const mergedColor = mergeColorAlpha(color, worldAlpha);
     const r = mergedColor >>> 24;
     const g = (mergedColor >>> 16) & 0xff;
     const b = (mergedColor >>> 8) & 0xff;
     const a = mergedColor & 0xff;
-    // Premultiply alpha into RGB for correct blending
-    const na = a / 255;
-    const pr = (r * na) | 0;
-    const pg = (g * na) | 0;
-    const pb = (b * na) | 0;
     // Pack as ABGR uint32 (little-endian read as vec4(r,g,b,a) normalized)
-    const packedColor = ((a << 24) | (pb << 16) | (pg << 8) | pr) >>> 0;
+    const packedColor = ((a << 24) | (b << 16) | (g << 8) | r) >>> 0;
 
     // Transform matrix components (column-major 3x3)
     // Pre-multiply fontScale here to save 4 multiplications per glyph in the hot loop
@@ -1083,6 +1108,12 @@ export class WebGlRenderer extends CoreRenderer {
       this.needsFullUpload = true;
       this.lastUploadedBufferSize = 0;
 
+      // Clear merge anchors so the first addQuad / addSdfQuads in this pass
+      // can't extend a stale op left over from the previous RTT pass (whose
+      // node is no longer in renderOps and would silently swallow the draw).
+      this.curRenderOp = null;
+      this.curSdfRenderOp = null;
+
       // Recursively render the full subtree into the RTT framebuffer.
       // The old code only called renderQuads on direct children, missing
       // grandchildren and deeper descendants.

package/src/core/text-rendering/CanvasTextRenderer.ts

@@ -77,6 +77,14 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   assertTruthy(canvas, 'Canvas is not initialized');
   assertTruthy(context, 'Canvas context is not available');
   assertTruthy(measureContext, 'Canvas measureContext is not available');
+
+  if (props.text.length === 0) {
+    return {
+      width: 0,
+      height: 0,
+    };
+  }
+
   // Extract already normalized properties
   const {
     text,
@@ -130,7 +138,12 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
 
   canvas.width = canvasW;
   canvas.height = canvasH;
-  context.fillStyle = 'white';
+  const color = props.color ?? 0xffffffff;
+  const r = (color >>> 24) & 0xff;
+  const g = (color >>> 16) & 0xff;
+  const b = (color >>> 8) & 0xff;
+  const a = color & 0xff;
+  context.fillStyle = `rgba(${r},${g},${b},${a / 255})`;
   context.font = font;
   context.textBaseline = 'hanging';
 

package/src/core/text-rendering/SdfFontHandler.ts

@@ -417,12 +417,13 @@ export const isFontLoaded = (fontFamily: string): boolean => {
  */
 export const getFontMetrics = (
   fontFamily: string,
-
   fontSize: number,
 ): NormalizedFontMetrics => {
-  const out = normalizedMetrics.get(fontFamily);
-  if (out !== undefined) {
-    return out;
+  const label = fontFamily + '_' + fontSize;
+  const metricsCache = normalizedMetrics.get(label);
+
+  if (metricsCache !== undefined) {
+    return metricsCache;
   }
   let metrics = fontCache.get(fontFamily)!.metrics;
   return processFontMetrics(fontFamily, fontSize, metrics);
@@ -433,7 +434,7 @@ export const processFontMetrics = (
   fontSize: number,
   metrics: FontMetrics,
 ): NormalizedFontMetrics => {
-  const label = fontFamily + fontSize;
+  const label = fontFamily + '_' + fontSize;
   const normalized = normalizeFontMetrics(metrics, fontSize);
   normalizedMetrics.set(label, normalized);
   return normalized;

package/src/core/text-rendering/SdfTextRenderer.ts

@@ -32,6 +32,10 @@ const init = (stage: Stage): void => {
 };
 
 const font: FontHandler = SdfFontHandler;
+const layoutCache = new Map<string, TextLayout>();
+
+const getLayoutCacheKey = (props: CoreTextNodeProps): string =>
+  `${props.fontFamily}-${props.fontSize}-${props.letterSpacing}-${props.lineHeight}-${props.maxHeight}-${props.maxWidth}-${props.textAlign}-${props.text}`;
 
 /**
  * SDF text renderer using MSDF/SDF fonts with WebGL
@@ -49,6 +53,18 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     };
   }
 
+  const cacheKey = getLayoutCacheKey(props);
+  let layout = layoutCache.get(cacheKey);
+  if (layout !== undefined) {
+    return {
+      remainingLines: 0,
+      hasRemainingText: false,
+      width: layout.width,
+      height: layout.height,
+      layout,
+    };
+  }
+
   // Get font cache for this font family
   const fontData = SdfFontHandler.getFontData(props.fontFamily);
   if (fontData === undefined) {
@@ -60,7 +76,8 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   }
 
   // Calculate text layout and generate glyph data for caching
-  const layout = generateTextLayout(props, fontData);
+  layout = generateTextLayout(props, fontData);
+  layoutCache.set(cacheKey, layout);
 
   // For SDF renderer, ImageData is null since we render via WebGL
   return {
@@ -68,7 +85,7 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     hasRemainingText: false,
     width: layout.width,
     height: layout.height,
-    layout, // Cache layout for addQuads
+    layout,
   };
 };
 
@@ -302,14 +319,10 @@ const generateTextLayout = (
 
       // Calculate glyph position and atlas coordinates (in design units)
       const glyphLayout: GlyphLayout = {
-        codepoint,
-        glyphId: glyph.id,
         x: currentX + glyph.xoffset,
         y: currentY + glyph.yoffset,
         width: glyph.width,
         height: glyph.height,
-        xOffset: glyph.xoffset,
-        yOffset: glyph.yoffset,
         atlasX: glyph.x * invAtlasWidth,
         atlasY: glyph.y * invAtlasHeight,
         atlasWidth: glyph.width * invAtlasWidth,

package/src/core/text-rendering/TextRenderer.ts

@@ -236,41 +236,10 @@ export interface TrProps extends TrFontProps {
  * Glyph layout information for WebGL rendering
  */
 export interface GlyphLayout {
-  /**
-   * Unicode codepoint
-   */
-  codepoint: number;
-  /**
-   * Glyph ID in the font atlas
-   */
-  glyphId: number;
-  /**
-   * X position relative to text origin
-   */
   x: number;
-  /**
-   * Y position relative to text origin
-   */
   y: number;
-  /**
-   * Width of glyph in font units
-   */
   width: number;
-  /**
-   * Height of glyph in font units
-   */
   height: number;
-  /**
-   * X offset for glyph positioning
-   */
-  xOffset: number;
-  /**
-   * Y offset for glyph positioning
-   */
-  yOffset: number;
-  /**
-   * Atlas texture coordinates (normalized 0-1)
-   */
   atlasX: number;
   atlasY: number;
   atlasWidth: number;

package/src/main-api/Renderer.ts

@@ -957,8 +957,10 @@ export class RendererMain extends EventEmitter {
     this.canvas.width = deviceLogicalWidth * devicePhysicalPixelRatio;
     this.canvas.height = deviceLogicalHeight * devicePhysicalPixelRatio;
 
-    this.canvas.style.width = `${deviceLogicalWidth}px`;
-    this.canvas.style.height = `${deviceLogicalHeight}px`;
+    if (this.canvas.style) {
+      this.canvas.style.width = `${deviceLogicalWidth}px`;
+      this.canvas.style.height = `${deviceLogicalHeight}px`;
+    }
 
     this.stage.renderer.updateViewport();