您现在的位置是：首页 > 文章详情

【JSConf EU 2018】Rust + WebAssembly

日期：2018-07-10点击：525收藏

欧洲JSConf上的神秘项目

在今年的欧洲JSConf上来自Mozilla的Lin Clark为我们展示一个神秘项目，一个的拱形彩虹门（视频传送门），它实际上是由三万个彩色LED组成的画布，可以展现灯光动画，并且通过Rust编写的WebAssembly模块来控制“拱门”的灯光动画。Lin在2017年的JSConf上也曾做过关于WebAssembly的演讲，在该演讲中她提到2008年是JavaScript执行效率曲线的一个拐点，随着众多浏览器加入了JIT编译器（Just-in-time compiler），JavaScript的运行性能带来了十倍的增速，这为JavaScript插上了一双翅膀使它可以自由翱翔在浏览器端、服务器端和客户端。Lin指出WebAssembly的诞生可能会成为曲线的下一个拐点。可见Mozilla对WebAssembly的重视程度。

cd2a6fac25d9ae42303507212c2bb3744c111059

emm...让我们回到2018年。Lin在会上说明了如何使用WebAssembly模块控制“拱门”的灯光动画。下面让我们来看下这是如何做到的。

用字节把空间或时间连续起来

我们所处的空间是一个三维空间，如果再给它加上时间维度，那它就是四维空间。

d09b3a6f25cbdc3bd6497dca3ae73c4d70918886

计算机是没有办法理解这个四维空间的，如果要让计算机可以“理解”，我们需要对四维空间降维。首先是时间维度，可以通过帧来完成的。显示屏就像一个翻页的书，每一帧就相当于书的一页。

c5b717db18c9c1dee8dce63ddbbd433be402c2f4

现在要从三维降到二维，我们要做的是将空间压平到一个方格纸上。

6132b8f5da7757709856696b6bcb17491541eae6

现在下降到了一行像素，我们已经可以把它放到内存里面了，因为WebAssembly内存（linear memory）基本就是一排小格子。这意味着我们已经下降到一维结构，但是仍然拥有着代表着二维、三维或四维的全部数据。只是现在它们是以一种连续的、线性的方式在展示。

线性内存（Linear memory）

线性内存是JavaScript和WebAssembly的一个主要通信方式，WebAssembly和运行它的JavaScript都可以访问这个对象。线性内存实际上是一个可变大小的ArrayBuffer对象，本质上是连续的、按字节可寻址的一段内存。

8963e692500c1048d0590f12f92bcb84d4f54726

7338e15b95dadfb7714c469cf340ba0bf7ce4240

例如你用了一个16进制的值，那你的数字将有24位的宽度。所以你需要一个24位的格子。每个格子都包含一个像素,而可容纳24位最小的格子是32位的（int32），所以我们将在这个缓冲区上创建一个Int32Array的视图。它将这段缓冲区的字节码包裹到格子里。在这个例子里我们需要添加一些空白来填充这个格子由24位补齐到32位。

如果我们使用RGB值，这些格子将是8位的宽度。为了得到一个RGB的值，你将使用每三个格子代表你的R、G和B的值。这意味着你需要遍历这些格子，并取出它们里面的数字。

7452d285f4f7d7b046af295c2dcd7d12d4c08163

直接使用线性内存，你需要手动（写一些代码）遍历它，把它里面的数据取出来存放到更加合理的数据结构里。对于这个项目来说，这样做不是很糟糕。颜色的映射是数字，它们相对容易使用线性内存来表示。我们使用的数据结构（RGB值）也不是很复杂。但是如果你使用的是更加复杂的数据结构，直接处理内存将会很痛苦。如果你可以直接传一个JavaScript对象给WebAssembly，让WebAssembly去维护它，这将会变简单很多。你只需要添加一个很小的库(wasm-bindgen)就可以做到这些。

使用wasm-bindgen

wasm-bindgen是使用Rust写的一个库，它可以使JavaScript与WebAssembly模块之间的数据交互变的更简单。它用一个JavaScript wrapper 来包裹WebAssembly模块。这个wrapper知道如何将复杂的JavaScript对象写入线性内存。然后，当WebAssembly函数返回一个值时，JavaScript wrapper将从线性内存中获取数据并将其重新转换为JavaScript对象。

ba93b826e6c84d2f6f6438d9be791d1827d65bea

要做到这一点，它会查看Rust代码中的函数签名，并计算出所需的JavaScript。这适用于像字符串这样的内置类型，也适用于你定义在代码里的类型。wasm-bindgen将Rust结构体转化JavaScript的类。该工具在当前版本只支持Rust，之后会不断完善从而支持其他编程语言（例如：C/C++）。