[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
(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) //
[WASM] Create and Run a Native WebAssembly Function的更多相关文章
- [Rust] Load a WebAssembly Function Written in Rust and Invoke it from JavaScript
In this lesson we are going to setup a project from scratch by introducing the JavaScript snippet to ...
- [WASM] Create a New Rust/Webpack Project using the rust-webpack Template
Previous to this post, we set up our own Rust/wasm project from scratch. The Rust/wasm team ships a ...
- ASP.NET MVC 从零开始 - create and run
这篇文章是从我的 github 博客 http://lxconan.github.io 导入的. 如果你想用 ASP.NET MVC 创建一个网络应用,那么你可以搜到很多的文章.但是没有多少文章告诉你 ...
- PatentTips – Java native function calling
BACKGROUND OF INVENTION This invention relates to a system and method for providing a native functio ...
- Azure - Create your first function using Visual Studio
Azure Functions lets you execute your code in a serverless environment without having to first creat ...
- 初探WebAssembly
1.前言 参加完2018年上海的QCon大会,想到了会议中来自Microsoft的朱力旻大佬讲的WebAssembly,感触颇深. 我之前完全没有了解过WebAssembly,之前没有了解的原因也很简 ...
- WebAssembly学习(五)：AssemblyScript - Hello World
一.项目创建 1.创建AssemblyScript根目录 mkdir AssemblyScript 2.安装AssemblyScript开发依赖 cnpm install --save-dev Ass ...
- Run Loop详解
Run loops是线程的基础架构部分.一个run loop就是一个事件处理循环,用来不停的调配工作以及处理输入事件.使用run loop的目的是使你的线程在有工作的时候工作,没有的时候休眠. Run ...
- Run Loops
Run Loops Run loops是线程相关的的基础框架的一部分.一个run loop就是一个事件处理的循环,用来不停的调度工作以及处理输入事件.使用run loop的目的是让你的线程在有工作的时 ...
随机推荐
- vue ---- 实现手机端（左滑 删除。右划 正常）
touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系 ...
- 56.lambda表达式与绑定以及伪函数和绑定
#include <iostream> #include <functional> using namespace std; using namespace std::plac ...
- Linux集群的I/O性能测试
Linux集群的I/O性能测试 本文介绍利用iozone的性能测试工具,来测试集群性能.测试步骤如下:1.在Server节点上安装iozone(可以到www.iozone.org上下载) #rpm ...
- ActionListener三种实现
/** * Simple1.java - 处理事件的第一种方法 * 在这个例子中,利用一个ActionListener来监听事件源产生的事件 * 用一些if语句来决定是哪个事件源 */ import ...
- 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数
1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 让checkbox不选中
今天在做项目的时候.遇到一个问题.须要把选中的checkbox置空,即将选中的checkbox不选中. 最后,发现一个方法非常好使,特此记录. $("input[type='checkbox ...
- VBA调试利器debug.print
作者:iamlaosong 百度一下.非常easy找到debug.print解释和使用介绍.事实上非常简单.就是将代码运行结果显示在"马上窗体"中,但不影响程序运行.VBA程序调试 ...
- js39---组合模式，查找遍历树
/** *有这样一个需求 *有一个学校有2个班(一班,二班) *每个班级分2个小组(一班一组,一班二组,二班一组,二班二组) *学校计算机教室有限,每一个小组分着来上课. *考试的时候大家一起考 *请 ...
- worktools-git 工具的使用总结（2）
1.创建分支 git branch son parent //创建分支,是在master 分支的基础上创建 :~/myGit$ git st # On branch master nothing to ...
- if 的理解
1. if 实现集合的划分 比如著名的 Prim 算法(最小生成树),从某一确定的点出发,每次新加入的点,都是在已访问过的结点(u∈U)和未访问过(v∈V−U)的结点之间的边.这里的未被访问(V−U) ...