@lightningjs/renderer 2.12.1 → 3.0.0-beta1

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

@@ -0,0 +1,115 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+import {
+  ShadowTemplate,
+  type ShadowProps,
+} from '../templates/ShadowTemplate.js';
+
+export const Shadow: WebGlShaderType<ShadowProps> = {
+  props: ShadowTemplate.props,
+  update() {
+    this.uniformRGBA('u_color', this.props!.color);
+    this.uniform4fa('u_shadow', this.props!.projection);
+  },
+  vertex: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    attribute vec2 a_position;
+    attribute vec2 a_textureCoords;
+    attribute vec4 a_color;
+    attribute vec2 a_nodeCoords;
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform float u_rtt;
+    uniform vec2 u_dimensions;
+
+    uniform vec4 u_shadow;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    void main() {
+      vec2 screenSpace = vec2(2.0 / u_resolution.x,  -2.0 / u_resolution.y);
+      vec2 outerEdge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
+
+      vec2 shadowEdge = outerEdge * ((u_shadow.w * 2.0)+ u_shadow.z) + u_shadow.xy;
+      vec2 normVertexPos = a_position * u_pixelRatio;
+
+      vec2 vertexPos = (a_position + outerEdge + shadowEdge) * u_pixelRatio;
+      gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
+
+      v_color = a_color;
+      v_nodeCoords = a_nodeCoords + (screenSpace + shadowEdge) / (u_dimensions);
+      v_textureCoords = a_textureCoords + (screenSpace + shadowEdge) / (u_dimensions);
+    }
+  `,
+  fragment: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform float u_alpha;
+    uniform vec2 u_dimensions;
+    uniform sampler2D u_texture;
+
+    uniform vec4 u_color;
+    uniform vec4 u_shadow;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    float box(vec2 p, vec2 s) {
+      vec2 q = abs(p) - s;
+      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) + 2.0;
+    }
+
+    float shadowBox(vec2 p, vec2 s, float r) {
+      vec2 q = abs(p) - s + r;
+      float dist = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
+      return 1.0 - smoothstep(-u_shadow.w, u_shadow.w + u_shadow.z, dist);
+    }
+
+    void main() {
+      vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
+      vec2 halfDimensions = (u_dimensions * 0.5);
+
+      vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
+      float boxDist = box(boxUv, halfDimensions);
+
+      float boxAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
+      float shadowDist = shadowBox(boxUv - u_shadow.xy, halfDimensions + u_shadow.w, u_shadow.z);
+
+      vec4 resColor = vec4(0.0);
+      resColor = mix(resColor, u_color, shadowDist);
+      resColor = mix(resColor, color, min(color.a, boxAlpha));
+      gl_FragColor = resColor * u_alpha;
+    }
+  `,
+};

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

@@ -43,7 +43,7 @@ export function getFontSetting(
     ff = [ff];
   }
 
-  const ffs = [];
+  const ffs: string[] = [];
   for (let i = 0, n = ff.length; i < n; i++) {
     let curFf = ff[i];
     // Replace the default font face `null` with the actual default font face set

package/src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.ts

@@ -20,7 +20,7 @@
 // import type { Renderer } from '../../../Renderer';
 import { assertTruthy } from '../../../../utils.js';
 import type { Stage } from '../../../Stage.js';
-import { WebGlCoreRenderer } from '../../../renderers/webgl/WebGlCoreRenderer.js';
+import { WebGlRenderer } from '../../../renderers/webgl/WebGlRenderer.js';
 import { ImageTexture } from '../../../textures/ImageTexture.js';
 import {
   TrFontFace,
@@ -73,7 +73,7 @@ export class SdfTrFontFace<
     this.type = type;
     const renderer = stage.renderer;
     assertTruthy(
-      renderer instanceof WebGlCoreRenderer,
+      renderer instanceof WebGlRenderer,
       'SDF Font Faces can only be used with the WebGL Renderer',
     );
 

package/src/core/text-rendering/renderers/LightningTextTextureRenderer.ts

@@ -137,6 +137,13 @@ export interface RenderInfo {
   metrics: NormalizedFontMetrics;
 }
 
+export interface LineType {
+  text: string;
+  x: number;
+  y: number;
+  w: number;
+}
+
 /**
  * Calculate height for the canvas
  *
@@ -199,10 +206,10 @@ export class LightningTextTextureRenderer {
   _getFontSetting() {
     const ff = [this._settings.fontFamily];
 
-    const ffs = [];
+    const ffs: string[] = [];
     for (let i = 0, n = ff.length; i < n; i++) {
       if (ff[i] === 'serif' || ff[i] === 'sans-serif') {
-        ffs.push(ff[i]);
+        ffs.push(ff[i]!);
       } else {
         ffs.push(`"${ff[i]!}"`);
       }
@@ -339,7 +346,7 @@ export class LightningTextTextureRenderer {
     if (calcMaxLines && lines.length > calcMaxLines) {
       const usedLines = lines.slice(0, calcMaxLines);
 
-      let otherLines = null;
+      let otherLines: string[] | null = null;
       if (this._settings.overflowSuffix) {
         // Wrap again with max lines suffix enabled.
         const w = this._settings.overflowSuffix
@@ -354,7 +361,7 @@ export class LightningTextTextureRenderer {
         usedLines[usedLines.length - 1] = `${al.l[0]!}${
           this._settings.overflowSuffix
         }`;
-        otherLines = [al.l.length > 1 ? al.l[1] : ''];
+        otherLines = [al.l.length > 1 ? al.l[1]! : ''];
       } else {
         otherLines = [''];
       }
@@ -515,7 +522,7 @@ export class LightningTextTextureRenderer {
     let linePositionX;
     let linePositionY;
 
-    const drawLines = [];
+    const drawLines: LineType[] = [];
 
     const { metrics } = renderInfo;
 

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

@@ -44,21 +44,21 @@ import {
   type SdfRenderWindow,
 } from './internal/setRenderWindow.js';
 import type { TrFontFace } from '../../font-face-types/TrFontFace.js';
-import { TrFontManager, type FontFamilyMap } from '../../TrFontManager.js';
+import { type FontFamilyMap } from '../../TrFontManager.js';
 import { assertTruthy, mergeColorAlpha } from '../../../../utils.js';
 import type { Stage } from '../../../Stage.js';
-import { WebGlCoreRenderOp } from '../../../renderers/webgl/WebGlCoreRenderOp.js';
+import { WebGlRenderOp } from '../../../renderers/webgl/WebGlRenderOp.js';
 import { BufferCollection } from '../../../renderers/webgl/internal/BufferCollection.js';
-import type {
-  SdfShader,
-  SdfShaderProps,
-} from '../../../renderers/webgl/shaders/SdfShader.js';
-import type { WebGlCoreCtxTexture } from '../../../renderers/webgl/WebGlCoreCtxTexture.js';
+import { Sdf, type SdfShaderProps } from '../../../shaders/webgl/SdfShader.js';
+import type { WebGlCtxTexture } from '../../../renderers/webgl/WebGlCtxTexture.js';
 import { EventEmitter } from '../../../../common/EventEmitter.js';
 import type { Matrix3d } from '../../../lib/Matrix3d.js';
 import type { Dimensions } from '../../../../common/CommonTypes.js';
-import { WebGlCoreRenderer } from '../../../renderers/webgl/WebGlCoreRenderer.js';
+import { WebGlRenderer } from '../../../renderers/webgl/WebGlRenderer.js';
 import { calcDefaultLineHeight } from '../../TextRenderingUtils.js';
+import type { WebGlShaderProgram } from '../../../renderers/webgl/WebGlShaderProgram.js';
+import type { WebGlShaderNode } from '../../../renderers/webgl/WebGlShaderNode.js';
+import type { CoreTextNode } from '../../../CoreTextNode.js';
 
 declare module '../TextRenderer.js' {
   interface TextRendererMap {
@@ -139,21 +139,17 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     this.ssdfFontFamilies,
     this.msdfFontFamilies,
   ];
-  private sdfShader: SdfShader;
+  private sdfShader: WebGlShaderNode;
   private rendererBounds: Bound;
 
   public type: 'canvas' | 'sdf' = 'sdf';
 
   constructor(stage: Stage) {
     super(stage);
-    this.sdfShader = this.stage.shManager.loadShader('SdfShader', {
-      transform: new Float32Array(),
-      color: 0,
-      size: 0,
-      scrollY: 0,
-      distanceRange: 0,
-      debug: false,
-    }).shader;
+    this.stage.shManager.registerShaderType('Sdf', Sdf);
+    this.sdfShader = this.stage.shManager.createShader(
+      'Sdf',
+    ) as WebGlShaderNode;
     this.rendererBounds = {
       x1: 0,
       y1: 0,
@@ -601,21 +597,15 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     this.setStatus(state, 'loaded');
   }
 
-  override renderQuads(
-    state: SdfTextRendererState,
-    transform: Matrix3d,
-    clippingRect: Readonly<RectWithValid>,
-    alpha: number,
-    parentHasRenderTexture: boolean,
-    framebufferDimensions: Dimensions,
-  ): void {
+  override renderQuads(node: CoreTextNode): void {
+    const state = node.trState as SdfTextRendererState;
     if (!state.vertexBuffer) {
       // Nothing to draw
       return;
     }
 
     const renderer = this.stage.renderer;
-    assertTruthy(renderer instanceof WebGlCoreRenderer);
+    assertTruthy(renderer instanceof WebGlRenderer);
 
     const { fontSize, color, contain, scrollable, zIndex, debug } = state.props;
 
@@ -651,8 +641,8 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
               stride, // 0 = move forward size * sizeof(type) each iteration to get the next position
               offset: 0, // start at the beginning of the buffer
             },
-            a_textureCoordinate: {
-              name: 'a_textureCoordinate',
+            a_textureCoords: {
+              name: 'a_textureCoords',
               size: 2,
               type: glw.FLOAT,
               normalized: false,
@@ -670,7 +660,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     if (!bufferUploaded) {
       const glw = renderer.glw;
 
-      const buffer = webGlBuffers?.getBuffer('a_textureCoordinate') ?? null;
+      const buffer = webGlBuffers?.getBuffer('a_textureCoords') ?? null;
       glw.arrayBufferData(buffer, vertexBuffer, glw.STATIC_DRAW);
       state.bufferUploaded = true;
     }
@@ -680,50 +670,48 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
       assertTruthy(elementBounds.valid);
       const elementRect = convertBoundToRect(elementBounds, tmpRect);
 
-      if (clippingRect.valid) {
+      if (node.clippingRect.valid) {
         state.clippingRect.valid = true;
-        clippingRect = intersectRect(
-          clippingRect,
+        node.clippingRect = intersectRect(
+          node.clippingRect,
           elementRect,
           state.clippingRect,
         );
       } else {
         state.clippingRect.valid = true;
-        clippingRect = copyRect(elementRect, state.clippingRect);
+        node.clippingRect = copyRect(elementRect, state.clippingRect);
       }
     }
 
-    const renderOp = new WebGlCoreRenderOp(
-      renderer.glw,
-      renderer.options,
-      webGlBuffers,
-      this.sdfShader,
+    const renderOp = new WebGlRenderOp(
+      renderer,
       {
-        transform: transform.getFloatArr(),
-        // IMPORTANT: The SDF Shader expects the color NOT to be premultiplied
-        // for the best blending results. Which is why we use `mergeColorAlpha`
-        // instead of `mergeColorAlphaPremultiplied` here.
-        color: mergeColorAlpha(color, alpha),
-        size: fontSize / (trFontFace.data?.info.size || 0),
-        scrollY,
-        distanceRange,
-        debug: debug.sdfShaderDebug,
-      } satisfies SdfShaderProps,
-      alpha,
-      clippingRect,
-      { height: textH, width: textW },
+        sdfShaderProps: {
+          transform: node.globalTransform!.getFloatArr(),
+          color: mergeColorAlpha(color, node.worldAlpha),
+          size: fontSize / (trFontFace.data?.info.size || 0),
+          scrollY,
+          distanceRange,
+          debug: debug.sdfShaderDebug,
+        },
+        sdfBuffers: state.webGlBuffers as BufferCollection,
+        shader: this.sdfShader,
+        alpha: node.worldAlpha,
+        clippingRect: node.clippingRect,
+        height: textH,
+        width: textW,
+        rtt: false,
+        parentHasRenderTexture: node.parentHasRenderTexture,
+        framebufferDimensions: node.framebufferDimensions,
+      },
       0,
-      zIndex,
-      false,
-      parentHasRenderTexture,
-      framebufferDimensions,
     );
 
     const texture = state.trFontFace?.texture;
     assertTruthy(texture);
     const ctxTexture = texture.ctxTexture;
 
-    renderOp.addTexture(ctxTexture as WebGlCoreCtxTexture);
+    renderOp.addTexture(ctxTexture as WebGlCtxTexture);
     renderOp.length = state.bufferNumFloats;
     renderOp.numQuads = state.bufferNumQuads;
 

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

@@ -44,7 +44,7 @@ import type {
  * }
  * ```
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+
 export interface TextRendererMap {}
 
 export interface TextRendererState {
@@ -546,12 +546,5 @@ export abstract class TextRenderer<
 
   abstract updateState(state: StateT): void;
 
-  renderQuads?(
-    state: StateT,
-    transform: Matrix3d,
-    clippingRect: RectWithValid,
-    alpha: number,
-    parentHasRenderTexture: boolean,
-    framebufferDimensions: Dimensions | undefined,
-  ): void;
+  renderQuads?(node: CoreTextNode): void;
 }

package/src/core/textures/ImageTexture.ts

@@ -170,29 +170,15 @@ export class ImageTexture extends Texture {
     const hasAlphaChannel = premultiplyAlpha ?? blob.type.includes('image/png');
     const imageBitmapSupported = this.txManager.imageBitmapSupported;
 
-    if (
-      imageBitmapSupported.full === true &&
-      sx !== null &&
-      sy !== null &&
-      sw !== null &&
-      sh !== null
-    ) {
+    if (imageBitmapSupported.full === true && sw !== null && sh !== null) {
       // createImageBitmap with crop
-      const bitmap = await createImageBitmap(blob, sx, sy, sw, sh, {
+      const bitmap = await createImageBitmap(blob, sx || 0, sy || 0, sw, sh, {
         premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
         colorSpaceConversion: 'none',
         imageOrientation: 'none',
       });
       return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
-    } else if (imageBitmapSupported.options === true) {
-      // createImageBitmap without crop but with options
-      const bitmap = await createImageBitmap(blob, {
-        premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
-        colorSpaceConversion: 'none',
-        imageOrientation: 'none',
-      });
-      return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
-    } else {
+    } else if (imageBitmapSupported.basic === true) {
       // basic createImageBitmap without options or crop
       // this is supported for Chrome v50 to v52/54 that doesn't support options
       return {
@@ -200,6 +186,14 @@ export class ImageTexture extends Texture {
         premultiplyAlpha: hasAlphaChannel,
       };
     }
+
+    // default createImageBitmap without crop but with options
+    const bitmap = await createImageBitmap(blob, {
+      premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
+      colorSpaceConversion: 'none',
+      imageOrientation: 'none',
+    });
+    return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
   }
 
   async loadImage(src: string) {

package/src/core/textures/Texture.ts

@@ -331,7 +331,7 @@ export abstract class Texture extends EventEmitter {
   static resolveDefaults(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     props: unknown,
-  ): Record<string, unknown> {
+  ): Record<string, any> {
     return {};
   }
 }

package/src/main-api/INode.ts

@@ -24,7 +24,7 @@ import {
 } from '../core/CoreNode.js';
 import type { CoreTextNode, CoreTextNodeProps } from '../core/CoreTextNode.js';
 import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
-import type { BaseShaderController } from './ShaderController.js';
+import type { CoreShaderNode } from '../core/renderers/CoreShaderNode.js';
 
 /**
  * A visual Node in the Renderer scene graph.
@@ -44,11 +44,11 @@ import type { BaseShaderController } from './ShaderController.js';
  * Users of the Renderer API, should generally interact with INode objects
  * instead of CoreNode objects.
  */
-export interface INode<SC extends BaseShaderController = BaseShaderController>
+export interface INode<ShaderNode extends CoreShaderNode = CoreShaderNode>
   extends Omit<CoreNode, 'shader' | 'animate' | 'parent'> {
-  shader: SC;
+  shader: ShaderNode;
   animate(
-    props: Partial<INodeAnimateProps<SC>>,
+    props: Partial<INodeAnimateProps<ShaderNode>>,
     settings: Partial<AnimationSettings>,
   ): IAnimationController;
   parent: INode | null;
@@ -57,19 +57,17 @@ export interface INode<SC extends BaseShaderController = BaseShaderController>
 /**
  * Properties used to animate() a Node
  */
-export interface INodeAnimateProps<
-  SC extends BaseShaderController = BaseShaderController,
-> extends Omit<CoreNodeAnimateProps, 'shaderProps'> {
-  shaderProps: Partial<SC['props']>;
+export interface INodeAnimateProps<ShNode extends CoreShaderNode>
+  extends Omit<CoreNodeAnimateProps, 'shaderProps'> {
+  shaderProps: Partial<ShNode['props']>;
 }
 
 /**
  * Properties used to create a new Node
  */
-export interface INodeProps<
-  SC extends BaseShaderController = BaseShaderController,
-> extends Omit<CoreNodeProps, 'shader' | 'parent'> {
-  shader: SC;
+export interface INodeProps<ShNode extends CoreShaderNode>
+  extends Omit<CoreNodeProps, 'shader' | 'parent'> {
+  shader: ShNode;
   parent: INode | null;
 }
 
@@ -87,7 +85,7 @@ export interface INodeProps<
  */
 export interface ITextNode extends Omit<CoreTextNode, 'animate' | 'parent'> {
   animate(
-    props: Partial<INodeAnimateProps<BaseShaderController>>,
+    props: Partial<INodeAnimateProps<CoreShaderNode>>,
     settings: Partial<AnimationSettings>,
   ): IAnimationController;
   parent: INode | null;

package/src/main-api/Inspector.ts

@@ -62,13 +62,25 @@ const stylePropertyMap: {
 
     return { prop: 'height', value: `${h}px` };
   },
+  fontSize: (fs) => {
+    if (fs === 0) {
+      return null;
+    }
+
+    return { prop: 'font-size', value: `${fs}px` };
+  },
+  lineHeight: (lh) => {
+    if (lh === 0) {
+      return null;
+    }
+
+    return { prop: 'line-height', value: `${lh}px` };
+  },
   zIndex: () => 'z-index',
   fontFamily: () => 'font-family',
-  fontSize: () => 'font-size',
   fontStyle: () => 'font-style',
   fontWeight: () => 'font-weight',
   fontStretch: () => 'font-stretch',
-  lineHeight: () => 'line-height',
   letterSpacing: () => 'letter-spacing',
   textAlign: () => 'text-align',
   overflowSuffix: () => 'overflow-suffix',
@@ -396,6 +408,11 @@ export class Inspector {
     //   return;
     // }
 
+    if (property === 'rtt' && value) {
+      div.setAttribute('data-rtt', String(value));
+      return;
+    }
+
     // CSS mappable attribute
     if (stylePropertyMap[property]) {
       const mappedStyleResponse = stylePropertyMap[property]?.(value);