Skip to content

Commit

Permalink
feat: add transform depth order
Browse files Browse the repository at this point in the history 
add transform depth order
  • Loading branch information
@ZenderJK
ZenderJK committed Aug 2, 2023
1 parent 8bfca84 commit bf40831
Show file tree
Hide file tree
Showing 9 changed files with 164 additions and 78 deletions.
46 changes: 24 additions & 22 deletions packages/wasm-matrix/WasmMatrix.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,8 @@ export class WasmMatrix {
static matrixContinuedSRTBufferPtr: number;
static matrixStateBufferPtr: number;
static wasm: any;
static stateStruct: number = 4;

// if (!Module['workerID']) {
// console.log("is mamin");
// window[0]['wasmMatrix'] = Module;
// }
public static async isReady(): Promise<boolean> {
return new Promise(
(suc, fail) => {
Expand Down Expand Up @@ -44,7 +41,7 @@ export class WasmMatrix {

public static init(count: number) {
// this.wasm = window['wasmMatrix'];
this.wasm._initialize(count, 16);
this.wasm._initialize(count, 2);

this.matrixBufferPtr = this.wasm._getMatrixBufferPtr();
this.matrixSRTBufferPtr = this.wasm._getSRTPtr();
Expand All @@ -54,18 +51,14 @@ export class WasmMatrix {
this.matrixBuffer = new Float32Array(this.wasm.HEAPF32.buffer, this.matrixBufferPtr, 16 * count);
this.matrixSRTBuffer = new Float32Array(this.wasm.HEAPF32.buffer, this.matrixSRTBufferPtr, (3 * 3) * count);
this.matrixContinuedSRTBuffer = new Float32Array(this.wasm.HEAPF32.buffer, this.matrixContinuedSRTBufferPtr, (3 * 3) * count);
this.matrixStateBuffer = new Int32Array(this.wasm.HEAP32.buffer, this.matrixStateBufferPtr, (2) * count);
this.matrixStateBuffer = new Int32Array(this.wasm.HEAP32.buffer, this.matrixStateBufferPtr, (3) * count);

Matrix4.allocMatrix(count);
}

public static updateAllMatrixTransform(start: number, end: number) {
this.wasm._updateAllMatrixTransform(start, end);
}

public static setParent(matIndex: number, x: number) {
this.matrixStateBuffer[matIndex * 2 + 0] = 0x08;
this.matrixStateBuffer[matIndex * 2 + 1] = x >= 0 ? x : -1;
public static setParent(matIndex: number, x: number, depthOrder: number) {
this.matrixStateBuffer[matIndex * WasmMatrix.stateStruct + 2] = x >= 0 ? x : -1;
this.matrixStateBuffer[matIndex * WasmMatrix.stateStruct + 3] = depthOrder;
}

public static setTranslate(matIndex: number, x: number, y: number, z: number) {
Expand All @@ -91,21 +84,30 @@ export class WasmMatrix {
}

public static setContinueTranslate(matIndex: number, x: number, y: number, z: number) {
this.matrixContinuedSRTBuffer[matIndex * 9 + 6] = x;
this.matrixContinuedSRTBuffer[matIndex * 9 + 7] = y;
this.matrixContinuedSRTBuffer[matIndex * 9 + 8] = z;
if (x != 0 || y != 0 || z != 0) {
this.matrixContinuedSRTBuffer[matIndex * 9 + 6] = x;
this.matrixContinuedSRTBuffer[matIndex * 9 + 7] = y;
this.matrixContinuedSRTBuffer[matIndex * 9 + 8] = z;
this.matrixStateBuffer[matIndex * WasmMatrix.stateStruct + 1] = 1;
}
}

public static setContinueRotation(matIndex: number, x: number, y: number, z: number) {
this.matrixContinuedSRTBuffer[matIndex * 9 + 3] = x;
this.matrixContinuedSRTBuffer[matIndex * 9 + 4] = y;
this.matrixContinuedSRTBuffer[matIndex * 9 + 5] = z;
if (x != 0 || y != 0 || z != 0) {
this.matrixContinuedSRTBuffer[matIndex * 9 + 3] = x;
this.matrixContinuedSRTBuffer[matIndex * 9 + 4] = y;
this.matrixContinuedSRTBuffer[matIndex * 9 + 5] = z;
this.matrixStateBuffer[matIndex * WasmMatrix.stateStruct + 1] = 1;
}
}

public static setContinueScale(matIndex: number, x: number, y: number, z: number) {
this.matrixContinuedSRTBuffer[matIndex * 9 + 0] = x;
this.matrixContinuedSRTBuffer[matIndex * 9 + 1] = y;
this.matrixContinuedSRTBuffer[matIndex * 9 + 2] = z;
if (x != 0 || y != 0 || z != 0) {
this.matrixContinuedSRTBuffer[matIndex * 9 + 0] = x;
this.matrixContinuedSRTBuffer[matIndex * 9 + 1] = y;
this.matrixContinuedSRTBuffer[matIndex * 9 + 2] = z;
this.matrixStateBuffer[matIndex * WasmMatrix.stateStruct + 1] = 1;
}
}

}
13 changes: 6 additions & 7 deletions packages/wasm-matrix/matrix.js
View file

Large diffs are not rendered by default.

Binary file modified packages/wasm-matrix/matrix.wasm
View file
Binary file not shown.
81 changes: 81 additions & 0 deletions samples/benchmark/Sample_Matrix.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { WasmMatrix } from "@orillusion/wasm-matrix/WasmMatrix";
import { Engine3D, Matrix4, Quaternion, Transform, Vector3, append, makeMatrix44 } from "../../src"
import { GUI } from "@orillusion/debug/dat.gui.module";
import { GUIHelp } from "@orillusion/debug/GUIHelp";

class Sample_Matrix {
matrixList: Transform[];
constructor() {

}

public async run() {

GUIHelp.init();

await WasmMatrix.isReady();
await WasmMatrix.init(Matrix4.maxCount);

this.matrixList = [new Transform()];
let count = 300000;

for (let i = 1; i < count; i++) {
const matrix = new Transform();
matrix.parent = this.matrixList[0];
this.matrixList.push(matrix);
}

this.divA = document.createElement("div");
this.divA.style.position = 'absolute'
this.divA.style.color = '#FFFFFF'
document.body.appendChild(this.divA);

this.divB = document.createElement("div");
this.divB.style.position = 'absolute'
this.divB.style.color = '#FFFFFF'
this.divB.style.top = '50px'
document.body.appendChild(this.divB);

this.update();
}

private divA: HTMLElement;
private divB: HTMLElement;

public update() {

for (let i = 1; i < 300000; i++) {
this.matrixList[i].localChange = true;
}

let time = performance.now();
for (let i = 1; i < 300000; i++) {
let mat = this.matrixList[i];
makeMatrix44(Vector3.ZERO, Vector3.ZERO, Vector3.ONE, mat._worldMatrix);
append(mat._worldMatrix, this.matrixList[0]._worldMatrix, mat._worldMatrix);
}

let count = performance.now() - time;
this.divA.innerText = "js: " + count.toString();

for (let i = 1; i < 300000; i++) {
this.matrixList[i].localChange = true;
}

let time2 = performance.now();
WasmMatrix.updateAllContinueTransform(0, 300000, 0);
let count2 = performance.now() - time2;
this.divB.innerText = "wasm :" + count2.toString();
// console.log("wasm :", count2);



requestAnimationFrame(() => this.update());
}
}

new Sample_Matrix().run()

export let makeMat = function (mat: Matrix4) {

}
19 changes: 10 additions & 9 deletions samples/benchmark/Sample_drawCallInstance.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ class Sample_drawCallInstance {

let group = new Object3D();
let count = 30 * 10000;
// let count = 1;

GUIHelp.addFolder('info');
GUIHelp.open();
Expand All @@ -84,7 +85,8 @@ class Sample_drawCallInstance {
let ii = 0;
// let count = 70000;
for (let i = 0; i < count; i++) {
let pos = Vector3Ex.sphereXYZ(ii * 60 + 20, ii * 60 + 100, 100, i * 0.001 + 10, 100);
let pos = Vector3Ex.sphereXYZ(20, 30, 0, 0, 10);
// let pos = Vector3Ex.sphereXYZ(ii * 60 + 20, ii * 60 + 100, 100, i * 0.001 + 10, 100);
// let pos = Vector3Ex.getRandomXYZ(-2, 2);
let obj = new Object3D();
let mr = obj.addComponent(MeshRenderer);
Expand All @@ -94,9 +96,9 @@ class Sample_drawCallInstance {
group.addChild(obj);
this._list.push(obj);

obj.transform.scaleX = Math.random() * 2 + 0.2;
obj.transform.scaleY = Math.random() * 2 + 0.2;
obj.transform.scaleZ = Math.random() * 2 + 0.2;
obj.transform.scaleX = Math.random() * 2 + 10.2;
obj.transform.scaleY = Math.random() * 2 + 10.2;
obj.transform.scaleZ = Math.random() * 2 + 10.2;

obj.transform.rotationX = Math.random() * 360;
obj.transform.rotationY = Math.random() * 360;
Expand Down Expand Up @@ -125,11 +127,10 @@ class Sample_drawCallInstance {
renderLoop() {
if (this.anim) {
let i = 0;
for (let i = 0; i < this._list.length; i++) {
const element = this._list[i];
// element.transform.rotationY += Time.delta * 0.01 * this._rotList[i];
// element.transform._localRot.y += Time.delta * 0.01 * this._rotList[i];
element.transform.localChange = true;
for (i = 0; i < this._list.length; i++) {
let element = this._list[i];
// element.transform.localChange = true;
element.transform.rotationY += 1;
}
}
}
Expand Down
17 changes: 9 additions & 8 deletions src/Engine3D.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -452,13 +452,7 @@ export class Engine3D {
}
webGPUContext.device.queue.submit([command.finish()]);

/* update all transform */
// let views = this.views;
// let i = 0;
// for (i = 0; i < views.length; i++) {
// const view = views[i];
// view.scene.transform.updateChildTransform()
// }




Expand All @@ -479,13 +473,20 @@ export class Engine3D {
this._renderLoop();
}


/* update all transform */
// let views = this.views;
// let i = 0;
// for (i = 0; i < views.length; i++) {
// const view = views[i];
// view.scene.transform.updateChildTransform()
// }
WasmMatrix.updateAllContinueTransform(0, Matrix4.useCount, Time.delta);

/****** auto update global matrix share buffer write to gpu *****/
let globalMatrixBindGroup = GlobalBindGroup.modelMatrixBindGroup;
globalMatrixBindGroup.writeBuffer();


this.renderJobs.forEach((v, k) => {
v.renderFrame();
});
Expand Down
63 changes: 33 additions & 30 deletions src/components/Transform.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,15 +104,10 @@ export class Transform extends ComponentBase {


index: number;
index2: number;
// public localMatrix: Matrix4;
// private _localChange: boolean = true;
public get localChange(): boolean {
return WasmMatrix.matrixStateBuffer[this.index * 2] != 0;
}

public set localChange(value: boolean) {
WasmMatrix.matrixStateBuffer[this.index * 2] = value ? 1 : 0;
}

private _forward: Vector3 = new Vector3();
private _back: Vector3 = new Vector3();
Expand All @@ -124,6 +119,15 @@ export class Transform extends ComponentBase {

private _targetPos: Vector3;
public static: boolean = false;
public depthOrder: number = 0;

public get localChange(): boolean {
return WasmMatrix.matrixStateBuffer[this.index2] != 0;
}

public set localChange(value: boolean) {
WasmMatrix.matrixStateBuffer[this.index2] = value ? 1 : 0;
}

public get targetPos(): Vector3 {
return this._targetPos;
Expand All @@ -138,35 +142,33 @@ export class Transform extends ComponentBase {

public set parent(value: Transform) {
//why don't it need to compare the data
//if (this._parent !== value){}
let lastParent = this._parent?.object3D;
this._parent = value;
WasmMatrix.setParent(this.index, value ? value.worldMatrix.index : -1);
// WasmMatrix.setParent(this.index, value ? value.worldMatrix.index : -1);
let hasRoot = value ? value.scene3D : null;
if (!hasRoot) {
this.object3D.components.forEach((c) => {
c[`__stop`]();
});
} else {
this._scene3d = hasRoot;
this.depthOrder = value.depthOrder + 1;
WasmMatrix.setParent(this.index, value ? value.worldMatrix.index : -1, this.depthOrder);
this.localChange = true;
if (this.object3D) {
let hasRoot = value ? value.scene3D : null;
if (!hasRoot) {
this.object3D.components.forEach((c) => {
c[`__stop`]();
});
} else {
this._scene3d = hasRoot;
this.object3D.components.forEach((c) => {
ComponentCollect.appendWaitStart(this.object3D, c);
});
}

for (let child of this.object3D.entityChildren) {
child.transform.parent = value ? this : null;
}

//notify parent change
this.object3D.components.forEach((c) => {
ComponentCollect.appendWaitStart(this.object3D, c);
c.onParentChange?.(lastParent, this._parent?.object3D);
});
}

for (let child of this.object3D.entityChildren) {
child.transform.parent = value ? this : null;
}

// if (value) {
// this.transform.updateWorldMatrix();
// }

//notify parent change
this.object3D.components.forEach((c) => {
c.onParentChange?.(lastParent, this._parent?.object3D);
});
this.notifyLocalChange();
}

Expand Down Expand Up @@ -203,6 +205,7 @@ export class Transform extends ComponentBase {
super();
this._worldMatrix = new Matrix4(true);
this.index = this._worldMatrix.index;
this.index2 = this._worldMatrix.index * WasmMatrix.stateStruct;
this._localPos = new Vector3();
this._localRot = new Vector3();
this._localRotQuat = new Quaternion();
Expand Down
2 changes: 1 addition & 1 deletion src/gfx/graphics/webGpu/core/bindGroups/MatrixBindGroup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export class MatrixBindGroup {

writeBuffer() {
const matBytes = Matrix4.dynamicMatrixBytes;
this.matrixBufferDst.writeToGpu(matBytes);
this.matrixBufferDst.writeToGpu(matBytes, Matrix4.useCount * 16);
}

// writeBuffer() {
Expand Down
1 change: 0 additions & 1 deletion src/math/Matrix4.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2315,7 +2315,6 @@ export class Matrix4 {
te[3] = n41; te[7] = n42; te[11] = n43; te[15] = n44;

return this;

}

/**
Expand Down

0 comments on commit bf40831

Please sign in to comment.