fix some performance issues in v2 (#654)

1. Back ported the isProductionEnvironment so AssertTruthy can be tree
shaken
2. Back port exporting of utils
3. Optimize WebGL loop as Shaders are ALWAYS defined on CoreNode and
shaderProps as well.


Requires __DEV__ to be added to vite config.

Author: jfboeve

exports/utils.ts

@@ -39,6 +39,12 @@
  *
  * @module Utils
  */
-export { assertTruthy, mergeColorAlpha, deg2Rad } from '../src/utils.js';
+export {
+  assertTruthy,
+  mergeColorAlpha,
+  deg2Rad,
+  mergeColorProgress,
+} from '../src/utils.js';
 export { getNormalizedRgbaComponents } from '../src/core/lib/utils.js';
 export { EventEmitter } from '../src/common/EventEmitter.js';
+export { getTimingFunction } from '../src/core/utils.js';

src/core/CoreNode.ts

@@ -802,7 +802,7 @@ export class CoreNode extends EventEmitter {
         UpdateType.RenderState,
     );
 
-    if (isProductionEnvironment() === false && props.preventCleanup === true) {
+    if (isProductionEnvironment === false && props.preventCleanup === true) {
       console.warn(
         'CoreNode.preventCleanup: Is deprecated and will be removed in upcoming release, please use textureOptions.preventCleanup instead',
       );
@@ -2223,7 +2223,7 @@ export class CoreNode extends EventEmitter {
   }
 
   set preventCleanup(value: boolean) {
-    if (isProductionEnvironment() === false) {
+    if (isProductionEnvironment === false) {
       console.warn(
         'CoreNode.preventCleanup: Is deprecated and will be removed in upcoming release, please use textureOptions.preventCleanup instead',
       );

src/core/TextureMemoryManager.ts

@@ -317,7 +317,7 @@ export class TextureMemoryManager {
       // Only emit the warning once per over-threshold period
       if (
         !this.hasWarnedAboveCritical &&
-        (this.debugLogging === true || isProductionEnvironment() === false)
+        (this.debugLogging === true || isProductionEnvironment === false)
       ) {
         console.warn(
           `[TextureMemoryManager] Memory usage above critical threshold after cleanup: ${this.memUsed}`,

src/core/renderers/CoreRenderer.ts

@@ -44,8 +44,8 @@ export interface QuadOptions {
   texture: Texture | null;
   textureOptions: TextureOptions | null;
   zIndex: number;
-  shader: CoreShader | null;
-  shaderProps: Record<string, unknown> | null;
+  shader: CoreShader;
+  shaderProps: Record<string, unknown>;
   alpha: number;
   clippingRect: RectWithValid;
   tx: number;

src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -230,7 +230,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 as Dimensions;
         dimensions.width = params.width;
@@ -243,20 +243,11 @@ 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 as WebGlCoreShader) || 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.shader as WebGlCoreShader,
         params.shaderProps as Record<string, unknown>,
         params.alpha,
         targetDims,
@@ -542,10 +533,8 @@ export class WebGlCoreRenderer extends CoreRenderer {
     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;
     }
 
@@ -557,18 +546,17 @@ 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;
     }

src/main-api/Inspector.ts

@@ -192,7 +192,7 @@ export class Inspector {
   private textureMetrics = new Map<Texture, TextureMetrics>();
 
   constructor(canvas: HTMLCanvasElement, settings: RendererMainSettings) {
-    if (isProductionEnvironment()) return;
+    if (isProductionEnvironment) return;
 
     if (!settings) {
       throw new Error('settings is required');

src/main-api/Renderer.ts

@@ -515,7 +515,7 @@ export class RendererMain extends EventEmitter {
     targetEl.appendChild(canvas);
 
     // Initialize inspector (if enabled)
-    if (inspector && !isProductionEnvironment()) {
+    if (inspector && !isProductionEnvironment) {
       this.inspector = new inspector(canvas, resolvedSettings);
     }
   }

src/utils.ts

@@ -80,7 +80,7 @@ export function assertTruthy(
   condition: unknown,
   message?: string,
 ): asserts condition {
-  if (isProductionEnvironment() === true) return;
+  if (isProductionEnvironment) return;
   if (!condition) {
     throw new Error(message || 'Assertion failed');
   }
@@ -235,9 +235,9 @@ export function getImageAspectRatio(width: number, height: number): number {
  *
  * @returns
  */
-export function isProductionEnvironment(): boolean {
-  return import.meta.env && import.meta.env.PROD;
-}
+declare const __DEV__: boolean;
+export const isProductionEnvironment =
+  typeof __DEV__ !== 'undefined' ? !__DEV__ : true;
 
 /**
  * Returns a new unique ID