refactor: Reduce branching, optimise hot paths, remove asserts where no longer needed

Author: wouterlucas

src/core/CoreNode.ts

@@ -25,15 +25,19 @@ import type {
   TrFailedEventHandler,
   TrLoadedEventHandler,
 } from './text-rendering/renderers/TextRenderer.js';
-import { CoreNode, UpdateType, type CoreNodeProps } from './CoreNode.js';
+import {
+  CoreNode,
+  CoreNodeRenderState,
+  UpdateType,
+  type CoreNodeProps,
+} from './CoreNode.js';
 import type { Stage } from './Stage.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type {
   NodeTextFailedPayload,
   NodeTextLoadedPayload,
 } from '../common/CommonTypes.js';
 import type { RectWithValid } from './lib/utils.js';
-import { assertTruthy } from '../utils.js';
 
 export interface CoreTextNodeProps extends CoreNodeProps, TrProps {
   /**
@@ -211,7 +215,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
       this._textRendererOverride,
     );
 
-    if (!textRenderer) {
+    if (textRenderer === null) {
       console.warn(
         'Text Renderer not found for font',
         this.trState.props.fontFamily,
@@ -370,23 +374,24 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   override update(delta: number, parentClippingRect: RectWithValid) {
     super.update(delta, parentClippingRect);
 
-    assertTruthy(this.globalTransform);
-
     // globalTransform is updated in super.update(delta)
-    this.textRenderer.set.x(this.trState, this.globalTransform.tx);
-    this.textRenderer.set.y(this.trState, this.globalTransform.ty);
+    this.textRenderer.set.x(this.trState, this.globalTransform!.tx);
+    this.textRenderer.set.y(this.trState, this.globalTransform!.ty);
   }
 
-  override checkBasicRenderability() {
-    if (this.worldAlpha === 0 || this.isOutOfBounds() === true) {
-      return false;
+  override updateIsRenderable() {
+    // If the node is out of bounds or has an alpha of 0, it is not renderable
+    if (
+      this.worldAlpha === 0 ||
+      this.renderState <= CoreNodeRenderState.OutOfBounds
+    ) {
+      this.setRenderable(false);
+      return;
     }
 
-    if (this.trState && this.trState.props.text !== '') {
-      return true;
+    if (this.trState !== undefined && this.trState.props.text !== '') {
+      this.setRenderable(true);
     }
-
-    return false;
   }
 
   override setRenderable(isRenderable: boolean) {
@@ -395,11 +400,9 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   }
 
   override renderQuads(renderer: CoreRenderer) {
-    assertTruthy(this.globalTransform);
-
     // If the text renderer does not support rendering quads, fallback to the
     // default renderQuads method
-    if (!this.textRenderer.renderQuads) {
+    if (this.textRenderer.renderQuads === undefined) {
       super.renderQuads(renderer);
       return;
     }
@@ -408,8 +411,8 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
 
     // Prevent quad rendering if parent has a render texture
     // and this node is not the render texture
-    if (this.parentHasRenderTexture) {
-      if (!renderer.renderToTextureActive) {
+    if (this.parentHasRenderTexture === true) {
+      if (renderer.renderToTextureActive === false) {
         return;
       }
       // Prevent quad rendering if parent render texture is not the active render texture

src/core/CoreTextNode.ts

@@ -481,12 +481,13 @@ export class CoreTextureManager extends EventEmitter {
       return;
     }
 
-    const startTime = this.platform.getTimeStamp();
+    const platform = this.platform;
+    const startTime = platform.getTimeStamp();
 
     // Process priority queue
     while (
       this.priorityQueue.length > 0 &&
-      this.platform.getTimeStamp() - startTime < maxProcessingTime
+      platform.getTimeStamp() - startTime < maxProcessingTime
     ) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const texture = this.priorityQueue.pop()!;
@@ -498,7 +499,7 @@ export class CoreTextureManager extends EventEmitter {
     // Process uploads
     while (
       this.uploadTextureQueue.length > 0 &&
-      this.platform.getTimeStamp() - startTime < maxProcessingTime
+      platform.getTimeStamp() - startTime < maxProcessingTime
     ) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       this.uploadTexture(this.uploadTextureQueue.pop()!);
@@ -507,7 +508,7 @@ export class CoreTextureManager extends EventEmitter {
     // Process downloads
     while (
       this.downloadTextureSourceQueue.length > 0 &&
-      this.platform.getTimeStamp() - startTime < maxProcessingTime
+      platform.getTimeStamp() - startTime < maxProcessingTime
     ) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const texture = this.downloadTextureSourceQueue.shift()!;

src/core/CoreTextureManager.ts

@@ -378,12 +378,12 @@ export class Stage {
    * Start a new frame draw
    */
   drawFrame() {
-    const { renderer, renderRequested } = this;
-    assertTruthy(renderer);
+    const { renderer, renderRequested, root } = this;
+    const txMemManager = this.txMemManager;
 
     // Update tree if needed
-    if (this.root.updateType !== 0) {
-      this.root.update(this.deltaTime, this.root.clippingRect);
+    if (root.updateType !== 0) {
+      root.update(this.deltaTime, root.clippingRect);
     }
 
     // Process some textures
@@ -393,12 +393,12 @@ export class Stage {
     renderer.reset();
 
     // Check if we need to cleanup textures
-    if (this.txMemManager.criticalCleanupRequested === true) {
-      this.txMemManager.cleanup(false);
+    if (txMemManager.criticalCleanupRequested === true) {
+      txMemManager.cleanup(false);
 
-      if (this.txMemManager.criticalCleanupRequested === true) {
+      if (txMemManager.criticalCleanupRequested === true) {
         // If we still need to cleanup, request another but aggressive cleanup
-        this.txMemManager.cleanup(true);
+        txMemManager.cleanup(true);
       }
     }
 
@@ -412,13 +412,13 @@ export class Stage {
     this.addQuads(this.root);
 
     // Perform render pass
-    renderer?.render();
+    renderer.render();
 
     this.calculateFps();
     this.calculateQuads();
 
     // Reset renderRequested flag if it was set
-    if (renderRequested) {
+    if (renderRequested === true) {
       this.renderRequested = false;
     }
   }
@@ -668,18 +668,23 @@ export class Stage {
    */
   protected resolveNodeDefaults(props: Partial<CoreNodeProps>): CoreNodeProps {
     const color = props.color ?? 0xffffffff;
-    const colorTl = props.colorTl ?? props.colorTop ?? props.colorLeft ?? color;
-    const colorTr =
-      props.colorTr ?? props.colorTop ?? props.colorRight ?? color;
-    const colorBl =
-      props.colorBl ?? props.colorBottom ?? props.colorLeft ?? color;
-    const colorBr =
-      props.colorBr ?? props.colorBottom ?? props.colorRight ?? color;
-
-    let data = {};
-    if (this.options.inspector === true) {
-      data = santizeCustomDataMap(props.data ?? {});
-    }
+    const colorTop = props.colorTop ?? color;
+    const colorBottom = props.colorBottom ?? color;
+    const colorLeft = props.colorLeft ?? color;
+    const colorRight = props.colorRight ?? color;
+
+    const colorTl = props.colorTl ?? colorTop ?? colorLeft ?? color;
+    const colorTr = props.colorTr ?? colorTop ?? colorRight ?? color;
+    const colorBl = props.colorBl ?? colorBottom ?? colorLeft ?? color;
+    const colorBr = props.colorBr ?? colorBottom ?? colorRight ?? color;
+
+    const scale = props.scale ?? null;
+    const mount = props.mount ?? 0;
+    const pivot = props.pivot ?? 0.5;
+
+    const data = this.options.inspector
+      ? santizeCustomDataMap(props.data ?? {})
+      : {};
 
     return {
       x: props.x ?? 0,
@@ -691,39 +696,37 @@ export class Stage {
       boundsMargin: props.boundsMargin ?? null,
       clipping: props.clipping ?? false,
       color,
-      colorTop: props.colorTop ?? color,
-      colorBottom: props.colorBottom ?? color,
-      colorLeft: props.colorLeft ?? color,
-      colorRight: props.colorRight ?? color,
-      colorBl,
-      colorBr,
+      colorTop,
+      colorBottom,
+      colorLeft,
+      colorRight,
       colorTl,
       colorTr,
+      colorBl,
+      colorBr,
       zIndex: props.zIndex ?? 0,
       zIndexLocked: props.zIndexLocked ?? 0,
       parent: props.parent ?? null,
       texture: props.texture ?? null,
       textureOptions: props.textureOptions ?? {},
       shader: props.shader ?? this.defShaderNode,
-      // Since setting the `src` will trigger a texture load, we need to set it after
-      // we set the texture. Otherwise, problems happen.
       src: props.src ?? null,
       srcHeight: props.srcHeight,
       srcWidth: props.srcWidth,
       srcX: props.srcX,
       srcY: props.srcY,
-      scale: props.scale ?? null,
-      scaleX: props.scaleX ?? props.scale ?? 1,
-      scaleY: props.scaleY ?? props.scale ?? 1,
-      mount: props.mount ?? 0,
-      mountX: props.mountX ?? props.mount ?? 0,
-      mountY: props.mountY ?? props.mount ?? 0,
-      pivot: props.pivot ?? 0.5,
-      pivotX: props.pivotX ?? props.pivot ?? 0.5,
-      pivotY: props.pivotY ?? props.pivot ?? 0.5,
+      scale,
+      scaleX: props.scaleX ?? scale ?? 1,
+      scaleY: props.scaleY ?? scale ?? 1,
+      mount,
+      mountX: props.mountX ?? mount,
+      mountY: props.mountY ?? mount,
+      pivot,
+      pivotX: props.pivotX ?? pivot,
+      pivotY: props.pivotY ?? pivot,
       rotation: props.rotation ?? 0,
       rtt: props.rtt ?? false,
-      data: data,
+      data,
       imageType: props.imageType,
       strictBounds: props.strictBounds ?? this.strictBounds,
     };

src/core/Stage.ts

@@ -323,12 +323,15 @@ export class TextureMemoryManager {
 
   cleanup(aggressive: boolean = false) {
     const critical = this.criticalCleanupRequested;
+    const criticalThreshold = this.criticalThreshold;
+    const memUsed = this.memUsed;
+    const stage = this.stage;
     this.lastCleanupTime = this.frameTime;
 
     if (critical === true) {
-      this.stage.queueFrameEvent('criticalCleanup', {
+      stage.queueFrameEvent('criticalCleanup', {
         memUsed: this.memUsed,
-        criticalThreshold: this.criticalThreshold,
+        criticalThreshold: criticalThreshold,
       });
     }
 
@@ -342,19 +345,19 @@ export class TextureMemoryManager {
     this.cleanupQuick(critical);
 
     // if we're still above the target threshold, do a deep cleanup
-    if (aggressive === true && this.memUsed >= this.criticalThreshold) {
+    if (aggressive === true && memUsed >= criticalThreshold) {
       this.cleanupDeep(critical);
     }
 
-    if (this.memUsed >= this.criticalThreshold) {
-      this.stage.queueFrameEvent('criticalCleanupFailed', {
-        memUsed: this.memUsed,
-        criticalThreshold: this.criticalThreshold,
+    if (memUsed >= criticalThreshold) {
+      stage.queueFrameEvent('criticalCleanupFailed', {
+        memUsed: memUsed,
+        criticalThreshold: criticalThreshold,
       });
 
       if (this.debugLogging === true || isProductionEnvironment === false) {
         console.warn(
-          `[TextureMemoryManager] Memory usage above critical threshold after cleanup: ${this.memUsed}`,
+          `[TextureMemoryManager] Memory usage above critical threshold after cleanup: ${memUsed}`,
         );
       }
     } else {

src/core/TextureMemoryManager.ts

@@ -18,11 +18,9 @@
  */
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
-import { assertTruthy } from '../../../utils.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { Texture } from '../../textures/Texture.js';
-import { isPowerOfTwo } from '../../utils.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
 import { isHTMLImageElement } from './internal/RendererUtils.js';
 
@@ -57,7 +55,6 @@ export class WebGlCtxTexture extends CoreContextTexture {
       this.load();
       return null;
     }
-    assertTruthy(this._nativeCtxTexture);
     return this._nativeCtxTexture;
   }