[WASM] Create and Run a Native WebAssembly Function
2017-06-27 20:27
411 查看
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:
Define a function inside the module:
Now we defined a empty function,
To add input and output we can do:
Now we can define function body:
The calculation value will be the return value.
If we want to use the fucntion in Javascript, we need to export the function:
After "Assemble" it and "Download" the file, we can load in the project:
Open the console, we can type:
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
相关文章推荐
- [WASM] Call a JavaScript Function from WebAssembly
- Walkthrough: Create and Run a Simple Windows Application In Native Code
- How to create and delete a SharePoint site by web application
- SharePoint 2007 - /_layouts and how to create pages that run in site context
- Add tailor-made function to system function and create menu
- CREATE PROCEDURE and CREATE FUNCTION Syntax
- PHP-websocket Call to undefined function socket_create
- Combine Web and Windows Services to Run Your ASP.NET Code at Scheduled
- Create Native iOS, Android, Mac and Windows apps in C#
- No result defined for action com.zhaoonline.web.action.CreateBusinessCardAction and result input
- JavaFX: Create Windows Native Installer and EXE with NetBeans 7.2
- C# Execute assembly sequence and other os function
- When should I create threads and when should I use thread pool to run work items asynchronously?
- yii框架源码分析之Yii::createWebApplication()->run() 执行过程分析
- Storyboard Tutorial: Create Tab Bar Controller and Web View
- Using .Net, Flex, and Red5 to create a flash web application
- SQL Server User-defined Function Create and Call 與Stored Procedures 不同
- yii框架源码分析之Yii::createWebApplication()->run() 执行过程分析
- Create screenshots of a web page using Python and QtWebKit | Roland's Blog
- Create Spring MVC dynamic web project with Maven and make it support Eclipse IDE