@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta20

package/dist/src/core/renderers/webgl/WebGlCoreCtxTexture.d.ts

@@ -19,7 +19,16 @@ export declare class WebGlCoreCtxTexture extends CoreContextTexture {
     protected _nativeCtxTexture: WebGLTexture | null;
     private _w;
     private _h;
+    txCoordX1: number;
+    txCoordY1: number;
+    txCoordX2: number;
+    txCoordY2: number;
     constructor(glw: WebGlContextWrapper, memManager: TextureMemoryManager, textureSource: Texture);
+    /**
+     * GL error check with direct state marking
+     * Uses cached error result to minimize function calls
+     */
+    private checkGLError;
     get ctxTexture(): WebGLTexture | null;
     get w(): number;
     get h(): number;
@@ -32,7 +41,7 @@ export declare class WebGlCoreCtxTexture extends CoreContextTexture {
      * to force the texture to be pre-loaded prior to accessing the ctxTexture
      * property.
      */
-    load(): void;
+    load(): Promise<void>;
     /**
      * Called when the texture data needs to be loaded and uploaded to a texture
      */
@@ -44,14 +53,17 @@ export declare class WebGlCoreCtxTexture extends CoreContextTexture {
      */
     free(): void;
     /**
-     * Create native context texture
+     * Release the WebGLTexture from the GPU without changing state
+     */
+    release(): void;
+    /**
+     * Create native context texture asynchronously
      *
      * @remarks
-     * When this method returns the returned texture will be bound to the GL context state.
+     * When this method resolves, the returned texture will be bound to the GL context state
+     * and fully ready for use. This ensures proper GPU resource allocation timing.
      *
-     * @param width
-     * @param height
-     * @returns
+     * @returns Promise that resolves to the native WebGL texture or null on failure
      */
     protected createNativeCtxTexture(): WebGLTexture | null;
 }

package/dist/src/core/renderers/webgl/WebGlCoreCtxTexture.js

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 import { assertTruthy } from '../../../utils.js';
-import { isPowerOfTwo } from '../../utils.js';
+import { uploadCompressedTexture } from '../../lib/textureCompression.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
 import { isHTMLImageElement } from './internal/RendererUtils.js';
 const TRANSPARENT_TEXTURE_DATA = new Uint8Array([0, 0, 0, 0]);
@@ -37,10 +37,31 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     _nativeCtxTexture = null;
     _w = 0;
     _h = 0;
+    txCoordX1 = 0;
+    txCoordY1 = 0;
+    txCoordX2 = 1;
+    txCoordY2 = 1;
     constructor(glw, memManager, textureSource) {
         super(memManager, textureSource);
         this.glw = glw;
     }
+    /**
+     * GL error check with direct state marking
+     * Uses cached error result to minimize function calls
+     */
+    checkGLError() {
+        // Skip if already failed to prevent double-processing
+        if (this.state === 'failed') {
+            return true;
+        }
+        const error = this.glw.getError();
+        if (error !== 0) {
+            this.state = 'failed';
+            this.textureSource.setState('failed', new Error(`WebGL Error: ${error}`));
+            return true;
+        }
+        return false;
+    }
     get ctxTexture() {
         if (this.state === 'freed') {
             this.load();
@@ -64,23 +85,24 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
      * to force the texture to be pre-loaded prior to accessing the ctxTexture
      * property.
      */
-    load() {
-        // If the texture is already loading or loaded, don't load it again.
+    async load() {
+        // If the texture is already loading or loaded, return resolved promise
         if (this.state === 'loading' || this.state === 'loaded') {
-            return;
+            return Promise.resolve();
         }
         this.state = 'loading';
         this.textureSource.setState('loading');
+        // Await the native texture creation to ensure GPU buffer is fully allocated
         this._nativeCtxTexture = this.createNativeCtxTexture();
         if (this._nativeCtxTexture === null) {
             this.state = 'failed';
-            this.textureSource.setState('failed', new Error('Could not create WebGL Texture'));
-            console.error('Could not create WebGL Texture');
+            this.textureSource.setState('failed', new Error('WebGL Texture creation failed'));
             return;
         }
-        this.onLoadRequest()
-            .then(({ width, height }) => {
+        try {
+            const { width, height } = await this.onLoadRequest();
             // If the texture has been freed while loading, return early.
+            // Type assertion needed because state could change during async operations
             if (this.state === 'freed') {
                 return;
             }
@@ -90,19 +112,18 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
             // Update the texture source's width and height so that it can be used
             // for rendering.
             this.textureSource.setState('loaded', { width, height });
-            // cleanup source texture data
             this.textureSource.freeTextureData();
-        })
-            .catch((err) => {
+        }
+        catch (err) {
             // If the texture has been freed while loading, return early.
+            // Type assertion needed because state could change during async operations
             if (this.state === 'freed') {
                 return;
             }
+            // Ensure texture is marked as failed
             this.state = 'failed';
-            this.textureSource.setState('failed', err);
-            this.textureSource.freeTextureData();
-            console.error(err);
-        });
+            this.textureSource.setState('failed');
+        }
     }
     /**
      * Called when the texture data needs to be loaded and uploaded to a texture
@@ -110,8 +131,14 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     async onLoadRequest() {
         const { glw } = this;
         const textureData = this.textureSource.textureData;
+        // Early return if texture is already failed
+        if (this.state === 'failed') {
+            return { width: 0, height: 0 };
+        }
         if (textureData === null || this._nativeCtxTexture === null) {
-            throw new Error('Texture data or native texture is null ' + this.textureSource.type);
+            this.state = 'failed';
+            this.textureSource.setState('failed', new Error('No texture data available'));
+            return { width: 0, height: 0 };
         }
         // Set to a 1x1 transparent texture
         glw.texImage2D(0, glw.RGBA, 1, 1, 0, glw.RGBA, glw.UNSIGNED_BYTE, null);
@@ -119,6 +146,10 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         let width = 0;
         let height = 0;
         glw.activeTexture(0);
+        // High-performance error check - single call, direct state marking
+        if (this.checkGLError() === true) {
+            return { width: 0, height: 0 };
+        }
         const tdata = textureData.data;
         const format = glw.RGBA;
         const formatBytes = 4;
@@ -134,28 +165,26 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
             glw.bindTexture(this._nativeCtxTexture);
             glw.pixelStorei(glw.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !!textureData.premultiplyAlpha);
             glw.texImage2D(0, format, format, glw.UNSIGNED_BYTE, tdata);
+            // Check for errors after image upload operations
+            if (this.checkGLError() === true) {
+                return { width: 0, height: 0 };
+            }
             this.setTextureMemUse(height * width * formatBytes * memoryPadding);
         }
-        else if (tdata === null) {
-            width = 0;
-            height = 0;
-            // Reset to a 1x1 transparent texture
-            glw.bindTexture(this._nativeCtxTexture);
-            glw.texImage2D(0, format, 1, 1, 0, format, glw.UNSIGNED_BYTE, TRANSPARENT_TEXTURE_DATA);
-            this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
-        }
-        else if ('mipmaps' in tdata && tdata.mipmaps) {
-            const { mipmaps, width = 0, height = 0, type, glInternalFormat } = tdata;
-            const view = type === 'ktx'
-                ? new DataView(mipmaps[0] ?? new ArrayBuffer(0))
-                : mipmaps[0];
-            glw.bindTexture(this._nativeCtxTexture);
-            glw.compressedTexImage2D(0, glInternalFormat, width, height, 0, view);
-            glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
-            glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
-            glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
-            glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
-            this.setTextureMemUse(view.byteLength);
+        else if (tdata && 'mipmaps' in tdata && tdata.mipmaps) {
+            const { mipmaps, type, blockInfo } = tdata;
+            uploadCompressedTexture[type](glw, this._nativeCtxTexture, tdata);
+            // Check for errors after compressed texture operations
+            if (this.checkGLError() === true) {
+                return { width: 0, height: 0 };
+            }
+            width = tdata.width;
+            height = tdata.height;
+            this.txCoordX2 =
+                width / (Math.ceil(width / blockInfo.width) * blockInfo.width);
+            this.txCoordY2 =
+                height / (Math.ceil(height / blockInfo.height) * blockInfo.height);
+            this.setTextureMemUse(mipmaps[0]?.byteLength ?? 0);
         }
         else if (tdata && tdata instanceof Uint8Array) {
             // Color Texture
@@ -164,10 +193,17 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
             glw.bindTexture(this._nativeCtxTexture);
             glw.pixelStorei(glw.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !!textureData.premultiplyAlpha);
             glw.texImage2D(0, format, width, height, 0, format, glw.UNSIGNED_BYTE, tdata);
+            // Check for errors after color texture operations
+            if (this.checkGLError() === true) {
+                return { width: 0, height: 0 };
+            }
             this.setTextureMemUse(width * height * formatBytes);
         }
         else {
             console.error(`WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`, textureData);
+            this.state = 'failed';
+            this.textureSource.setState('failed', new Error('Unexpected texture data'));
+            return { width: 0, height: 0 };
         }
         return {
             width,
@@ -185,6 +221,12 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         }
         this.state = 'freed';
         this.textureSource.setState('freed');
+        this.release();
+    }
+    /**
+     * Release the WebGLTexture from the GPU without changing state
+     */
+    release() {
         this._w = 0;
         this._h = 0;
         if (this._nativeCtxTexture !== null) {
@@ -196,14 +238,13 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         this.textureSource.freeTextureData();
     }
     /**
-     * Create native context texture
+     * Create native context texture asynchronously
      *
      * @remarks
-     * When this method returns the returned texture will be bound to the GL context state.
+     * When this method resolves, the returned texture will be bound to the GL context state
+     * and fully ready for use. This ensures proper GPU resource allocation timing.
      *
-     * @param width
-     * @param height
-     * @returns
+     * @returns Promise that resolves to the native WebGL texture or null on failure
      */
     createNativeCtxTexture() {
         const { glw } = this;
@@ -221,6 +262,10 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         // texture wrapping method
         glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
         glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
+        const error = glw.getError();
+        if (error !== 0) {
+            return null;
+        }
         return nativeTexture;
     }
 }

package/dist/src/core/renderers/webgl/WebGlCoreCtxTexture.js.map

@@ -1 +1 @@
-{"version":3,"file":"WebGlCoreCtxTexture.js","sourceRoot":"","sources":["../../../../../src/core/renderers/webgl/WebGlCoreCtxTexture.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"WebGlCoreCtxTexture.js","sourceRoot":"","sources":["../../../../../src/core/renderers/webgl/WebGlCoreCtxTexture.ts"],"names":[],"mappings":"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"}

package/dist/src/core/renderers/webgl/WebGlCoreRenderOp.js

@@ -85,7 +85,7 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
         shManager.useShader(shader);
         shader.bindRenderOp(this, shaderProps);
         // TODO: Reduce calculations required
-        const quadIdx = (this.bufferIdx / 24) * 6 * 2;
+        const quadIdx = (this.bufferIdx / 32) * 6 * 2;
         // Clipping
         if (this.clippingRect.valid) {
             const { x, y, width, height } = this.clippingRect;

package/dist/src/core/renderers/webgl/WebGlCoreRenderer.js

@@ -87,7 +87,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
         this.defaultShader = this.defShaderCtrl.shader;
         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,
@@ -124,6 +124,14 @@ export class WebGlCoreRenderer extends CoreRenderer {
                         stride,
                         offset: 5 * Float32Array.BYTES_PER_ELEMENT,
                     },
+                    a_nodeCoordinate: {
+                        name: 'a_nodeCoordinate',
+                        size: 2,
+                        type: glw.FLOAT,
+                        normalized: false,
+                        stride,
+                        offset: 6 * Float32Array.BYTES_PER_ELEMENT,
+                    },
                 },
             },
         ]);
@@ -168,7 +176,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
          * 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 (params.shader !== this.defaultShader) {
             if (hasOwn(params.shaderProps, '$dimensions') == true) {
                 const dimensions = params.shaderProps.$dimensions;
                 dimensions.width = params.width;
@@ -179,16 +187,13 @@ export class WebGlCoreRenderer extends CoreRenderer {
             }
         }
         let { curBufferIdx: bufferIdx, curRenderOp } = this;
-        const targetDims = { width: -1, height: -1 };
-        targetDims.width = params.width;
-        targetDims.height = params.height;
-        const targetShader = params.shader || this.defaultShader;
-        assertTruthy(targetShader.getUniformLocation !== undefined, 'Invalid WebGL shader');
+        const targetDims = { width: params.width, height: params.height };
         if (this.reuseRenderOp(params) === false) {
-            this.newRenderOp(targetShader, params.shaderProps, params.alpha, targetDims, params.clippingRect, bufferIdx, params.rtt, params.parentHasRenderTexture, params.framebufferDimensions);
+            this.newRenderOp(params.shader, params.shaderProps, params.alpha, targetDims, params.clippingRect, bufferIdx, params.rtt, params.parentHasRenderTexture, params.framebufferDimensions);
             curRenderOp = this.curRenderOp;
             assertTruthy(curRenderOp);
         }
+        let ctxTexture = undefined;
         let texCoordX1 = 0;
         let texCoordY1 = 0;
         let texCoordX2 = 1;
@@ -201,6 +206,18 @@ export class WebGlCoreRenderer extends CoreRenderer {
             texCoordY1 = ty / parentH;
             texCoordY2 = texCoordY1 + th / parentH;
             texture = texture.parentTexture;
+            ctxTexture = texture.ctxTexture;
+        }
+        else {
+            ctxTexture = texture.ctxTexture;
+            if (ctxTexture === undefined) {
+                ctxTexture = this.stage.defaultTexture?.ctxTexture;
+                console.warn('WebGL Renderer: Texture does not have a ctxTexture, using default texture instead');
+            }
+            texCoordX1 = ctxTexture.txCoordX1;
+            texCoordY1 = ctxTexture.txCoordY1;
+            texCoordX2 = ctxTexture.txCoordX2;
+            texCoordY2 = ctxTexture.txCoordY2;
         }
         if (texture.type === TextureType.image &&
             params.textureOptions !== null &&
@@ -240,8 +257,6 @@ export class WebGlCoreRenderer extends CoreRenderer {
         if (flipY ^ +(texture.type === TextureType.renderToTexture)) {
             [texCoordY1, texCoordY2] = [texCoordY2, texCoordY1];
         }
-        const ctxTexture = texture.ctxTexture;
-        assertTruthy(ctxTexture instanceof WebGlCoreCtxTexture);
         const textureIdx = this.addTexture(ctxTexture, bufferIdx);
         assertTruthy(this.curRenderOp !== null);
         if (params.renderCoords) {
@@ -252,6 +267,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
             fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
             uiQuadBuffer[bufferIdx++] = params.colorTl; // color
             fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
+            fQuadBuffer[bufferIdx++] = 0;
+            fQuadBuffer[bufferIdx++] = 0;
             // Upper-Right
             fQuadBuffer[bufferIdx++] = params.renderCoords.x2;
             fQuadBuffer[bufferIdx++] = params.renderCoords.y2;
@@ -259,6 +276,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
             fQuadBuffer[bufferIdx++] = texCoordY1;
             uiQuadBuffer[bufferIdx++] = params.colorTr;
             fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 1;
+            fQuadBuffer[bufferIdx++] = 0;
             // Lower-Left
             fQuadBuffer[bufferIdx++] = params.renderCoords.x4;
             fQuadBuffer[bufferIdx++] = params.renderCoords.y4;
@@ -266,6 +285,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
             fQuadBuffer[bufferIdx++] = texCoordY2;
             uiQuadBuffer[bufferIdx++] = params.colorBl;
             fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 0;
+            fQuadBuffer[bufferIdx++] = 1;
             // Lower-Right
             fQuadBuffer[bufferIdx++] = params.renderCoords.x3;
             fQuadBuffer[bufferIdx++] = params.renderCoords.y3;
@@ -273,6 +294,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
             fQuadBuffer[bufferIdx++] = texCoordY2;
             uiQuadBuffer[bufferIdx++] = params.colorBr;
             fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 1;
+            fQuadBuffer[bufferIdx++] = 1;
         }
         else if (params.tb !== 0 || params.tc !== 0) {
             // Upper-Left
@@ -282,6 +305,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
             fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
             uiQuadBuffer[bufferIdx++] = params.colorTl; // color
             fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
+            fQuadBuffer[bufferIdx++] = 0;
+            fQuadBuffer[bufferIdx++] = 0;
             // Upper-Right
             fQuadBuffer[bufferIdx++] = params.tx + params.width * params.ta;
             fQuadBuffer[bufferIdx++] = params.ty + params.width * params.tc;
@@ -289,6 +314,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
             fQuadBuffer[bufferIdx++] = texCoordY1;
             uiQuadBuffer[bufferIdx++] = params.colorTr;
             fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 1;
+            fQuadBuffer[bufferIdx++] = 0;
             // Lower-Left
             fQuadBuffer[bufferIdx++] = params.tx + params.height * params.tb;
             fQuadBuffer[bufferIdx++] = params.ty + params.height * params.td;
@@ -296,6 +323,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
             fQuadBuffer[bufferIdx++] = texCoordY2;
             uiQuadBuffer[bufferIdx++] = params.colorBl;
             fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 0;
+            fQuadBuffer[bufferIdx++] = 1;
             // Lower-Right
             fQuadBuffer[bufferIdx++] =
                 params.tx + params.width * params.ta + params.height * params.tb;
@@ -305,6 +334,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
             fQuadBuffer[bufferIdx++] = texCoordY2;
             uiQuadBuffer[bufferIdx++] = params.colorBr;
             fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 1;
+            fQuadBuffer[bufferIdx++] = 1;
         }
         else {
             // Calculate the right corner of the quad
@@ -318,6 +349,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
             fQuadBuffer[bufferIdx++] = texCoordY1; // texCoordY
             uiQuadBuffer[bufferIdx++] = params.colorTl; // color
             fQuadBuffer[bufferIdx++] = textureIdx; // texIndex
+            fQuadBuffer[bufferIdx++] = 0;
+            fQuadBuffer[bufferIdx++] = 0;
             // Upper-Right
             fQuadBuffer[bufferIdx++] = rightCornerX;
             fQuadBuffer[bufferIdx++] = params.ty;
@@ -325,6 +358,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
             fQuadBuffer[bufferIdx++] = texCoordY1;
             uiQuadBuffer[bufferIdx++] = params.colorTr;
             fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 1;
+            fQuadBuffer[bufferIdx++] = 0;
             // Lower-Left
             fQuadBuffer[bufferIdx++] = params.tx;
             fQuadBuffer[bufferIdx++] = rightCornerY;
@@ -332,6 +367,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
             fQuadBuffer[bufferIdx++] = texCoordY2;
             uiQuadBuffer[bufferIdx++] = params.colorBl;
             fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 0;
+            fQuadBuffer[bufferIdx++] = 1;
             // Lower-Right
             fQuadBuffer[bufferIdx++] = rightCornerX;
             fQuadBuffer[bufferIdx++] = rightCornerY;
@@ -339,9 +376,10 @@ export class WebGlCoreRenderer extends CoreRenderer {
             fQuadBuffer[bufferIdx++] = texCoordY2;
             uiQuadBuffer[bufferIdx++] = params.colorBr;
             fQuadBuffer[bufferIdx++] = textureIdx;
+            fQuadBuffer[bufferIdx++] = 1;
+            fQuadBuffer[bufferIdx++] = 1;
         }
         // Update the length of the current render op
-        this.curRenderOp.length += WORDS_PER_QUAD;
         this.curRenderOp.numQuads++;
         this.curBufferIdx = bufferIdx;
     }
@@ -391,9 +429,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
      */
     reuseRenderOp(params) {
         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 !== shader) {
             return false;
         }
         // Switching clipping rect will require a new render operation
@@ -403,13 +440,12 @@ export class WebGlCoreRenderer 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 (parentHasRenderTexture === true || rtt === true) {
             return false;
         }
         // 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.canBatchShaderProps(this.curRenderOp.shaderProps, shaderProps) === false) {
             return false;
         }
         // Render operation can be reused
@@ -440,7 +476,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;
     }
     getQuadCount() {