Comment charger des fichiers .wasm stockés dans un sous-répertoire?

Question

J'essaie un exemple simple pour appeler une fonction C compilée en .wasm avec JavaScript.

Ce fichier est le counter.c:

#include <emscripten.h> 

int counter = 100; 

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

Je l'ai compilé en utilisant emcc counter.c -s WASM=1 -o counter.js.

Mon fichier main.js JavaScript:

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

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

Mes fichiers index.html charge uniquement les fichiers .js dans le corps, rien d'autre:

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

Il fonctionne très bien/impressions 101 à la console, mais lorsque je déplace le fichier counter.c dans un sous-répertoire wasm, le recompiler avec emscripten et mettre à jour le tag script à src="wasm/counter.js", le script counter.js tente de charger counter.wasm à partir du répertoire racine au lieu du sous-répertoire wasm et je reçois l'erreur:

counter.js:190 failed to asynchronously prepare wasm: failed to load wasm binary file at 'counter.wasm'

Je l'ai fait quelques recherches, mais je ne trouve pas une façon de dire emscripten à laissez le fichier .js généré charger le .wasm à partir du même sous-répertoire.

Answer 1

Si vous regardez le fichier « loader » généré que emscripten crée, il a une fonction integrateWasmJS comme suit:

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'; 

    ... 
} 

Vous pouvez voir que le wasmBinaryFile indique l'emplacement du binaire. S'il n'est pas défini, il fournit une valeur par défaut.

Il semble que vous devriez être en mesure de passer outre ceci dans votre fichier main.js comme suit:

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

Answer 2

Comme l'a expliqué ColinE in the other answer, vous devriez regarder la fonction integrateWasmJS() généré par le compilateur EMCC (compteur. js). Le corps de cette fonction a changé récemment et il ressemble maintenant à ceci:

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

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

Si tel est le cas, alors vous devez ajouter une fonction « LocateFile » à la variable globale du module. Ainsi, dans votre code HTML, vous pouvez ajouter l'extrait de code suivant avant d'importer le fichier counter.js:

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