@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta21

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

@@ -17,14 +17,13 @@
  * limitations under the License.
  */
 
-import { assertTruthy, createWebGLContext } from '../../../utils.js';
+import { createWebGLContext } from '../../../utils.js';
 import {
   CoreRenderer,
   type BufferInfo,
   type CoreRendererOptions,
-  type QuadOptions,
 } from '../CoreRenderer.js';
-import { WebGlRenderOp } from './WebGlRenderOp.js';
+import type { SdfRenderOp } from './SdfRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
   createIndexBuffer,
@@ -35,7 +34,11 @@ import {
   type WebGlColor,
 } from './internal/RendererUtils.js';
 import { WebGlCtxTexture } from './WebGlCtxTexture.js';
-import { Texture, TextureType } from '../../textures/Texture.js';
+import {
+  Texture,
+  TextureType,
+  type TextureCoords,
+} from '../../textures/Texture.js';
 import { SubTexture } from '../../textures/SubTexture.js';
 import { WebGlCtxSubTexture } from './WebGlCtxSubTexture.js';
 import { BufferCollection } from './internal/BufferCollection.js';
@@ -43,15 +46,12 @@ import { compareRect, getNormalizedRgbaComponents } from '../../lib/utils.js';
 import { WebGlShaderProgram } from './WebGlShaderProgram.js';
 import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import { RenderTexture } from '../../textures/RenderTexture.js';
-import { CoreNodeRenderState, type CoreNode } from '../../CoreNode.js';
+import { CoreNodeRenderState, CoreNode } from '../../CoreNode.js';
 import { WebGlCtxRenderTexture } from './WebGlCtxRenderTexture.js';
 import { Default } from '../../shaders/webgl/Default.js';
 import type { WebGlShaderType } from './WebGlShaderNode.js';
 import { WebGlShaderNode } from './WebGlShaderNode.js';
-import type { CoreShaderType } from '../CoreShaderNode.js';
-
-const WORDS_PER_QUAD = 32;
-// const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
+import type { Dimensions } from '../../../common/CommonTypes.js';
 
 export type WebGlRendererOptions = CoreRendererOptions;
 
@@ -60,6 +60,8 @@ interface CoreWebGlSystem {
   extensions: CoreWebGlExtensions;
 }
 
+export type WebGlRenderOp = CoreNode | SdfRenderOp;
+
 export class WebGlRenderer extends CoreRenderer {
   //// WebGL Native Context and Data
   glw: WebGlContextWrapper;
@@ -77,6 +79,13 @@ export class WebGlRenderer extends CoreRenderer {
   override rttNodes: CoreNode[] = [];
   activeRttNode: CoreNode | null = null;
 
+  override defaultTextureCoords: TextureCoords = {
+    x1: 0,
+    y1: 0,
+    x2: 1,
+    y2: 1,
+  };
+
   //// Default Shader
   defaultShaderNode: WebGlShaderNode | null = null;
   quadBufferCollection: BufferCollection;
@@ -126,11 +135,10 @@ export class WebGlRenderer extends CoreRenderer {
       extensions: getWebGlExtensions(this.glw),
     };
     const quadBuffer = glw.createBuffer();
-    assertTruthy(quadBuffer);
     const stride = 8 * Float32Array.BYTES_PER_ELEMENT;
     this.quadBufferCollection = new BufferCollection([
       {
-        buffer: quadBuffer,
+        buffer: quadBuffer!,
         attributes: {
           a_position: {
             name: 'a_position',
@@ -183,7 +191,9 @@ export class WebGlRenderer extends CoreRenderer {
     this.curRenderOp = null;
     this.renderOps.length = 0;
     glw.setScissorTest(false);
-    glw.clear();
+    if (this.stage.options.enableClear !== false) {
+      glw.clear();
+    }
   }
 
   createShaderProgram(
@@ -246,134 +256,79 @@ export class WebGlRenderer extends CoreRenderer {
    * 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.
    */
-  addQuad(params: QuadOptions) {
-    const { fQuadBuffer, uiQuadBuffer } = this;
-    let texture = params.texture;
-
-    assertTruthy(texture !== null, 'Texture is required');
-
-    let { curBufferIdx: bufferIdx } = this;
-
-    if (this.reuseRenderOp(params) === false) {
-      this.newRenderOp(params, bufferIdx);
+  addQuad(node: CoreNode) {
+    const f = this.fQuadBuffer;
+    const u = this.uiQuadBuffer;
+    let i = this.curBufferIdx;
+
+    const reuse = this.reuseRenderOp(node);
+    if (reuse === false) {
+      this.newRenderOp(node, i);
     }
 
-    let texCoordX1 = 0;
-    let texCoordY1 = 0;
-    let texCoordX2 = 1;
-    let texCoordY2 = 1;
-
-    if (texture.type === TextureType.subTexture) {
-      const {
-        x: tx,
-        y: ty,
-        width: tw,
-        height: th,
-      } = (texture as SubTexture).props;
-      const { width: parentW = 0, height: parentH = 0 } = (
-        texture as SubTexture
-      ).parentTexture.dimensions || { width: 0, height: 0 };
-      texCoordX1 = tx / parentW;
-      texCoordX2 = texCoordX1 + tw / parentW;
-      texCoordY1 = ty / parentH;
-      texCoordY2 = texCoordY1 + th / parentH;
-      texture = (texture as SubTexture).parentTexture;
+    let tx = (node.props.texture || this.stage.defaultTexture) as Texture;
+    if (tx.type === TextureType.subTexture) {
+      tx = (tx as SubTexture).parentTexture;
     }
 
-    if (
-      texture.type === TextureType.image &&
-      params.textureOptions !== null &&
-      params.textureOptions.resizeMode !== undefined &&
-      texture.dimensions !== null
-    ) {
-      const resizeMode = params.textureOptions.resizeMode;
-      const { width: tw, height: th } = texture.dimensions;
-      if (resizeMode.type === 'cover') {
-        const scaleX = params.width / tw;
-        const scaleY = params.height / th;
-        const scale = Math.max(scaleX, scaleY);
-        const precision = 1 / scale;
-        // Determine based on width
-        if (scale && scaleX && scaleX < scale) {
-          const desiredSize = precision * params.width;
-          texCoordX1 = (1 - desiredSize / tw) * (resizeMode.clipX ?? 0.5);
-          texCoordX2 = texCoordX1 + desiredSize / tw;
-        }
-        // Determine based on height
-        if (scale && scaleY && scaleY < scale) {
-          const desiredSize = precision * params.height;
-          texCoordY1 = (1 - desiredSize / th) * (resizeMode.clipY ?? 0.5);
-          texCoordY2 = texCoordY1 + desiredSize / th;
-        }
-      }
-    }
+    const texture = tx.ctxTexture as WebGlCtxTexture;
+    let tidx = this.curRenderOp!.addTexture(texture);
 
-    // Flip texture coordinates if dictated by texture options
-    let flipY = 0;
-    if (params.textureOptions !== null) {
-      if (params.textureOptions.flipX === true) {
-        [texCoordX1, texCoordX2] = [texCoordX2, texCoordX1];
-      }
-
-      // convert to integer for bitwise operation below
-      flipY = +(params.textureOptions.flipY || false);
-    }
-
-    // Eitherone should be true
-    if (flipY ^ +(texture.type === TextureType.renderToTexture)) {
-      [texCoordY1, texCoordY2] = [texCoordY2, texCoordY1];
+    if (tidx === 0xffffffff) {
+      this.newRenderOp(node, i);
+      tidx = this.curRenderOp!.addTexture(texture);
     }
 
-    const ctxTexture = texture.ctxTexture as WebGlCtxTexture;
-    assertTruthy(ctxTexture instanceof WebGlCtxTexture);
-    const textureIdx = this.addTexture(ctxTexture, bufferIdx);
+    const rc = node.renderCoords!;
+    const tc = node.textureCoords || this.defaultTextureCoords;
 
-    assertTruthy(this.curRenderOp !== null);
-    assertTruthy(params.renderCoords);
+    const cTl = node.premultipliedColorTl;
+    const cTr = node.premultipliedColorTr;
+    const cBl = node.premultipliedColorBl;
+    const cBr = node.premultipliedColorBr;
 
     // Upper-Left
-    fQuadBuffer[bufferIdx++] = params.renderCoords.x1; // vertexX
-    fQuadBuffer[bufferIdx++] = params.renderCoords.y1; // vertexY
-    fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
-    fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
-    uiQuadBuffer[bufferIdx++] = params.colorTl; // color
-    fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
-    fQuadBuffer[bufferIdx++] = 0; //node X coord
-    fQuadBuffer[bufferIdx++] = 0; //node y coord
+    f[i] = rc.x1;
+    f[i + 1] = rc.y1;
+    f[i + 2] = tc.x1;
+    f[i + 3] = tc.y1;
+    u[i + 4] = cTl;
+    f[i + 5] = tidx;
+    f[i + 6] = 0;
+    f[i + 7] = 0;
 
     // Upper-Right
-    fQuadBuffer[bufferIdx++] = params.renderCoords.x2;
-    fQuadBuffer[bufferIdx++] = params.renderCoords.y2;
-    fQuadBuffer[bufferIdx++] = texCoordX2;
-    fQuadBuffer[bufferIdx++] = texCoordY1;
-    uiQuadBuffer[bufferIdx++] = params.colorTr;
-    fQuadBuffer[bufferIdx++] = textureIdx;
-    fQuadBuffer[bufferIdx++] = 1; //node X coord
-    fQuadBuffer[bufferIdx++] = 0; //node y coord
+    f[i + 8] = rc.x2;
+    f[i + 9] = rc.y2;
+    f[i + 10] = tc.x2;
+    f[i + 11] = tc.y1;
+    u[i + 12] = cTr;
+    f[i + 13] = tidx;
+    f[i + 14] = 1;
+    f[i + 15] = 0;
 
     // Lower-Left
-    fQuadBuffer[bufferIdx++] = params.renderCoords.x4;
-    fQuadBuffer[bufferIdx++] = params.renderCoords.y4;
-    fQuadBuffer[bufferIdx++] = texCoordX1;
-    fQuadBuffer[bufferIdx++] = texCoordY2;
-    uiQuadBuffer[bufferIdx++] = params.colorBl;
-    fQuadBuffer[bufferIdx++] = textureIdx;
-    fQuadBuffer[bufferIdx++] = 0; //node X coord
-    fQuadBuffer[bufferIdx++] = 1; //node y coord
+    f[i + 16] = rc.x4;
+    f[i + 17] = rc.y4;
+    f[i + 18] = tc.x1;
+    f[i + 19] = tc.y2;
+    u[i + 20] = cBl;
+    f[i + 21] = tidx;
+    f[i + 22] = 0;
+    f[i + 23] = 1;
 
     // Lower-Right
-    fQuadBuffer[bufferIdx++] = params.renderCoords.x3;
-    fQuadBuffer[bufferIdx++] = params.renderCoords.y3;
-    fQuadBuffer[bufferIdx++] = texCoordX2;
-    fQuadBuffer[bufferIdx++] = texCoordY2;
-    uiQuadBuffer[bufferIdx++] = params.colorBr;
-    fQuadBuffer[bufferIdx++] = textureIdx;
-    fQuadBuffer[bufferIdx++] = 1; //node X coord
-    fQuadBuffer[bufferIdx++] = 1; //node y coord
-
-    // Update the length of the current render op
-    this.curRenderOp.numQuads++;
-    this.curBufferIdx = bufferIdx;
+    f[i + 24] = rc.x3;
+    f[i + 25] = rc.y3;
+    f[i + 26] = tc.x2;
+    f[i + 27] = tc.y2;
+    u[i + 28] = cBr;
+    f[i + 29] = tidx;
+    f[i + 30] = 1;
+    f[i + 31] = 1;
+
+    this.curRenderOp!.numQuads++;
+    this.curBufferIdx = i + 32;
   }
 
   /**
@@ -383,91 +338,73 @@ export class WebGlRenderer extends CoreRenderer {
    * @param shader
    * @param bufferIdx
    */
-  private newRenderOp(quad: QuadOptions | WebGlRenderOp, bufferIdx: number) {
-    const curRenderOp = new WebGlRenderOp(this, quad, bufferIdx);
+  private newRenderOp(node: CoreNode, bufferIdx: number) {
+    const curRenderOp = node;
+    curRenderOp.renderOpBufferIdx = bufferIdx;
+    curRenderOp.numQuads = 0;
+    curRenderOp.renderOpTextures.length = 0;
+
     this.curRenderOp = curRenderOp;
     this.renderOps.push(curRenderOp);
   }
 
-  /**
-   * Add a texture to the current RenderOp. If the texture cannot be added to the
-   * current RenderOp, a new RenderOp will be created and the texture will be added
-   * to that one.
-   *
-   * If the texture cannot be added to the new RenderOp, an error will be thrown.
-   *
-   * @param texture
-   * @param bufferIdx
-   * @param recursive
-   * @returns Assigned Texture Index of the texture in the render op
-   */
-  private addTexture(
-    texture: WebGlCtxTexture,
-    bufferIdx: number,
-    recursive?: boolean,
-  ): number {
-    assertTruthy(this.curRenderOp);
-    const textureIdx = this.curRenderOp.addTexture(texture);
-    // TODO: Refactor to be more DRY
-    if (textureIdx === 0xffffffff) {
-      if (recursive) {
-        throw new Error('Unable to add texture to render op');
-      }
-      this.newRenderOp(this.curRenderOp, bufferIdx);
-      return this.addTexture(texture, bufferIdx, true);
-    }
-    return textureIdx;
-  }
-
   /**
    * Test if the current Render operation can be reused for the specified parameters.
    * @param params
    * @returns
    */
-  reuseRenderOp(params: QuadOptions): boolean {
-    // Switching shader program will require a new render operation
-    if (
-      this.curRenderOp?.shader.shaderKey !==
-      (params.shader as WebGlShaderNode).shaderKey
-    ) {
+  reuseRenderOp(node: CoreNode): boolean {
+    const curRenderOp = this.curRenderOp;
+    if (curRenderOp === null) {
+      return false;
+    }
+
+    const shader = node.props.shader as WebGlShaderNode;
+    const curShader = curRenderOp.shader as WebGlShaderNode;
+
+    if (curShader?.shaderKey !== shader?.shaderKey) {
       return false;
     }
 
     // Switching clipping rect will require a new render operation
-    if (
-      compareRect(this.curRenderOp.clippingRect, params.clippingRect) === false
-    ) {
+    if (compareRect(curRenderOp.clippingRect, node.clippingRect) === false) {
       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
+    const curRtt = curRenderOp.rtt;
     if (
-      params.parentHasRenderTexture !== undefined ||
-      params.rtt !== undefined
+      curRenderOp.parentHasRenderTexture !== node.parentHasRenderTexture ||
+      curRtt !== (node.props.rtt === true)
     ) {
       return false;
     }
 
     if (
-      this.curRenderOp.shader.shaderKey === 'default' &&
-      params.shader?.shaderKey === 'default'
+      node.parentHasRenderTexture === true &&
+      node.parentFramebufferDimensions !== null
     ) {
+      const curFbDims = curRenderOp.isCoreNode
+        ? curRenderOp.parentFramebufferDimensions
+        : curRenderOp.framebufferDimensions;
+      if (
+        curFbDims === null ||
+        curFbDims.w !== node.parentFramebufferDimensions.w ||
+        curFbDims.h !== node.parentFramebufferDimensions.h
+      ) {
+        return false;
+      }
+    }
+
+    if (curShader?.shaderKey === 'default' && shader?.shaderKey === 'default') {
       return true;
     }
 
     // Check if the shader can batch the shader properties
-    if (
-      this.curRenderOp.shader.program.reuseRenderOp(
-        params,
-        this.curRenderOp,
-      ) === false
-    ) {
+    if (curShader?.program.reuseRenderOp(node, curRenderOp) === false) {
       return false;
     }
 
-    // Render operation can be reused
     return true;
   }
 
@@ -495,9 +432,9 @@ export class WebGlRenderer extends CoreRenderer {
     glw.arrayBufferData(buffer, arr, glw.STATIC_DRAW);
 
     for (let i = 0, length = this.renderOps.length; i < length; i++) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      this.renderOps[i]!.draw();
+      this.renderOps[i]!.draw(this);
     }
+
     this.quadBufferUsage = this.curBufferIdx * arr.BYTES_PER_ELEMENT;
 
     // Calculate the size of each quad in bytes (4 vertices per quad) times the size of each vertex in bytes
@@ -608,8 +545,7 @@ export class WebGlRenderer extends CoreRenderer {
       // Skip nodes that are not visible
       if (
         node.worldAlpha === 0 ||
-        (node.strictBounds === true &&
-          node.renderState === CoreNodeRenderState.OutOfBounds)
+        node.renderState === CoreNodeRenderState.OutOfBounds
       ) {
         continue;
       }
@@ -622,10 +558,7 @@ export class WebGlRenderer extends CoreRenderer {
       // Set the active RTT node to the current node
       // So we can prevent rendering children of nested RTT nodes
       this.activeRttNode = node;
-
-      assertTruthy(node.texture !== null, 'RTT node missing texture');
-      const ctxTexture = node.texture.ctxTexture;
-      assertTruthy(ctxTexture instanceof WebGlCtxRenderTexture);
+      const ctxTexture = node.texture.ctxTexture as WebGlCtxRenderTexture;
       this.renderToTextureActive = true;
 
       // Bind the the texture's framebuffer
@@ -667,6 +600,10 @@ export class WebGlRenderer extends CoreRenderer {
     this.renderToTextureActive = false;
   }
 
+  updateViewport(): void {
+    this.glw.viewport(0, 0, this.glw.canvas.width, this.glw.canvas.height);
+  }
+
   removeRTTNode(node: CoreNode) {
     const index = this.rttNodes.indexOf(node);
     if (index === -1) {
@@ -694,9 +631,86 @@ export class WebGlRenderer extends CoreRenderer {
     return this.defaultShaderNode;
   }
 
+  override getTextureCoords(node: CoreNode): TextureCoords | undefined {
+    const texture = node.texture;
+    if (texture === null) {
+      return undefined;
+    }
+
+    //this stuff needs to be properly moved to CtxSubTexture at some point in the future.
+    const ctxTexture =
+      (texture as SubTexture).parentTexture !== undefined
+        ? (texture as SubTexture).parentTexture.ctxTexture
+        : texture.ctxTexture;
+    if (ctxTexture === undefined) {
+      return undefined;
+    }
+
+    const textureOptions = node.props.textureOptions;
+
+    //early exit for textures with no options unless its a subtexture
+    if (
+      texture.type !== TextureType.subTexture &&
+      textureOptions === undefined
+    ) {
+      return (ctxTexture as WebGlCtxTexture).txCoords;
+    }
+
+    let { x1, x2, y1, y2 } = (ctxTexture as WebGlCtxTexture).txCoords;
+    if (texture.type === TextureType.subTexture) {
+      const { w: parentW, h: parentH } = (texture as SubTexture).parentTexture
+        .dimensions!;
+      const { x, y, w, h } = (texture as SubTexture).props;
+      x1 = x / parentW;
+      y1 = y / parentH;
+      x2 = x1 + w / parentW;
+      y2 = y1 + h / parentH;
+    }
+
+    const resizeMode = textureOptions.resizeMode;
+    if (
+      resizeMode !== undefined &&
+      resizeMode.type === 'cover' &&
+      texture.dimensions !== null
+    ) {
+      const dimensions = texture.dimensions as Dimensions;
+      const w = node.props.w;
+      const h = node.props.h;
+      const scaleX = w / dimensions.w;
+      const scaleY = h / dimensions.h;
+      const scale = Math.max(scaleX, scaleY);
+      const precision = 1 / scale;
+
+      // Determine based on width
+      if (scaleX < scale) {
+        const desiredSize = precision * node.props.w;
+        x1 = (1 - desiredSize / dimensions.w) * (resizeMode.clipX ?? 0.5);
+        x2 = x1 + desiredSize / dimensions.w;
+      }
+      // Determine based on height
+      if (scaleY < scale) {
+        const desiredSize = precision * node.props.h;
+        y1 = (1 - desiredSize / dimensions.h) * (resizeMode.clipY ?? 0.5);
+        y2 = y1 + desiredSize / dimensions.h;
+      }
+    }
+
+    if (textureOptions.flipX === true) {
+      [x1, x2] = [x2, x1];
+    }
+    if (textureOptions.flipY === true) {
+      [y1, y2] = [y2, y1];
+    }
+    return {
+      x1,
+      y1,
+      x2,
+      y2,
+    };
+  }
+
   /**
-   * Updates the WebGL context's clear color and clears the color buffer.
-   *
+   * Sets the glClearColor to the specified color.   *
    * @param color - The color to set as the clear color, represented as a 32-bit integer.
    */
   updateClearColor(color: number) {
@@ -715,6 +729,5 @@ export class WebGlRenderer extends CoreRenderer {
       raw: color,
       normalized: normalizedColor,
     };
-    glw.clear();
   }
 }

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

@@ -2,7 +2,6 @@ import type { CoreNode } from '../../CoreNode.js';
 import { getNormalizedRgbaComponents } from '../../lib/utils.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { Stage } from '../../Stage.js';
-import type { QuadOptions } from '../CoreRenderer.js';
 import { CoreShaderNode, type CoreShaderType } from '../CoreShaderNode.js';
 import type {
   UniformCollection,
@@ -10,8 +9,7 @@ import type {
   Vec3,
   Vec4,
 } from './internal/ShaderUtils.js';
-import type { WebGlRenderer } from './WebGlRenderer.js';
-import type { WebGlRenderOp } from './WebGlRenderOp.js';
+import type { WebGlRenderer, WebGlRenderOp } from './WebGlRenderer.js';
 import type { WebGlShaderProgram } from './WebGlShaderProgram.js';
 
 export type ShaderSource<T> =
@@ -47,10 +45,7 @@ export type WebGlShaderType<T extends object = Record<string, unknown>> =
      * This function is used to check if the shader can be reused based on quad info
      * @param props
      */
-    canBatch?: (
-      incomingQuad: QuadOptions,
-      currentRenderOp: WebGlRenderOp,
-    ) => boolean;
+    canBatch?: (node: CoreNode, currentRenderOp: WebGlRenderOp) => boolean;
     /**
      * extensions required for specific shader?
      */
@@ -90,11 +85,9 @@ export class WebGlShaderNode<
           this.updater!(this.node as CoreNode, this.props);
           return;
         }
+
         const prevKey = this.valueKey;
-        this.valueKey = '';
-        for (const key in this.resolvedProps) {
-          this.valueKey += `${key}:${this.resolvedProps[key]!};`;
-        }
+        this.valueKey = this.createValueKey();
 
         if (prevKey === this.valueKey) {
           return;