meson: Added Emscripten wasm build support

smohantty · Jul 20, 2020 · b0fcd86 · b0fcd86
1 parent 0cd69c2
commit b0fcd86
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 0 deletions.
diff --git a/src/meson.build b/src/meson.build
@@ -37,6 +37,16 @@ rlottie_dep = declare_dependency(
                                  include_directories: inc,
                                  link_with : rlottie_lib)
 
+if (cc.get_id() == 'emscripten')
+
+  subdir('wasm')
+
+  executable('rlottie-wasm',
+              [],
+              dependencies : [rlottie_dep, rlottie_wasm_dep],
+            )
+endif
+
 pkg_mod = import('pkgconfig')
 
 pkg_mod.generate( libraries   : rlottie_lib,

diff --git a/src/wasm/meson.build b/src/wasm/meson.build
@@ -0,0 +1,5 @@
+source_file = files('rlottiewasm.cpp')
+
+    rlottie_wasm_dep = declare_dependency(include_directories
+                                          : include_directories('.'), sources
+                                          : source_file)
diff --git a/src/wasm/rlottiewasm.cpp b/src/wasm/rlottiewasm.cpp
diff --git a/test/wasm_test.html b/test/wasm_test.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+  <canvas id="rlottie" width="100" height="100"></canvas>
+  <script>
+    var Module = {
+      onRuntimeInitialized: function() {
+
+        class Animator {
+          constructor(){
+            this.instance = new Module.RlottieWasm();
+            this.canvas = document.getElementById("rlottie");
+            this.frames = this.instance.frames();
+            this.curFrame = 0;
+            this.tick_cb();
+          }
+          tick_cb() {
+            var context = this.canvas.getContext('2d');
+            var buffer = this.instance.render(this.curFrame, this.canvas.width, this.canvas.height);
+            var clampedBuffer = Uint8ClampedArray.from(buffer);
+            var imageData = new ImageData(clampedBuffer, this.canvas.width, this.canvas.height);
+            context.putImageData(imageData, 0, 0);
+            this.curFrame += 1;
+            if (this.curFrame >= this.frames) this.curFrame = 0;
+            window.requestAnimationFrame(()=>{ this.tick_cb();});
+          }
+        }
+        var instance = new Animator();
+      }
+    };
+  </script>
+  <script src="rlottie-wasm.js"></script>
+</html>
diff --git a/wasm_build.sh b/wasm_build.sh
@@ -0,0 +1,18 @@
+#!/bin/bash
+
+if [ -z "$1" ]; then
+    echo "Emscripten SDK PATH is not provided"
+    echo "Usage: wasm_build EMSDK_PATH"
+    exit 1;
+fi
+
+if [ ! -d "./builddir_wasm" ]; then
+    sed "s|EMSDK:|$1|g" wasm_cross.txt > /tmp/.wasm_cross.txt
+    meson -Dthread=false -Dmodule=false -Dcache=false -Dexample=false -Ddefault_library=static builddir_wasm --cross-file /tmp/.wasm_cross.txt
+    cp ./test/wasm_test.html builddir_wasm/src/index.html
+fi
+
+sudo ninja -C builddir_wasm/
+echo "RESULT:"
+echo " rlottie-wasm.wasm and rlottie-wasm.js can be found in builddir_wasm/src folder"
+
diff --git a/wasm_cross.txt b/wasm_cross.txt
@@ -0,0 +1,19 @@
+[binaries]
+c = 'EMSDK:upstream/emscripten/emcc.py'
+cpp = 'EMSDK:upstream/emscripten/em++.py'
+ar = 'EMSDK:upstream/emscripten/emar.py'
+
+[properties]
+root = 'EMSDK:upstream/emscripten/system'
+cpp_args = ['--bind','-s', 'WASM=1', '-s', 'ALLOW_MEMORY_GROWTH=1', '-O2']
+cpp_link_args = ['--bind','-s', 'WASM=1', '-s', 'ALLOW_MEMORY_GROWTH=1', '-O2']
+shared_lib_suffix = 'js'
+static_lib_suffix = 'js'
+shared_module_suffix = 'js'
+exe_suffix = 'js'
+
+[host_machine]
+system = 'emscripten'
+cpu_family = 'x86'
+cpu = 'i686'
+endian = 'little'