wasm bundle npm package with rollup

LingDong- · Jul 14, 2020 · 394b457 · 394b457
1 parent 4a5791b
commit 394b457
Show file tree

Hide file tree

Showing 12 changed files with 963 additions and 118 deletions.
diff --git a/wasm/.gitignore b/wasm/.gitignore
@@ -0,0 +1,5 @@
+.DS_Store
+build/
+node_modules
+npm-debug.log
+yarn-error.log
diff --git a/wasm/.npmignore b/wasm/.npmignore
@@ -0,0 +1,17 @@
+
+.yalc/
+.vscode/
+.rpt2_cache/
+demo/
+scripts/
+src/
+coverage/
+node_modules/
+karma.conf.js
+*.tgz
+dist/**/*.js.map
+.travis.yml
+.npmignore
+tslint.json
+yalc.lock
+yarn.lock
diff --git a/wasm/compile.sh b/wasm/compile.sh
@@ -7,7 +7,7 @@ echo "generating glue..."
 python $EMPATH/tools/webidl_binder.py ../trace_skeleton.idl glue
 echo "compiling..."
 $EMPATH/emcc ../glue_wrapper.cpp --post-js glue.js  -std=c++11 -s EXPORT_NAME="_TRACESKELETON" --closure 1 -s MODULARIZE=1 -s ALLOW_MEMORY_GROWTH=1 -s WASM=1 -O3 -o trace_skeleton.js
-echo "converting to static module..."
-sed -i '' 's/var _TRACESKELETON = (function() {/var _TRACESKELETON = (new function() {/' trace_skeleton.js
-echo "concating custom wrapper..."
-cat ../wrapper.js >> trace_skeleton.js
+# echo "converting to static module..."
+# sed -i '' 's/var _TRACESKELETON = (function() {/var _TRACESKELETON = (new function() {/' trace_skeleton.js
+# echo "concating custom wrapper..."
+# cat ../wrapper.js >> trace_skeleton.js
diff --git a/wasm/dist/glue.cpp b/wasm/dist/glue.cpp
@@ -4,11 +4,14 @@
 extern "C" {
 
 // Not using size_t for array indices as the values used by the javascript code are signed.
+
+EM_JS(void, array_bounds_check_error, (size_t idx, size_t size), {
+  throw 'Array index ' + idx + ' out of bounds: [0,' + size + ')';
+});
+
 void array_bounds_check(const int array_size, const int array_idx) {
   if (array_idx < 0 || array_idx >= array_size) {
-    EM_ASM({
-      throw 'Array index ' + $0 + ' out of bounds: [0,' + $1 + ')';
-    }, array_idx, array_size);
+    array_bounds_check_error(array_idx, array_size);
   }
 }
 

diff --git a/wasm/dist/trace_skeleton.js b/wasm/dist/trace_skeleton.js
diff --git a/wasm/dist/trace_skeleton.wasm b/wasm/dist/trace_skeleton.wasm
diff --git a/wasm/index.js b/wasm/index.js
@@ -0,0 +1,118 @@
+import _TRACESKELETON from './dist/trace_skeleton.js';
+
+class TraceSkeleton {
+  constructor(tracer) {
+    if (typeof tracer === 'undefined') {
+      throw new Error('Cannot be called directly');
+    }
+    this.tracer = tracer;
+  }
+  static load() {
+    return _TRACESKELETON().then((d) => {
+      return new TraceSkeleton(d);
+    });
+  }
+
+  fromBoolArray(im, w, h) {
+    var str = '';
+    for (var i = 0; i < im.length; i++) {
+      if (im[i]) {
+        str += String.fromCharCode(1);
+      } else {
+        str += String.fromCharCode(0);
+      }
+    }
+    return this.fromCharString(str, w, h);
+  }
+  fromImageData(im) {
+    var w = im.width;
+    var h = im.height;
+    var data = im.data;
+    var str = '';
+    for (var i = 0; i < data.length; i += 4) {
+      if (data[i]) {
+        str += String.fromCharCode(1);
+      } else {
+        str += String.fromCharCode(0);
+      }
+    }
+    return this.fromCharString(str, w, h);
+  }
+  fromCanvas(im) {
+    var ctx = im.getContext('2d');
+    var imdata = ctx.getImageData(0, 0, im.width, im.height);
+    return this.fromImageData(imdata);
+  }
+  fromCharString(im, w, h) {
+    var T = new this.tracer.skeleton_tracer_t();
+    var s = T.trace(im, w, h);
+    var r = s
+      .split('RECTS:')[1]
+      .split('\n')
+      .filter((x) => x.length)
+      .map((x) => x.split(',').map((x) => parseInt(x)));
+    var p = s
+      .split('RECTS:')[0]
+      .split('POLYLINES:')[1]
+      .split('\n')
+      .filter((x) => x.length)
+      .map((x) =>
+        x
+          .split(' ')
+          .filter((x) => x.length)
+          .map((x) => x.split(',').map((x) => parseInt(x)))
+      );
+    var ret = {
+      rects: r,
+      polylines: p,
+      width: w,
+      height: h,
+    };
+    this.tracer.destroy(T);
+    return ret;
+  }
+  visualize(ret, args) {
+    var r = ret.rects;
+    var p = ret.polylines;
+
+    if (args == undefined) {
+      args = {};
+    }
+    var s = args.scale == undefined ? 1 : args.scale;
+    var sw = args.strokeWidth == undefined ? 1 : args.strokeWidth;
+    var dr = args.rects == undefined ? 1 : 0;
+    var kpt = (args.keypoints = undefined ? 0 : 1);
+
+    var svg = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="${
+      ret.width * s
+    }" height="${ret.height * s}">`;
+
+    if (dr) {
+      for (var i = 0; i < r.length; i++) {
+        svg += `<rect fill="none" stroke="gray" x="${r[i][0] * s}" y="${
+          r[i][1] * s
+        }" width="${r[i][2] * s}" height="${r[i][3] * s}" />`;
+      }
+    }
+    for (var i = 0; i < p.length; i++) {
+      svg += `<path fill="none" stroke-width="${sw}" stroke="rgb(${Math.floor(
+        Math.random() * 200
+      )},${Math.floor(Math.random() * 200)},${Math.floor(
+        Math.random() * 200
+      )})" d="M${p[i].map((x) => x[0] * s + ',' + x[1] * s).join(' L')}"/>`;
+    }
+    if (kpt) {
+      for (var i = 0; i < p.length; i++) {
+        for (var j = 0; j < p[i].length; j++) {
+          svg += `<rect fill="none" stroke="red" x="${p[i][j][0] * s - 1}" y="${
+            p[i][j][1] * s - 1
+          }" width="2" height="2"/>`;
+        }
+      }
+    }
+
+    svg += '</svg>';
+    return svg;
+  }
+}
+export default TraceSkeleton;
diff --git a/wasm/p5/index.html b/wasm/p5/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
+    <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <script src="../build/trace_skeleton_wasm.min.js"></script>
+    <script src="sketch.js"></script>
+  </body>
+</html>
diff --git a/wasm/p5/sketch.js b/wasm/p5/sketch.js
@@ -0,0 +1,55 @@
+
+var WIDTH = 250;
+var HEIGHT = 200;
+
+var img;
+var canv;
+var pg;
+var tracer;
+
+function preload(){
+  img = loadImage("https://raw.githubusercontent.com/LingDong-/skeleton-tracing/master/test_images/horse_r.png");
+}
+
+async function setup() {
+  pixelDensity(1); // preventing p5 from automatically switching to 2x resolution for retina screens
+
+  createCanvas(WIDTH,HEIGHT);
+
+  pg = createGraphics(WIDTH,HEIGHT);
+  pg.background(0);
+  pg.image(img,0,0);
+  tracer = await TraceSkeleton.load(); // Load WASM Tracer
+
+}
+
+function draw() {
+
+  // use mouse to draw
+  pg.stroke(255);
+  pg.strokeWeight(10);
+  pg.line(pmouseX,pmouseY,mouseX,mouseY);
+
+  // trace the skeleton
+  var {polylines,rects} = tracer.fromCanvas(pg.canvas);
+
+  image(pg,0,0);
+
+
+  // visualize
+
+  noFill();
+  // draw the rects
+  stroke(128,20);
+  for (var i = 0; i < rects.length; i++){
+    rect(rects[i][0],rects[i][1],rects[i][2],rects[i][3])
+  }
+  // draw the polylines
+  stroke(255,0,0);
+  for (var i = 0; i < polylines.length; i++){
+    for (var j = 1; j < polylines[i].length; j++){
+      line(polylines[i][j-1][0],polylines[i][j-1][1],polylines[i][j][0],polylines[i][j][1])
+    }
+  }
+
+}
diff --git a/wasm/package.json b/wasm/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "skeleton-tracing-wasm",
+  "version": "1.0.0",
+  "description": "A new algorithm for retrieving topological skeleton as a set of polylines from binary images: WASM version",
+  "main": "build/trace_skeleton_wasm.js",
+  "unpkg": "build/trace_skeleton_wasm.min.js",
+  "jsdelivr": "dist/trace_skeleton_wasm.js",
+  "module": "index.js",
+  "author": {
+    "name": "Lingdong Huang",
+    "email": "lingdong0618@hotmail.com"
+  },
+  "contributors": [
+    {
+      "name": "Radamés Ajna",
+      "email": "radamajna@gmail.com"
+    }
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "skeletonization",
+    "computer-vision",
+    "algorithm",
+    "computational-geometry",
+    "polylines"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "rollup": "^2.21.0",
+    "rollup-plugin-ascii": "^0.0.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-copy": "^3.3.0",
+    "rollup-plugin-node-polyfills": "^0.2.1",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-terser": "^6.1.0",
+    "terser": "^4.8.0"
+  }
+}
diff --git a/wasm/rollup.config.js b/wasm/rollup.config.js
@@ -0,0 +1,57 @@
+// rollup.config.js
+import ascii from 'rollup-plugin-ascii';
+import { terser } from 'rollup-plugin-terser';
+import commonjs from 'rollup-plugin-commonjs';
+import resolve from 'rollup-plugin-node-resolve';
+import nodePolyfills from 'rollup-plugin-node-polyfills';
+import copy from 'rollup-plugin-copy';
+
+export default [
+  {
+    input: 'index.js',
+    plugins: [
+      nodePolyfills(),
+      resolve(),
+      commonjs(),
+      ascii(),
+      copy({
+        targets: [
+          {
+            src: 'dist/trace_skeleton.wasm',
+            dest: 'build',
+          },
+        ],
+      }),
+    ],
+    output: {
+      extend: true,
+      file: 'build/trace_skeleton_wasm.js',
+      format: 'umd',
+      name: 'TraceSkeleton',
+    },
+  },
+  {
+    input: 'index.js',
+    plugins: [
+      nodePolyfills(),
+      resolve(),
+      commonjs(),
+      ascii(),
+      terser(),
+      copy({
+        targets: [
+          {
+            src: 'dist/trace_skeleton.wasm',
+            dest: 'build',
+          },
+        ],
+      }),
+    ],
+    output: {
+      extend: true,
+      file: 'build/trace_skeleton_wasm.min.js',
+      format: 'umd',
+      name: 'TraceSkeleton',
+    },
+  },
+];