WebAssembly用アセンブラを作ってみた

Posted at 2024-10-05

伝統的な形式で WebAssembly を記述したい方向けです。

サンプル

test.s

;# test.s

;# i32cpy(x) = x
                .export         i32cpy
i32cpy:         .code           i32
x:              .param          i32
                local.get       x
                end

;# i32add(x, y) = x + y
                .export         i32add
i32add:         .code           i32
x:              .param          i32
y:              .param          i32
                local.get       x
                local.get       y
                i32.add
                end

;# f32vlen(x, y, z) = sqrt(x * x + y * y + z * z)
                .export         f32vlen
f32vlen:        .code           f32
x:              .param          f32
y:              .param          f32
z:              .param          f32
                local.get       x
                local.get       x
                f32.mul
                local.get       y
                local.get       y
                f32.mul
                f32.add
                local.get       z
                local.get       z
                f32.mul
                f32.add
                f32.sqrt
                end

;# f32vnrm(x, y, z) : normalize(x,y,z) → (x',y',z')
                .export         f32vnrm
f32vnrm:        .code           f32,f32,f32
x:              .param          f32
y:              .param          f32
z:              .param          f32
n:              .local          f32
                local.get       x
                local.get       y
                local.get       z
                call            f32vlen
                local.set       n
                local.get       x
                local.get       n
                f32.div
                local.get       y
                local.get       n
                f32.div
                local.get       z
                local.get       n
                f32.div
                end

アセンブル

$ wasmgen test.s test.wasm

テスト

test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>i32cpy = <span id="tagI32Cpy">[-]</span></p>
    <p>i32add = <span id="tagI32Add">[-]</span></p>
    <p>f32vlen = <span id="tagF32VLen">[-]</span></p>
    <p>f32vnrm = <span id="tagF32VNrm">[-]</span></p>

    <script>

     WebAssembly.instantiateStreaming(
         fetch('test.wasm'), {}
     ).then(
         wasm => {
             const asm = wasm.instance.exports;
             tagI32Cpy.innerText = asm.i32cpy(0);      // = 0
             tagI32Add.innerText = asm.i32add(1, 2);   // = 3
             tagF32VLen.innerText = asm.f32vlen(0.1, 0.2, 0.3); // = √0.14
             tagF32VNrm.innerText = asm.f32vnrm(0.1, 0.2, 0.3);
         }
     );

    </script>
  </body>
</html>

結果

i32cpy = 0
i32add = 3
f32vlen = 0.37416577339172363
f32vnrm = 0.26726120710372925,0.5345224142074585,0.8017836809158325

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up