@lightningjs/renderer 3.0.0-beta19 → 3.0.0-beta20

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

@@ -27,7 +27,6 @@ import {
 } from '../CoreRenderer.js';
 import { CanvasTexture } from './CanvasTexture.js';
 import { parseColor } from '../../lib/colorParser.js';
-import { assertTruthy } from '../../../utils.js';
 import { CanvasShaderNode, type CanvasShaderType } from './CanvasShaderNode.js';
 import { normalizeCanvasColor } from '../../lib/colorCache.js';
 
@@ -43,7 +42,6 @@ export class CanvasRenderer extends CoreRenderer {
     super(options);
 
     this.mode = 'canvas';
-
     const { canvas } = options;
     this.canvas = canvas as HTMLCanvasElement;
     this.context = canvas.getContext('2d') as CanvasRenderingContext2D;
@@ -72,28 +70,15 @@ export class CanvasRenderer extends CoreRenderer {
     const ctx = this.context;
     const { tx, ty, ta, tb, tc, td, clippingRect } = quad;
     let texture = quad.texture;
-    const textureType = texture?.type;
-    assertTruthy(textureType, 'Texture type is not defined');
-
-    // The Canvas2D renderer only supports image and color textures
-    if (
-      textureType !== TextureType.image &&
-      textureType !== TextureType.color &&
-      textureType !== TextureType.subTexture &&
-      textureType !== TextureType.noise
-    ) {
-      return;
-    }
-
-    if (texture) {
-      if (texture instanceof SubTexture) {
-        texture = texture.parentTexture;
-      }
-
-      if (texture.state === 'freed') {
-        return;
-      }
-      if (texture.state !== 'loaded') {
+    // 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;
       }
     }
@@ -151,50 +136,46 @@ export class CanvasRenderer extends CoreRenderer {
 
   renderContext(quad: QuadOptions) {
     const color = quad.colorTl;
-    const textureType = quad.texture?.type;
-    if (
-      (textureType === TextureType.image ||
-        textureType === TextureType.subTexture ||
-        textureType === TextureType.noise) &&
-      quad.texture?.ctxTexture
-    ) {
+    const texture = quad.texture!;
+    const textureType = texture.type;
+    if (textureType !== TextureType.color) {
       const tintColor = parseColor(color);
-      const image = (quad.texture.ctxTexture as CanvasTexture).getImage(
-        tintColor,
-      );
-      this.context.globalAlpha = tintColor.a ?? quad.alpha;
-      if (textureType === TextureType.subTexture) {
+      if (textureType !== TextureType.subTexture) {
+        const image = (texture.ctxTexture as CanvasTexture).getImage(tintColor);
+        this.context.globalAlpha = tintColor.a ?? quad.alpha;
         this.context.drawImage(
           image,
-          (quad.texture as SubTexture).props.x,
-          (quad.texture as SubTexture).props.y,
-          (quad.texture as SubTexture).props.w,
-          (quad.texture as SubTexture).props.h,
           quad.tx,
           quad.ty,
           quad.width,
           quad.height,
         );
-      } else {
-        try {
-          this.context.drawImage(
-            image,
-            quad.tx,
-            quad.ty,
-            quad.width,
-            quad.height,
-          );
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        } catch (error) {
-          // noop
-        }
+        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 ?? quad.alpha;
+      this.context.drawImage(
+        image,
+        props.x,
+        props.y,
+        props.w,
+        props.h,
+        quad.tx,
+        quad.ty,
+        quad.width,
+        quad.height,
+      );
       this.context.globalAlpha = 1;
       return;
     }
     const hasGradient =
       quad.colorTl !== quad.colorTr || quad.colorTl !== quad.colorBr;
-    if (textureType === TextureType.color && hasGradient) {
+    if (hasGradient === true) {
       let endX: number = quad.tx;
       let endY: number = quad.ty;
       let endColor: number;
@@ -219,7 +200,7 @@ export class CanvasRenderer extends CoreRenderer {
       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) {
+    } else {
       this.context.fillStyle = normalizeCanvasColor(color);
       this.context.fillRect(quad.tx, quad.ty, quad.width, quad.height);
     }

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

@@ -63,7 +63,7 @@ export class WebGlRenderOp extends CoreRenderOp {
   readonly clippingRect: RectWithValid;
   readonly rtt: boolean;
   readonly parentHasRenderTexture: boolean;
-  readonly framebufferDimensions?: Dimensions | null;
+  readonly framebufferDimensions: Dimensions | null;
   readonly alpha: number;
   readonly pixelRatio: number;
   readonly time?: number | null;
@@ -80,7 +80,7 @@ export class WebGlRenderOp extends CoreRenderOp {
     this.height = quad.height;
     this.clippingRect = quad.clippingRect;
     this.parentHasRenderTexture = quad.parentHasRenderTexture;
-    this.framebufferDimensions = quad.framebufferDimensions;
+    this.framebufferDimensions = quad.framebufferDimensions || null;
     this.rtt = quad.rtt;
     this.alpha = quad.alpha;
     this.pixelRatio =

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

@@ -258,11 +258,9 @@ export class WebGlRenderer extends CoreRenderer {
     const u = this.uiQuadBuffer;
     let i = this.curBufferIdx;
 
-    let ro = this.curRenderOp!;
-    const reuse = this.reuseRenderOp(params) === false;
-    if (reuse) {
+    const reuse = this.reuseRenderOp(params);
+    if (reuse === false) {
       this.newRenderOp(params, i);
-      ro = this.curRenderOp!;
     }
 
     let tx = params.texture!;
@@ -320,7 +318,7 @@ export class WebGlRenderer extends CoreRenderer {
     f[i + 30] = 1;
     f[i + 31] = 1;
 
-    ro.numQuads++;
+    this.curRenderOp!.numQuads++;
     this.curBufferIdx = i + 32;
   }
 
@@ -387,16 +385,30 @@ export class WebGlRenderer extends CoreRenderer {
       return false;
     }
 
-    // Force new render operation if rendering to texture
-    // @todo: This needs to be improved, render operations could also be reused
-    // for rendering to texture
+    // Force new render operation if rendering to texture is different
     if (
-      params.parentHasRenderTexture !== undefined ||
-      params.rtt !== undefined
+      this.curRenderOp.parentHasRenderTexture !==
+        params.parentHasRenderTexture ||
+      this.curRenderOp.rtt !== params.rtt
     ) {
       return false;
     }
 
+    if (
+      params.parentHasRenderTexture === true &&
+      this.curRenderOp.framebufferDimensions !== null &&
+      params.framebufferDimensions !== null
+    ) {
+      if (
+        this.curRenderOp.framebufferDimensions.w !==
+          params.framebufferDimensions.w ||
+        this.curRenderOp.framebufferDimensions.h !==
+          params.framebufferDimensions.h
+      ) {
+        return false;
+      }
+    }
+
     if (
       this.curRenderOp.shader.shaderKey === 'default' &&
       params.shader?.shaderKey === 'default'

package/src/core/shaders/webgl/Default.ts

@@ -57,15 +57,15 @@ export const Default: WebGlShaderType = {
     varying vec2 v_nodeCoords;
 
     void main() {
-      vec2 normalized = a_position * u_pixelRatio;
-      vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
+      vec2 normalized = a_position * u_pixelRatio / u_resolution;
+      vec2 zero_two = normalized * 2.0;
+      vec2 clip_space = zero_two - 1.0;
 
       v_color = a_color;
-      v_nodeCoords = a_nodeCoords;
       v_textureCoords = a_textureCoords;
+      v_nodeCoords = a_nodeCoords;
 
-      gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
-      gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
+      gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
     }
   `,
   fragment: `
@@ -82,8 +82,7 @@ export const Default: WebGlShaderType = {
     varying vec2 v_textureCoords;
 
     void main() {
-      vec4 color = texture2D(u_texture, v_textureCoords);
-      gl_FragColor = vec4(v_color) * texture2D(u_texture, v_textureCoords);
+      gl_FragColor = v_color * texture2D(u_texture, v_textureCoords);
     }
   `,
 };

package/src/core/shaders/webgl/SdfShader.ts

@@ -76,8 +76,10 @@ export const Sdf: WebGlShaderType<SdfShaderProps> = {
     uniform mat3 u_transform;
     uniform float u_pixelRatio;
     uniform float u_size;
+    uniform float u_distanceRange;
 
     varying vec2 v_texcoord;
+    varying float v_scaledDistRange;
 
     void main() {
       vec2 scrolledPosition = a_position * u_size;
@@ -88,7 +90,7 @@ export const Sdf: WebGlShaderType<SdfShaderProps> = {
 
       gl_Position = vec4(screenSpace, 0.0, 1.0);
       v_texcoord = a_textureCoords;
-
+      v_scaledDistRange = u_distanceRange * u_pixelRatio;
     }
   `,
   fragment: `
@@ -99,20 +101,17 @@ export const Sdf: WebGlShaderType<SdfShaderProps> = {
     # endif
     uniform vec4 u_color;
     uniform sampler2D u_texture;
-    uniform float u_distanceRange;
-    uniform float u_pixelRatio;
-    uniform int u_debug;
 
     varying vec2 v_texcoord;
+    varying float v_scaledDistRange;
 
     float median(float r, float g, float b) {
-        return max(min(r, g), min(max(r, g), b));
+        return clamp(b, min(r, g), max(r, g));
     }
 
     void main() {
         vec3 sample = texture2D(u_texture, v_texcoord).rgb;
-        float scaledDistRange = u_distanceRange * u_pixelRatio;
-        float sigDist = scaledDistRange * (median(sample.r, sample.g, sample.b) - 0.5);
+        float sigDist = v_scaledDistRange * (median(sample.r, sample.g, sample.b) - 0.5);
         float opacity = clamp(sigDist + 0.5, 0.0, 1.0) * u_color.a;
 
         // Build the final color.

package/src/main-api/Inspector.ts

@@ -102,16 +102,14 @@ const stylePropertyMap: {
   },
   w: (w) => {
     if (w === 0) {
-      // Set to 1px instead of 0px so Playwright's toBeVisible() passes
-      return { prop: 'width', value: '1px' };
+      return { prop: 'width', value: 'auto' };
     }
 
     return { prop: 'width', value: `${w}px` };
   },
   h: (h) => {
     if (h === 0) {
-      // Set to 1px instead of 0px so Playwright's toBeVisible() passes
-      return { prop: 'height', value: '1px' };
+      return { prop: 'height', value: 'auto' };
     }
 
     return { prop: 'height', value: `${h}px` };
@@ -911,8 +909,9 @@ export class Inspector {
     if (property === 'text') {
       div.innerHTML = String(value);
 
-      // Keep DOM text invisible without breaking Playwright visibility checks by using color:transparent instead of opacity:0
-      div.style.color = 'transparent';
+      // Keep DOM text invisible without breaking visibility checks
+      // Use very low opacity (0.001) instead of 0 so Playwright still detects it
+      div.style.opacity = '0.001';
       div.style.pointerEvents = 'none';
       div.style.userSelect = 'none';
       return;