@lightningjs/renderer 3.0.0-beta23 → 3.0.0-beta24

package/src/core/renderers/webgl/internal/ShaderUtils.ts

@@ -221,9 +221,11 @@ export function createProgram(
     return program;
   }
 
-  console.warn(glw.getProgramInfoLog(program));
+  const infoLog =
+    glw.getProgramInfoLog(program) || 'Unknown program link error';
+  console.warn(infoLog);
   glw.deleteProgram(program);
-  return undefined;
+  throw new Error(`Unable to link shader program: ${infoLog}`);
 }
 
 export const DefaultVertexSource = `

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

@@ -69,20 +69,18 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
     varying vec4 v_innerBorderRadius;
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
-    varying float v_borderZero;
 
     void main() {
       vec2 vertexPos = a_position * u_pixelRatio;
       vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
       vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
       vec2 edgeOffset = vec2(0.0);
+      float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
 
-      v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0;
       v_innerSize = vec2(0.0);
       v_outerSize = vec2(0.0);
 
-      if(v_borderZero == 0.0) {
+      if(borderZero == 0.0) {
         vec4 adjustedBorderWidth = u_borderWidth - 1.0 + clamp(u_borderWidth, -1.0, 1.0);
 
         float borderTop = adjustedBorderWidth.x;
@@ -143,7 +141,6 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       v_textureCoords = a_textureCoords + (screenSpace + edgeOffset) / (u_dimensions);
 
       v_halfDimensions = u_dimensions * 0.5;
-      v_edgeWidth = 1.0 / u_pixelRatio;
     }
   `,
   fragment: `
@@ -176,8 +173,6 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
     varying vec4 v_innerBorderRadius;
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
-    varying float v_borderZero;
 
     float roundedBox(vec2 p, vec2 s, vec4 r) {
       r.xy = (p.x > 0.0) ? r.yz : r.xw;
@@ -190,21 +185,23 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
       vec4 resultColor = vec4(0.0);
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
+      float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
+      float edgeWidth = 1.0 / u_pixelRatio;
 
-      float nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
-      float nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
+      float nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
+      float nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
       resultColor = mix(resultColor, color, nodeAlpha);
 
-      if(v_borderZero == 1.0) {
+      if(borderZero == 1.0) {
         gl_FragColor = resultColor * u_alpha;
         return;
       }
 
-      float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth, v_outerBorderRadius);
-      float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth, v_innerBorderRadius);
+      float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - edgeWidth, v_outerBorderRadius);
+      float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - edgeWidth, v_innerBorderRadius);
 
       float borderDist = max(-innerDist, outerDist);
-      float borderAlpha = (1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist)) * u_borderColor.a;
+      float borderAlpha = (1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderDist)) * u_borderColor.a;
 
       resultColor = mix(resultColor, vec4(u_borderColor.rgb, 1.0), borderAlpha);
       gl_FragColor = resultColor * u_alpha;

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

@@ -76,22 +76,19 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
     varying vec4 v_innerBorderRadius;
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
-    varying float v_borderZero;
 
     void main() {
       vec2 screenSpace = vec2(2.0 / u_resolution.x,  -2.0 / u_resolution.y);
       vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
+      float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
 
       vec2 edgeOffset = edge * ((u_shadow.w * 2.0)+ u_shadow.z) + u_shadow.xy;
       vec2 vertexPos = (a_position + edge + edgeOffset) * u_pixelRatio;
 
-      v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0;
-
       v_innerSize = vec2(0.0);
       v_outerSize = vec2(0.0);
 
-      if(v_borderZero == 0.0) {
+      if(borderZero == 0.0) {
         vec4 adjustedBorderWidth = u_borderWidth - 1.0 + clamp(u_borderWidth, -1.0, 1.0);
 
         float borderTop = adjustedBorderWidth.x;
@@ -148,7 +145,6 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
 
       v_halfDimensions = u_dimensions * 0.5;
-      v_edgeWidth = 1.0 / u_pixelRatio;
       v_color = a_color;
       v_nodeCoords = a_nodeCoords + (screenSpace + edgeOffset) / (u_dimensions);
       v_textureCoords = a_textureCoords + (screenSpace + edgeOffset) / (u_dimensions);
@@ -185,8 +181,6 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
     varying vec4 v_innerBorderRadius;
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
-    varying float v_borderZero;
 
     float roundedBox(vec2 p, vec2 s, vec4 r) {
       r.xy = (p.x > 0.0) ? r.yz : r.xw;
@@ -207,28 +201,30 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
       vec4 resultColor = vec4(0.0);
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
-      float nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
-      float nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
+      float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
+      float nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
       float shadowAlpha;
 
-      if(v_borderZero == 1.0) {
-        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - v_edgeWidth, u_radius + u_shadow.z);
+      if(borderZero == 1.0) {
+        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - edgeWidth, u_radius + u_shadow.z);
         resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
         gl_FragColor = mix(resultColor, color, nodeAlpha) * u_alpha;
         return;
       }
 
       if(v_outerSize.x > v_halfDimensions.x || v_outerSize.y > v_halfDimensions.y) {
-        shadowAlpha = shadowBox(boxUv + v_outerBorderUv - u_shadow.xy, v_outerSize + u_shadow.w - v_edgeWidth, v_outerBorderRadius + u_shadow.z);
+        shadowAlpha = shadowBox(boxUv + v_outerBorderUv - u_shadow.xy, v_outerSize + u_shadow.w - edgeWidth, v_outerBorderRadius + u_shadow.z);
       }
       else {
-        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - v_edgeWidth, u_radius + u_shadow.z);
+        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - edgeWidth, u_radius + u_shadow.z);
       }
 
-      float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth, v_outerBorderRadius);
-      float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth, v_innerBorderRadius);
+      float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - edgeWidth, v_outerBorderRadius);
+      float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - edgeWidth, v_innerBorderRadius);
       float borderDist = max(-innerDist, outerDist);
-      float borderAlpha = (1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist)) * u_borderColor.a;
+      float borderAlpha = (1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderDist)) * u_borderColor.a;
       resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
       resultColor = mix(resultColor, color, nodeAlpha);
       resultColor = mix(resultColor, vec4(u_borderColor.rgb, 1.0), borderAlpha);

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

@@ -550,22 +550,15 @@ export const measureText = (
   fontFamily: string,
   letterSpacing: number,
 ): number => {
-  if (text.length === 1) {
-    const char = text.charAt(0);
-    const codepoint = text.codePointAt(0);
-    if (codepoint === undefined) return 0;
-    if (hasZeroWidthSpace(char) === true) return 0;
+  if (text.length === 0) return 0;
 
-    const glyph = getGlyph(fontFamily, codepoint);
-    if (glyph === null) return 0;
-    return glyph.xadvance + letterSpacing;
-  }
   let width = 0;
-  let prevCodepoint = 0;
-  for (let i = 0; i < text.length; i++) {
-    const char = text.charAt(i);
-    const codepoint = text.codePointAt(i);
-    if (codepoint === undefined) continue;
+  let prevGlyphId = 0;
+  for (const char of text) {
+    const codepoint = char.codePointAt(0);
+    if (codepoint === undefined) {
+      continue;
+    }
 
     // Skip zero-width spaces in width calculations
     if (hasZeroWidthSpace(char)) {
@@ -578,13 +571,13 @@ export const measureText = (
     let advance = glyph.xadvance;
 
     // Add kerning if there's a previous character
-    if (prevCodepoint !== 0) {
-      const kerning = getKerning(fontFamily, prevCodepoint, codepoint);
+    if (prevGlyphId !== 0) {
+      const kerning = getKerning(fontFamily, prevGlyphId, glyph.id);
       advance += kerning;
     }
 
     width += advance + letterSpacing;
-    prevCodepoint = codepoint;
+    prevGlyphId = glyph.id;
   }
 
   return width;

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

@@ -277,7 +277,6 @@ const generateTextLayout = (
   const fontFamily = props.fontFamily;
   const lineHeight = props.lineHeight;
   const metrics = SdfFontHandler.getFontMetrics(fontFamily, fontSize);
-  const verticalAlign = props.verticalAlign;
 
   const fontData = fontCache.data;
   const commonFontData = fontData.common;
@@ -323,14 +322,12 @@ const generateTextLayout = (
   for (let i = 0; i < lineAmount; i++) {
     const line = lines[i] as TextLineStruct;
     const textLine = line[0];
-    const textLineLength = textLine.length;
-    let prevCodepoint = 0;
+    let prevGlyphId = 0;
     currentX = line[3];
     //convert Y coord to vertex value
     currentY = line[4] / fontScale;
 
-    for (let j = 0; j < textLineLength; j++) {
-      const char = textLine.charAt(j);
+    for (const char of textLine) {
       if (hasZeroWidthSpace(char) === true) {
         continue;
       }
@@ -343,19 +340,17 @@ const generateTextLayout = (
       if (glyph === null) {
         continue;
       }
-      // Calculate advance with kerning (in design units)
-      let advance = glyph.xadvance;
+      // Kerning offsets the current glyph relative to the previous glyph.
+      let kerning = 0;
 
       // Add kerning if there's a previous character
-      if (prevCodepoint !== 0) {
-        const kerning = SdfFontHandler.getKerning(
-          fontFamily,
-          prevCodepoint,
-          codepoint,
-        );
-        advance += kerning;
+      if (prevGlyphId !== 0) {
+        kerning = SdfFontHandler.getKerning(fontFamily, prevGlyphId, glyph.id);
       }
 
+      // Apply pair kerning before placing this glyph.
+      currentX += kerning;
+
       // Calculate glyph position and atlas coordinates (in design units)
       const glyphLayout: GlyphLayout = {
         codepoint,
@@ -375,8 +370,8 @@ const generateTextLayout = (
       glyphs.push(glyphLayout);
 
       // Advance position with letter spacing (in design units)
-      currentX += advance + letterSpacing;
-      prevCodepoint = codepoint;
+      currentX += glyph.xadvance + letterSpacing;
+      prevGlyphId = glyph.id;
     }
     currentY += lineHeightPx;
   }

package/src/core/textures/SubTexture.ts

@@ -91,14 +91,14 @@ export class SubTexture extends Texture {
     super(txManager);
     this.props = props;
 
-    assertTruthy(this.props.texture, 'SubTexture requires a parent texture');
+    assertTruthy(props.texture, 'SubTexture requires a parent texture');
     assertTruthy(
-      this.props.texture instanceof ImageTexture,
+      props.texture instanceof ImageTexture,
       'SubTexture requires an ImageTexture parent',
     );
 
     // Resolve parent texture from cache or fallback to provided texture
-    this.parentTexture = txManager.resolveParentTexture(this.props.texture);
+    this.parentTexture = txManager.resolveParentTexture(props.texture);
 
     if (this.renderableOwners.length > 0) {
       this.parentTexture.setRenderableOwner(this.subtextureId, true);

package/src/core/textures/Texture.ts

@@ -202,7 +202,7 @@ export abstract class Texture extends EventEmitter {
 
   constructor(protected txManager: CoreTextureManager) {
     super();
-    this.maxRetryCount = this.txManager.maxRetryCount;
+    this.maxRetryCount = txManager.maxRetryCount;
   }
 
   get dimensions(): Dimensions | null {