@lightningjs/renderer 0.5.0 → 0.6.0

package/src/core/animations/CoreAnimation.ts

@@ -38,6 +38,7 @@ export class CoreAnimation extends EventEmitter {
   public restoreValues: Partial<INodeAnimatableProps> = {};
   private progress = 0;
   private timingFunction: (t: number) => number | undefined;
+  private propsList: Array<keyof INodeAnimatableProps>; //fixme - aint got not time for this
 
   constructor(
     private node: CoreNode,
@@ -46,11 +47,10 @@ export class CoreAnimation extends EventEmitter {
   ) {
     super();
     this.propStartValues = {};
-    (Object.keys(props) as Array<keyof INodeAnimatableProps>).forEach(
-      (propName) => {
-        this.propStartValues[propName] = node[propName];
-      },
-    );
+    this.propsList = Object.keys(props) as Array<keyof INodeAnimatableProps>;
+    this.propsList.forEach((propName) => {
+      this.propStartValues[propName] = node[propName];
+    });
 
     this.timingFunction = (t: number) => t;
 
@@ -108,33 +108,53 @@ export class CoreAnimation extends EventEmitter {
 
     if (this.progress > 1) {
       this.progress = loop ? 0 : 1;
-      this.emit('finished', {});
+      return this.emit('finished', {});
     }
 
-    (Object.keys(this.props) as Array<keyof INodeAnimatableProps>).forEach(
-      (propName) => {
-        const propValue = this.props[propName] as number;
-        const startValue = this.propStartValues[propName] as number;
-        const endValue = propValue;
-
-        if (propName.indexOf('color') !== -1) {
-          const progressValue = easing
-            ? this.timingFunction(this.progress) || this.progress
-            : this.progress;
-          const colorValue = mergeColorProgress(
+    for (let i = 0; i < this.propsList.length; i++) {
+      const propName = this.propsList[i] as keyof INodeAnimatableProps;
+      const propValue = this.props[propName] as number;
+      const startValue = this.propStartValues[propName] as number;
+      const endValue = propValue;
+
+      if (propName.indexOf('color') !== -1) {
+        // check if we have to change the color to begin with
+        if (startValue === endValue) {
+          this.node[propName] = startValue;
+          continue;
+        }
+
+        if (easing) {
+          const easingProgressValue =
+            this.timingFunction(this.progress) || this.progress;
+          const easingColorValue = mergeColorProgress(
             startValue,
             endValue,
-            progressValue,
+            easingProgressValue,
           );
-          this.node[propName] = easing
-            ? colorValue
-            : mergeColorProgress(startValue, endValue, this.progress);
-        } else {
-          this.node[propName] = easing
-            ? this.applyEasing(this.progress, startValue, endValue)
-            : startValue + (endValue - startValue) * this.progress;
+          this.node[propName] = easingColorValue;
+          continue;
         }
-      },
-    );
+
+        this.node[propName] = mergeColorProgress(
+          startValue,
+          endValue,
+          this.progress,
+        );
+        continue;
+      }
+
+      if (easing) {
+        this.node[propName] = this.applyEasing(
+          this.progress,
+          startValue,
+          endValue,
+        );
+        continue;
+      }
+
+      this.node[propName] =
+        startValue + (endValue - startValue) * this.progress;
+    }
   }
 }

package/src/core/lib/utils.ts

@@ -88,22 +88,48 @@ export interface Bound {
   y2: number;
 }
 
-export function intersectBound(a: Bound, b: Bound): Bound {
-  const intersection = {
-    x1: Math.max(a.x1, b.x1),
-    y1: Math.max(a.y1, b.y1),
-    x2: Math.min(a.x2, b.x2),
-    y2: Math.min(a.y2, b.y2),
-  };
+export interface BoundWithValid extends Bound {
+  valid: boolean;
+}
+
+export function createBound<T extends Bound = Bound>(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  out?: T,
+): T {
+  if (out) {
+    out.x1 = x1;
+    out.y1 = y1;
+    out.x2 = x2;
+    out.y2 = y2;
+    return out;
+  }
+  return {
+    x1,
+    y1,
+    x2,
+    y2,
+  } as T;
+}
+
+export function intersectBound<T extends Bound = Bound>(
+  a: Bound,
+  b: Bound,
+  out?: T,
+): T {
+  const intersection = createBound(
+    Math.max(a.x1, b.x1),
+    Math.max(a.y1, b.y1),
+    Math.min(a.x2, b.x2),
+    Math.min(a.y2, b.y2),
+    out,
+  );
   if (intersection.x1 < intersection.x2 && intersection.y1 < intersection.y2) {
     return intersection;
   }
-  return {
-    x1: 0,
-    y1: 0,
-    x2: 0,
-    y2: 0,
-  };
+  return createBound(0, 0, 0, 0, intersection);
 }
 
 export function intersectRect(a: Rect, b: Rect): Rect {

package/src/core/platform.ts

@@ -23,12 +23,13 @@ import type { Stage } from './Stage.js';
  * Platform render loop initiator
  */
 export const startLoop = (stage: Stage) => {
-  const loop = () => {
-    // emit('frameStart');
+  const runLoop = () => {
+    stage.updateAnimations();
+
     stage.drawFrame();
-    requestAnimationFrame(loop);
+    requestAnimationFrame(runLoop);
   };
-  requestAnimationFrame(loop);
+  requestAnimationFrame(runLoop);
 };
 
 /**

package/src/core/renderers/CoreRenderer.ts

@@ -56,9 +56,8 @@ export abstract class CoreRenderer {
   }
 
   abstract reset(): void;
-  abstract sortRenderables(): void;
   abstract render(surface: 'screen' | CoreContextTexture): void;
-  abstract addRenderable(params: QuadOptions | CoreRenderOp): void;
+  abstract addQuad(quad: QuadOptions): void;
   abstract createCtxTexture(textureSource: Texture): CoreContextTexture;
   abstract getShaderManager(): CoreShaderManager;
 }

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

@@ -130,9 +130,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
       extensions: getWebGlExtensions(gl),
     };
     this.shManager.renderer = this;
-    this.defaultShader = this.shManager.loadShader(
-      'DefaultShaderBatched',
-    ).shader;
+    this.defaultShader = this.shManager.loadShader('DefaultShader').shader;
     const quadBuffer = gl.createBuffer();
     assertTruthy(quadBuffer);
     const stride = 6 * Float32Array.BYTES_PER_ELEMENT;
@@ -196,23 +194,18 @@ export class WebGlCoreRenderer extends CoreRenderer {
   }
 
   /**
-   * Add a renderable to the current set of renderables.
+   * This function adds a quad (a rectangle composed of two triangles) to the WebGL rendering pipeline.
    *
-   * @remarks
-   * If a {@link QuadOptions} structure is provided, this will ultimately result
-   * in a render ops being created, merged and added to the render ops list.
+   * It takes a set of options that define the quad's properties, such as its dimensions, colors, texture, shader, and transformation matrix.
+   * The function first updates the shader properties with the current dimensions if necessary, then sets the default texture if none is provided.
+   * It then checks if a new render operation is needed, based on the current shader and clipping rectangle.
+   * If a new render operation is needed, it creates one and updates the current render operation.
+   * The function then adjusts the texture coordinates based on the texture options and adds the texture to the texture manager.
    *
-   * If a direct {@link WebGlCoreRenderOp} instance is provided, it will be
-   * added to the render ops list as-is. Be sure to set the zIndex correctly of
-   * the render op to ensure proper rendering order.
-   *
-   * @param renderable
+   * Finally, it calculates the vertices for the quad, taking into account any transformations, and adds them to the quad buffer.
+   * The function updates the length and number of quads in the current render operation, and updates the current buffer index.
    */
-  override addRenderable(renderable: QuadOptions | WebGlCoreRenderOp) {
-    this.renderables?.push(renderable);
-  }
-
-  private addQuad(params: QuadOptions) {
+  addQuad(params: QuadOptions) {
     const { fQuadBuffer, uiQuadBuffer } = this;
     const {
       width,
@@ -508,25 +501,11 @@ export class WebGlCoreRenderer extends CoreRenderer {
   }
 
   /**
-   * Sort renderable children and add them to the render ops.
-   * @todo:
-   * - move to merge sort to keep relative order
-   * - support z-index parent locking
-   *
+   * add RenderOp to the render pipeline
    */
-
-  sortRenderables() {
-    const { renderables } = this;
-    renderables.sort((a, b) => a.zIndex - b.zIndex);
-
-    renderables.forEach((renderable) => {
-      if (renderable instanceof WebGlCoreRenderOp) {
-        this.renderOps.push(renderable);
-        this.curRenderOp = null;
-      } else {
-        this.addQuad(renderable);
-      }
-    });
+  addRenderOp(renderable: WebGlCoreRenderOp) {
+    this.renderOps.push(renderable);
+    this.curRenderOp = null;
   }
 
   /**

package/src/core/renderers/webgl/shaders/DefaultShader.ts

@@ -37,6 +37,10 @@ export class DefaultShader extends WebGlCoreShader {
 
   override bindTextures(textures: WebGlCoreCtxTexture[]) {
     const { gl } = this;
+    if (gl.getParameter(gl.TEXTURE_BINDING_2D) === textures[0]!.ctxTexture) {
+      return;
+    }
+
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, textures[0]!.ctxTexture);
   }

package/src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -25,18 +25,7 @@ import {
 } from '../WebGlCoreShader.js';
 import type { UniformInfo } from '../internal/ShaderUtils.js';
 import type { WebGlCoreCtxTexture } from '../WebGlCoreCtxTexture.js';
-import { RadiusEffect } from './effects/RadiusEffect.js';
-import { BorderEffect } from './effects/BorderEffect.js';
-import { LinearGradientEffect } from './effects/LinearGradientEffect.js';
-import { GrayscaleEffect } from './effects/GrayscaleEffect.js';
 import { ShaderEffect } from './effects/ShaderEffect.js';
-import { BorderRightEffect } from './effects/BorderRightEffect.js';
-import { BorderTopEffect } from './effects/BorderTopEffect.js';
-import { BorderBottomEffect } from './effects/BorderBottomEffect.js';
-import { BorderLeftEffect } from './effects/BorderLeftEffect.js';
-import { GlitchEffect } from './effects/GlitchEffect.js';
-import { FadeOutEffect } from './effects/FadeOutEffect.js';
-import { RadialGradientEffect } from './effects/RadialGradientEffect.js';
 import type { EffectMap } from '../../../CoreShaderManager.js';
 
 /**
@@ -83,20 +72,6 @@ export interface DynamicShaderProps
   effects?: EffectDesc[];
 }
 
-const Effects = {
-  radius: RadiusEffect,
-  border: BorderEffect,
-  borderBottom: BorderBottomEffect,
-  borderLeft: BorderLeftEffect,
-  borderRight: BorderRightEffect,
-  borderTop: BorderTopEffect,
-  fadeOut: FadeOutEffect,
-  linearGradient: LinearGradientEffect,
-  radialGradient: RadialGradientEffect,
-  grayscale: GrayscaleEffect,
-  glitch: GlitchEffect,
-};
-
 export interface SpecificEffectDesc<
   FxType extends keyof EffectMap = keyof EffectMap,
 > {
@@ -142,9 +117,10 @@ export class DynamicShader extends WebGlCoreShader {
   }
 
   protected override bindProps(props: Required<DynamicShaderProps>): void {
+    const effects = this.renderer.shManager.getRegisteredEffects();
     props.effects?.forEach((eff, index) => {
       const effect = this.effects[index]!;
-      const fxClass = Effects[effect.name as keyof EffectMap];
+      const fxClass = effects[effect.name as keyof EffectMap]!;
       const props = eff.props ?? {};
       const uniInfo = effect.uniformInfo;
       Object.keys(props).forEach((p) => {
@@ -294,7 +270,7 @@ export class DynamicShader extends WebGlCoreShader {
       const current = effects[i]!;
       const pm =
         current.passParameters.length > 0 ? `, ${current.passParameters}` : '';
-      const currentClass = Effects[current.name as keyof EffectMap];
+      const currentClass = effectContructors[current.name as keyof EffectMap]!;
 
       if (currentClass.onShaderMask) {
         drawEffects += `
@@ -313,7 +289,7 @@ export class DynamicShader extends WebGlCoreShader {
       const next = effects[i + 1]!;
       if (
         next === undefined ||
-        Effects[next.name as keyof EffectMap].onEffectMask
+        effectContructors[next.name as keyof EffectMap]!.onEffectMask
       ) {
         drawEffects += `
           shaderColor = ${currentMask};
@@ -360,7 +336,7 @@ export class DynamicShader extends WebGlCoreShader {
       effects: (props.effects ?? []).map((effect) => ({
         type: effect.type,
         props: effectContructors![effect.type]!.resolveDefaults(
-          effect.props || {},
+          (effect.props || {}) as any,
         ),
       })) as MapEffectDescs<keyof EffectMap>[],
       $dimensions: {

package/src/core/renderers/webgl/shaders/effects/RadialProgressEffect.ts

@@ -0,0 +1,186 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * 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.
+ */
+import { getNormalizedRgbaComponents } from '../../../../lib/utils.js';
+import {
+  ShaderEffect,
+  type DefaultEffectProps,
+  type ShaderEffectUniforms,
+} from './ShaderEffect.js';
+
+/**
+ * Properties of the {@link RadialProgressEffect} effect
+ */
+export interface RadialProgressEffectProps extends DefaultEffectProps {
+  /**
+   * Width of the border in pixels
+   *
+   * @default 10
+   */
+  width?: number;
+  /**
+   * progress from 0 to 1 in floats
+   *
+   * @default 0.5;
+   */
+  progress?: number;
+  /**
+   * offset where the radial progress starts drawing.
+   *
+   * @default 0;
+   */
+  offset?: number;
+  /**
+   * maximum range of the radial progress in radians
+   *
+   * @default Math.PI * 2
+   */
+  range?: number;
+  /**
+   * rounded ends of the progress bar;
+   *
+   * @default false
+   */
+  rounded?: boolean;
+  /**
+   * radius from center to outer edge from 0 to 1 in floats;
+   *
+   * @default 1
+   */
+  radius?: number;
+  /**
+   * Color of the border in 0xRRGGBBAA
+   *
+   * @default 0xffffffff
+   */
+  color?: number;
+}
+
+/**
+ * The RadialProgressEffect renders a border along all edges of an element
+ */
+export class RadialProgressEffect extends ShaderEffect {
+  static z$__type__Props: RadialProgressEffectProps;
+  override readonly name = 'radialProgress';
+
+  static override getEffectKey(): string {
+    return `radialProgress`;
+  }
+
+  static override resolveDefaults(
+    props: RadialProgressEffectProps,
+  ): Required<RadialProgressEffectProps> {
+    return {
+      width: props.width ?? 10,
+      progress: props.progress ?? 0.5,
+      offset: props.offset ?? 0,
+      range: props.range ?? Math.PI * 2,
+      rounded: props.rounded ?? false,
+      radius: props.radius ?? 1,
+      color: props.color ?? 0xffffffff,
+    };
+  }
+
+  static override uniforms: ShaderEffectUniforms = {
+    width: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    progress: {
+      value: 0.5,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    offset: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    range: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    rounded: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+      validator: (value: boolean): number => {
+        return value ? 1 : 0;
+      },
+    },
+    radius: {
+      value: 1,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    color: {
+      value: 0xffffffff,
+      validator: (rgba): number[] => getNormalizedRgbaComponents(rgba),
+      method: 'uniform4fv',
+      type: 'vec4',
+    },
+  };
+
+  static override methods: Record<string, string> = {
+    rotateUV: `
+    vec2 function(vec2 uv, float d) {
+      float s = sin(d);
+      float c = cos(d);
+      mat2 rotMatrix = mat2(c, -s, s, c);
+      return uv * rotMatrix;
+    }
+    `,
+    drawDot: `
+    float function(vec2 uv, vec2 p, float r) {
+      uv += p;
+      float circle = length(uv) - r;
+      return clamp(-circle, 0.0, 1.0);
+    }
+    `,
+  };
+
+  static override onEffectMask = `
+    float outerRadius = radius * u_dimensions.y * 0.5;
+
+    float endAngle = range * progress - 0.0005;
+
+    vec2 uv = v_textureCoordinate.xy * u_dimensions.xy - u_dimensions * 0.5;
+
+    uv = $rotateUV(uv, -(offset));
+    float linewidth = width * u_pixelRatio;
+    float circle = length(uv) - (outerRadius - linewidth) ;
+    circle = abs(circle) - linewidth;
+    circle = clamp(-circle, 0.0, 1.0);
+
+    float angle = (atan(uv.x, -uv.y) / 3.14159265359 * 0.5);
+    float p = endAngle / (PI * 2.);
+
+    circle *= step(fract(angle), fract(p));
+
+    circle = rounded < 1. ? circle : max(circle, $drawDot(uv, vec2(0, outerRadius - linewidth), linewidth));
+    circle = rounded < 1. ? circle : max(circle, $drawDot($rotateUV(uv, -(endAngle)), vec2(0, outerRadius - linewidth), linewidth));
+
+    return mix(shaderColor, maskColor, circle);
+  `;
+
+  static override onColorize = `
+    return color;
+  `;
+}