WebAssembly Passing Data

Key Concepts of Data Passing in WebAssembly

1. Memory Sharing:
   • WebAssembly uses linear memory (a contiguous block of bytes) to store and manage data. JavaScript can directly access this memory buffer for efficient data exchange.
2. Type Compatibility:
   • WebAssembly supports primitive types like i32, i64, f32 and f64. Complex data structures (e.g., strings or arrays) require encoding or pointer-based access in memory.
3. Function Imports and Exports:
   • WebAssembly exports functions that JavaScript can call and vice versa. Parameters and return values are the primary medium for data transfer.

Types of Data Passing in WebAssembly

1. Passing Primitive Values:
   • Directly pass integers and floating-point values between JavaScript and WebAssembly.
2. Passing Complex Data Structures:
   • Use linear memory to share arrays, objects, or strings.
3. Two-Way Communication:
   • Exchange data bidirectionally using WebAssembly imports and exports.
4. Shared Memory:
   • Efficiently share large data sets using SharedArrayBuffer and typed arrays.

Example 1: Passing Primitive Values

WebAssembly Code (in .wat format):

(module
  (func $add (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add
  )
  (export "add" (func $add))
)

JavaScript Code:

(async () => {
  const response = await fetch('module.wasm');
  const buffer = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(buffer);

  const add = instance.exports.add;
  console.log("Sum of 10 and 20:", add(10, 20)); // Output: 30
})();

Explanation:

• JavaScript calls the exported add function with two integers.
• The result is directly returned to JavaScript, showcasing efficient primitive data passing.

Example 2: Passing Arrays

WebAssembly Code:

(module
  (memory (export "memory") 1)
  (func $sumArray (param i32 i32) (result i32)
    (local $sum i32)
    (local $i i32)
    (local $value i32)
    (loop $loop
      local.get $i
      local.get 1
      i32.ge_u
      if (result i32)
        local.get $sum
        return
      end
      local.get $sum
      local.get 0
      local.get $i
      i32.add ;; Address = base + i
      i32.load ;; Load value
      i32.add
      local.set $sum
      local.get $i
      i32.const 1
      i32.add
      local.set $i
      br $loop
    )
  )
  (export "sumArray" (func $sumArray))
)

JavaScript Code:

(async () => {
  const response = await fetch('module.wasm');
  const buffer = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(buffer);

  // Access WebAssembly memory
  const memory = new Uint32Array(instance.exports.memory.buffer);

  // Initialize an array in memory
  memory.set([10, 20, 30, 40], 0);

  const sumArray = instance.exports.sumArray;
  console.log("Sum of array:", sumArray(0, 4)); // Output: 100
})();

Explanation:

• JavaScript writes the array into WebAssembly memory using a Uint32Array.
• WebAssembly calculates the sum by iterating over the array.
• The result is passed back to JavaScript.

Example 3: Passing Strings

WebAssembly Code:

(module
  (memory (export "memory") 1)
  (func $printString (param i32 i32)
    ;; Parameters: pointer to string and its length
  )
  (export "printString" (func $printString))
)

JavaScript Code:

(async () => {
  const encoder = new TextEncoder();
  const response = await fetch('module.wasm');
  const buffer = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(buffer);

  const memory = new Uint8Array(instance.exports.memory.buffer);

  const str = "Hello, WebAssembly!";
  const encoded = encoder.encode(str);
  memory.set(encoded, 0); // Write string to memory

  instance.exports.printString(0, encoded.length); // Pass pointer and length
})();

Explanation:

• Strings are encoded as bytes using TextEncoder before being written to WebAssembly memory.
• A pointer and length are passed to the WebAssembly function.

Challenges in Passing Data

1. Data Encoding and Decoding:
   • Strings and objects must be encoded into binary formats.
2. Limited Data Types:
   • WebAssembly supports only primitive data types. Complex structures require additional effort.
3. Memory Management:
   • Proper memory allocation and deallocation are crucial to avoid memory leaks.

Best Practices

1. Use Typed Arrays:
   • Leverage Uint8Array, Int32Array, etc., for efficient interaction with WebAssembly memory.
2. Minimize Data Transfer:
   • Keep data exchange minimal to avoid performance bottlenecks.
3. Abstract Data Handling:
   • Create helper functions for encoding and decoding complex data types.