@lightningjs/renderer 2.13.1 → 3.0.0-beta2

package/src/core/renderers/webgl/{WebGlCoreRenderer.ts → WebGlRenderer.ts}

@@ -17,14 +17,14 @@
  * limitations under the License.
  */
 
-import { assertTruthy, createWebGLContext, hasOwn } from '../../../utils.js';
+import { assertTruthy, createWebGLContext } from '../../../utils.js';
 import {
   CoreRenderer,
   type BufferInfo,
   type CoreRendererOptions,
   type QuadOptions,
 } from '../CoreRenderer.js';
-import { WebGlCoreRenderOp } from './WebGlCoreRenderOp.js';
+import { WebGlRenderOp } from './WebGlRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
   createIndexBuffer,
@@ -34,36 +34,33 @@ import {
   getWebGlExtensions,
   type WebGlColor,
 } from './internal/RendererUtils.js';
-import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
+import { WebGlCtxTexture } from './WebGlCtxTexture.js';
 import { Texture, TextureType } from '../../textures/Texture.js';
 import { SubTexture } from '../../textures/SubTexture.js';
-import { WebGlCoreCtxSubTexture } from './WebGlCoreCtxSubTexture.js';
-import { CoreShaderManager } from '../../CoreShaderManager.js';
+import { WebGlCtxSubTexture } from './WebGlCtxSubTexture.js';
 import { BufferCollection } from './internal/BufferCollection.js';
-import {
-  compareRect,
-  getNormalizedRgbaComponents,
-  type RectWithValid,
-} from '../../lib/utils.js';
-import type { Dimensions } from '../../../common/CommonTypes.js';
-import { WebGlCoreShader } from './WebGlCoreShader.js';
+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 { WebGlCoreCtxRenderTexture } from './WebGlCoreCtxRenderTexture.js';
-import type { BaseShaderController } from '../../../main-api/ShaderController.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 = 24;
+const WORDS_PER_QUAD = 32;
 // const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
 
-export type WebGlCoreRendererOptions = CoreRendererOptions;
+export type WebGlRendererOptions = CoreRendererOptions;
 
 interface CoreWebGlSystem {
   parameters: CoreWebGlParameters;
   extensions: CoreWebGlExtensions;
 }
 
-export class WebGlCoreRenderer extends CoreRenderer {
+export class WebGlRenderer extends CoreRenderer {
   //// WebGL Native Context and Data
   glw: WebGlContextWrapper;
   system: CoreWebGlSystem;
@@ -72,17 +69,16 @@ export class WebGlCoreRenderer extends CoreRenderer {
   quadBuffer: ArrayBuffer;
   fQuadBuffer: Float32Array;
   uiQuadBuffer: Uint32Array;
-  renderOps: WebGlCoreRenderOp[] = [];
+  renderOps: WebGlRenderOp[] = [];
 
   //// Render Op / Buffer Filling State
   curBufferIdx = 0;
-  curRenderOp: WebGlCoreRenderOp | null = null;
+  curRenderOp: WebGlRenderOp | null = null;
   override rttNodes: CoreNode[] = [];
   activeRttNode: CoreNode | null = null;
 
   //// Default Shader
-  defShaderCtrl: BaseShaderController;
-  defaultShader: WebGlCoreShader;
+  defaultShaderNode: WebGlShaderNode | null = null;
   quadBufferCollection: BufferCollection;
 
   clearColor: WebGlColor = {
@@ -101,7 +97,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
    */
   public renderToTextureActive = false;
 
-  constructor(options: WebGlCoreRendererOptions) {
+  constructor(options: WebGlRendererOptions) {
     super(options);
 
     this.quadBuffer = new ArrayBuffer(this.stage.options.quadBufferSize);
@@ -110,33 +106,28 @@ export class WebGlCoreRenderer extends CoreRenderer {
 
     this.mode = 'webgl';
 
-    const { canvas, clearColor, bufferMemory } = options;
-
     const gl = createWebGLContext(
-      canvas,
+      options.canvas,
       options.forceWebGL2,
       options.contextSpy,
     );
     const glw = (this.glw = new WebGlContextWrapper(gl));
-    glw.viewport(0, 0, canvas.width, canvas.height);
+    glw.viewport(0, 0, options.canvas.width, options.canvas.height);
 
-    this.updateClearColor(clearColor);
+    this.updateClearColor(this.stage.clearColor);
 
     glw.setBlend(true);
     glw.blendFunc(glw.ONE, glw.ONE_MINUS_SRC_ALPHA);
 
-    createIndexBuffer(glw, bufferMemory);
+    createIndexBuffer(glw, this.stage.bufferMemory);
 
     this.system = {
       parameters: getWebGlParameters(this.glw),
       extensions: getWebGlExtensions(this.glw),
     };
-    this.shManager.renderer = this;
-    this.defShaderCtrl = this.shManager.loadShader('DefaultShader');
-    this.defaultShader = this.defShaderCtrl.shader as WebGlCoreShader;
     const quadBuffer = glw.createBuffer();
     assertTruthy(quadBuffer);
-    const stride = 6 * Float32Array.BYTES_PER_ELEMENT;
+    const stride = 8 * Float32Array.BYTES_PER_ELEMENT;
     this.quadBufferCollection = new BufferCollection([
       {
         buffer: quadBuffer,
@@ -149,8 +140,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
             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,
@@ -173,6 +164,14 @@ export class WebGlCoreRenderer extends CoreRenderer {
             stride,
             offset: 5 * Float32Array.BYTES_PER_ELEMENT,
           },
+          a_nodeCoords: {
+            name: 'a_nodeCoords',
+            size: 2,
+            type: glw.FLOAT,
+            normalized: false,
+            stride,
+            offset: 6 * Float32Array.BYTES_PER_ELEMENT,
+          },
         },
       },
     ]);
@@ -187,25 +186,52 @@ export class WebGlCoreRenderer extends CoreRenderer {
     glw.clear();
   }
 
-  override getShaderManager(): CoreShaderManager {
-    return this.shManager;
+  createShaderProgram(
+    shaderType: WebGlShaderType,
+    props: Record<string, unknown>,
+  ): WebGlShaderProgram {
+    return new WebGlShaderProgram(this, shaderType, props);
+  }
+
+  createShaderNode(
+    shaderKey: string,
+    shaderType: WebGlShaderType,
+    props?: Record<string, unknown>,
+    program?: WebGlShaderProgram,
+  ) {
+    return new WebGlShaderNode(
+      shaderKey,
+      shaderType,
+      program!,
+      this.stage,
+      props,
+    );
   }
 
-  override createCtxTexture(textureSource: Texture): CoreContextTexture {
+  override supportsShaderType(shaderType: Readonly<WebGlShaderType>): boolean {
+    //if shadertype doesnt have a fragment source we cant use it
+    return shaderType.fragment !== undefined;
+  }
+
+  createCtxTexture(textureSource: Texture): CoreContextTexture {
     if (textureSource instanceof SubTexture) {
-      return new WebGlCoreCtxSubTexture(
+      return new WebGlCtxSubTexture(
         this.glw,
-        this.txMemManager,
+        this.stage.txMemManager,
         textureSource,
       );
     } else if (textureSource instanceof RenderTexture) {
-      return new WebGlCoreCtxRenderTexture(
+      return new WebGlCtxRenderTexture(
         this.glw,
-        this.txMemManager,
+        this.stage.txMemManager,
         textureSource,
       );
     }
-    return new WebGlCoreCtxTexture(this.glw, this.txMemManager, textureSource);
+    return new WebGlCtxTexture(
+      this.glw,
+      this.stage.txMemManager,
+      textureSource,
+    );
   }
 
   /**
@@ -226,48 +252,10 @@ export class WebGlCoreRenderer extends CoreRenderer {
 
     assertTruthy(texture !== null, 'Texture is required');
 
-    /**
-     * If the shader props contain any automatic properties, update it with the
-     * current dimensions and or alpha that will be used to render the quad.
-     */
-    if (params.shaderProps !== null) {
-      if (hasOwn(params.shaderProps, '$dimensions') == true) {
-        const dimensions = params.shaderProps.$dimensions as Dimensions;
-        dimensions.width = params.width;
-        dimensions.height = params.height;
-      }
-
-      if (hasOwn(params.shaderProps, '$alpha') === true) {
-        params.shaderProps.$alpha = params.alpha;
-      }
-    }
-
-    let { curBufferIdx: bufferIdx, curRenderOp } = this;
-    const targetDims = { width: -1, height: -1 };
-    targetDims.width = params.width;
-    targetDims.height = params.height;
-
-    const targetShader =
-      (params.shader as WebGlCoreShader) || this.defaultShader;
-    assertTruthy(
-      targetShader.getUniformLocation !== undefined,
-      'Invalid WebGL shader',
-    );
+    let { curBufferIdx: bufferIdx } = this;
 
     if (this.reuseRenderOp(params) === false) {
-      this.newRenderOp(
-        targetShader,
-        params.shaderProps as Record<string, unknown>,
-        params.alpha,
-        targetDims,
-        params.clippingRect,
-        bufferIdx,
-        params.rtt,
-        params.parentHasRenderTexture,
-        params.framebufferDimensions,
-      );
-      curRenderOp = this.curRenderOp;
-      assertTruthy(curRenderOp);
+      this.newRenderOp(params, bufferIdx);
     }
 
     let texCoordX1 = 0;
@@ -336,117 +324,54 @@ export class WebGlCoreRenderer extends CoreRenderer {
       [texCoordY1, texCoordY2] = [texCoordY2, texCoordY1];
     }
 
-    const ctxTexture = texture.ctxTexture as WebGlCoreCtxTexture;
-    assertTruthy(ctxTexture instanceof WebGlCoreCtxTexture);
+    const ctxTexture = texture.ctxTexture as WebGlCtxTexture;
+    assertTruthy(ctxTexture instanceof WebGlCtxTexture);
     const textureIdx = this.addTexture(ctxTexture, bufferIdx);
 
     assertTruthy(this.curRenderOp !== null);
-    if (params.renderCoords) {
-      // 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
-
-      // 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;
-
-      // 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;
-
-      // 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;
-    } else if (params.tb !== 0 || params.tc !== 0) {
-      // Upper-Left
-      fQuadBuffer[bufferIdx++] = params.tx; // vertexX
-      fQuadBuffer[bufferIdx++] = params.ty; // vertexY
-      fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
-      fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
-      uiQuadBuffer[bufferIdx++] = params.colorTl; // color
-      fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
-
-      // Upper-Right
-      fQuadBuffer[bufferIdx++] = params.tx + params.width * params.ta;
-      fQuadBuffer[bufferIdx++] = params.ty + params.width * params.tc;
-      fQuadBuffer[bufferIdx++] = texCoordX2;
-      fQuadBuffer[bufferIdx++] = texCoordY1;
-      uiQuadBuffer[bufferIdx++] = params.colorTr;
-      fQuadBuffer[bufferIdx++] = textureIdx;
-
-      // Lower-Left
-      fQuadBuffer[bufferIdx++] = params.tx + params.height * params.tb;
-      fQuadBuffer[bufferIdx++] = params.ty + params.height * params.td;
-      fQuadBuffer[bufferIdx++] = texCoordX1;
-      fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = params.colorBl;
-      fQuadBuffer[bufferIdx++] = textureIdx;
-
-      // Lower-Right
-      fQuadBuffer[bufferIdx++] =
-        params.tx + params.width * params.ta + params.height * params.tb;
-      fQuadBuffer[bufferIdx++] =
-        params.ty + params.width * params.tc + params.height * params.td;
-      fQuadBuffer[bufferIdx++] = texCoordX2;
-      fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = params.colorBr;
-      fQuadBuffer[bufferIdx++] = textureIdx;
-    } else {
-      // Calculate the right corner of the quad
-      // multiplied by the scale
-      const rightCornerX = params.tx + params.width * params.ta;
-      const rightCornerY = params.ty + params.height * params.td;
-
-      // Upper-Left
-      fQuadBuffer[bufferIdx++] = params.tx; // vertexX
-      fQuadBuffer[bufferIdx++] = params.ty; // vertexY
-      fQuadBuffer[bufferIdx++] = texCoordX1; // texCoordX
-      fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
-      uiQuadBuffer[bufferIdx++] = params.colorTl; // color
-      fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
-
-      // Upper-Right
-      fQuadBuffer[bufferIdx++] = rightCornerX;
-      fQuadBuffer[bufferIdx++] = params.ty;
-      fQuadBuffer[bufferIdx++] = texCoordX2;
-      fQuadBuffer[bufferIdx++] = texCoordY1;
-      uiQuadBuffer[bufferIdx++] = params.colorTr;
-      fQuadBuffer[bufferIdx++] = textureIdx;
-
-      // Lower-Left
-      fQuadBuffer[bufferIdx++] = params.tx;
-      fQuadBuffer[bufferIdx++] = rightCornerY;
-      fQuadBuffer[bufferIdx++] = texCoordX1;
-      fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = params.colorBl;
-      fQuadBuffer[bufferIdx++] = textureIdx;
-
-      // Lower-Right
-      fQuadBuffer[bufferIdx++] = rightCornerX;
-      fQuadBuffer[bufferIdx++] = rightCornerY;
-      fQuadBuffer[bufferIdx++] = texCoordX2;
-      fQuadBuffer[bufferIdx++] = texCoordY2;
-      uiQuadBuffer[bufferIdx++] = params.colorBr;
-      fQuadBuffer[bufferIdx++] = textureIdx;
-    }
+    assertTruthy(params.renderCoords);
+
+    // 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
+
+    // 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
+
+    // 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
+
+    // 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;
   }
@@ -458,32 +383,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
    * @param shader
    * @param bufferIdx
    */
-  private newRenderOp(
-    shader: WebGlCoreShader,
-    shaderProps: Record<string, unknown>,
-    alpha: number,
-    dimensions: Dimensions,
-    clippingRect: RectWithValid,
-    bufferIdx: number,
-    renderToTexture?: boolean,
-    parentHasRenderTexture?: boolean,
-    framebufferDimensions?: Dimensions,
-  ) {
-    const curRenderOp = new WebGlCoreRenderOp(
-      this.glw,
-      this.options,
-      this.quadBufferCollection,
-      shader,
-      shaderProps,
-      alpha,
-      clippingRect,
-      dimensions,
-      bufferIdx,
-      0, // Z-Index is only used for explictly added Render Ops
-      renderToTexture,
-      parentHasRenderTexture,
-      framebufferDimensions,
-    );
+  private newRenderOp(quad: QuadOptions | WebGlRenderOp, bufferIdx: number) {
+    const curRenderOp = new WebGlRenderOp(this, quad, bufferIdx);
     this.curRenderOp = curRenderOp;
     this.renderOps.push(curRenderOp);
   }
@@ -501,27 +402,18 @@ export class WebGlCoreRenderer extends CoreRenderer {
    * @returns Assigned Texture Index of the texture in the render op
    */
   private addTexture(
-    texture: WebGlCoreCtxTexture,
+    texture: WebGlCtxTexture,
     bufferIdx: number,
     recursive?: boolean,
   ): number {
-    const { curRenderOp } = this;
-    assertTruthy(curRenderOp);
-    const textureIdx = curRenderOp.addTexture(texture);
+    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(
-        curRenderOp.shader,
-        curRenderOp.shaderProps,
-        curRenderOp.alpha,
-        curRenderOp.dimensions,
-        curRenderOp.clippingRect,
-        bufferIdx,
-      );
+      this.newRenderOp(this.curRenderOp, bufferIdx);
       return this.addTexture(texture, bufferIdx, true);
     }
     return textureIdx;
@@ -533,36 +425,44 @@ export class WebGlCoreRenderer extends CoreRenderer {
    * @returns
    */
   reuseRenderOp(params: QuadOptions): boolean {
-    const { shader, shaderProps, parentHasRenderTexture, rtt, clippingRect } =
-      params;
-
-    const targetShader = shader || this.defaultShader;
-
     // Switching shader program will require a new render operation
-    if (this.curRenderOp?.shader !== targetShader) {
+    if (
+      this.curRenderOp?.shader.shaderKey !==
+      (params.shader as WebGlShaderNode).shaderKey
+    ) {
       return false;
     }
 
     // Switching clipping rect will require a new render operation
-    if (compareRect(this.curRenderOp.clippingRect, clippingRect) === false) {
+    if (
+      compareRect(this.curRenderOp.clippingRect, params.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
-    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 !== this.defaultShader &&
-      (shaderProps === null ||
-        this.curRenderOp.shader.canBatchShaderProps(
-          this.curRenderOp.shaderProps,
-          shaderProps,
-        ) === false)
+      this.curRenderOp.shader.program.reuseRenderOp(
+        params,
+        this.curRenderOp,
+      ) === false
     ) {
       return false;
     }
@@ -574,7 +474,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
   /**
    * add RenderOp to the render pipeline
    */
-  addRenderOp(renderable: WebGlCoreRenderOp) {
+  addRenderOp(renderable: WebGlRenderOp) {
     this.renderOps.push(renderable);
     this.curRenderOp = null;
   }
@@ -601,7 +501,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
     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
-    const QUAD_SIZE_IN_BYTES = 4 * (6 * arr.BYTES_PER_ELEMENT); // 6 attributes per vertex
+    const QUAD_SIZE_IN_BYTES = 4 * (8 * arr.BYTES_PER_ELEMENT); // 8 attributes per vertex
     this.numQuadsRendered = this.quadBufferUsage / QUAD_SIZE_IN_BYTES;
   }
 
@@ -696,8 +596,6 @@ export class WebGlCoreRenderer extends CoreRenderer {
 
   renderRTTNodes() {
     const { glw } = this;
-    const { txManager } = this.stage;
-
     // Render all associated RTT nodes to their textures
     for (let i = 0; i < this.rttNodes.length; i++) {
       const node = this.rttNodes[i];
@@ -725,9 +623,9 @@ export class WebGlCoreRenderer extends CoreRenderer {
       // So we can prevent rendering children of nested RTT nodes
       this.activeRttNode = node;
 
-      assertTruthy(node.texture, 'RTT node missing texture');
+      assertTruthy(node.texture !== null, 'RTT node missing texture');
       const ctxTexture = node.texture.ctxTexture;
-      assertTruthy(ctxTexture instanceof WebGlCoreCtxRenderTexture);
+      assertTruthy(ctxTexture instanceof WebGlCtxRenderTexture);
       this.renderToTextureActive = true;
 
       // Bind the the texture's framebuffer
@@ -785,8 +683,15 @@ export class WebGlCoreRenderer extends CoreRenderer {
     return bufferInfo;
   }
 
-  override getDefShaderCtr(): BaseShaderController {
-    return this.defShaderCtrl;
+  getDefaultShaderNode(): WebGlShaderNode {
+    if (this.defaultShaderNode !== null) {
+      return this.defaultShaderNode as WebGlShaderNode;
+    }
+    this.stage.shManager.registerShaderType('default', Default);
+    this.defaultShaderNode = this.stage.shManager.createShader(
+      'default',
+    ) as WebGlShaderNode;
+    return this.defaultShaderNode;
   }
 
   /**