zoukankan      html  css  js  c++  java
  • [WASM] Create and Run a Native WebAssembly Function

    In this introduction, we show a simple WebAssembly function that returns the square root of a number. To create this function we load up WebAssembly Explorer (https://mbebenita.github.io/WasmExplorer/), writing the native WAST code to create and export the function. We compile and download the resulting WebAssembly binary, loading this with the Fetch API and WebAssembly JavaScript API to call the function in the browser.

    Demo Repo: https://github.com/guybedford/wasm-intro

     Every WebAssembly starts with Module:
    (module
    
    )

    Define a function inside the module:

    (module
     (func $sqrt
    
     )   
    )

    Now we defined a empty function, 

    To add input and output we can do:

    (module
      (func $sqrt
         (param $num f32) # Input: param is the keyword, $num is the param name, f32 is the type
         (result f32) # Output: result is the keyword, f32 is the type 
      )
    )

    Now we can define function body:

    (module
      (func $sqrt 
        (param $num f32)
        (result f32)
        
        (f32.sqrt (get_local $num))  # call the function sqrt on f32, pass in the params $num though get_local function
      )
    )

    The calculation value will be the return value.

    If we want to use the fucntion in Javascript, we need to export the function:

    (module
      (export "sqrt" (func $sqrt)) # export the function call "sqrt" refer to $sqrt function we defined below
      (func $sqrt 
        (param $num f32)
        (result f32)
        
        (f32.sqrt (get_local $num))
      )
    )

    After "Assemble" it and "Download" the file, we can load in the project:

    <!doctype>
    <html>
        <header>
            <title>
                WASM
            </title>
            <script>
                fetch('./test.wasm')
                    .then((res) => {
                        if(res.ok){
                            return res.arrayBuffer();
                        }
                        throw new Error('Unable to fetch WASM')
                    })
                    .then((bytes)=> {
                        return WebAssembly.compile(bytes);
                    })
                    .then(module => {
                        return WebAssembly.instantiate(module);
                    })
                    .then(instance => {
                        window.wasmSqrt =instance.exports.sqrt;
                    })
            </script>
        </header>
    </html>

    Open the console,  we can type:

    wasmSqrt(25) //5
  • 相关阅读:
    Mac 自带 apache 服务器
    比较器Comparable Comparator
    深入学习二叉树(01)完全二叉树
    深入学习二叉树(02)线索二叉树
    深入学习二叉树(06)霍夫曼树/哈夫曼编码/最优二叉树
    深入学习二叉树(05)红黑树
    深入学习二叉树(07)B树
    Java 1.8 红黑树
    ConcurrentHashMap 结构 1.7 与1.8
    git 操作详情
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7086987.html
Copyright © 2011-2022 走看看