axinging · axinging · Jul 10, 2020 · Jul 10, 2020 · Jul 10, 2020 · Jul 10, 2020
diff --git a/buildadd.bat b/buildadd.bat
@@ -0,0 +1,4 @@
+yarn & yarn build-npm && ^
+cd demo && ^
+yarn & yarn buildadd && ^
+yarn watchadd
diff --git a/buildmatmul.bat b/buildmatmul.bat
@@ -0,0 +1,4 @@
+yarn & yarn build-npm && ^
+cd demo && ^
+yarn & yarn buildmatmul && ^
+yarn watchmatmul
diff --git a/demo/index.js b/demo/index.js
@@ -5,8 +5,7 @@ import glslangInit from '@webgpu/glslang/dist/web-devel/glslang.onefile';
 function createFloat32Array(w, h) {
  let matrix = new Float32Array(w * h);
  for (let i = 0; i < w * h; i++) {
-    matrix[i] =
-        Math.random() * 100;  // tf.randomUniform(shape, 0, 2.5);//0.01*i;
+    matrix[i] = Math.random();  // tf.randomUniform(shape, 0, 2.5);//0.01*i;
  }
  return matrix;
 }
@@ -38,78 +37,191 @@ function createUint32Array(w, h) {
  const enableTimeStamp = false;
  const device = await adapter.requestDevice();
  const glslang = await glslangInit();
+  const trials = 10;
+  const reps = 10;
+  const resultCheck = false;
+
+  {
+
+    const size_x = 4096;
+    const size_y = 256;
+    const firstMatrixSize = [size_x, size_y];
+    const firstMatrix = createFloat32Array(size_x, size_y);
+    // Second Matrix.
+    const secondMatrixSize = [size_x, size_y];
+    const secondMatrix = createFloat32Array(size_x, size_y);
+    const shape = new Uint32Array([
+      firstMatrixSize[0], firstMatrixSize[1], secondMatrixSize[0],
+      secondMatrixSize[1], firstMatrixSize[0], firstMatrixSize[1]
+    ]);
+    const addBufferOP = new compute.AddBufferOp(device, glslang, firstMatrix, secondMatrix, shape);
+
+    // const reps=100;
+    const times = [];
+    const trial = async () => {
+      // let result;
+      for (let r = 0; r < reps; ++r) {
+        addBufferOP.executeSync();
+      }
+      await addBufferOP.data();
+      if (resultCheck) {
+        const failItem = compareAddFloat32Array(
+            await addBufferOP.data(), firstMatrix, secondMatrix, size_x, size_y);
+        if (failItem != -1) {
+            console.log('Test fail at item ' + failItem);
+            return;
+        }
+      }
+    };
+
+    // Warm-up. Specifically, this pre-allocates enough memory for an entire
+    // trial, ensuring that no allocations happen when timing a trial (if the
+    // backend reuses allocations).
+    await trial();
+
+    for (let t = 0; t < trials; ++t) {
+      const start = performance.now();
+      await trial();
+      times.push(performance.now() - start);
+    }
+
+    const mean = times.reduce((a, b) => a + b, 0) / trials;
+    const min = Math.min(...times);
+    const fmt = (n) => n.toFixed(2);
+    console.log(times);
+    console.log(`Sync buffer Mean time: ${fmt(mean)} ms -> ${fmt(mean / reps)} / rep`);
+    console.log(`Sync buffer Min time: ${fmt(min)} ms -> ${fmt(min / reps)} / rep`);
+  }

  {
-    const trials = 50;
    const oldLog = console.log;
    let times = new Array();
    compute.startLog(times, oldLog);
+     const size_x = 4096;
+    const size_y = 256;
+    const firstMatrixSize = [size_x, size_y];
+    const firstMatrix = createFloat32Array(size_x, size_y);
+    // Second Matrix.
+    const secondMatrixSize = [size_x, size_y];
+    const secondMatrix = createFloat32Array(size_x, size_y);
+    const shape = new Uint32Array([
+      firstMatrixSize[0], firstMatrixSize[1], secondMatrixSize[0],
+      secondMatrixSize[1], firstMatrixSize[0], firstMatrixSize[1]
+    ]);
+    const addBufferOP = new compute.AddBufferOp(device, glslang, firstMatrix, secondMatrix, shape);
    for (var i = 0; i < trials; i++) {
      // First Matrix.
-      const size_x = 4096;
-      const size_y = 256;
-      const firstMatrixSize = [size_x, size_y];
-      const firstMatrix = createFloat32Array(size_x, size_y);
-      // Second Matrix.
-      const secondMatrixSize = [size_x, size_y];
-      const secondMatrix = createFloat32Array(size_x, size_y);
-      const shape = new Uint32Array([
-        firstMatrixSize[0], firstMatrixSize[1], secondMatrixSize[0],
-        secondMatrixSize[1], firstMatrixSize[0], firstMatrixSize[1]
-      ]);
-
-      const addBufferOP = new compute.AddBufferOp(device, glslang);
-      await addBufferOP.execute(firstMatrix, secondMatrix, shape);
-
+      await addBufferOP.execute();
+      // console.log(await addBufferOP.data());
+      if (resultCheck) {
      const failItem = compareAddFloat32Array(
          await addBufferOP.data(), firstMatrix, secondMatrix, size_x, size_y);
-      if (failItem != -1)
+      if (failItem != -1) {
          console.log('Test fail at item ' + failItem);
+          return;
+      }
+    }
    }
+
    compute.endLog(times, oldLog);
    console.log(times);
    const mean = times.reduce((a, b) => a + b, 0) / trials;
    const min = Math.min(...times);
-    const fmt = (n) => n.toFixed(3);
-    console.log(`Mean time: ${fmt(mean)} ms -> ${fmt(mean / 1)} / rep`);
-    console.log(`Min time: ${fmt(min)} ms -> ${fmt(min / 1)} / rep`);
+    const fmt = (n) => n.toFixed(2);
+    console.log(`Async buffer Mean time: ${fmt(mean)} ms -> ${fmt(mean / 1)} / rep`);
+    console.log(`Async buffer  Min time: ${fmt(min)} ms -> ${fmt(min / 1)} / rep`);
+
+  }
+
+
+  {
+
+    const size_x = 4096;
+    const size_y = 256;
+    const firstMatrixSize = [size_x, size_y];
+    const firstMatrix = createFloat32Array(size_x, size_y);
+    // Second Matrix.
+    const secondMatrixSize = [size_x, size_y];
+    const secondMatrix = createFloat32Array(size_x, size_y);
+    const shape = new Uint32Array([
+      firstMatrixSize[0], firstMatrixSize[1], secondMatrixSize[0],
+      secondMatrixSize[1], firstMatrixSize[0], firstMatrixSize[1]
+    ]);
+    const addTextureOp = new compute.AddTextureOp(device, glslang, firstMatrix, secondMatrix, shape, 'rgba32f', 16);
+
+    const times = [];
+    const trial = async () => {
+      // let result;
+      for (let r = 0; r < reps; ++r) {
+        addTextureOp.executeSync();
+      }
+      await addTextureOp.data();
+      if (resultCheck) {
+        const failItem = compareAddFloat32Array(
+            await addTextureOp.data(), firstMatrix, secondMatrix, size_x, size_y);
+        if (failItem != -1) {
+            console.log('Test fail at item ' + failItem);
+            return;
+        }
+      }
+    };
+
+    // Warm-up. Specifically, this pre-allocates enough memory for an entire
+    // trial, ensuring that no allocations happen when timing a trial (if the
+    // backend reuses allocations).
+    await trial();
+
+    for (let t = 0; t < trials; ++t) {
+      const start = performance.now();
+      await trial();
+      times.push(performance.now() - start);
+    }
+    console.log(times);
+    const mean = times.reduce((a, b) => a + b, 0) / trials;
+    const min = Math.min(...times);
+    const fmt = (n) => n.toFixed(2);
+    console.log(`Sync texture Mean time: ${fmt(mean)} ms -> ${fmt(mean / reps)} / rep`);
+    console.log(`Sync texture Min time: ${fmt(min)} ms -> ${fmt(min / reps)} / rep`);
  }

  {
    const oldLog = console.log;
    let times = new Array();
    compute.startLog(times, oldLog);
-    const trials = 50;
+    const size_x = 4096;
+    const size_y = 256;
+    const firstMatrixSize = [size_x, size_y];
+    const firstMatrix = createFloat32Array(size_x, size_y);
+    // Second Matrix.
+    const secondMatrixSize = [size_x, size_y];
+    const secondMatrix = createFloat32Array(size_x, size_y);
+    const shape = new Uint32Array([
+      firstMatrixSize[0], firstMatrixSize[1], secondMatrixSize[0],
+      secondMatrixSize[1], firstMatrixSize[0], firstMatrixSize[1]
+    ]);
+
+    const addTextureOp =
+        new compute.AddTextureOp(device, glslang, firstMatrix, secondMatrix, shape, 'rgba32f', 16);
    for (var i = 0; i < trials; i++) {
      // First Matrix.
-      const size_x = 4096;
-      const size_y = 256;
-      const firstMatrixSize = [size_x, size_y];
-      const firstMatrix = createFloat32Array(size_x, size_y);
-      // Second Matrix.
-      const secondMatrixSize = [size_x, size_y];
-      const secondMatrix = createFloat32Array(size_x, size_y);
-      const shape = new Uint32Array([
-        firstMatrixSize[0], firstMatrixSize[1], secondMatrixSize[0],
-        secondMatrixSize[1], firstMatrixSize[0], firstMatrixSize[1]
-      ]);
-
-      const addTextureOP =
-          new compute.AddTextureOp(device, glslang, 'rgba32f', 16);
-
-      await addTextureOP.execute(firstMatrix, secondMatrix, shape);
-      const failItem = compareAddFloat32Array(
-          await addTextureOP.data(), firstMatrix, secondMatrix, size_x, size_y);
-      if (failItem != -1)
-        console.log('Test fail at item ' + failItem);
+
+      await addTextureOp.execute();
+      if (resultCheck) {
+        const failItem = compareAddFloat32Array(
+            await addTextureOp.data(), firstMatrix, secondMatrix, size_x, size_y);
+        if (failItem != -1) {
+            console.log('Test fail at item ' + failItem);
+            return;
+        }
+      }
    }
    compute.endLog(times, oldLog);
    console.log(times);
    const mean = times.reduce((a, b) => a + b, 0) / trials;
    const min = Math.min(...times);
-    const fmt = (n) => n.toFixed(3);
-    console.log(`Mean time: ${fmt(mean)} ms -> ${fmt(mean / 1)} / rep`);
-    console.log(`Min time: ${fmt(min)} ms -> ${fmt(min / 1)} / rep`);
+    const fmt = (n) => n.toFixed(2);
+    console.log(`Async texture mean time: ${fmt(mean)} ms -> ${fmt(mean / 1)} / rep`);
+    console.log(`Async texture mime: ${fmt(min)} ms -> ${fmt(min / 1)} / rep`);

  }


diff --git a/demo/index_add.html b/demo/index_add.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Get started with GPU Compute on the Web - Sample #2</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>  
+  <body>
+    <h1>Get started with GPU Compute on the Web</h1>
+    <h2>Sample - Matrix multiplication</h2>
+    <p>Instructions: Check out DevTools JavaScript console.</p>
+    <a href="https://developers.google.com/web/updates/2019/08/get-started-with-gpu-compute-on-the-web">Source</a>
+    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
+    <script src="index_add.js"></script>
+  </body>
+</html>