[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的目的是让你的线程在有工作的时 ...
随机推荐
- 三个角度解构云计算，商业驱动or技术驱动？
从云计算的使用者到云服务的输出者,大多互联网公司在过去一年完成了角色的转换,也让云计算的未来更加扑朔迷离.不过,抛却进入时间这个评判因素,单从技术和商业化的角度来解构云计算的话,对于云计算的格局以及未 ...
- 76.QT槽的机制
按钮点击获取文本框输入 void Dialog::on_pushButton_clicked() { //获取文本输入 QString vstr = ui->lineEdit->text( ...
- IIS文件上传大小修改配置说明
原因:Web 服务器上的请求筛选被配置为拒绝该请求,因为内容长度超过配置的值(IIS 7 默认文件上传大小时30M). 解决:IIS7更改asp.net文件上传大小限制 步骤如下: 1. 修改I ...
- Spark 1.6.1 源码分析
由于gitbook网速不好,所以复制自https://zx150842.gitbooks.io/spark-1-6-1-source-code/content/,非原创,纯属搬运工,若作者要求,可删除 ...
- 【canvas】跟随鼠标的星空连线
2019-01-23 19:57:38 挂一个比较简单的一个canvas应用,利用CPU进行粒子实时计算,直接面向过程写的 帧动画:浏览器在下一个动画帧安排一次网页重绘, requestAnimat ...
- IFC数据模式架构的四个概念层
IFC模型体系结构由四个层次构成, 从下到上依次是 资源层(Resource Layer).核心层(Core Layer).交互层(Interoperability Layer).领域层(Domain ...
- 源代码编译安装CloudStack 4.2
基于CentOS 6.4安装CloudStack 环境配置 # yum -y update # yum -y upgrade 安装NTP,jdk 1.7, tomcat 6, mysql,git等服务 ...
- elasticsearch transport 请求发送和处理
前一篇分析对nettytransport的启动及连接,本篇主要分析transport请求的发送和处理过程.cluster中各个节点之间需要相互发送很多信息,如master检测其它节点是否存在,node ...
- Rpm另类用法加固Linux安全
Rpm另类用法加固Linux安全 RPM是Red Hat Package Manager的缩写即Red Hat软件管理器.它是一个开放的包管理软件,由Red Hat公司所开发和维护,可以在Red ...
- 【习题 7-6 UVA - 12113】Overlapping Squares
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 先预处理出来一个正方形. 然后每次枚举新加的正方形左上角的坐标就可以. 注意覆盖的规则,控制一下就可以. 然后暴力判断是否相同. 暴 ...