[Wasm] 기초

 

 

WebAssembly Concepts

https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts

 

WebAssembly는 브라우저(or Node.js)에서 실행가능한 low-level assembly-like 언어로서, C/C++이나 Rust로 작성한 코드를 컴파일하여 생성할 수 있으며, JavaScript와 함께 사용될 수 있다.

 

WebAssembly key concepts

Module / Memory / Table / Instance

 

Wasm code는 Online Wasm Assembler를 사용거나 Emscripten을 사용하여 생성할 수 있다.

 

Online Wasm Assembler

WasmFiddle / WasmFiddle++ / WasmExplorer / Webassembly Studio

 

Emscripten

https://emscripten.org/

 

Emscripten은 clang+LLVM을 이용하여 C/C++ 코드를 컴파일하고, 컴파일 결과를 wasm으로 변환시킨다. 또한, wasm이 DOM/Web API에 접근할 수 있도록 JavaScript glue code 생성한다.

 

 

 

Using the WebAssembly JavaScript API

https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API

 

WebAssembly

WebAssembly.Memory

- Parameters: memoryDescriptor ({ initial: pages, maximum: pages })

- Return: Memory instance

 

WebAssembly.Memory는 WebAssembly Memory 객체를 생성하는 생성자 함수이며, 인수에 메모리 크기 정보를 전달한다. 크기의 단위는 pgae 이며, 1 page 는 65536 bytes의 크기와 동일하다.

const wasmMemory = new WebAssembly.Memory({ initial: 2 });

 

WebAssembly.instantiateStreaming()

- Parameters: source (Response or Promise), importObject

- Return: Promise

 

WebAssembly.instantiateStreaming() 메소드는 wasm 코드를 로드하는 가장 효율적인 방법으로서, WebAssembly module을 컴파일하고 인스턴스를 생성한다. Promise를 반환하며, fulfillment handler의 인자로 전달되는 객체는 module과 instance라는 2개의 프로퍼티를 가진다.

const imports = {
    env: {
        consoleLog: console.log,
        memory: wasmMemory
    }
}

WebAssembly.instantiateStreaming(fetch('/program.wasm'), imports)
    .then(wasm => {
        console.log(wasm.instance);
        console.log(wasm.module);
    });

 

WebAssembly.Module

 

WebAssembly.Module 객체의 export() 메소드와 imports() 메소드를 호출하여 인자로 전달된 모듈에서 선언된 export와 import를 배열로 반환할 수 있다.

console.log(WebAssembly.Module.exports(wasm.module));
console.log(WebAssembly.Module.imports(wasm.module));

 

WebAssembly.Instance

- Property: prototype.exports

 

WebAssembly.Instance 객체의 인스턴스가 가지고 있는 exports 프로퍼티를 이용하면 WebAssembly module instance에서 export된 함수 뿐만 아니라 메모리에도 접근이 가능하다.

WebAssembly.instantiateStreaming(fetch('/main.wasm'), imports)
    .then(wasm => {
        let func = wasm.instance.exports.func;
        console.log(func());

        let buffer = wasm.instance.exports.memory.buffer;
        let strBuffer = new Uint8Array(buffer, offset, length);
        // ...
    });

 

 

Et Cetera

http://asmjs.org/

https://llvm.org/