@solidtv/renderer 1.1.1 → 1.1.3

package/README.md

@@ -100,10 +100,7 @@ at start up so they are ready when your application is rendered.
 ```ts
 import { RendererMain } from '@solidtv/renderer';
 
-import {
-  WebGlCoreRenderer,
-  SdfTextRenderer,
-} from '@solidtv/renderer/webgl';
+import { WebGlCoreRenderer, SdfTextRenderer } from '@solidtv/renderer/webgl';
 import { CanvasTextRenderer } from '@solidtv/renderer/canvas';
 
 const renderer = new RendererMain(

package/dist/src/core/CoreNode.d.ts

@@ -685,6 +685,11 @@ export declare class CoreNode extends EventEmitter {
     protected _id: number;
     readonly props: CoreNodeProps;
     readonly isCoreNode: true;
+    /**
+     * Lazily allocated on first `animateProp` call. Animations are rare across
+     * the scene graph, so deferring the object literal avoids per-node GC
+     * pressure during construction.
+     */
     private _animations;
     renderOpBufferIdx: number;
     numQuads: number;
@@ -719,6 +724,28 @@ export declare class CoreNode extends EventEmitter {
     isRenderable: boolean;
     renderState: CoreNodeRenderState;
     isSimple: boolean;
+    /**
+     * `true` when `localTransform` is in identity-shape (ta=1, tb=0, tc=0, td=1)
+     * — i.e. a pure translation. Lets the simple-path `updateLocalTransform`
+     * skip redundant ta/tb/tc/td writes between frames. Defaults to `true`
+     * because the matrix is eagerly allocated as an identity in the constructor.
+     */
+    _localIsTranslate: boolean;
+    /**
+     * Cached result of the texture `contain` resizeMode check used by
+     * `updateLocalTransform` and `updateIsSimple`. Updated whenever the
+     * texture or textureOptions change (via `updateIsSimple`), so the hot
+     * paths can avoid the optional-chain + string compare on every frame.
+     */
+    _hasContainResize: boolean;
+    /**
+     * `true` when `globalTransform` is in identity-shape (ta=1, tb=0, tc=0, td=1).
+     * Propagates from parent: a node's global is translate-only iff the parent's
+     * global is translate-only AND the node itself is `isSimple`. Default `true`
+     * because freshly-constructed nodes have no transform applied yet, and the
+     * Stage root is configured with an identity-shape global.
+     */
+    _globalIsTranslate: boolean;
     worldAlpha: number;
     premultipliedColorTl: number;
     premultipliedColorTr: number;

package/dist/src/core/CoreNode.js

@@ -144,7 +144,12 @@ export class CoreNode extends EventEmitter {
     _id = getNewId();
     props;
     isCoreNode = true;
-    _animations = {};
+    /**
+     * Lazily allocated on first `animateProp` call. Animations are rare across
+     * the scene graph, so deferring the object literal avoids per-node GC
+     * pressure during construction.
+     */
+    _animations = null;
     // WebGL Render Op State
     renderOpBufferIdx = 0;
     numQuads = 0;
@@ -185,6 +190,28 @@ export class CoreNode extends EventEmitter {
     isRenderable = false;
     renderState = CoreNodeRenderState.Init;
     isSimple = true;
+    /**
+     * `true` when `localTransform` is in identity-shape (ta=1, tb=0, tc=0, td=1)
+     * — i.e. a pure translation. Lets the simple-path `updateLocalTransform`
+     * skip redundant ta/tb/tc/td writes between frames. Defaults to `true`
+     * because the matrix is eagerly allocated as an identity in the constructor.
+     */
+    _localIsTranslate = true;
+    /**
+     * Cached result of the texture `contain` resizeMode check used by
+     * `updateLocalTransform` and `updateIsSimple`. Updated whenever the
+     * texture or textureOptions change (via `updateIsSimple`), so the hot
+     * paths can avoid the optional-chain + string compare on every frame.
+     */
+    _hasContainResize = false;
+    /**
+     * `true` when `globalTransform` is in identity-shape (ta=1, tb=0, tc=0, td=1).
+     * Propagates from parent: a node's global is translate-only iff the parent's
+     * global is translate-only AND the node itself is `isSimple`. Default `true`
+     * because freshly-constructed nodes have no transform applied yet, and the
+     * Stage root is configured with an identity-shape global.
+     */
+    _globalIsTranslate = true;
     worldAlpha = 1;
     premultipliedColorTl = 0;
     premultipliedColorTr = 0;
@@ -205,6 +232,12 @@ export class CoreNode extends EventEmitter {
     constructor(stage, props) {
         super();
         this.stage = stage;
+        // Eagerly allocate the local/global transform matrices as identity.
+        // This keeps the field's hidden class monomorphic (Matrix3d, not
+        // Matrix3d|undefined) from construction onward and lets the simple
+        // / translate-only fast paths take effect on the very first update.
+        this.localTransform = Matrix3d.identity();
+        this.globalTransform = Matrix3d.identity();
         //inital update type
         let initialUpdateType = UpdateType.Local | UpdateType.RenderBounds | UpdateType.RenderState;
         // Use the incoming props object directly — resolveNodeDefaults already
@@ -421,28 +454,54 @@ export class CoreNode extends EventEmitter {
         const p = this.props;
         const { x, y } = p;
         if (this.isSimple) {
+            // Fast path: when localTransform is already in identity-shape
+            // (ta=1, tb=0, tc=0, td=1), only tx/ty change between frames, so we
+            // skip the 4 redundant field writes Matrix3d.translate would do.
+            // _localIsTranslate becomes stale when a node was non-simple (had
+            // rotation/scale/mount) on a previous frame — in that case do a
+            // full reset to identity-translate.
+            if (this._localIsTranslate === true) {
+                this.localTransform.setTranslate(x, y);
+                return;
+            }
             this.localTransform = Matrix3d.translate(x, y, this.localTransform);
+            this._localIsTranslate = true;
             return;
         }
         const { w, h } = p;
         const mountTranslateX = p.mountX * w;
         const mountTranslateY = p.mountY * h;
-        if (p.rotation !== 0 || p.scaleX !== 1 || p.scaleY !== 1) {
-            const scaleRotate = Matrix3d.rotate(p.rotation, Matrix3d.temp).scale(p.scaleX, p.scaleY);
+        const rotation = p.rotation;
+        const scaleX = p.scaleX;
+        const scaleY = p.scaleY;
+        if (rotation !== 0) {
+            // Full rotation (+ optional scale + pivot)
+            const scaleRotate = Matrix3d.rotate(rotation, Matrix3d.temp).scale(scaleX, scaleY);
             const pivotTranslateX = p.pivotX * w;
             const pivotTranslateY = p.pivotY * h;
             this.localTransform = Matrix3d.translate(x - mountTranslateX + pivotTranslateX, y - mountTranslateY + pivotTranslateY, this.localTransform)
                 .multiply(scaleRotate)
                 .translate(-pivotTranslateX, -pivotTranslateY);
         }
+        else if (scaleX !== 1 || scaleY !== 1) {
+            // Scale (+ optional pivot) without rotation — skip the rotate matrix
+            // and the 8-mul multiply; `.scale()` is a 4-mul in-place op.
+            const pivotTranslateX = p.pivotX * w;
+            const pivotTranslateY = p.pivotY * h;
+            this.localTransform = Matrix3d.translate(x - mountTranslateX + pivotTranslateX, y - mountTranslateY + pivotTranslateY, this.localTransform)
+                .scale(scaleX, scaleY)
+                .translate(-pivotTranslateX, -pivotTranslateY);
+        }
         else {
+            // Mount (or texture-contain) only — pure translation.
             this.localTransform = Matrix3d.translate(x - mountTranslateX, y - mountTranslateY, this.localTransform);
         }
-        // Handle 'contain' resize mode
+        // Handle 'contain' resize mode (cached check; dimensions still need
+        // a runtime null-check because they're populated asynchronously).
         const texture = p.texture;
-        if (texture &&
-            texture.dimensions &&
-            p.textureOptions.resizeMode?.type === 'contain') {
+        if (this._hasContainResize === true &&
+            texture !== null &&
+            texture.dimensions !== null) {
             let resizeModeScaleX = 1;
             let resizeModeScaleY = 1;
             let extraX = 0;
@@ -473,16 +532,21 @@ export class CoreNode extends EventEmitter {
                 .translate(extraX, extraY)
                 .scale(resizeModeScaleX, resizeModeScaleY);
         }
+        this._localIsTranslate = false;
     }
     updateIsSimple() {
         const p = this.props;
+        // Cache the texture-contain check so updateLocalTransform doesn't have to
+        // run the optional-chain + string compare on every Local update.
+        this._hasContainResize =
+            p.texture !== null && p.textureOptions?.resizeMode?.type === 'contain';
         this.isSimple =
             p.rotation === 0 &&
                 p.scaleX === 1 &&
                 p.scaleY === 1 &&
                 p.mountX === 0 &&
                 p.mountY === 0 &&
-                !(p.texture && p.textureOptions.resizeMode?.type === 'contain');
+                this._hasContainResize === false;
     }
     /**
      * @todo: test for correct calculation flag
@@ -515,15 +579,20 @@ export class CoreNode extends EventEmitter {
             this.hasRTTupdates = true;
         }
         if (updateType & UpdateType.Global) {
+            const lt = this.localTransform;
+            const gt = this.globalTransform;
+            let fastPathApplied = false;
             if (USE_RTT &&
                 this.parentHasRenderTexture === true &&
                 parent.rtt === true) {
                 // we are at the start of the RTT chain, so we need to reset the globalTransform
                 // for correct RTT rendering
-                this.globalTransform = Matrix3d.identity(this.globalTransform);
+                Matrix3d.identity(gt);
                 // Maintain a full scene global transform for bounds detection
                 const parentTransform = parent.globalTransform || Matrix3d.identity(Matrix3d.temp);
-                this.sceneGlobalTransform = Matrix3d.copy(parentTransform, this.sceneGlobalTransform).translateOrMultiply(this.localTransform);
+                this.sceneGlobalTransform = Matrix3d.copy(parentTransform, this.sceneGlobalTransform).translateOrMultiply(lt);
+                // identity * local => translate-only iff this node is simple
+                this._globalIsTranslate = this.isSimple;
             }
             else if (USE_RTT &&
                 this.parentHasRenderTexture === true &&
@@ -531,18 +600,44 @@ export class CoreNode extends EventEmitter {
                 // we're part of an RTT chain but our parent is not the main RTT node
                 // so we need to propogate the sceneGlobalTransform of the parent
                 // to maintain a full scene global transform for bounds detection
-                const parentSceneTransform = parent.sceneGlobalTransform || this.localTransform;
-                this.sceneGlobalTransform = Matrix3d.copy(parentSceneTransform, this.sceneGlobalTransform).translateOrMultiply(this.localTransform);
-                this.globalTransform = Matrix3d.copy(parent.globalTransform || this.localTransform, this.globalTransform);
+                const parentSceneTransform = parent.sceneGlobalTransform || lt;
+                this.sceneGlobalTransform = Matrix3d.copy(parentSceneTransform, this.sceneGlobalTransform).translateOrMultiply(lt);
+                Matrix3d.copy(parent.globalTransform, gt);
+                // Conservative: RTT chains rarely hit the translate fast path
+                this._globalIsTranslate = false;
             }
             else {
-                this.globalTransform = Matrix3d.copy(parent.globalTransform || this.localTransform, this.globalTransform);
-            }
-            if (this.isSimple) {
-                this.globalTransform.translate(this.localTransform.tx, this.localTransform.ty);
+                // Common non-RTT path
+                const parentGT = parent.globalTransform;
+                if (this.isSimple === true && parent._globalIsTranslate === true) {
+                    // Translate-only fast path: parent global and local are both pure
+                    // translations, so the resulting global is also a pure translation
+                    // and collapses to 2 adds on tx/ty.
+                    if (this._globalIsTranslate === false) {
+                        // Transitioning back into translate-only — reset ta/tb/tc/td
+                        // that may have been left non-identity by a prior frame.
+                        gt.ta = 1;
+                        gt.tb = 0;
+                        gt.tc = 0;
+                        gt.td = 1;
+                    }
+                    gt.setTranslate(parentGT.tx + lt.tx, parentGT.ty + lt.ty);
+                    this._globalIsTranslate = true;
+                    fastPathApplied = true;
+                }
+                else {
+                    Matrix3d.copy(parentGT, gt);
+                    this._globalIsTranslate =
+                        this.isSimple === true && parent._globalIsTranslate === true;
+                }
             }
-            else {
-                this.globalTransform.translateOrMultiply(this.localTransform);
+            if (fastPathApplied === false) {
+                if (this.isSimple) {
+                    gt.translate(lt.tx, lt.ty);
+                }
+                else {
+                    gt.translateOrMultiply(lt);
+                }
             }
             this.calculateRenderCoords();
             this.updateBoundingRect();
@@ -637,15 +732,31 @@ export class CoreNode extends EventEmitter {
             if (USE_RTT && this.rtt === true) {
                 childClippingRect = NO_CLIPPING_RECT;
             }
-            for (let i = 0, length = this.children.length; i < length; i++) {
-                const child = this.children[i];
-                if (childUpdateType !== 0) {
+            const children = this.children;
+            const length = children.length;
+            if (childUpdateType !== 0) {
+                // Specialized loop: OR-in the inherited update bits for every child,
+                // then update if non-zero. Avoids the per-iter `childUpdateType !== 0`
+                // compare.
+                for (let i = 0; i < length; i++) {
+                    const child = children[i];
                     child.updateType |= childUpdateType;
+                    if (child.updateType === 0) {
+                        continue;
+                    }
+                    child.update(delta, childClippingRect);
                 }
-                if (child.updateType === 0) {
-                    continue;
+            }
+            else {
+                // Specialized loop: nothing to inherit, so only walk children that
+                // already have pending work of their own.
+                for (let i = 0; i < length; i++) {
+                    const child = children[i];
+                    if (child.updateType === 0) {
+                        continue;
+                    }
+                    child.update(delta, childClippingRect);
                 }
-                child.update(delta, childClippingRect);
             }
         }
         // If the node has an RTT parent and requires a texture re-render, inform the RTT parent
@@ -735,7 +846,7 @@ export class CoreNode extends EventEmitter {
             this.globalTransform);
         const renderCoords = (this.sceneRenderCoords ||
             this.renderCoords);
-        if (transform.tb === 0 || transform.tc === 0) {
+        if (transform.tb === 0 && transform.tc === 0) {
             this.renderBound = createBound(renderCoords.x1, renderCoords.y1, renderCoords.x3, renderCoords.y3, this.renderBound);
         }
         else {
@@ -1782,31 +1893,41 @@ export class CoreNode extends EventEmitter {
         return createAnimation(this.stage.animationManager, this, props, settings);
     }
     animateProp(name, value, settings) {
-        const existing = this._animations[name];
-        if (existing && existing.settings === settings) {
-            const controller = existing.controller;
-            const values = controller.props ? controller.props[name] : null;
-            if (values) {
-                values.start = this[name] ?? 0;
-                values.target = value;
-                controller.progress = 0;
-                if (settings.adaptiveDuration === true) {
-                    const now = performance.now();
-                    const elapsed = now - controller.lastRunTime;
-                    controller.lastRunTime = now;
-                    const duration = settings.duration ?? controller.duration;
-                    controller.duration = elapsed < duration ? elapsed : duration;
+        let animations = this._animations;
+        if (animations !== null) {
+            const existing = animations[name];
+            if (existing && existing.settings === settings) {
+                const controller = existing.controller;
+                const values = controller.props ? controller.props[name] : null;
+                if (values) {
+                    values.start = this[name] ?? 0;
+                    values.target = value;
+                    controller.progress = 0;
+                    if (settings.adaptiveDuration === true) {
+                        const now = performance.now();
+                        const elapsed = now - controller.lastRunTime;
+                        controller.lastRunTime = now;
+                        const duration = settings.duration ?? controller.duration;
+                        controller.duration = elapsed < duration ? elapsed : duration;
+                    }
+                    return controller.start();
                 }
-                return controller.start();
             }
         }
+        else {
+            animations = this._animations = {};
+        }
         const animationProps = { [name]: value };
         const controller = createAnimation(this.stage.animationManager, this, animationProps, settings);
-        this._animations[name] = { controller, settings };
+        animations[name] = { controller, settings };
         return controller.start();
     }
     animateToTarget(prop) {
-        const animation = this._animations[prop];
+        const animations = this._animations;
+        if (animations === null) {
+            return undefined;
+        }
+        const animation = animations[prop];
         if (!animation) {
             return undefined;
         }