别落伍!也该了解一下WebAssembly了!WebAssembly初学者指南

查理谈科技 2024-05-09 02:00:43

WebAssembly介绍

当代社会, 万事万物总是在快速地变化着,,有一种新技术正在产生巨大的影响。 想象一下一个超快的网络,几乎可以像常规计算机程序一样完成任务。 这就是 WebAssembly(简称“wasm”)的用武之地。

Wasm发音:

那么,什么是WebAssembly 呢?

什么是 WebAssembly?

WebAssembly 本质上是一种二进制指令格式。 虽然这听起来可能很复杂,但它可以被定义为一种通用语言,浏览器可以理解并以接近本机的速度执行。

与主要是基于文本的脚本语言的 JavaScript 不同,WebAssembly 被设计为一种低级语言,允许您将 C、C++ 或 Rust 等高级语言编译为可以在浏览器中运行的二进制格式。

对速度的极致追求

为了真正理解 WebAssembly 的重要性,先来看一下设计这门语言的初衷。 传统 Web 应用程序的功能严重依赖 JavaScript。 虽然 在现在的互联网应用中,JavaScript 占据了重要地位,用途广泛而且易于访问,但是在某些任务中, JavaScript的表现也不尽人意,例如在执行 3D 渲染、视频编辑或科学模拟等高性能任务时,JavaScript表现出一定的局限性。

WebAssembly 提供了一种接近原生代码的速度运行来此类任务的方法,从而解决了这些限制。 WebAssembly通过更接近机器代码并且更加有效地利用硬件资源来实现这一点。

WebAssembly 的工作原理

为了更好地理解 WebAssembly,先简单地看一下它的工作原理:

编译:使用 C、C++、Rust 等高级语言编写代码。然后将此代码编译为 WebAssembly 二进制文件(扩展名为 .wasm)。 该二进制文件针对快速执行进行了高度优化。

⚠️但是注意, wasm代码并不是本地代码,不能直接运行。

加载:当您加载包含 WebAssembly 模块的网页时,浏览器会像任何其他资源一样获取 .wasm 文件。

执行:加载后,WebAssembly 代码将由浏览器的虚拟机执行。 它以接近本机的速度运行,因为它更接近计算机 CPU 可以理解的机器代码。

集成:WebAssembly 可以与 JavaScript 无缝交互。 开发者可以从 JavaScript 调用 WebAssembly 函数,反之亦然,从而实现与现有 Web 应用程序的顺利集成。

WebAssembly 的用例

WebAssembly 的潜力远远超出了在浏览器中运行传统桌面应用程序的范围。 以下是一些高级用例:

3D 图形和游戏

WebAssembly 支持开发沉浸式 3D 游戏,这些游戏可以直接在浏览器中运行,性能与本机应用程序类似。 WebGL 等库和 Unity 等游戏引擎正在利用 WebAssembly 来突破基于 Web 的游戏的界限。

推荐游戏1:

暗黑破坏神Web版:https://d07riv.github.io/diabloweb/

源代码:https://github.com/d07RiV/diabloweb

该项目使用 WebAssembly,因为它使用 Emscripten 移植了 Deviloution 的源代码。 这是非常值得注意的,因为它证明了 WebAssembly 可以使用 Emscripten 将这些大型 C/C++ 代码库带到网络上,以运行令人印象深刻的 3D 游戏。

如果您对移植 C/C++ 库或应用程序感兴趣,我强烈推荐 Ben Smith 的 (binji) SFHTML5 Talk,内容涉及将 C 项目移植到 Web。 本演讲与 D3Wasm 无关,但可以帮助推动移植这些类型的应用程序。

推荐游戏2:

源代码:https://github.com/rdeepak2002

Dream Engine 简介:一款突破性的实时 3D 引擎,将尖端游戏引擎的功能与 Google Docs 的协作能力无缝集成

实时音频和视频处理

需要实时音频和视频处理的应用程序(例如视频会议或音乐制作软件)可以受益于 WebAssembly 的低级功能来有效处理数据。

示例:

网址:https://petersalomonsen.com/webassemblymusic/livecodev2/0.0.41/?gitrepo=blablabla

Peter Salomonsen 的 WebAssembly Music Experiment 是一个网络音乐实时编码编辑器,其中的乐器是在 AssemblyScript 中实现的。

Peter Salomonsen 的 WebAssembly Music Experiment 使用 AssemblyScript 开发实时编码编辑器中每个可用乐器的逻辑和示例输出。 “WebAssembly 使实时合成音频成为可能,并具有一致/可预测的性能。” 这意味着,由于合成音频的计算量很大,JavaScript 很难完成这项任务,但这使其非常适合 WebAssembly。 因此,为浏览器解锁新的高性能功能!

加密货币和区块链

许多区块链技术,包括以太坊,都采用 WebAssembly 作为智能合约的执行环境。 这确保了区块链操作的安全高效执行。

NEAR协议

网站源代码:https://github.com/near/near-sdk-as

Near Protocol 是用于使用 WebAssembly (AssemblyScript) 构建去中心化应用程序的公共区块链用于在 AssemblyScript 中开发 NEAR 智能合约的软件包集合,包括:

运行时库 - 运行时库附近的 AssemblyScriptbindgen - 添加(反)序列化输入和输出所需的绑定的 AssemblyScript 转换器。近模拟虚拟机 - NEAR VM 的核心编译为用于运行单元测试的 WebAssembly。@as-pect/cli - 类似于 jest 的 AssemblyScript 测试框架。

科学和计算任务

科学模拟和数据分析工具可以在浏览器中运行,使研究人员能够利用 WebAssembly 的强大功能进行复杂的计算。

示例:

Project Cthulhu 是一个基于网络的船舶模拟器,允许您在浏览器上计算、运行和可视化船舶模拟。 对于前端,它使用 React 和 Tailwind CSS。 对于该项目的 3D 部分,它使用 Three.js 和 React Three Fiber。

Project Cthulhu 是一个基于网络的船舶模拟器,允许您在浏览器上计算、运行和可视化船舶模拟。 对于前端,它使用 React 和 Tailwind CSS。 对于该项目的 3D 部分,它使用 Three.js 和 React Three Fiber。

我们想要尝试 WASM 并重用我们已经在代码中编写的 Python 代码。 因此我们最终使用了 Pyodide。

Github:https://lnkd.in/dzWYwir2

项目网站:https://lnkd.in/d4t8cU3z

个人网站:https://piperunner.in/

跨平台桌面应用程序

使用 Electron 和 WebAssembly 等工具,您可以创建跨平台桌面应用程序,这些应用程序与 Web 应用程序共享大部分代码库。

开始使用WebAssembly 需要注意什么

如果对 WebAssembly 的功能感到兴奋,那么开始编写之前,需要注意下面几点:

选择高级语言

您需要 C、C++ 或 Rust 等高级语言。 Rust 因其安全功能和 WebAssembly 支持而特别受欢迎。

设置开发环境

为您选择的语言安装必要的工具。 对于 Rust,您可以使用 Rust 的 WebAssembly 工具链,可以使用“rustup”安装该工具链。

编写并编译您的代码

使用您选择的语言编写代码,并使用适当的编译器将其编译为 WebAssembly。 对于 Rust,请使用“wasm-pack”工具。

与 JavaScript 集成

要从 JavaScript 与 WebAssembly 代码进行交互,您需要导入 WebAssembly 模块并调用其函数。 您可以使用 WebAssembly JavaScript API 来实现此目的。

框架和库

WebAssembly有着丰富的框架和库等待着开发人员。 这些工具不仅简化了 WebAssembly 编程的艺术,还提升了它的艺术水平,满足了开发人员不同的背景和偏好。

AssemblyScript 作为一种专为 WebAssembly 设计的类 TypeScript 语言脱颖而出,为想要利用 WebAssembly 性能优势的 JavaScript 开发人员简化了过渡过程。Microsoft 的 Blazor 引入了一种不同的方法,支持使用 C# 和 .NET 进行客户端开发,为熟悉这些生态系统的开发人员开辟了新的可能性。此外,Emscripten 的功能是将 C 和 C++ 代码作为输入,并使用一系列工具将其转换为 WebAssembly 字节码。 随后可以在 Web 浏览器中加载并运行生成的字节码,从而使开发人员能够利用 C 和 C++ 代码构建 Web 应用程序。

这些框架和库扩展了 WebAssembly 应用程序的视野,为具有不同背景和偏好的开发人员提供了灵活性和选择。

结论

WebAssembly 使开发人员能够创建曾经只能通过本机代码才能实现的高性能 Web 应用程序。 无论您是构建沉浸式游戏、实时多媒体应用程序还是复杂的科学模拟,WebAssembly 都开辟了新的可能性。

0 阅读:0

查理谈科技

简介:感谢大家的关注