如何加载存储在子目录中的.wasm文件?

时间:2017-09-20 22:31:44

标签: javascript emscripten webassembly

我正在尝试一个简单的例子,用JavaScript调用编译为.wasm的C函数。

这是counter.c文件:

#include <emscripten.h>

int counter = 100;

EMSCRIPTEN_KEEPALIVE
int count() {  
    counter += 1;
    return counter;
}

我使用emcc counter.c -s WASM=1 -o counter.js编译了它。

我的main.js JavaScript文件:

Module['onRuntimeInitialized'] = onRuntimeInitialized;
const count = Module.cwrap('count ', 'number');

function onRuntimeInitialized() {
    console.log(count());
}

我的index.html文件只加载正文中的两个.js文件,没有别的:

<script type="text/javascript" src="counter.js"></script>
<script type="text/javascript" src="main.js"></script>

它工作正常/打印101到控制台,但当我将counter.c文件移动到wasm子目录时,使用emscripten重新编译它并更新{{1标记到scriptsrc="wasm/counter.js"脚本尝试从根目录而不是counter.js子目录加载counter.wasm,我收到错误:

wasm

我做了一些研究,但我没有找到任何方法告诉emscripten让生成的.js文件从同一个子目录加载.wasm。

2 个答案:

答案 0 :(得分:7)

正如ColinE in the other answer所解释的那样,您应该查看emcc编译器生成的integrateWasmJS()函数(counter.js)。该函数的主体最近发生了变化,现在它看起来像这样:

function integrateWasmJS() {
    ...
    var wasmBinaryFile = 'counter.wasm';

    if (typeof Module['locateFile'] === 'function') {
        ...
        if (!isDataURI(wasmBinaryFile)) {
          wasmBinaryFile = Module['locateFile'](wasmBinaryFile);
        }
        ...
    }
}

如果是这种情况,那么你应该添加一个&#34; locateFile&#34;函数到全局Module变量。因此,在HTML中,您可以在导入counter.js文件之前添加以下代码段:

<script>
  var Module = {
    locateFile: function(s) {
      return 'wasm/' + s;
    }
  };
</script> 

答案 1 :(得分:3)

如果查看emscripten创建的生成的“loader”文件,它具有integrateWasmJS函数,如下所示:

function integrateWasmJS(Module) {
  var method = Module['wasmJSMethod'] || 'native-wasm';
  Module['wasmJSMethod'] = method;

  var wasmTextFile = Module['wasmTextFile'] || 'hello.wast';
  var wasmBinaryFile = Module['wasmBinaryFile'] || 'hello.wasm';
  var asmjsCodeFile = Module['asmjsCodeFile'] || 'hello.temp.asm.js';

  ...
}

您可以看到wasmBinaryFile表示二进制文件的位置。如果未设置,则提供默认值。

您似乎应该能够在main.js文件中覆盖此内容,如下所示:

Module['wasmBinaryFile'] = 'wasm/counter.wasm';