@lightningjs/renderer 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/renderer",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Lightning 3 Renderer",
   "type": "module",
   "main": "./dist/exports/index.js",

package/src/core/CoreNode.ts

@@ -192,7 +192,7 @@ export enum UpdateType {
   /**
    * All
    */
-  All = 8191,
+  All = 14335,
 }
 
 /**
@@ -852,10 +852,15 @@ export class CoreNode extends EventEmitter {
     if (parent !== null && !(parent.updateType & UpdateType.Children)) {
       parent.setUpdateType(UpdateType.Children);
     }
+
     // If node is part of RTT texture
     // Flag that we need to update
     if (this.parentHasRenderTexture) {
       this.setRTTUpdates(type);
+
+      if (parent !== null) {
+        parent.setUpdateType(UpdateType.RenderTexture);
+      }
     }
   }
 
@@ -959,6 +964,7 @@ export class CoreNode extends EventEmitter {
     }
 
     const parent = this.props.parent;
+    let renderState = null;
 
     if (this.updateType & UpdateType.ParentRenderTexture) {
       let p = this.parent;
@@ -975,9 +981,9 @@ export class CoreNode extends EventEmitter {
       this.updateType ^ UpdateType.All &&
       this.updateType & UpdateType.RenderTexture
     ) {
-      this.children.forEach((child) => {
-        child.setUpdateType(UpdateType.All);
-      });
+      for (let i = 0, length = this.children.length; i < length; i++) {
+        this.children[i]?.setUpdateType(UpdateType.All);
+      }
     }
 
     if (this.updateType & UpdateType.Global) {
@@ -1015,8 +1021,29 @@ export class CoreNode extends EventEmitter {
     }
 
     if (this.updateType & UpdateType.RenderState) {
-      this.updateRenderState();
+      renderState = this.checkRenderBounds();
       this.setUpdateType(UpdateType.IsRenderable);
+
+      // if we're not going out of bounds, update the render state
+      // this is done so the update loop can finish before we mark a node
+      // as out of bounds
+      if (renderState !== CoreNodeRenderState.OutOfBounds) {
+        this.updateRenderState(renderState);
+      }
+    }
+
+    if (this.updateType & UpdateType.WorldAlpha) {
+      if (parent) {
+        this.worldAlpha = parent.worldAlpha * this.props.alpha;
+      } else {
+        this.worldAlpha = this.props.alpha;
+      }
+      this.setUpdateType(
+        UpdateType.Children |
+          UpdateType.PremultipliedColors |
+          UpdateType.IsRenderable,
+      );
+      this.childUpdateType |= UpdateType.WorldAlpha;
     }
 
     if (this.updateType & UpdateType.IsRenderable) {
@@ -1035,20 +1062,6 @@ export class CoreNode extends EventEmitter {
       this.childUpdateType |= UpdateType.RenderBounds;
     }
 
-    if (this.updateType & UpdateType.WorldAlpha) {
-      if (parent) {
-        this.worldAlpha = parent.worldAlpha * this.props.alpha;
-      } else {
-        this.worldAlpha = this.props.alpha;
-      }
-      this.setUpdateType(
-        UpdateType.Children |
-          UpdateType.PremultipliedColors |
-          UpdateType.IsRenderable,
-      );
-      this.childUpdateType |= UpdateType.WorldAlpha;
-    }
-
     if (this.updateType & UpdateType.PremultipliedColors) {
       this.premultipliedColorTl = mergeColorAlphaPremultiplied(
         this.props.colorTl,
@@ -1097,11 +1110,8 @@ export class CoreNode extends EventEmitter {
       this.children.length > 0 &&
       this.rtt === false
     ) {
-      for (let i = 0; i < this.children.length; i++) {
-        const child = this.children[i];
-        if (child === undefined) {
-          continue;
-        }
+      for (let i = 0, length = this.children.length; i < length; i++) {
+        const child = this.children[i] as CoreNode;
 
         child.setUpdateType(this.childUpdateType);
 
@@ -1120,6 +1130,13 @@ export class CoreNode extends EventEmitter {
       this.sortChildren();
     }
 
+    // If we're out of bounds, apply the render state now
+    // this is done so nodes can finish their entire update loop before
+    // being marked as out of bounds
+    if (renderState === CoreNodeRenderState.OutOfBounds) {
+      this.updateRenderState(renderState);
+    }
+
     // reset update type
     this.updateType = 0;
     this.childUpdateType = 0;
@@ -1219,7 +1236,6 @@ export class CoreNode extends EventEmitter {
       strictBound.y1 - renderM[0],
       strictBound.x2 + renderM[1],
       strictBound.y2 + renderM[2],
-      this.preloadBound,
     );
   }
 
@@ -1249,16 +1265,19 @@ export class CoreNode extends EventEmitter {
 
     // no clipping, use parent's bounds
     if (this.clipping === false) {
-      if (this.parent !== null) {
-        this.strictBound =
-          this.parent.strictBound ??
-          createBound(0, 0, this.stage.root.width, this.stage.root.height);
-
-        this.preloadBound =
-          this.parent.preloadBound ??
-          this.createPreloadBounds(this.strictBound);
+      if (this.parent !== null && this.parent.strictBound !== undefined) {
+        // we have a parent with a valid bound, copy it
+        this.strictBound = createBound(
+          this.parent.strictBound.x1,
+          this.parent.strictBound.y1,
+          this.parent.strictBound.x2,
+          this.parent.strictBound.y2,
+        );
+
+        this.preloadBound = this.createPreloadBounds(this.strictBound);
         return;
       } else {
+        // no parent or parent does not have a bound, take the stage dimensions
         this.strictBound = createBound(
           0,
           0,
@@ -1287,9 +1306,7 @@ export class CoreNode extends EventEmitter {
     this.preloadBound = this.createPreloadBounds(this.strictBound);
   }
 
-  updateRenderState() {
-    const renderState = this.checkRenderBounds();
-
+  updateRenderState(renderState: CoreNodeRenderState) {
     if (renderState === this.renderState) {
       return;
     }
@@ -1439,8 +1456,7 @@ export class CoreNode extends EventEmitter {
     this.props.shader = this.stage.defShaderCtr;
 
     const children = [...this.children];
-    for (let i = 0; i < children.length; i++) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    for (let i = 0, length = children.length; i < length; i++) {
       children[i]!.destroy();
     }
     // This very action will also remove the node from the parent's children array
@@ -1730,9 +1746,10 @@ export class CoreNode extends EventEmitter {
     this.setUpdateType(
       UpdateType.PremultipliedColors |
         UpdateType.WorldAlpha |
-        UpdateType.Children,
+        UpdateType.Children |
+        UpdateType.IsRenderable,
     );
-    this.childUpdateType |= UpdateType.Global;
+    this.childUpdateType |= UpdateType.WorldAlpha;
   }
 
   get autosize(): boolean {
@@ -1866,9 +1883,9 @@ export class CoreNode extends EventEmitter {
   set zIndexLocked(value: number) {
     this.props.zIndexLocked = value;
     this.setUpdateType(UpdateType.CalculatedZIndex | UpdateType.Children);
-    this.children.forEach((child) => {
-      child.setUpdateType(UpdateType.CalculatedZIndex);
-    });
+    for (let i = 0, length = this.children.length; i < length; i++) {
+      this.children[i]!.setUpdateType(UpdateType.CalculatedZIndex);
+    }
   }
 
   get zIndex(): number {
@@ -1878,9 +1895,9 @@ export class CoreNode extends EventEmitter {
   set zIndex(value: number) {
     this.props.zIndex = value;
     this.setUpdateType(UpdateType.CalculatedZIndex | UpdateType.Children);
-    this.children.forEach((child) => {
-      child.setUpdateType(UpdateType.CalculatedZIndex);
-    });
+    for (let i = 0, length = this.children.length; i < length; i++) {
+      this.children[i]!.setUpdateType(UpdateType.CalculatedZIndex);
+    }
   }
 
   get parent(): CoreNode | null {
@@ -1943,11 +1960,9 @@ export class CoreNode extends EventEmitter {
       if (value === false && this.texture !== null) {
         this.unloadTexture();
         this.setUpdateType(UpdateType.All);
-
-        this.children.forEach((child) => {
-          child.parentHasRenderTexture = false;
-        });
-
+        for (let i = 0, length = this.children.length; i < length; i++) {
+          this.children[i]!.parentHasRenderTexture = false;
+        }
         this.stage.renderer?.removeRTTNode(this);
         return;
       }
@@ -1969,9 +1984,9 @@ export class CoreNode extends EventEmitter {
     this.hasRTTupdates = true;
     this.setUpdateType(UpdateType.All);
 
-    this.children.forEach((child) => {
-      child.setUpdateType(UpdateType.All);
-    });
+    for (let i = 0, length = this.children.length; i < length; i++) {
+      this.children[i]!.setUpdateType(UpdateType.All);
+    }
 
     // Store RTT nodes in a separate list
     this.stage.renderer?.renderToTexture(this);

package/src/core/CoreShaderManager.ts

@@ -275,6 +275,7 @@ export class CoreShaderManager {
     shader: InstanceType<ShaderMap['DynamicShader']>,
     props: ExtractProps<ShaderMap['DynamicShader']>,
   ): DynamicShaderController<T> {
+    shader.bindUniformMethods(props);
     return new DynamicShaderController(shader, props, this);
   }
 

package/src/core/lib/WebGlContextWrapper.ts

@@ -45,10 +45,6 @@ export class WebGlContextWrapper {
   private boundArrayBuffer: WebGLBuffer | null;
   private boundElementArrayBuffer: WebGLBuffer | null;
   private curProgram: WebGLProgram | null;
-  private programUniforms: WeakMap<
-    WebGLProgram,
-    Map<WebGLUniformLocation, any[]>
-  > = new WeakMap();
   //#endregion Cached WebGL State
 
   //#region Canvas
@@ -708,22 +704,279 @@ export class WebGlContextWrapper {
     this.curProgram = program;
   }
 
-  setUniform<T extends keyof UniformMethodMap>(
-    type: T,
-    location: WebGLUniformLocation,
-    ...args: UniformMethodMap[T]
+  /**
+   * Sets the value of a single float uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The value to set.
+   */
+  uniform1f(location: WebGLUniformLocation | null, v0: number) {
+    const { gl } = this;
+    gl.uniform1f(location, v0);
+  }
+
+  /**
+   * Sets the value of a float array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of values to set.
+   */
+  uniform1fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
   ) {
-    const { gl, programUniforms } = this;
-    let uniforms = programUniforms.get(this.curProgram!);
-    if (!uniforms) {
-      uniforms = new Map();
-      programUniforms.set(this.curProgram!, uniforms);
-    }
-    const uniformArgs = uniforms.get(location);
-    if (!uniformArgs || !compareArrays(uniformArgs, args)) {
-      uniforms.set(location, args);
-      gl[type](location, ...(args as [never, never, never, never]));
-    }
+    const { gl } = this;
+    gl.uniform1fv(location, value);
+  }
+
+  /**
+   * Sets the value of a single integer uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The value to set.
+   */
+  uniform1i(location: WebGLUniformLocation | null, v0: number) {
+    const { gl } = this;
+    gl.uniform1i(location, v0);
+  }
+
+  /**
+   * Sets the value of an integer array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of values to set.
+   */
+  uniform1iv(
+    location: WebGLUniformLocation | null,
+    value: Int32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform1iv(location, value);
+  }
+
+  /**
+   * Sets the value of a vec2 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   */
+  uniform2f(location: WebGLUniformLocation | null, v0: number, v1: number) {
+    const { gl } = this;
+    gl.uniform2f(location, v0, v1);
+  }
+
+  /**
+   * Sets the value of a vec2 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of vec2 values to set.
+   */
+  uniform2fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform2fv(location, value);
+  }
+
+  /**
+   * Sets the value of a ivec2 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   */
+  uniform2i(location: WebGLUniformLocation | null, v0: number, v1: number) {
+    const { gl } = this;
+    gl.uniform2i(location, v0, v1);
+  }
+
+  /**
+   * Sets the value of an ivec2 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of ivec2 values to set.
+   */
+  uniform2iv(
+    location: WebGLUniformLocation | null,
+    value: Int32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform2iv(location, value);
+  }
+
+  /**
+   * Sets the value of a vec3 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   * @param v2 - The third component of the vector.
+   */
+  uniform3f(
+    location: WebGLUniformLocation | null,
+    v0: number,
+    v1: number,
+    v2: number,
+  ) {
+    const { gl } = this;
+    gl.uniform3f(location, v0, v1, v2);
+  }
+
+  /**
+   * Sets the value of a vec3 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of vec3 values to set.
+   */
+  uniform3fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform3fv(location, value);
+  }
+
+  /**
+   * Sets the value of a ivec3 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   * @param v2 - The third component of the vector.
+   */
+  uniform3i(
+    location: WebGLUniformLocation | null,
+    v0: number,
+    v1: number,
+    v2: number,
+  ) {
+    const { gl } = this;
+    gl.uniform3i(location, v0, v1, v2);
+  }
+
+  /**
+   * Sets the value of an ivec3 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of ivec3 values to set.
+   */
+  uniform3iv(
+    location: WebGLUniformLocation | null,
+    value: Int32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform3iv(location, value);
+  }
+
+  /**
+   * Sets the value of a vec4 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   * @param v2 - The third component of the vector.
+   * @param v3 - The fourth component of the vector.
+   */
+  uniform4f(
+    location: WebGLUniformLocation | null,
+    v0: number,
+    v1: number,
+    v2: number,
+    v3: number,
+  ) {
+    const { gl } = this;
+    gl.uniform4f(location, v0, v1, v2, v3);
+  }
+
+  /**
+   * Sets the value of a vec4 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of vec4 values to set.
+   */
+  uniform4fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform4fv(location, value);
+  }
+
+  /**
+   * Sets the value of a ivec4 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param v0 - The first component of the vector.
+   * @param v1 - The second component of the vector.
+   * @param v2 - The third component of the vector.
+   * @param v3 - The fourth component of the vector.
+   */
+  uniform4i(
+    location: WebGLUniformLocation | null,
+    v0: number,
+    v1: number,
+    v2: number,
+    v3: number,
+  ) {
+    const { gl } = this;
+    gl.uniform4i(location, v0, v1, v2, v3);
+  }
+
+  /**
+   * Sets the value of an ivec4 array uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param value - The array of ivec4 values to set.
+   */
+  uniform4iv(
+    location: WebGLUniformLocation | null,
+    value: Int32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniform4iv(location, value);
+  }
+
+  /**
+   * Sets the value of a mat2 uniform variable.
+   *
+   * @param location - The location of the uniform variable.
+   * @param transpose - Whether to transpose the matrix.
+   * @param value - The array of mat2 values to set.
+   */
+  uniformMatrix2fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniformMatrix2fv(location, false, value);
+  }
+
+  /**
+   * Sets the value of a mat2 uniform variable.
+   * @param location - The location of the uniform variable.
+   * @param value - The array of mat2 values to set.
+   */
+  uniformMatrix3fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniformMatrix3fv(location, false, value);
+  }
+
+  /**
+   * Sets the value of a mat4 uniform variable.
+   * @param location - The location of the uniform variable.
+   * @param value - The array of mat4 values to set.
+   */
+  uniformMatrix4fv(
+    location: WebGLUniformLocation | null,
+    value: Float32Array | number[],
+  ) {
+    const { gl } = this;
+    gl.uniformMatrix4fv(location, false, value);
   }
 
   /**
@@ -1031,12 +1284,21 @@ export function compareArrays<T>(a: T[], b: T[]): boolean {
   if (a.length !== b.length) {
     return false;
   }
-  return a.every((v, i) => {
-    // Don't bother to compare nested arrays or Float32Arrays
-    if (Array.isArray(v) || v instanceof Float32Array) {
-      return false;
-    } else {
-      return v === b[i];
+
+  let result = false;
+  for (let i = 0; i < a.length; i++) {
+    if (Array.isArray(a[i]) || a[i] instanceof Float32Array) {
+      result = false;
+      break;
     }
-  });
+
+    if (a[i] !== b[i]) {
+      result = false;
+      break;
+    }
+
+    result = true;
+  }
+
+  return result;
 }

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

@@ -619,12 +619,13 @@ export class WebGlCoreRenderer extends CoreRenderer {
       console.log('renderOps', this.renderOps.length);
     }
 
-    this.renderOps.forEach((renderOp, i) => {
+    for (let i = 0, length = this.renderOps.length; i < length; i++) {
+      const renderOp = this.renderOps[i] as WebGlCoreRenderOp;
       if (doLog) {
         console.log('Quads per operation', renderOp.numQuads);
       }
       renderOp.draw();
-    });
+    }
     this.quadBufferUsage = this.curBufferIdx * arr.BYTES_PER_ELEMENT;
   }
 

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

@@ -274,18 +274,23 @@ export abstract class WebGlCoreShader extends CoreShader {
       const { width, height } = renderOp.framebufferDimensions || {};
       // Force pixel ratio to 1.0 for render textures since they are always 1:1
       // the final render texture will be rendered to the screen with the correct pixel ratio
-      this.setUniform('u_pixelRatio', 1.0);
+      glw.uniform1f(this.getUniformLocation('u_pixelRatio'), 1.0);
 
       // Set resolution to the framebuffer dimensions
-      this.setUniform(
-        'u_resolution',
-        new Float32Array([width ?? 0, height ?? 0]),
+      glw.uniform2f(
+        this.getUniformLocation('u_resolution'),
+        width ?? 0,
+        height ?? 0,
       );
     } else {
-      this.setUniform('u_pixelRatio', renderOp.options.pixelRatio);
-      this.setUniform(
-        'u_resolution',
-        new Float32Array([glw.canvas.width, glw.canvas.height]),
+      glw.uniform1f(
+        this.getUniformLocation('u_pixelRatio'),
+        renderOp.options.pixelRatio,
+      );
+      glw.uniform2f(
+        this.getUniformLocation('u_resolution'),
+        glw.canvas.width,
+        glw.canvas.height,
       );
     }
 
@@ -297,26 +302,25 @@ export abstract class WebGlCoreShader extends CoreShader {
         if (!dimensions) {
           dimensions = renderOp.dimensions;
         }
-        this.setUniform('u_dimensions', [dimensions.width, dimensions.height]);
+        glw.uniform2f(
+          this.getUniformLocation('u_dimensions'),
+          dimensions.width,
+          dimensions.height,
+        );
       }
       if (hasOwn(props, '$alpha')) {
         let alpha = props.$alpha as number | null;
         if (!alpha) {
           alpha = renderOp.alpha;
         }
-        this.setUniform('u_alpha', alpha);
+        glw.uniform1f(this.getUniformLocation('u_alpha'), alpha);
       }
       this.bindProps(props);
     }
   }
 
-  setUniform(name: string, ...value: any[]): void {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-unsafe-argument
-    this.glw.setUniform(
-      this.uniformTypes[name]!,
-      this.uniformLocations[name]!,
-      ...(value as any),
-    );
+  getUniformLocation(name: string): WebGLUniformLocation | null {
+    return this.uniformLocations[name] || null;
   }
 
   bindBufferCollection(buffer: BufferCollection) {

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

@@ -57,7 +57,7 @@ export class DefaultShaderBatched extends WebGlCoreShader {
       glw.bindTexture(t.ctxTexture);
     });
     const samplers = Array.from(Array(texture.length).keys());
-    this.setUniform('u_textures[0]', samplers);
+    this.glw.uniform1iv(this.getUniformLocation('u_textures[0]'), samplers);
   }
 
   static override shaderSources: ShaderProgramSources = {