首页 前端 TypeScript 正文

使用AssemblyScript 构建 WebAssembly 应用

WebAssembly,也称为 Wasm,是为 Web 创建的二进制格式。它允许通过从常规 JavaScript 访问的相同 Web API 访问浏览器功能。WebAssembly 的最大亮点之一是效率和速度,在不po浏览器的权限安全策略,以接近原生的性能速度安全地运行。

尽管具有 Web 特性,但 WebAssembly 也可以在非 Web 模式下运行,例如服务器、物联网设备、移动/桌面应用程序,考虑到某些 Web 功能将不可用。

目前四种主要浏览器(Firefox、Chrome、Safari 和 Edge)都支持 WebAssembly,关于WebAssembly的介绍、优势等信息可以查阅《再次认识 WebAssembly》和《快速认识 WebAssembly》,本文主要内容是构建一个应用。

编写 AssemblyScript

AssemblyScript 代码看起来类似于 TypeScript。如果不熟悉它,请不要担心,基本上熟悉JavaScript也能看懂 TypeScript。

通过以下示例了解相应的区别:

这是一个不可移植的 AssemblyScript 代码,使用 TypeScript 并非 100% 准确:

let someFloat: f32 = 1.5
let someInt: i32 = <i32>someFloat

在 TypeScript 中,所有数字类型都是数字的别名,因此这些数字类型之间没有区别。

使用 AssemblyScript 编译器生成的可移植 TypeScript 代码将是:

let someFloat: f32 = 1.5
let someInt: i32 = i32(someFloat)

使用常规 TypeScript 编译器编译代码后,结果将是:

var someFloat = 1.5
var someInt = someFloat | 0

可以通过两种不同的方式编写 AssemblyScript:

  • 标准库

  • 低级 WebAssembly

这些方法并不相互排斥,可以根据需要将它们混合使用。

标准库

AssemblyScript 提供了一个类似于 JavaScript 的标准库,类似于 JavaScript 使用的标准库。

// It takes in two 32-bit integer values
// And returns a 32-bit integer value.
export function addInteger(a: i32, b: i32): i32 {
  return a + b;
}

低级 WebAssembly

在某些情况下,需要编写低级的WebAssembly。WebAssembly中前面函数的摘录如下所示:

(func $assembly/index/addInteger (param $0 i32) (param $1 i32) (result i32)
  local.get $0
  local.get $1
  i32.add
 )

应该避免使用非严格的 TypeScript 代码,因为并非所有代码都是有效的 AssemblyScript 代码。阅读有关 TypeScript 严格模式的更多信息

编写第一个AssemblyScript

开始之前需要确保机器上安装了 Node.js 最新的 LTS 版本,可以从 nodejs.org 获取。使用旧版本的 Node.js 会导致使用 AssemblyScript 编译器出错。第一个简单的 AssemblyScript,可以参阅《再次认识 WebAssembly》。

创建基于浏览器的钟摆

好吧,在浏览器中绘制钟摆并不是非常需要使用 Wasm,但主要目的是来了解如何使用 Wasm 来依赖于动画和绘制钟摆所需的数学计算:

Wasm 代码将负责钟摆的位置计算,有两个主要函数:

init 函数

export function init(
    startPositionX: f64,
    amplitude: u32,
    w: u32,
    h: u32
): void {
    angle = 0;
    var needed = (<i32>((w * h * sizeof<i32>() + 0xffff) & ~0xffff)) >>> 16;
    var actual = memory.size();
    if (needed > actual) memory.grow(needed - actual);
    pendulum = new Pendulum(startPositionX, amplitude);
}

该函数通过将变量存储在名为 Pendulum 的类对象中来负责变量的初始化;这个函数的另一个职责是负责内存分配;它使用配置的画布宽度和高度来计算所需的内存。如果没有正确分配内存, Wasm 可能会失败,更多内存管理可以点击这里阅读

move 函数

export function move(): void {
    angle += 10;
    if (angle == 360 || angle > 360) {
        angle = 0;
    }
    pendulum.nextPosition =
        pendulum.initialPosition +
        pendulum.amplitude * Math.sin((angle * Math.PI) / 180);
}

move 函数重新计算 Pendulumx 方向上的下一个位置,使用钟摆公式来计算位置。在 GitHub 上查看源代码

调试 WebAssembly

可以从支持的浏览器调试 WebAssembly 代码,下面来介绍如何使用 Chrome 进行调试。

  1. 确保正在运行带有调试目标的 asc 编译器,确保启用源映射,它将帮助从浏览器中更清晰地调试代码。

  2. 确保启用了 WebAssembly 调试( Chrome 开发人员工具设置->实验下的选项)

使用AssemblyScript 构建 WebAssembly 应用  第1张

  1. 启用后,重新加载浏览器;只需从关闭设置窗口后出现的消息中单击 Reload DevTools

  2. 现在可以在代码中添加断点并检查它!

使用AssemblyScript 构建 WebAssembly 应用  第2张

总结

这篇文章只是冰山一角, AssemblyScript 是一个文档齐全的项目,具有高级示例和令人兴奋的实现

坚信这个项目可以通过使用 TypeScript 的变体来缩小 Wasm 采用的差距,并打开大门以激发更多使用 Wasm 的兴趣。希望博文能帮助提高自己尝试 WebAssembly 的兴趣。

原文:https://juejin.cn/post/7113090353057497096
打赏
海报

本文转载自互联网,旨在分享有价值的内容,文章如有侵权请联系删除,部分文章如未署名作者来源请联系我们及时备注,感谢您的支持。

转载请注明本文地址:https://www.shouxicto.com/article/6170.html

相关推荐

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
支付宝
微信
赞助本站