[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的目的是让你的线程在有工作的时 ...
随机推荐
- HDU 4678 Mine SG博弈
http://acm.hdu.edu.cn/showproblem.php?pid=4678 自己太蠢...没学SG...还是浩神指点我SG精髓以后才A的这题...(第一题SG 这里子游戏之间没有影响 ...
- canvas：画布
画布有默认宽度,如果要自己设置宽带要写在属性上 列: <canvas id = "myCanvas" width = "600" height = &qu ...
- 浅谈架构之路：单点登录 SSO
前言:SSO 单点登录 "半吊子"的全栈工程师又来了,技术类的文章才发表了两篇,本来想先将主攻的几个系列都开个头(Nodejs.Java.前端.架构.全栈等等),无奈博客起步太晚, ...
- tomcat日志配置之一自带log
问题 tomcat每次启动时,自动在logs目录下生产以下日志文件,且每天都会生成对应日期的一个文件,造成日志文件众多: localhost.2012-07-05.txt catalina.2012- ...
- [RxJS] Marbles Testings
Install: npm install — save-dev jasmine-marbles Basic example: import {cold, getTestScheduler} from ...
- 【开卷故意】JAVA正則表達式模版
专业既然是机器学习.那工作肯定也是继续和数据打交道,那么问题来了,非常多时候推荐算法和数据挖掘算法都是现成可用的,平台初建,重点还在数据过滤和抽取.如何高效的抽取数据? 利用往常算法比赛中经常使用的字 ...
- UnrealEngine4针对游戏模式的思考
游戏能够概括为三类:单进程联机(超级玛丽).小规模联机(魔兽争霸.CS),大规模联机(魔兽世界). watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmx1c ...
- onvif开发实战1--总结框架搭建
Gsoap及开发框架生成: 一:gsoap下载和编译 1.下载Gsoap:地址:http://sourceforge.net/projects/gsoap2/files/gSOAP/ 2.安装: ...
- golang 部分理解：关于channel 和 goroutine 例子
部分理解:关于channel 和 goroutine 例子package main import "strconv" import "fmt" func mai ...
- python ATM机 案例代码
利用目前学的流程控制写的 ''' ATM机 需求: 1.登陆 输入账号输入密码 每日只有3次登陆密码错误的机会,超过3次禁止登陆 2.查询余额 3.存款 4.取款 5.转帐 6.退出 ''' info ...