WebAssembly - Moduli

Abbiamo visto come ottenere un file .wasm da codice c / c ++. In questo capitolo, convertiremo il wasm in un modulo WebAssembly ed eseguiremo lo stesso nel browser.

Usiamo il codice fattoriale C ++ come mostrato di seguito -

int fact(int n) {
   if ((n==0)||(n==1))
      return 1;
   else
      return n*fact(n-1);
}

Apri Wasm Explorer disponibile su https://mbebenita.github.io/WasmExplorer/ as shown below −

La prima colonna ha la funzione fattoriale C ++, la seconda colonna ha il formato di testo WebAssembly e l'ultima colonna ha il codice assembly x86.

Il formato di testo WebAssembly -

(module
   (table 0 anyfunc)
   (memory $0 1)
   (export "memory" (memory $0))
   (export "_Z4facti" (func $_Z4facti))
   (func $_Z4facti (; 0 ;) (param $0 i32) (result i32)
      (local $1 i32)
      (set_local $1
         (i32.const 1)
      )
      (block $label$0
         (br_if $label$0
            (i32.eq
               (i32.or
                  (get_local $0)
                  (i32.const 1)
               )
               (i32.const 1)
            )
         )
         (set_local $1
            (i32.const 1)
         )
         (loop $label$1
            (set_local $1
               (i32.mul
                  (get_local $0)
                  (get_local $1)
               )
            )
            (br_if $label$1
               (i32.ne
                  (i32.or
                     (tee_local $0
                        (i32.add
                           (get_local $0)
                           (i32.const -1)
                        )
                     )
                     (i32.const 1)
                  )
                  (i32.const 1)
               )
            )
         )
      )
      (get_local $1)
   )
)

La funzione C ++ fact è stato esportato come "_Z4facti"In formato Testo WebAssembly.

Fare clic sul pulsante di download per scaricare il codice wasm e salvare il file come factorial.wasm.

Ora per convertire il codice .wasm nel modulo dobbiamo fare quanto segue:

Passo 1

Converti .wasm in arraybuffer usando ArrayBuffer. L'oggetto ArrayBuffer restituirà un buffer di dati binari a lunghezza fissa.

Passo 2

I byte da ArrayBuffer devono essere compilati in un modulo utilizzando WebAssembly.compile(buffer) funzione.

Il WebAssembly.compile() la funzione compila e restituisce un WebAssembly.Module dai byte forniti.

Ecco il codice Javascript discusso nei passaggi 1 e 2.

<script type="text/javascript">
   let factorial;
   fetch("factorial.wasm")
      .then(bytes => bytes.arrayBuffer())
      .then(mod => WebAssembly.compile(mod))
      .then(module => {return new WebAssembly.Instance(module) })
      .then(instance => {
      
      factorial = instance.exports._Z4facti;
      console.log('Test the output in Brower Console by using factorial(n)');
   });
</script>

Spiegazione del codice

Il recupero dell'API del browser Javascript viene utilizzato per ottenere i contenuti di factorial.wasm.
Il contenuto viene convertito in byte utilizzando arrayBuffer ().
Il modulo viene creato da byte chiamando WebAssembly.compile (mod).
L'istanza di un modulo viene creata utilizzando new
WebAssembly.Instance(module)
La funzione fattoriale export _Z4facti viene assegnata alla variabile fattoriale utilizzando WebAssembly.Module.exports ().

Esempio

Ecco il module.html insieme al codice javascript -

module.html

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>WebAssembly Module</title>
   </head>
   <body>
      <script>
      let factorial;
      fetch("factorial.wasm")
      .then(bytes => bytes.arrayBuffer())
      .then(mod => WebAssembly.compile(mod))
      .then(module => {return new WebAssembly.Instance(module) })
      .then(instance => {
         factorial = instance.exports._Z4facti;
         console.log('Test the output in Browser Console by using factorial(n)');
      });
      </script>
   </body>
</html>

Produzione

Esegui module.html nel browser per vedere l'output -