refactor(material/mesh/shader): refactor material set modelMatrix and…

… fix vert/frag bug

example/index.html

@@ -29,6 +29,7 @@
 			<div class="Section">Mesh</div>
 			<a class="Example" href="https://gengine-js.github.io/GEngine/example/mesh/axes.html">Axes</a>
 			<a class="Example" href="https://gengine-js.github.io/GEngine/example/mesh/skybox.html">SkyBox</a>
+			<a class="Example" href="https://gengine-js.github.io/GEngine/example/mesh/instance.html">InstanceMesh</a>
 			<div class="Section">Materials</div>
 			<a class="Example" href="https://gengine-js.github.io/GEngine/example/material/blinn-phongMaterial.html"
 				>Blinn-PhongMaterial</a

example/mesh/instance.html

@@ -48,6 +48,7 @@
 				Scene,
 				ShaderMaterial,
 				Vector3,
+				// Matrix4,
 				Color,
 				OrbitControl,
 				AmbientLight,

src/material/BillboardMaterial.ts

@@ -1,3 +1,5 @@
+import { FrameState } from "../core/FrameState";
+import textureCache from "../core/TextureCache";
 import { Mesh } from "../mesh/Mesh";
 import UniformBuffer from "../render/UniformBuffer";
 import { UniformEnum } from "../render/Uniforms";
@@ -8,22 +10,24 @@ export class BillboardMaterial extends Material {
 		super();
 		this.type = "billboard";
 	}
+	update(frameState?: FrameState, mesh?: Mesh) {
+		if (!this.shaderData || this.dirty) this.createShaderData(mesh);
+	}
 	protected createShaderData(mesh?: Mesh) {
-		super.createShaderData(mesh);
+		super.createShaderData();
 		const uniformBuffer = new UniformBuffer({ label: "billboard" });
 		uniformBuffer.setUniform(
 			"modelMatrix",
 			() => {
-				return null;
+				return mesh.modelMatrix;
 			},
 			UniformEnum.Mat4
 		);
 		uniformBuffer.setUniform("color", this, UniformEnum.Color);
-		uniformBuffer.setUniform("opacity", this, UniformEnum.Float);
 		uniformBuffer.setUniform("rotation", this, UniformEnum.Float);
 		uniformBuffer.setUniform("center", this, UniformEnum.FloatVec2);
-		uniformBuffer.setUniform("specular", this, UniformEnum.Color);
-		this.shaderData.setUniformBuffer("phong", uniformBuffer);
+		uniformBuffer.setUniform("opacity", this, UniformEnum.Float);
+		this.shaderData.setUniformBuffer("billboard", uniformBuffer);
 		if (this.baseTexture) {
 			this.shaderData.setDefine("USE_COLORTEXTURE", true);
 			this.shaderData.setTexture("baseColorTexture", this.baseTexture);

src/material/BlinnPhongMaterial.ts

@@ -30,16 +30,16 @@ export default class BlinnPhongMaterial extends Material {
 		this.baseTexture = undefined;
 		this.baseSampler = undefined;
 	}
-	update(frameState: FrameState, mesh: Mesh) {
+	update(frameState?: FrameState, mesh?: Mesh) {
 		if (!this.shaderData || this.dirty) this.createShaderData(mesh);
 	}
 	protected createShaderData(mesh?: Mesh) {
-		super.createShaderData(mesh);
+		super.createShaderData();
 		const uniformBuffer = new UniformBuffer({ label: "phong" });
 		uniformBuffer.setUniform(
 			"modelMatrix",
 			() => {
-				return null;
+				return mesh.modelMatrix;
 			},
 			UniformEnum.Mat4
 		);

src/material/ColorMaterial.ts

@@ -14,13 +14,13 @@ export default class ColorMaterial extends Material {
 			defines: {}
 		});
 	}
-	update(frameState: FrameState, mesh: Mesh) {
-		if (!this.shaderData || this.dirty) this.createShaderData(mesh);
+	update(frameState?: FrameState, mesh?: Mesh) {
+		if (!this.shaderData || this.dirty) this.createShaderData();
 		const uniformBuffer = new UniformBuffer({ label: "color" });
 		uniformBuffer.setUniform(
 			"modelMatrix",
 			() => {
-				return null;
+				return mesh.modelMatrix;
 			},
 			UniformEnum.Mat4
 		);

src/material/Material.ts

@@ -100,14 +100,20 @@ export class Material {
 	public set opacity(v: number) {
 		this._opacity = v;
 	}
-	onBeforeRender() {}
+	onBeforeRender() {
+		// callback
+	}
 
-	onBeforeCompile() {}
+	onBeforeCompile() {
+		// callback
+	}
 	clone(): Material {
 		return null;
 	}
-	update(frameState?: FrameState, mesh?: Mesh) {}
-	protected createShaderData(mesh: Mesh, frameState?: FrameState) {
+	update(frameState?: FrameState, mesh?: Mesh) {
+		// update material
+	}
+	protected createShaderData() {
 		if (this.shaderData) this.shaderData.destroy();
 		this.shaderData = new ShaderData(this.type, 0);
 		this.ready = true;

src/material/PbrMaterial.ts

@@ -98,14 +98,14 @@ export default class PbrMaterial extends Material {
 			}
 		});
 	}
-	update(frameState: FrameState, mesh: Mesh) {
+	update(frameState?: FrameState, mesh?: Mesh) {
 		if (!textureCache.getTexture("specular")) return;
 		if (!this.shaderData || this.dirty) {
-			this.createShaderData(mesh, frameState);
+			this.createShaderData(mesh);
 		}
 	}
-	protected createShaderData(mesh: Mesh, frameState?: FrameState) {
-		super.createShaderData(mesh);
+	protected createShaderData(mesh?: Mesh) {
+		super.createShaderData();
 		const uniformBuffer = new UniformBuffer({ label: "pbr" });
 		uniformBuffer.setUniform(
 			"modelMatrix",

src/material/ShaderMaterial.ts

@@ -36,7 +36,7 @@ export default class ShaderMaterial extends Material {
 		return new ShaderMaterial(this.shaderMaterialParms);
 	}
 	protected createShaderData(mesh?: Mesh) {
-		super.createShaderData(mesh);
+		super.createShaderData();
 		const result = checkContainFloatType(this.uniforms);
 		if (result.hasFloat) {
 			this.uniformBuffer = result.hasArraytype
@@ -55,6 +55,7 @@ export default class ShaderMaterial extends Material {
 				this.uniforms[uniformsName],
 				this.uniforms,
 				this.shaderData,
+				mesh,
 				this.uniformBuffer
 			);
 		});

src/material/SkyBoxMaterial.ts

@@ -28,19 +28,19 @@ export default class SkyBoxMaterial extends Material {
 		this.baseTexture = result.texture;
 		this.baseSampler = result.sampler;
 	}
-	update(frameState: FrameState, mesh: Mesh) {
+	update(frameState?: FrameState, mesh?: Mesh) {
 		if (!this.loadFish) return;
 		if (!this.shaderData) {
 			this.createShaderData(mesh);
 		}
 	}
-	protected createShaderData(mesh: Mesh) {
-		super.createShaderData(mesh);
+	protected createShaderData(mesh?: Mesh) {
+		super.createShaderData();
 		const uniformBuffer = new UniformBuffer({ label: "skybox" });
 		uniformBuffer.setUniform(
 			"modelMatrix",
 			() => {
-				return null;
+				return mesh.modelMatrix;
 			},
 			UniformEnum.Mat4
 		);

src/mesh/Billboard.ts

@@ -0,0 +1,18 @@
+import BillboardGeometry from "../geometry/BillboardGeometry";
+import { BillboardMaterial } from "../material/BillboardMaterial";
+import Texture from "../render/Texture";
+import { Mesh } from "./Mesh";
+
+export class Billboard extends Mesh {
+	constructor() {
+		super();
+		this.material = new BillboardMaterial();
+		this.geometry = new BillboardGeometry();
+	}
+	setTexture(texture: Texture) {
+		this.material.baseTexture = texture;
+	}
+	// set center(){
+
+	// }
+}

src/mesh/InstanceMesh.ts

@@ -19,11 +19,10 @@ export class InstanceMesh extends Mesh {
 		this.hasAddInstances = false;
 	}
 	update(frameState: FrameState, camera?: Camera) {
-		// create
-		this.geometry.update(frameState);
-		this.material.update(frameState, this);
 		// update instances visiblity
 		this.checkInstancesVisiblity({ frameState, camera });
+		this.geometry.update(frameState);
+		this.material.update(frameState, this);
 		if (!this.hasAddInstances) this.addUniformsToMaterial();
 		this.instanceCount = this.renderInstances.length;
 		if (this.renderInstances.length < 1) return;
@@ -45,11 +44,16 @@ export class InstanceMesh extends Mesh {
 	}
 	private checkInstancesVisiblity(options: { frameState: FrameState; camera: Camera }) {
 		const { frameState, camera } = options;
+		const preFrameInstanceCount = this.renderInstances.length;
+		this.renderInstances = [];
 		this.instances.forEach((instance: Instance) => {
 			instance.updateMatrix(this?.parent?.modelMatrix);
 			instance.visiblity = this.getInstanceVisiblity({ instance, frameState, camera });
 			if (instance.visiblity) this.renderInstances.push(instance);
 		});
+		this.material.dirty = this.renderInstances.length === preFrameInstanceCount;
+		// rebuild instanceMatrixsBuffer
+		if (this.material.dirty) this.hasAddInstances = false;
 	}
 	private getInstanceVisiblity(options: { instance: Instance; frameState: FrameState; camera: Camera }): boolean {
 		const { instance, frameState, camera } = options;

src/mesh/Mesh.ts

@@ -11,18 +11,20 @@ import createGuid from "../utils/createGuid";
 export class Mesh extends RenderObject {
 	[x: string]: any;
 	uid: string;
+	frustumCull: boolean;
+	subCommands: { [prop: string]: DrawCommand };
 	geometry?: Geometry;
 	material?: Material;
 	instanceCount?: number;
 	priority?: number;
 	drawCommand?: DrawCommand;
-	subCommands: { [prop: string]: DrawCommand };
 	distanceToCamera?: number;
 	constructor(geometry?: Geometry, material?: Material) {
 		super();
 		this.geometry = geometry;
 		this.material = material;
 		this.type = RenderObjectType.Mesh;
+		this.frustumCull = true;
 		this.uid = createGuid();
 		this.subCommands = {};
 	}
@@ -53,12 +55,16 @@ export class Mesh extends RenderObject {
 			frameState.renderQueue.opaque.push(this);
 		}
 	}
-	beforeRender() {}
-	afterRender() {}
+	beforeRender() {
+		// before render
+	}
+	afterRender() {
+		// after render
+	}
 	public getDrawCommand(overrideMaterial?: Material, commandSubType?: CommandSubType, lightManger?: LightManger) {
 		if (!this.drawCommand || this.material.dirty) {
 			this.material.shaderSource.setDefines(
-				Object.assign(this.material.shaderData.defines, this.geometry.defines)
+				Object.assign({}, this.material.shaderData.defines, this.geometry.defines)
 			);
 			if (this.material.dirty) this.material.dirty = false;
 			this.drawCommand = new DrawCommand({
@@ -78,8 +84,7 @@ export class Mesh extends RenderObject {
 		if (overrideMaterial) {
 			if (!this.subCommands[commandSubType]) {
 				const copyMat = overrideMaterial.clone();
-				overrideMaterial.update();
-				copyMat.update();
+				copyMat.update(undefined, this);
 				if (copyMat.dirty) copyMat.dirty = false;
 				this.subCommands[commandSubType] = this.drawCommand.shallowClone(copyMat);
 			}

src/render/DrawCommand.ts

@@ -91,7 +91,6 @@ class DrawCommand implements Command {
 	public render(context?: Context, passEncoder?: GPURenderPassEncoder, camera?: Camera): void {
 		const {
 			shaderData,
-			modelMatrix,
 			renderState,
 			vertexBuffer,
 			indexBuffer,
@@ -105,8 +104,6 @@ class DrawCommand implements Command {
 		const defines = Object.assign({}, lightShaderData?.defines ?? {}, camera?.shaderData?.defines ?? {});
 		const { device } = context;
 
-		if (modelMatrix) shaderData?.replaceUniformBufferValue?.("modelMatrix", modelMatrix);
-
 		shaderData?.bind?.(context, currentPassEncoder);
 
 		camera?.shaderData?.bind(context, currentPassEncoder);

src/shader/Shaders.ts

@@ -1,26 +1,28 @@
-import ShaderChunk from "./shaderChunk/ShaderChunk";
-import phongVert from "./material/phongVert";
-import phongFrag from "./material/phongFrag";
+import { billboard_fs } from "./material/billboard_fs";
+import { billboard_vs } from "./material/billboard_vs";
 import colorFrag from "./material/colorFrag";
 import colorVert from "./material/colorVert";
+import pbr_fs from "./material/pbr_fs";
+import pbr_vs from "./material/pbr_vs";
 import pbrFrag from "./material/pbrFrag";
 import pbrVert from "./material/pbrVert";
-import skyBoxFrag from "./material/skyBoxFrag";
-import skyBoxVert from "./material/skyBoxVert";
+import phongFrag from "./material/phongFrag";
+import phongVert from "./material/phongVert";
 import quadFrag from "./material/quadFrag";
 import quadVert from "./material/quadVert";
-import pbr_vs from "./material/pbr_vs";
-import pbr_fs from "./material/pbr_fs";
+import skyBoxFrag from "./material/skyBoxFrag";
+import skyBoxVert from "./material/skyBoxVert";
+import blendFrag from "./postProcess/blend/blendFrag";
 import Blur from "./postProcess/bloom/Blur";
 import LuminosityHigh from "./postProcess/bloom/LuminosityHigh";
-import blendFrag from "./postProcess/blend/blendFrag";
+import ShaderChunk from "./shaderChunk/ShaderChunk";
 import shadowMapDebuggerFrag from "./shaderChunk/shadow/shadowMapDebuggerFrag";
 import shadowMapDebuggerVert from "./shaderChunk/shadow/shadowMapDebuggerVert";
-import shadowMapVert from "./shaderChunk/shadow/shadowMapVert";
 import shadowMapFrag from "./shaderChunk/shadow/shadowMapFrag";
+import shadowMapVert from "./shaderChunk/shadow/shadowMapVert";
 
 function reduceComma(shader) {
-	//对所有的include处理
+	// 对所有的include处理
 	const str = resolveIncludes(shader);
 	return str;
 }
@@ -70,6 +72,10 @@ const shaders = {
 	shadowMap: {
 		vert: shadowMapVert,
 		frag: shadowMapFrag
+	},
+	billboard: {
+		vert: billboard_vs,
+		frag: billboard_fs
 	}
 };