[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的目的是让你的线程在有工作的时 ...
随机推荐
- LA 2531 The K-league 最大流
#include <iostream> #include <cstdio> #include <fstream> #include <algorithm> ...
- js常用代码示例及解决跨域的几种方法
1.阻止默认行为 // 原生js document.getElementById('btn').addEventListener('click', function (event) { event = ...
- date---显示或设置系统时间与日期
date命令可以用来显示或设定系统的日期与时间,格式设定为一个加号后接数个标记,其中可用的标记列表如下: 时间方面: %H : 小时(00..23) %M : 分钟(00..59) %p : 显示本地 ...
- 00084_Map接口
1.Map接口概述 通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形式不同. (1)Collection中的集合,元素是孤立存在的(理解为单身),向集 ...
- 洛谷 P2867 [USACO06NOV]大广场Big Square
P2867 [USACO06NOV]大广场Big Square 题目描述 Farmer John's cows have entered into a competition with Farmer ...
- 缩放文本框ExpandTextView
效果图: 代码: import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import ...
- hdu5414（2015多校10）--CRB and String（字符串匹配）
题目链接:pid=5414">点击打开链接 题目大意:有A.B两个字符串.如今有一种操作能够在A的随意一个字符x后面添加一个字符y(x.=y).问能不能将A变为B. 首先假设A能够变成 ...
- 推断字符串string是数字、json结构、xml结构
import org.json.JSONException; import org.json.JSONObject; import org.dom4j.DocumentException; impor ...
- 漫话C++之string字符串类的使用（有汇编分析）
C++中并不提倡继续使用C风格的字符串,而是为字符串定义了专门的类,名为string. 使用前的准备工作 在使用string类型时,需要包含string头文件,且string位于std命名空间内: # ...
- android图片特效处理之光晕效果
这篇将讲到图片特效处理的图片光晕效果.跟前面一样是对像素点进行处理,本篇实现的思路可参见android图像处理系列之九--图片特效处理之二-模糊效果和android图像处理系列之十三--图片特效处理之 ...