[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的目的是让你的线程在有工作的时 ...
随机推荐
- Onvif开发之客户端搜索篇
关于ONVIF的广播,有客户端搜索和服务端发现的区别:客户端向固定的网段和固定的端口发送广播消息,服务端在对应的端口回复广播请求消息本文首先介绍客户端如何进行广播的已经对广播回复的信息的基本处理. 客 ...
- Elasticsearch之源码编译
前期博客 Elasticsearch之下载源码 步骤 (1)首先去git下载源码 https://github.com/elastic/elasticsearch/tree/v2.4.3 下载下来,得 ...
- 从硬件到语言，详解C++的内存对齐（memory alignment）（一）
作者:赵宗晟 出处:https://www.cnblogs.com/zhao-zongsheng/p/9099603.html 很多写C/C++的人都知道“内存对齐”的概念以及规则,但不一定对他有很深 ...
- 洛谷 P1981 表达式求值
P1981 表达式求值 题目描述 给定一个只包含加法和乘法的算术表达式,请你编程计算表达式的值. 输入输出格式 输入格式: 输入文件为 expr.in. 输入仅有一行,为需要你计算的表达式,表达式中只 ...
- js21---单体（单例）模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 11lession-class 类
python既然也是面向对象编程的语言,自然也就跟java相似,它也有类的概念.今天就简单学习下.看如下代码 #!/usr/bin/python class cl_test: test = 0 def ...
- 34.node.js之Url & QueryString模块
转自:https://i.cnblogs.com/posts?categoryid=1132005&page=6//引用 var url = require("url"); ...
- 基于Linux系统的Nagios网络管理模块的实现
基于Linux 系统的Nagios网络管理模块的实现 1.引言 随着计算机网络的普及,网络管理已成为信息时代中最重要的问题之一.在现有的技术条件下,人们希望有一个更加稳定可靠的网络环境.计算机网络管理 ...
- Java学习笔记五 常用API对象一
常用API:字符串操作:String类,StringBuffer类,StringBulider类 字符串是最重要的数据类型之一,处理字符串也是一种语言的基本工作. 1.String类: public ...
- 解决sublime text3配置Python3编译环境：运行代码时提示“NO Build System”
只需要在路径中把单杠换成双杠,重启sublime即可.