Rust + WebAssembly 实战！别再听说，学会使用！

序

作为前端，如果你第一次使用 WebAssembly（WASM），你一定会同我一样震惊。就好像看见了 Web 世界的后花园，无尽空间，宝藏无垠。

你肯定不止一次，听过、刷到过 Rust、WASM。答应我，这一次，不要只是听说。我会用我的实战来帮助你，把它化为你自己的武器。

认真看完，希望你能有所收获。（末尾有仓库地址）

需求

客户为一栋房子的各个房间，安装了温度传感器。他们希望用热力图来展示整栋楼的温度分布。

我们熟知的传统热力图，本质上仍是一个二维的概念。

曲面高度和颜色都是指标大小的表现

思路

得到同事的启发，也许我们可以使用插值算法，来模拟三维空间的热力变化。

例如我们有点数据

x	y	z	value
10	10	10	20
20	20	20	40
30	30	30	60

我们可以在空间中插值出更多的点

x	y	z	value
10	10	10	20
15	15	15	30
20	20	20	40
25	25	25	50
30	30	30	60

只要我们插入足够密集的点，然后我们根据颜色映射规则，给每个点上色，最终效果看起来就像

Rust + WebAssembly 登场

当然具体的业务实现对于本片文章来说并不重要，你也完全可以在 JavaScript 里一个插值算法。

但说到算法与性能，我觉得完全可以信任 Rust，并且这是 WebAssembly 的最佳舞台。

具体的实现就在 heatmap-points-wasm 仓库中。

不过我会为你在这里介绍一下，我们怎么把 Rust 代码通过 WebAssembly 用到前端项目中。

你不必担心面对一门新的语言，因为在 AI 的加持下，编程语言的门槛正在变得越来越低，你可能只要告诉 AI 你想要什么，或者用你熟悉的编程语言实现后，交给它去翻译。

前端使用

我有一个大胆的想法，我们为什么不能像使用 js 包的函数一样使用 wasm 呢？就像这样

js 复制代码

import { interpolate_wasm } from 'heatmap-points-wasm';
const inputPoints = [
    { x: 0, y: 0, z: 0, value: 1 },
    { x: 1, y: 1, z: 1, value: 2 },
    { x: 2, y: 2, z: 2, value: 3 },
];
const interpolatedPoints = interpolate_wasm(
    JSON.stringify(inputPoints), // 输入点云数据的 JSON 字符串
    10, // grid size
);
console.log(JSON.parse(interpolatedPoints)); // 输出插值后的点云数据

这真的很棒，没有任何的心智负担!

实际上，你真的就可以这么使用，这得益于现在强大的前端构建工具 Vite

你只需要在 vite.config.js 中添加 vite-plugin-wasm 插件

js 复制代码

import { defineConfig } from 'vite';
import wasm from 'vite-plugin-wasm';
export default defineConfig({
  plugins: [wasm()],
});

如果你想亲自体验, 也可以 npm 下载 heatmap-points-wasm 来使用

Rust 构建 wasm 包

我想你肯定已经学会了使用 wasm 包，因为这压根不用学习。剩下的我会告诉你如何构建 wasm 包。

你得先有个 Rust 环境，这很简单，参考 Rust官网

为 wasm 编译添加必要依赖

bash 复制代码

# 添加 WASM 编译目标
rustup target add wasm32-unknown-unknown
# 安装 wasm-pack
cargo install wasm-pack

初始化一个新的 Rust 工程

bash 复制代码

cargo new --lib heatmap-points-wasm
cd heatmap-points-wasm

编辑 Cargo.toml

toml 复制代码

[package]
name = "heatmap-points-wasm"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

给 lib 函数添加注解

rust 复制代码

use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn interpolate_wasm() {
  //... 
}

构建 wasm 包 + 发布（可选）

bash 复制代码

wasm-pack build

如图，你会在 pkg 目录下看到生成的文件，这是一个标准的 npm 包，你可以直接发布到 npm 上

bash 复制代码

cd pkg
npm publish --access public --registry https://registry.npmjs.org

当然，你可以直接在本地使用这个包

json 复制代码

{
  "dependencies": {
    "heatmap-points-wasm": "../pkg" // pnpm 本地引用
  }
}

结

你可以在 heatmap-points-wasm 仓库中看到完整的代码，包含构建和使用的示例。

除了本文提到的 Rust，你还可以使用更多语言来编写 WASM，例如 C/C++。

选择一门语言，本质上是选择它的生态。这意味者，前端开发的背后从此有了强而有力的生态支撑。

对于开发而言，WebAssembly 无疑是一种伟大的技术。