WebAssembly - Module

Wir haben gesehen, wie man eine .wasm-Datei aus c / c ++ - Code erhält. In diesem Kapitel konvertieren wir den Wasm in ein WebAssembly-Modul und führen ihn im Browser aus.

Verwenden wir den C ++ Factorial-Code wie unten gezeigt -

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

Öffnen Sie den Wasm Explorer, der unter verfügbar ist https://mbebenita.github.io/WasmExplorer/ as shown below −

Die erste Spalte hat die C ++ - Fakultätsfunktion, die zweite Spalte hat das WebAssembly-Textformat und die letzte Spalte hat den x86-Assemblycode.

Das WebAssembly-Textformat -

(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)
   )
)

Die C ++ - Funktion fact wurde exportiert als “_Z4facti”Im WebAssembly-Textformat.

Klicken Sie auf den Download-Button, um den Wasm-Code herunterzuladen und die Datei als Fakultät zu speichern.

Um nun den .wasm-Code in das Modul zu konvertieren, müssen wir Folgendes tun:

Schritt 1

Konvertieren Sie den .wasm mithilfe von in Arraybuffer ArrayBuffer. Das ArrayBuffer-Objekt gibt Ihnen einen Binärdatenpuffer mit fester Länge zurück.

Schritt 2

Die Bytes von ArrayBuffer müssen mithilfe von zu einem Modul kompiliert werden WebAssembly.compile(buffer) Funktion.

Das WebAssembly.compile() Die Funktion kompiliert und gibt ein WebAssembly.Module aus den angegebenen Bytes zurück.

Hier ist der Javascript-Code, der in Schritt 1 und 2 erläutert wird.

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

Code Erklärung

Der API-Abruf des Javascript-Browsers wird verwendet, um den Inhalt von factorial.wasm abzurufen.
Der Inhalt wird mit arrayBuffer () in Bytes konvertiert.
Das Modul wird aus Bytes durch Aufrufen von WebAssembly.compile (mod) erstellt.
Die Instanz eines Moduls wird mit new erstellt
WebAssembly.Instance(module)
Die Fakultätsfunktion export _Z4facti wird mithilfe von WebAssembly.Module.exports () der Variablen Fakultät zugewiesen.

Beispiel

Hier ist die module.html zusammen mit dem Javascript-Code -

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>

Ausgabe

Führen Sie module.html im Browser aus, um die Ausgabe anzuzeigen -