refactor(material/mesh): refactor sprite

src/material/SpriteMaterial.ts

@@ -1,16 +1,12 @@
 import { FrameState } from "../core/FrameState";
 import textureCache from "../core/TextureCache";
 import { UniformEnum } from "../core/WebGPUTypes";
-import Color from "../math/Color";
-import Vector2 from "../math/Vector2";
 import { Mesh } from "../mesh/Mesh";
 import UniformBuffer from "../render/UniformBuffer";
 import { ShaderSource } from "../shader/ShaderSource";
 import { Material } from "./Material";
 
 export class SpriteMaterial extends Material {
-	public rotation: number;
-	public center: Vector2;
 	constructor() {
 		super();
 		this.type = "sprite";
@@ -20,10 +16,6 @@ export class SpriteMaterial extends Material {
 				HAS_UV: true
 			}
 		});
-		this.rotation = Math.PI;
-		this.opacity = 1;
-		this.center = new Vector2(0, 0);
-		this.color = new Color(1, 0, 0);
 	}
 	update(frameState?: FrameState, mesh?: Mesh) {
 		if (!this.shaderData || this.dirty) this.createShaderData(mesh);
@@ -38,10 +30,10 @@ export class SpriteMaterial extends Material {
 			},
 			UniformEnum.Mat4
 		);
-		uniformBuffer.setUniform("color", this, UniformEnum.Color);
-		uniformBuffer.setUniform("rotation", this, UniformEnum.Float);
-		uniformBuffer.setUniform("center", this, UniformEnum.FloatVec2);
-		uniformBuffer.setUniform("opacity", this, UniformEnum.Float);
+		uniformBuffer.setUniform("color", mesh, UniformEnum.Color);
+		uniformBuffer.setUniform("rotation", mesh, UniformEnum.Float);
+		uniformBuffer.setUniform("center", mesh, UniformEnum.FloatVec2);
+		uniformBuffer.setUniform("opacity", mesh, UniformEnum.Float);
 		this.shaderData.setUniformBuffer("sprite", uniformBuffer);
 		if (this.baseTexture) {
 			this.shaderData.setDefine("USE_COLORTEXTURE", true);

src/mesh/Sprite.ts

@@ -1,14 +1,24 @@
 import { SpriteGeometry } from "../geometry/SpriteGeometry";
 import { SpriteMaterial } from "../material/SpriteMaterial";
+import Color from "../math/Color";
+import Vector2 from "../math/Vector2";
 import Sampler from "../render/Sampler";
 import Texture from "../render/Texture";
 import { Mesh } from "./Mesh";
 
 export class Sprite extends Mesh {
+	public rotation: number;
+	public center: Vector2;
+	public color: Color;
+	public opacity: number;
 	constructor() {
 		super();
 		this.material = new SpriteMaterial();
 		this.geometry = new SpriteGeometry();
+		this.rotation = Math.PI;
+		this.opacity = 1;
+		this.center = new Vector2(0, 0);
+		this.color = new Color(1, 0, 0);
 	}
 	setTexture(texture: Texture) {
 		this.material.baseTexture = texture;

src/render/UniformBuffer.ts

@@ -160,6 +160,9 @@ export default class UniformBuffer {
 		if (!uniform) return;
 		uniform.cb = value;
 	}
+	getUniformByName(name: string) {
+		return this._uniformStruct.get(name);
+	}
 	// uniformBuffer.setVec3Array('test',()=>{return [new Vector3(1,0,0),new Vector3(1,0.8,0.5)]},2);
 	// uniformBuffer.setFloatArray('test1',()=>{return [0.5,0.5,1.0]},3);
 	// uniformBuffer.setVec4Array('test4',()=>{return [new Vector4(0.5,0.6,0.2,1.0),new Vector4(0.5,0.8,0.8,1.0)]},2);
@@ -175,6 +178,12 @@ export default class UniformBuffer {
 		this._uniformStruct.set(name, uniform);
 		this.byteOffset += uniform.byteSize;
 	}
+	setUniformsFromUniformBuffer(uniformBuffer: UniformBuffer) {
+		this._uniformStruct.forEach((value, key) => {
+			const uniform = uniformBuffer.getUniformByName(key);
+			if (uniform) this._uniformStruct.set(key, uniform);
+		});
+	}
 	static checkUniformOffset(byteSize: number, Align: number): number {
 		// from https://gpuweb.github.io/gpuweb/wgsl/#address-space-layout-constraints
 		// return this.hasDynamicOffset