Merge pull request #22 from WebGPU-Art/perf-now

try performance.now() for stabler results
WebGPU-Art · Nov 25, 2024 · 42be19d · 42be19d
2 parents 66e3358 + 425f907
commit 42be19d
Show file tree

Hide file tree

Showing 26 changed files with 146 additions and 144 deletions.
diff --git a/.github/workflows/upload.yaml b/.github/workflows/upload.yaml
@@ -17,9 +17,7 @@ jobs:
           node-version: 20
           cache: "yarn"
 
-      - uses: calcit-lang/[email protected]
-        with:
-          bundler: false
+      - uses: calcit-lang/[email protected]
 
       - name: "compiles calcit to js"
         run: caps --ci && cr -1 js

diff --git a/package.cirru → deps.cirru b/package.cirru → deps.cirru
@@ -1,5 +1,6 @@
 
 {}
+  :calcit-version |0.9.6
   :dependencies $ {}
     |calcit-lang/lilac |main
     |calcit-lang/memof |main

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "@webgpu/types": "^0.1.51",
     "bottom-tip": "^0.1.5",
     "query-string": "^9.1.1",
-    "typescript": "^5.6.3",
+    "typescript": "^5.7.2",
     "vite": "^5.4.11"
   },
   "dependencies": {

diff --git a/src/apps/attractor/aizawa.mts b/src/apps/attractor/aizawa.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.04, // deltaT
+        dt * 12, // deltaT
         600.0, // scale
         0.001, // width
         0.99, // opacity

diff --git a/src/apps/attractor/bouali.wgsl b/src/apps/attractor/bouali.wgsl
@@ -73,7 +73,7 @@ fn main(@builtin(global_invocation_id) GlobalInvocationID: vec3<u32>) {
     return;
   }
 
-  let ret = bouali(v_pos, params.delta_t * 0.01);
+  let ret = bouali(v_pos, params.delta_t * 1.);
 
   // Write back
   particles_b.particles[index].pos = ret.position;

diff --git a/src/apps/attractor/burke-shaw.mts b/src/apps/attractor/burke-shaw.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.04, // deltaT
+        dt * 2, // deltaT
         20.0, // scale
         0.008, // width
         0.99, // opacity

diff --git a/src/apps/attractor/chen.mts b/src/apps/attractor/chen.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.04, // deltaT
+        dt * 2, // deltaT
         20.0, // scale
         0.008, // width
         0.99, // opacity

diff --git a/src/apps/attractor/dadras.mts b/src/apps/attractor/dadras.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.04, // deltaT
+        dt * 0.4, // deltaT
         20.0, // scale
         0.008, // width
         0.99, // opacity

diff --git a/src/apps/attractor/den-tsucs.mts b/src/apps/attractor/den-tsucs.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.0003, // deltaT
+        dt * 0.1, // deltaT
         20.0, // scale
         0.008, // width
         0.99, // opacity

diff --git a/src/apps/attractor/dequanli.mts b/src/apps/attractor/dequanli.mts
@@ -13,7 +13,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => {
         return [
-          dt * 0.04, // deltaT
+          dt * 4, // deltaT
           20.0, // scale
           0.008, // width
           0.99, // opacity

diff --git a/src/apps/attractor/fourwing.mts b/src/apps/attractor/fourwing.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.04, // deltaT
+        dt * 40, // deltaT
         100.0, // scale
         0.004, // width
         0.99, // opacity

diff --git a/src/apps/attractor/halvorsen.mts b/src/apps/attractor/halvorsen.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.04, // deltaT
+        dt * 12, // deltaT
         600.0, // scale
         0.001, // width
         0.99, // opacity

diff --git a/src/apps/attractor/lorenz.wgsl b/src/apps/attractor/lorenz.wgsl
@@ -70,7 +70,7 @@ fn main(@builtin(global_invocation_id) GlobalInvocationID: vec3<u32>) {
     return;
   }
 
-  let ret = lorenz(v_pos, params.delta_t * 0.0012 * (2. + 2. * rand(f32(index))));
+  let ret = lorenz(v_pos, params.delta_t * 0.12 * (2. + 2. * rand(f32(index))));
   // let ret = four_wing(v_pos, params.delta_t * 0.01 * (20. + 2. * rand(f32(index))));
   // let ret = aizawa(v_pos, params.delta_t * 0.001 * (12. + 4. * rand(f32(index))));
 

diff --git a/src/apps/attractor/lorenz83.mts b/src/apps/attractor/lorenz83.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.04, // deltaT
+        dt * 8, // deltaT
         600.0, // scale
         0.001, // width
         0.99, // opacity

diff --git a/src/apps/attractor/sprott.mts b/src/apps/attractor/sprott.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.04, // deltaT
+        dt * 4, // deltaT
         600.0, // scale
         0.001, // width
         0.99, // opacity

diff --git a/src/apps/ball-spin.mts b/src/apps/ball-spin.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.004, // deltaT
+        dt * 0.2, // deltaT
         0.6, // height
         0.2, // width
         0.8, // opacity

diff --git a/src/apps/bounce-trail.mts b/src/apps/bounce-trail.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.002, // deltaT
+        dt * 0.1, // deltaT
         0.6, // height
         0.2, // width
         0.8, // opacity

diff --git a/src/apps/bounce.mts b/src/apps/bounce.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.004, // deltaT
+        dt * 0.1, // deltaT
         0.6, // height
         0.2, // width
         0.8, // opacity

diff --git a/src/apps/collision.mts b/src/apps/collision.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.004, // deltaT
+        dt * 0.4, // deltaT
         0.6, // height
         0.2, // width
         0.8, // opacity

diff --git a/src/apps/feday.mts b/src/apps/feday.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.004, // deltaT
+        dt * 0.1, // deltaT
         0.6, // height
         0.2, // width
         0.8, // opacity

diff --git a/src/apps/fireworks.mts b/src/apps/fireworks.mts
@@ -12,7 +12,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.004, // deltaT
+        dt * 4, // deltaT
         0.6, // height
         0.2, // width
         0.8, // opacity

diff --git a/src/apps/lamps.mts b/src/apps/lamps.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.004, // deltaT
+        dt * 0.2, // deltaT
         0.6, // height
         0.2, // width
         0.8, // opacity

diff --git a/src/apps/orbit-spark.mts b/src/apps/orbit-spark.mts
@@ -11,7 +11,7 @@ export let loadRenderer = async (canvas: HTMLCanvasElement) => {
       seedSize,
       seedData: makeSeed(seedSize, 0),
       getParams: (dt) => [
-        dt * 0.04, // deltaT
+        dt * 4, // deltaT
         600.0, // scale
         0.001, // width
         0.99, // opacity

diff --git a/src/render.mts b/src/render.mts
@@ -252,7 +252,10 @@ export let createRenderer = async (
     seedSize
   );
 
-  return async function render(t: number, skipComputing: boolean = false) {
+  return async function render(
+    loopTimes: number,
+    skipComputing: boolean = false
+  ) {
     let paramsData = computeOptions.getParams(ticker.ticked());
 
     let paramBuffer = buildParamBuffer(paramsData);
@@ -295,7 +298,7 @@ export let createRenderer = async (
           entries: uniformEntries,
         })
       );
-      computePassEncoder.setBindGroup(1, particleBindGroups[t % 2]);
+      computePassEncoder.setBindGroup(1, particleBindGroups[loopTimes % 2]);
       computePassEncoder.dispatchWorkgroups(Math.ceil(numParticles / 64));
       computePassEncoder.end();
     }
@@ -309,7 +312,7 @@ export let createRenderer = async (
 
     const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
     passEncoder.setPipeline(renderPipeline);
-    passEncoder.setVertexBuffer(0, particleBuffers[(t + 1) % 2]);
+    passEncoder.setVertexBuffer(0, particleBuffers[(loopTimes + 1) % 2]);
     passEncoder.setVertexBuffer(1, buildSpriteVertexBuffer(vertexData));
     passEncoder.setBindGroup(
       0,
@@ -320,7 +323,7 @@ export let createRenderer = async (
         entries: uniformEntries,
       })
     );
-    passEncoder.setBindGroup(1, mockedBindGroups[t % 2]); // mocked
+    passEncoder.setBindGroup(1, mockedBindGroups[loopTimes % 2]); // mocked
 
     if (indexBuffer != null) {
       passEncoder.setIndexBuffer(indexBuffer, "uint32");

diff --git a/src/util.mts b/src/util.mts
@@ -38,12 +38,12 @@ export class TimeTicker {
   startedAt: number;
 
   constructor() {
-    this.startedAt = Date.now();
+    this.startedAt = performance.now();
   }
 
   /** return in seconds */
   ticked(): number {
-    let now = Date.now();
+    let now = performance.now();
     let elapsed = now - this.startedAt;
     this.startedAt = now;
     return elapsed * 0.001;