@lightningjs/renderer 3.0.0-beta7 → 3.0.0-beta8

package/src/core/CoreTextNode.ts

@@ -25,7 +25,12 @@ 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 {
@@ -33,7 +38,6 @@ import type {
   NodeTextLoadedPayload,
 } from '../common/CommonTypes.js';
 import type { RectWithValid } from './lib/utils.js';
-import { assertTruthy } from '../utils.js';
 
 export interface CoreTextNodeProps extends CoreNodeProps, TrProps {
   /**
@@ -130,7 +134,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
       this.props.width = calcWidth;
       this.props.height = calcHeight;
     }
-    this.updateLocalTransform();
+    this.setUpdateType(UpdateType.Local);
 
     // Incase the RAF loop has been stopped already before text was loaded,
     // we request a render so it can be drawn.
@@ -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

package/src/core/CoreTextureManager.ts

@@ -488,12 +488,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()!;
@@ -505,7 +506,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()!);
@@ -514,7 +515,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()!;

package/src/core/Stage.ts

@@ -46,8 +46,6 @@ import {
   type TextureMemoryManagerSettings,
 } from './TextureMemoryManager.js';
 import { CoreRenderer } from './renderers/CoreRenderer.js';
-import type { WebGlRenderer } from './renderers/webgl/WebGlRenderer.js';
-import type { CanvasRenderer } from './renderers/canvas/CanvasRenderer.js';
 import { CoreTextNode, type CoreTextNodeProps } from './CoreTextNode.js';
 import { santizeCustomDataMap } from '../main-api/utils.js';
 import type { SdfTextRenderer } from './text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
@@ -59,30 +57,19 @@ import type { Texture } from './textures/Texture.js';
 import { ColorTexture } from './textures/ColorTexture.js';
 import type { Platform } from './platforms/Platform.js';
 import type { WebPlatform } from './platforms/web/WebPlatform.js';
+import type { RendererMainSettings } from '../main-api/Renderer.js';
 
-export interface StageOptions {
-  appWidth: number;
-  appHeight: number;
+export type StageOptions = Omit<
+  RendererMainSettings,
+  'inspector' | 'platform'
+> & {
   textureMemory: TextureMemoryManagerSettings;
-  boundsMargin: number | [number, number, number, number];
-  deviceLogicalPixelRatio: number;
-  devicePhysicalPixelRatio: number;
   canvas: HTMLCanvasElement | OffscreenCanvas;
-  clearColor: number;
   fpsUpdateInterval: number;
-  enableContextSpy: boolean;
-  forceWebGL2: boolean;
-  numImageWorkers: number;
-  renderEngine: typeof WebGlRenderer | typeof CanvasRenderer;
   eventBus: EventEmitter;
-  quadBufferSize: number;
-  fontEngines: (typeof CanvasTextRenderer | typeof SdfTextRenderer)[];
-  inspector: boolean;
-  strictBounds: boolean;
-  textureProcessingTimeLimit: number;
-  createImageBitmapSupport: 'auto' | 'basic' | 'options' | 'full';
   platform: Platform | WebPlatform;
-}
+  inspector: boolean;
+};
 
 export type StageFpsUpdateHandler = (
   stage: Stage,
@@ -114,11 +101,11 @@ export class Stage {
   public readonly interactiveNodes: Set<CoreNode> = new Set();
   public boundsMargin: [number, number, number, number];
   public readonly defShaderNode: CoreShaderNode | null = null;
-  public readonly strictBound: Bound;
-  public readonly preloadBound: Bound;
+  public strictBound: Bound;
+  public preloadBound: Bound;
   public readonly strictBounds: boolean;
   public readonly defaultTexture: Texture | null = null;
-  public readonly pixelRatio: number;
+  public pixelRatio: number;
   public readonly bufferMemory: number = 2e6;
   public readonly platform: Platform | WebPlatform;
   public readonly calculateTextureCoord: boolean;
@@ -152,7 +139,7 @@ export class Stage {
   /**
    * Stage constructor
    */
-  constructor(readonly options: StageOptions) {
+  constructor(public options: StageOptions) {
     const {
       canvas,
       clearColor,
@@ -385,12 +372,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
@@ -400,12 +387,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);
       }
     }
 
@@ -419,13 +406,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;
     }
   }
@@ -663,7 +650,20 @@ export class Stage {
   }
 
   /**
-   * Find all nodes at a given point
+   * Update the viewport bounds
+   */
+  updateViewportBounds() {
+    const { appWidth, appHeight } = this.options;
+    this.strictBound = createBound(0, 0, appWidth, appHeight);
+    this.preloadBound = createPreloadBounds(
+      this.strictBound,
+      this.boundsMargin,
+    );
+    this.root.setUpdateType(UpdateType.RenderBounds | UpdateType.Children);
+    this.root.childUpdateType |= UpdateType.RenderBounds;
+  }
+
+  /** Find all nodes at a given point
    * @param data
    */
   findNodesAtPoint(data: Point): CoreNode[] {
@@ -713,18 +713,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,
@@ -736,39 +741,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,
       interactive: props.interactive ?? false,
       strictBounds: props.strictBounds ?? this.strictBounds,

package/src/core/TextureMemoryManager.ts

@@ -117,15 +117,21 @@ export class TextureMemoryManager {
   private memUsed = 0;
   private loadedTextures: Map<Texture, number> = new Map();
   private orphanedTextures: Texture[] = [];
-  private criticalThreshold: number;
-  private targetThreshold: number;
-  private cleanupInterval: number;
-  private debugLogging: boolean;
+  private criticalThreshold: number = 124e6;
+  private targetThreshold: number = 0.5;
+  private cleanupInterval: number = 5000;
+  private debugLogging: boolean = false;
+  private loggingID: ReturnType<typeof setInterval> =
+    0 as unknown as ReturnType<typeof setInterval>;
   private lastCleanupTime = 0;
-  private baselineMemoryAllocation: number;
+  private baselineMemoryAllocation: number = 26e6;
 
   public criticalCleanupRequested = false;
-  public doNotExceedCriticalThreshold: boolean;
+  public doNotExceedCriticalThreshold: boolean = false;
+  private originalSetTextureMemUse: (
+    texture: Texture,
+    byteSize: number,
+  ) => void;
 
   /**
    * The current frame time in milliseconds
@@ -138,46 +144,9 @@ export class TextureMemoryManager {
   public frameTime = 0;
 
   constructor(private stage: Stage, settings: TextureMemoryManagerSettings) {
-    const { criticalThreshold, doNotExceedCriticalThreshold } = settings;
-    this.doNotExceedCriticalThreshold = doNotExceedCriticalThreshold || false;
-    this.criticalThreshold = Math.round(criticalThreshold);
-    const targetFraction = Math.max(
-      0,
-      Math.min(1, settings.targetThresholdLevel),
-    );
-    this.cleanupInterval = settings.cleanupInterval;
-    this.debugLogging = settings.debugLogging;
-    this.baselineMemoryAllocation = Math.round(
-      settings.baselineMemoryAllocation,
-    );
-    this.targetThreshold = Math.max(
-      Math.round(criticalThreshold * targetFraction),
-      this.baselineMemoryAllocation,
-    );
-    this.memUsed = Math.round(settings.baselineMemoryAllocation);
+    this.originalSetTextureMemUse = this.setTextureMemUse;
 
-    if (settings.debugLogging) {
-      let lastMemUse = 0;
-      setInterval(() => {
-        if (lastMemUse !== this.memUsed) {
-          lastMemUse = this.memUsed;
-          console.log(
-            `[TextureMemoryManager] Memory used: ${bytesToMb(
-              this.memUsed,
-            )} mb / ${bytesToMb(this.criticalThreshold)} mb (${(
-              (this.memUsed / this.criticalThreshold) *
-              100
-            ).toFixed(1)}%)`,
-          );
-        }
-      }, 1000);
-    }
-
-    // If the threshold is 0, we disable the memory manager by replacing the
-    // setTextureMemUse method with a no-op function.
-    if (criticalThreshold === 0) {
-      this.setTextureMemUse = () => {};
-    }
+    this.updateSettings(settings);
   }
 
   /**
@@ -248,14 +217,14 @@ export class TextureMemoryManager {
 
   cleanupQuick(critical: boolean) {
     // Free non-renderable textures until we reach the target threshold
+    const platform = this.stage.platform;
     const memTarget = this.targetThreshold;
-    const txManager = this.stage.txManager;
-    const timestamp = this.stage.platform.getTimeStamp();
+    const timestamp = platform.getTimeStamp();
 
     while (
       this.memUsed >= memTarget &&
       this.orphanedTextures.length > 0 &&
-      (critical || this.stage.platform.getTimeStamp() - timestamp < 10)
+      (critical || platform.getTimeStamp() - timestamp < 10)
     ) {
       const texture = this.orphanedTextures.shift();
 
@@ -268,15 +237,28 @@ export class TextureMemoryManager {
         continue;
       }
 
-      texture.free();
-      txManager.removeTextureFromCache(texture);
+      this.destroyTexture(texture);
     }
   }
 
+  /**
+   * Destroy a texture and remove it from the memory manager
+   *
+   * @param texture - The texture to destroy
+   */
+  destroyTexture(texture: Texture) {
+    const txManager = this.stage.txManager;
+    txManager.removeTextureFromQueue(texture);
+    txManager.removeTextureFromCache(texture);
+
+    texture.destroy();
+
+    this.removeFromOrphanedTextures(texture);
+    this.loadedTextures.delete(texture);
+  }
   cleanupDeep(critical: boolean) {
     // Free non-renderable textures until we reach the target threshold
     const memTarget = critical ? this.criticalThreshold : this.targetThreshold;
-    const txManager = this.stage.txManager;
 
     // sort by renderability
     const filteredAndSortedTextures: Texture[] = [];
@@ -314,21 +296,21 @@ export class TextureMemoryManager {
         break;
       }
 
-      texture.free();
-      this.removeFromOrphanedTextures(texture);
-      txManager.removeTextureFromCache(texture);
-      txManager.removeTextureFromQueue(texture);
+      this.destroyTexture(texture);
     }
   }
 
   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 +324,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 {
@@ -391,4 +373,63 @@ export class TextureMemoryManager {
       baselineMemoryAllocation: this.baselineMemoryAllocation,
     };
   }
+
+  public updateSettings(settings: TextureMemoryManagerSettings): void {
+    const { criticalThreshold, doNotExceedCriticalThreshold } = settings;
+
+    this.doNotExceedCriticalThreshold = doNotExceedCriticalThreshold || false;
+    this.criticalThreshold = Math.round(criticalThreshold);
+
+    if (this.memUsed === 0) {
+      this.memUsed = Math.round(settings.baselineMemoryAllocation);
+    } else {
+      const memUsedExBaseline = this.memUsed - this.baselineMemoryAllocation;
+      this.memUsed = Math.round(
+        settings.baselineMemoryAllocation + memUsedExBaseline,
+      );
+    }
+    this.baselineMemoryAllocation = Math.round(
+      settings.baselineMemoryAllocation,
+    );
+    const targetFraction = Math.max(
+      0,
+      Math.min(1, settings.targetThresholdLevel),
+    );
+    this.targetThreshold = Math.max(
+      Math.round(criticalThreshold * targetFraction),
+      this.baselineMemoryAllocation,
+    );
+
+    this.cleanupInterval = settings.cleanupInterval;
+    this.debugLogging = settings.debugLogging;
+
+    if (this.loggingID && !settings.debugLogging) {
+      clearInterval(this.loggingID);
+      this.loggingID = 0 as unknown as ReturnType<typeof setInterval>;
+    }
+    if (settings.debugLogging && !this.loggingID) {
+      let lastMemUse = 0;
+      this.loggingID = setInterval(() => {
+        if (lastMemUse !== this.memUsed) {
+          lastMemUse = this.memUsed;
+          console.log(
+            `[TextureMemoryManager] Memory used: ${bytesToMb(
+              this.memUsed,
+            )} mb / ${bytesToMb(this.criticalThreshold)} mb (${(
+              (this.memUsed / this.criticalThreshold) *
+              100
+            ).toFixed(1)}%)`,
+          );
+        }
+      }, 1000);
+    }
+
+    // If the threshold is 0, we disable the memory manager by replacing the
+    // setTextureMemUse method with a no-op function.
+    if (criticalThreshold === 0) {
+      this.setTextureMemUse = () => {};
+    } else {
+      this.setTextureMemUse = this.originalSetTextureMemUse;
+    }
+  }
 }

package/src/core/animations/CoreAnimation.ts

@@ -215,6 +215,13 @@ export class CoreAnimation extends EventEmitter {
   update(dt: number) {
     const { duration, loop, easing, stopMethod } = this.settings;
     const { delayFor } = this;
+
+    if (this.node.destroyed) {
+      // cleanup
+      this.emit('destroyed', {});
+      return;
+    }
+
     if (duration === 0 && delayFor === 0) {
       this.emit('finished', {});
       return;

package/src/core/animations/CoreAnimationController.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/unbound-method */
 /*
  * If not stated otherwise in this file or this component's LICENSE file the
  * following copyright and licenses apply:
@@ -52,6 +51,7 @@ export class CoreAnimationController
     this.onAnimating = this.onAnimating.bind(this);
     this.onFinished = this.onFinished.bind(this);
     this.onTick = this.onTick.bind(this);
+    this.onDestroy = this.onDestroy.bind(this);
   }
 
   start(): IAnimationController {
@@ -96,6 +96,7 @@ export class CoreAnimationController
     this.animation.once('finished', this.onFinished);
     this.animation.on('animating', this.onAnimating);
     this.animation.on('tick', this.onTick);
+    this.animation.on('destroyed', this.onDestroy);
     // Then register the animation
     this.manager.registerAnimation(this.animation);
   }
@@ -107,6 +108,7 @@ export class CoreAnimationController
     this.animation.off('finished', this.onFinished);
     this.animation.off('animating', this.onAnimating);
     this.animation.off('tick', this.onTick);
+    this.animation.off('destroy', this.onDestroy);
   }
 
   private makeStoppedPromise(): void {
@@ -117,6 +119,11 @@ export class CoreAnimationController
     }
   }
 
+  private onDestroy(this: CoreAnimationController): void {
+    this.unregisterAnimation();
+    this.state = 'stopped';
+  }
+
   private onFinished(this: CoreAnimationController): void {
     assertTruthy(this.stoppedResolve);
     // If the animation is looping, then we need to restart it.

package/src/core/renderers/CoreRenderer.ts

@@ -104,6 +104,7 @@ export abstract class CoreRenderer {
   abstract renderToTexture(node: CoreNode): void;
   abstract getBufferInfo(): BufferInfo | null;
   abstract getQuadCount(): number | null;
+  abstract updateViewport(): void;
   abstract updateClearColor(color: number): void;
   getTextureCoords?(node: CoreNode): TextureCoords;
 }