@lightningjs/renderer 3.0.0-beta1 → 3.0.0-beta11

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

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 
-import { assertTruthy, createWebGLContext } from '../../../utils.js';
+import { createWebGLContext } from '../../../utils.js';
 import {
   CoreRenderer,
   type BufferInfo,
@@ -35,7 +35,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';
@@ -48,10 +52,6 @@ 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 = 24;
-// const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
 
 export type WebGlRendererOptions = CoreRendererOptions;
 
@@ -77,6 +77,13 @@ export class WebGlRenderer extends CoreRenderer {
   override rttNodes: CoreNode[] = [];
   activeRttNode: CoreNode | null = null;
 
+  defaultTextureCoords: TextureCoords = {
+    x1: 0,
+    y1: 0,
+    x2: 1,
+    y2: 1,
+  };
+
   //// Default Shader
   defaultShaderNode: WebGlShaderNode | null = null;
   quadBufferCollection: BufferCollection;
@@ -126,11 +133,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',
@@ -247,136 +253,74 @@ export class WebGlRenderer extends CoreRenderer {
    * 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, curRenderOp } = this;
-
-    if (this.reuseRenderOp(params) === false) {
-      this.newRenderOp(params, bufferIdx);
-      curRenderOp = this.curRenderOp;
-      assertTruthy(curRenderOp);
-    }
-
-    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;
-    }
-
-    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 f = this.fQuadBuffer;
+    const u = this.uiQuadBuffer;
+    let i = this.curBufferIdx;
+
+    let ro = this.curRenderOp!;
+    const reuse = this.reuseRenderOp(params) === false;
+    if (reuse) {
+      this.newRenderOp(params, i);
+      ro = this.curRenderOp!;
     }
 
-    // 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);
+    let tx = params.texture!;
+    if (tx.type === TextureType.subTexture) {
+      tx = (tx as SubTexture).parentTexture;
     }
 
-    // Eitherone should be true
-    if (flipY ^ +(texture.type === TextureType.renderToTexture)) {
-      [texCoordY1, texCoordY2] = [texCoordY2, texCoordY1];
-    }
+    const tidx = this.addTexture(tx.ctxTexture as WebGlCtxTexture, i);
 
-    const ctxTexture = texture.ctxTexture as WebGlCtxTexture;
-    assertTruthy(ctxTexture instanceof WebGlCtxTexture);
-    const textureIdx = this.addTexture(ctxTexture, bufferIdx);
+    const rc = params.renderCoords!;
+    const tc = params.textureCoords!;
 
-    assertTruthy(this.curRenderOp !== null);
-    assertTruthy(params.renderCoords);
+    const cTl = params.colorTl;
+    const cTr = params.colorTr;
+    const cBl = params.colorBl;
+    const cBr = params.colorBr;
 
     // 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.length += WORDS_PER_QUAD;
-    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;
+
+    ro.numQuads++;
+    this.curBufferIdx = i + 32;
   }
 
   /**
@@ -386,7 +330,7 @@ export class WebGlRenderer extends CoreRenderer {
    * @param shader
    * @param bufferIdx
    */
-  private newRenderOp(quad: QuadOptions, bufferIdx: number) {
+  private newRenderOp(quad: QuadOptions | WebGlRenderOp, bufferIdx: number) {
     const curRenderOp = new WebGlRenderOp(this, quad, bufferIdx);
     this.curRenderOp = curRenderOp;
     this.renderOps.push(curRenderOp);
@@ -409,14 +353,13 @@ export class WebGlRenderer extends CoreRenderer {
     bufferIdx: number,
     recursive?: boolean,
   ): number {
-    assertTruthy(this.curRenderOp);
-    const textureIdx = this.curRenderOp.addTexture(texture);
+    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.quad as QuadOptions, bufferIdx);
+      this.newRenderOp(this.curRenderOp!, bufferIdx);
       return this.addTexture(texture, bufferIdx, true);
     }
     return textureIdx;
@@ -428,19 +371,17 @@ export class WebGlRenderer extends CoreRenderer {
    * @returns
    */
   reuseRenderOp(params: QuadOptions): boolean {
-    const { shader, parentHasRenderTexture, rtt, clippingRect } = params;
-
     // Switching shader program will require a new render operation
     if (
       this.curRenderOp?.shader.shaderKey !==
-      (shader as WebGlShaderNode).shaderKey
+      (params.shader as WebGlShaderNode).shaderKey
     ) {
       return false;
     }
 
     // Switching clipping rect will require a new render operation
     if (
-      compareRect(this.curRenderOp.quad.clippingRect, clippingRect) === false
+      compareRect(this.curRenderOp.clippingRect, params.clippingRect) === false
     ) {
       return false;
     }
@@ -448,16 +389,26 @@ export class WebGlRenderer extends CoreRenderer {
     // Force new render operation if rendering to texture
     // @todo: This needs to be improved, render operations could also be reused
     // for rendering to texture
-    if (parentHasRenderTexture !== undefined || rtt !== undefined) {
+    if (
+      params.parentHasRenderTexture !== undefined ||
+      params.rtt !== undefined
+    ) {
       return false;
     }
 
+    if (
+      this.curRenderOp.shader.shaderKey === 'default' &&
+      params.shader?.shaderKey === 'default'
+    ) {
+      return true;
+    }
+
     // Check if the shader can batch the shader properties
     if (
-      !this.curRenderOp.shader.program.reuseRenderOp(
+      this.curRenderOp.shader.program.reuseRenderOp(
         params,
-        this.curRenderOp.quad as QuadOptions,
-      )
+        this.curRenderOp,
+      ) === false
     ) {
       return false;
     }
@@ -617,10 +568,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
@@ -662,6 +610,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) {
@@ -682,16 +634,97 @@ export class WebGlRenderer extends CoreRenderer {
     if (this.defaultShaderNode !== null) {
       return this.defaultShaderNode as WebGlShaderNode;
     }
-    this.stage.shManager.registerShaderType('Default', Default);
+    this.stage.shManager.registerShaderType('default', Default);
     this.defaultShaderNode = this.stage.shManager.createShader(
-      'Default',
+      'default',
     ) as WebGlShaderNode;
     return this.defaultShaderNode;
   }
 
+  override getTextureCoords(node: CoreNode): TextureCoords {
+    const texture = node.texture;
+    if (texture === null) {
+      return this.defaultTextureCoords;
+    }
+
+    const textureOptions = node.textureOptions;
+    if (
+      texture.type === TextureType.subTexture ||
+      texture.type === TextureType.image ||
+      texture.type === TextureType.renderToTexture ||
+      textureOptions !== null
+    ) {
+      const result = {
+        x1: 0,
+        y1: 0,
+        x2: 1,
+        y2: 1,
+      };
+
+      if (texture.type === TextureType.subTexture) {
+        const props = (texture as SubTexture).props;
+        const { width: parentW = 0, height: parentH = 0 } = (
+          texture as SubTexture
+        ).parentTexture.dimensions || { width: 0, height: 0 };
+        result.x1 = props.x / parentW;
+        result.x2 = result.x1 + props.width / parentW;
+        result.y1 = props.y / parentH;
+        result.y2 = result.y1 + props.height / parentH;
+      }
+
+      if (
+        texture.type === TextureType.image &&
+        textureOptions !== null &&
+        textureOptions.resizeMode !== undefined &&
+        texture.dimensions !== null
+      ) {
+        const resizeMode = textureOptions.resizeMode;
+        const dimensions = texture.dimensions;
+        if (resizeMode.type === 'cover') {
+          const scaleX = node.props.width / dimensions.width;
+          const scaleY = node.props.height / dimensions.height;
+          const scale = Math.max(scaleX, scaleY);
+          const precision = 1 / scale;
+          // Determine based on width
+          if (scaleX < scale) {
+            const desiredSize = precision * node.props.width;
+            result.x1 =
+              (1 - desiredSize / dimensions.width) * (resizeMode.clipX ?? 0.5);
+            result.x2 = result.x1 + desiredSize / dimensions.width;
+          }
+          // Determine based on height
+          if (scaleY < scale) {
+            const desiredSize = precision * node.props.height;
+            result.y1 =
+              (1 - desiredSize / dimensions.height) * (resizeMode.clipY ?? 0.5);
+            result.y2 = result.y1 + desiredSize / dimensions.height;
+          }
+        }
+      }
+
+      // Flip texture coordinates if dictated by texture options
+      let flipY = 0;
+      if (textureOptions !== null) {
+        if (textureOptions.flipX === true) {
+          [result.x1, result.x2] = [result.x2, result.x1];
+        }
+
+        // convert to integer for bitwise operation below
+        flipY = +(textureOptions.flipY || false);
+      }
+
+      // Eitherone should be true
+      if (flipY ^ +(texture.type === TextureType.renderToTexture)) {
+        [result.y1, result.y2] = [result.y2, result.y1];
+      }
+      return result as TextureCoords;
+    }
+
+    return this.defaultTextureCoords;
+  }
+
   /**
-   * 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) {
@@ -710,6 +743,5 @@ export class WebGlRenderer extends CoreRenderer {
       raw: color,
       normalized: normalizedColor,
     };
-    glw.clear();
   }
 }

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

@@ -11,6 +11,7 @@ import type {
   Vec4,
 } from './internal/ShaderUtils.js';
 import type { WebGlRenderer } from './WebGlRenderer.js';
+import type { WebGlRenderOp } from './WebGlRenderOp.js';
 import type { WebGlShaderProgram } from './WebGlShaderProgram.js';
 
 export type ShaderSource<T> =
@@ -46,7 +47,10 @@ 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?: (renderOpA: QuadOptions, renderOpB: QuadOptions) => boolean;
+    canBatch?: (
+      incomingQuad: QuadOptions,
+      currentRenderOp: WebGlRenderOp,
+    ) => boolean;
     /**
      * extensions required for specific shader?
      */
@@ -86,11 +90,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;