feat: 将 HumanBreak 新内容移植入该样板

packages/render-core/package.json

@@ -1,6 +1,7 @@
 {
     "name": "@motajs/render-core",
     "dependencies": {
-        "@motajs/common": "workspace:*"
+        "@motajs/common": "workspace:*",
+        "@motajs/render-assets": "workspace:*"
     }
-}
+}

packages/render-core/src/gl2.ts

@@ -4,7 +4,7 @@ import { MotaOffscreenCanvas2D } from './canvas2d';
 import { ERenderItemEvent, RenderItem, RenderItemPosition } from './item';
 import { Transform } from './transform';
 import { isWebGL2Supported } from './utils';
-import { SizedCanvasImageSource } from './types';
+import { SizedCanvasImageSource } from '@motajs/render-assets';
 
 export interface IGL2ProgramPrefix {
     readonly VERTEX: string;
@@ -1237,7 +1237,7 @@ export class GL2Program extends EventEmitter<ShaderProgramEvent> {
     }
 
     /**
-     * 设置渲染模式，目前可选 {@link Shader.DRAW_ARRAYS} 至 {@link Shader.DRAW_INSTANCED}
+     * 设置渲染模式，目前可选 {@link GL2.DRAW_ARRAYS} 至 {@link GL2.DRAW_INSTANCED}
      */
     mode(mode: RenderMode) {
         this.renderMode = mode;

packages/render-core/src/index.ts

@@ -8,5 +8,4 @@ export * from './render';
 export * from './shader';
 export * from './sprite';
 export * from './transform';
-export * from './types';
 export * from './utils';

packages/render-core/src/item.ts

@@ -225,7 +225,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
         IRenderTickerSupport,
         IRenderChildable,
         IRenderVueSupport,
-        ITransformUpdatable,
+        ITransformUpdatable<Transform>,
         IRenderEvent
 {
     /** 渲染的全局ticker */
@@ -301,7 +301,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
     /** 该元素的变换矩阵 */
     private _transform: Transform = new Transform();
     set transform(value: Transform) {
-        this._transform.bind();
+        this._transform.unbind(this);
         this._transform = value;
         value.bind(this);
     }
@@ -671,10 +671,12 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
         }
     }
 
-    updateTransform() {
+    updateTransform(transform: Transform) {
         // 更新变换矩阵时，不需要更新自身的缓存，直接调用父元素的更新即可
-        this._parent?.update();
-        this.emit('transform', this, this._transform);
+        if (transform === this.transform) {
+            this._parent?.update();
+            this.emit('transform', this, this._transform);
+        }
     }
 
     //#endregion
@@ -796,7 +798,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
         this._parent = void 0;
         parent.requestSort();
         parent.update();
-        this._transform.bind();
+        this._transform.unbind(this);
         if (!success) return false;
         this._root?.disconnect(this);
         this._root = void 0;

packages/render-core/src/transform.ts

@@ -1,7 +1,11 @@
 import { mat3, mat4, ReadonlyMat3, ReadonlyVec3, vec2, vec3 } from 'gl-matrix';
 
-export interface ITransformUpdatable {
-    updateTransform?(): void;
+export interface ITransformUpdatable<T> {
+    /**
+     * 当变换矩阵更新时触发
+     * @param transform 触发更新的变换矩阵
+     */
+    updateTransform(transform: T): void;
 }
 
 export class Transform {
@@ -17,14 +21,26 @@ export class Transform {
     private modified: boolean = false;
 
     /** 绑定的可更新元素 */
-    bindedObject?: ITransformUpdatable;
+    bindedObject: Set<ITransformUpdatable<Transform>> = new Set();
 
     /**
      * 对这个变换实例添加绑定对象，当矩阵变换时，自动调用其 update 函数
      * @param obj 要绑定的对象
      */
-    bind(obj?: ITransformUpdatable) {
-        this.bindedObject = obj;
+    bind(obj: ITransformUpdatable<Transform>) {
+        this.bindedObject.add(obj);
+    }
+
+    /**
+     * 取消对象的绑定
+     * @param obj 要取消绑定的对象
+     */
+    unbind(obj: ITransformUpdatable<Transform>) {
+        this.bindedObject.delete(obj);
+    }
+
+    private emitUpdate() {
+        this.bindedObject.forEach(v => v.updateTransform(this));
     }
 
     /**
@@ -38,7 +54,7 @@ export class Transform {
         this.scaleY = 1;
         this.rad = 0;
         this.modified = false;
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
     }
 
     /**
@@ -49,7 +65,7 @@ export class Transform {
         this.scaleX *= x;
         this.scaleY *= y;
         this.modified = true;
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -61,7 +77,7 @@ export class Transform {
         this.x += x;
         this.y += y;
         this.modified = true;
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -76,7 +92,7 @@ export class Transform {
             this.rad -= n * Math.PI * 2;
         }
         this.modified = true;
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -88,7 +104,7 @@ export class Transform {
         this.scaleX = x;
         this.scaleY = y;
         this.modified = true;
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -100,7 +116,7 @@ export class Transform {
         this.x = x;
         this.y = y;
         this.modified = true;
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -111,7 +127,7 @@ export class Transform {
         mat3.rotate(this.mat, this.mat, rad - this.rad);
         this.rad = rad;
         this.modified = true;
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -138,7 +154,7 @@ export class Transform {
             mat3.fromValues(a, b, 0, c, d, 0, e, f, 1)
         );
         this.calAttributes();
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -161,7 +177,7 @@ export class Transform {
     ): this {
         mat3.set(this.mat, a, b, 0, c, d, 0, e, f, 1);
         this.calAttributes();
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -285,14 +301,26 @@ export class Transform3D {
     mat: mat4 = mat4.create();
 
     /** 绑定的可更新元素 */
-    bindedObject?: ITransformUpdatable;
+    bindedObject: Set<ITransformUpdatable<Transform3D>> = new Set();
 
     /**
-     * 绑定可更新对象
+     * 对这个变换实例添加绑定对象，当矩阵变换时，自动调用其 update 函数
      * @param obj 要绑定的对象
      */
-    bind(obj?: ITransformUpdatable) {
-        this.bindedObject = obj;
+    bind(obj: ITransformUpdatable<Transform3D>) {
+        this.bindedObject.add(obj);
+    }
+
+    /**
+     * 取消对象的绑定
+     * @param obj 要取消绑定的对象
+     */
+    unbind(obj: ITransformUpdatable<Transform3D>) {
+        this.bindedObject.delete(obj);
+    }
+
+    private emitUpdate() {
+        this.bindedObject.forEach(v => v.updateTransform(this));
     }
 
     /**
@@ -300,7 +328,7 @@ export class Transform3D {
      */
     reset(): this {
         mat4.identity(this.mat);
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -312,7 +340,7 @@ export class Transform3D {
      */
     scale(x: number, y: number, z: number): this {
         mat4.scale(this.mat, this.mat, [x, y, z]);
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -324,7 +352,7 @@ export class Transform3D {
      */
     translate(x: number, y: number, z: number): this {
         mat4.translate(this.mat, this.mat, [x, y, z]);
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -335,7 +363,7 @@ export class Transform3D {
      */
     rotate(rad: number, axis: vec3): this {
         mat4.rotate(this.mat, this.mat, rad, axis);
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -371,7 +399,7 @@ export class Transform3D {
      */
     lookAt(eye: vec3, center: vec3, up: vec3): this {
         mat4.lookAt(this.mat, eye, center, up);
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -384,7 +412,7 @@ export class Transform3D {
      */
     perspective(fovy: number, aspect: number, near: number, far: number): this {
         mat4.perspective(this.mat, fovy, aspect, near, far);
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 
@@ -406,7 +434,7 @@ export class Transform3D {
         far: number
     ): this {
         mat4.ortho(this.mat, left, right, bottom, top, near, far);
-        this.bindedObject?.updateTransform?.();
+        this.emitUpdate();
         return this;
     }
 

packages/render-core/src/types.ts

@@ -1,6 +0,0 @@
-export type SizedCanvasImageSource = Exclude<
-    CanvasImageSource,
-    VideoFrame | SVGElement
->;
-
-export type CanvasStyle = string | CanvasGradient | CanvasPattern;