wasm 系列之 WebAssembly 和 emscripten 暴力上手

wasm 是什么？

wasm 是 WebAssembly 的缩写。wasm 不是传统意义上的汇编语言，而是一种编译的中间字节码，可以在浏览器和其他 wasm runtime 上运行非 JavaScript 类型的语言，只要能被编译成 wasm，譬如 kotlin/wasm、Rust/wasm 等。

这是一种高度优化的可执行格式，其运行速度几乎与本机代码一样快，同时具有可移植性和安全性。 Emscripten 通过与 LLVM、 Binaryen、 Closure Compiler 和其他工具的集成，自动为您完成大量优化工作。

耳熟详闻的一个典型成功案例就是 Flutter 编译 Web 端应用，本质就是调用 Skia C++ 库，然后通过 wasm 技术提供了一个 CanvasKit 供 js 端使用。

emscripten 是什么？

Emscripten 是一个完整的 WebAssembly 开源编译器工具链。使用 Emscripten 可以将 C/C++ 代码或使用 LLVM 的任何其他语言编译为 WebAssembly，并在 Web、Node.js 或其他 Wasm 运行时上运行。

实际上，任何可移植的 C/C++ 代码库都可以使用 Emscripten 编译成 WebAssembly，从需要渲染图形、播放声音以及加载和处理文件的高性能游戏，到 Qt 等应用程序框架。 Emscripten 已被用于将一长串现实世界代码库转换为 WebAssembly，其生成小而快速的代码！

emscripten 环境准备

首先我们需要用到 Emscripten。Emscripten 是一个编译器工具链，使用 LLVM 去编译出 wasm。

先通过官网方式安装 Emscripten SDK，不同平台详情参见 https://emscripten.org/docs/getting_started/downloads.html。

# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that directory
cd emsdk

# Fetch the latest version of the emsdk (not needed the first time you clone)
git pull

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes .emscripten file)
./emsdk activate latest

# Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh

# On Windows, run emsdk.bat instead of ./emsdk, and emsdk_env.bat instead of source ./emsdk_env.sh.
# On Windows, if you use the activate command, the step of emsdk_env.bat is optional. If you want to know more, see activate SDK version.

Windows 下执行完emsdk_env.bat后再执行emcc -v有可能提示找不到命令，这时候自己把打印的路径加入环境变量下就行。

编写第一个 wasm 程序

写 wasm 的最流行语言是 Rust 和 C/C++。
C/C++ 的轮子比较丰富，比如 Skia（Canvas 底层调用的库）就是 C++ 写的。可惜的是 C/C++ 没有包管理工具。
而当下最炙手可热的当属 Rust，我不得不说它真的很酷，有包管理工具，工具链也很完善。先选择使用 C/C++ 语言，下一篇再使用 Rust。

在这里插入图片描述
上图可以看到，执行完 emcc 对 c 源代码编译后生成了a.out.js和a.out.wasm两个产物文件。其中 js 文件是胶水代码，用来加载和执行 wasm，因为 wasm 不能直接作为入口文件使用，所以上图 node 命令实际执行的是胶水入口，然后胶水入口调用了 wasm 文件。

我们可以通过 file 命令看下这三个文件类型，如图：

在这里插入图片描述

除过使用 nodejs 环境运行外，我们接下来尝试将上面 wasm 跑在浏览器中。

先确保你本地有 nodejs 环境，并且通过npm -g install http-server安装了方便的 http-server，以便下面启动一个 http 服务器解决无法同源策略加载 wasm 文件的问题。

新建一个 html 文件并引入 wasm 的胶水 js 代码，然后启动服务，如图：

在这里插入图片描述

接着在浏览器打开刚编写的网页可以在控制台看到我们前面在 c 语言中编写的 printf 代码输出，如下：

在这里插入图片描述

我们可以继续看下其网络情况，如下：

在这里插入图片描述

emscripten 用法

上面我们快速使用 emscripten 的 emcc 命令，这里我们可以稍微再看下 emscripten 的其他用法，关于更多 emscripten 用法可以参见官方文档https://emscripten.org/docs/getting_started/Tutorial.html，这里不再赘述。

Generating HTML

我们可以将上面 emcc 编译命令换成emcc test.c -o test.html，然后可以一步到位生成网页，产物如下图：

在这里插入图片描述

接着使用浏览器直接打开 html，而不用我们自己再编写 html 引入 wasm 的胶水代码，如下：

在这里插入图片描述

可以看到我们 c 语言打印的 printf 输出已经出现在网页中了。上面网页其实有两部分，下部分是我们控制台输出的显示，上部分其实是一个 Canvas，我们通过下面例子就能在上面绘制彩色立方体的东西，如下：

#include <stdio.h>
#include <SDL/SDL.h>

#ifdef __EMSCRIPTEN__
#include <emscripten.h>
#endif

int main(int argc, char** argv) {
  printf("hello, world!\n");

  SDL_Init(SDL_INIT_VIDEO);
  SDL_Surface *screen = SDL_SetVideoMode(256, 256, 32, SDL_SWSURFACE);

#ifdef TEST_SDL_LOCK_OPTS
  EM_ASM("SDL.defaults.copyOnLock = false; SDL.defaults.discardOnLock = true; SDL.defaults.opaqueFrontBuffer = false;");
#endif

  if (SDL_MUSTLOCK(screen)) SDL_LockSurface(screen);
  for (int i = 0; i < 256; i++) {
    for (int j = 0; j < 256; j++) {
#ifdef TEST_SDL_LOCK_OPTS
      // Alpha behaves like in the browser, so write proper opaque pixels.
      int alpha = 255;
#else
      // To emulate native behavior with blitting to screen, alpha component is ignored. Test that it is so by outputting
      // data (and testing that it does get discarded)
      int alpha = (i+j) % 255;
#endif
      *((Uint32*)screen->pixels + i * 256 + j) = SDL_MapRGBA(screen->format, i, j, 255-i, alpha);
    }
  }
  if (SDL_MUSTLOCK(screen)) SDL_UnlockSurface(screen);
  SDL_Flip(screen);

  printf("you should see a smoothly-colored square - no sharp lines but the square borders!\n");
  printf("and here is some text that should be HTML-friendly: amp: |&| double-quote: |\"| quote: |'| less-than, greater-than, html-like tags: |<cheez></cheez>|\nanother line.\n");

  SDL_Quit();

  return 0;
}

上面官方例子的代码位于https://github.com/emscripten-core/emscripten/blob/main/test/hello_world_sdl.cpp。

我们通过emcc hello_world_sdl.cpp -o hello.html编译然后浏览器打开产物网页，如下：

在这里插入图片描述

官方还有很多 Canvas 有趣例子，自己可以探索一下。

Using files

先放官方文档这句最重要的话：

Your C/C++ code can access files using the normal libc stdio API (fopen, fclose, etc.)

JavaScript 通常在 web 浏览器的沙盒环境中运行，不直接访问本地文件系统。Emscripten模拟了一个虚拟的文件系统使得我们可以使用普通的 libc stdio API。我们要访问的文件应该预加载或嵌入到这个虚拟文件系统中。

官方文件系统架构机制如下图：

在这里插入图片描述

我们来看一段名叫hello_world_file.cpp的 cpp 代码：

#include <stdio.h>

int main() {
  FILE *file = fopen("hello_world_file.txt", "rb");
  if (!file) {
    printf("cannot open file\n");
    return 1;
  }
  while (!feof(file)) {
    char c = fgetc(file);
    if (c != EOF) {
      putchar(c);
    }
  }
  fclose (file);
  return 0;
}

官方这个例子的源码位于https://github.com/emscripten-core/emscripten/blob/main/test/hello_world_file.cpp。

下面的命令用于指定要在运行编译后的代码之前先预加载到 Emscripten 的虚拟文件系统中的数据文件。这种方法很有用，因为浏览器只能从网络异步加载数据(Web Workers除外)，而许多本机代码使用同步文件系统访问。

emcc hello_world_file.cpp -o hello.html --preload-file hello_world_file.txt

在这里插入图片描述

运行效果如下：

在这里插入图片描述

Optimizing code

与gcc和clang一样，Emscripten在默认情况下生成未优化的代码。你可以使用- 01命令行参数生成稍微优化的代码:

emcc -O1 test/hello_world.cpp

还有其他-O2、-O3、-Og、-Os、-Oz等都和 clang 等一样的含义，不再赘述。

总结

到此我们算是入门了 wasm(WebAssembly) 和 emscripten，其他高级进阶请关注和作者链接等待更新，欢迎期待~

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/563021.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Linux嵌入式驱动开发-阻塞IO与非阻塞IO

Linux嵌入式驱动开发-阻塞IO与非阻塞IO

文章目录 阻塞与非阻塞访问简介阻塞访问的实现等待队列等待队列头等待队列项从等待队列头添加/移除等待队列项等待唤醒等待事件API 非阻塞访问的实现轮询poll 函数原型可以返回的资源状态 阻塞与非阻塞访问简介 **IO&#xff1a;**Input/Output&#xff0c;也就是输入/输出&am…
阅读更多...
2024mac苹果电脑如何清理磁盘空间？用什么软件最好

2024mac苹果电脑如何清理磁盘空间？用什么软件最好

苹果电脑已成为我们日常生活和工作不可或缺的一部分。随着时间的推移&#xff0c;不论是办公文档、个人照片还是各式各样的应用程序&#xff0c;都会逐渐积累&#xff0c;导致电脑的磁盘空间日益紧张。对于用户来说&#xff0c;苹果电脑如何清理磁盘空间&#xff0c;以保持设备…
阅读更多...
iOS 全平台矢量动画库：体积小巧、功能丰富 | 开源日报 No.227

iOS 全平台矢量动画库：体积小巧、功能丰富 | 开源日报 No.227

airbnb/lottie-ios Stars: 24k License: NOASSERTION lottie-ios 是一个用于在 iOS 平台上本地渲染 After Effects 矢量动画的库。 该项目主要功能、关键特性、核心优势包括&#xff1a; 跨平台支持&#xff1a;可在 iOS, macOS, tvOS, visionOS, Android 和 Web 上使用实时渲…
阅读更多...
07节-51单片机-矩阵键盘

07节-51单片机-矩阵键盘

文章目录 1矩阵键盘原理2.扫描的概念3.弱上拉4.实战-实现矩阵键盘对应按钮按下显示对应值4.1配置代码模板 5.键盘锁 1矩阵键盘原理 在键盘中按键数量较多时&#xff0c;为了减少I/O口的占用&#xff0c;通常将按键排列成矩阵形式 采用逐行或逐列的“扫描”&#xff0c;就可以读…
阅读更多...
前程贷v6.5系统测试报告

前程贷v6.5系统测试报告

1.引言部分 1&#xff0e;1 项目背景 本测试报告的具体编写目的&#xff0c;指出预期的读者范围。(3-4句) 项目描述 &#xff08;项目内容&#xff0c;用户需求&#xff09; 本测试报告为**&#xff08;系统名称&#xff09;**系统测试报告&#xff1b;本报告目的在于总结测试…
阅读更多...
【JavaEE初阶系列】——数据链路层以太网以及Mac地址

【JavaEE初阶系列】——数据链路层以太网以及Mac地址

目录 &#x1f6a9;认识以太网 &#x1f6a9;以太网帧格式 &#x1f6a9;IP地址和Mac地址各自的用途 &#x1f6a9;认识以太网 "以太网"不是一种具体的网络&#xff0c;而是一种技术标准&#xff1b;既包含了数据链路层的内容&#xff0c;也包含了一些物理层的内…
阅读更多...
在ios设备上运行Unity Profiler

在ios设备上运行Unity Profiler

久违了朋友们。 最近基于Unity 2021.3 和AR Foundation开发了个应用&#xff0c;需要在ipad上实际运行时查看程序的各项指标功耗。 于是乎&#xff0c;我尝试跟随者官方教程来实时调试&#xff0c;现在附上一些心得。 按照官方的三步走&#xff0c;Build and Run理论上会自动…
阅读更多...
SSH远程连接服务实战

SSH远程连接服务实战

题目&#xff1a; 一.配置两台主机 主机1、 主机名: server.example.com ip: 192.168.78.129 建立用户timinglee&#xff0c;其密码为timinglee 主机2、 主机名&#xff1a;client.example.com ip: 192.168.78.128 2.安需求完成项目 192.168.78.128 在远程登录192.168.78.129的…
阅读更多...
MySQL处理并发访问和高负载的关键技术和策略

MySQL处理并发访问和高负载的关键技术和策略

大家好&#xff0c;我是咕噜铁蛋。今天&#xff0c;我想和大家聊聊MySQL处理并发访问和高负载的关键技术和策略。在当今这个数据爆炸的时代&#xff0c;数据库作为数据存储和处理的核心&#xff0c;其性能的稳定性和高效性显得尤为重要。MySQL作为广泛使用的关系型数据库管理系…
阅读更多...
【语音识别】在Win11使用Docker部署FunASR服务器

【语音识别】在Win11使用Docker部署FunASR服务器

文章目录 在 Win11 使用 Docker 部署 FunASR 服务器镜像启动服务端启动监控服务端日志下载测试案例使用测试案例打开基于 HTML 的案例连接ASR服务端 关闭FunASR服务 在 Win11 使用 Docker 部署 FunASR 服务器 该文章因官网文档不详细故写的经验论 官网文章&#xff1a;https:/…
阅读更多...
安装多个MySQL版本时如何连接到不同的数据库

安装多个MySQL版本时如何连接到不同的数据库

当安装多个版本的数据库时&#xff0c;不同版本的端口名不一样&#xff0c;可以使用以下命令进行连接 mysql -uroot -p数据库密码 -h主机名 -P端口号 数据库主机名默认是localhost&#xff0c;端口号默认是3306&#xff0c;当安装多个版本数据库时&#xff0c;需要记住数据库的…
阅读更多...
Prompt-to-Prompt Image Editing with Cross Attention Control

Prompt-to-Prompt Image Editing with Cross Attention Control

Prompt-to-Prompt Image Editing with Cross Attention Control TL; DR&#xff1a;prompt2prompt 提出通过替换 UNet 中的交叉注意力图&#xff0c;在图像编辑过程中根据新的 prompt 语义生图的同时&#xff0c;保持图像整体布局结构不变。从而实现了基于纯文本&#xff08;不…
阅读更多...
2024HW ---＞蓝队面试题

2024HW ---＞蓝队面试题

这段时间在写横向移动&#xff0c;搞得鸽了很久&#xff08;内网真的很玄学&#xff09; 还没写完。。。 但是这不是准备HW了吗。小编也来整理一下自己收集到的题目吧&#xff01;&#xff01;&#xff01; &#xff08;仅为个人见解&#xff0c;不代表最终答案&#xff09;&…
阅读更多...
select实现echo服务器的并发

select实现echo服务器的并发

select实现echo服务器的并发 代码实现 #include <stdio.h> #include <string.h> #include <sys/types.h> #include <sys/socket.h> #include <stdlib.h> #include <arpa/inet.h> #include <sys/select.h> #include <sys/time.h…
阅读更多...
Nodejs - 异步I/O

Nodejs - 异步I/O

异步I/O 利用单线程&#xff0c;远离多线程死锁&#xff0c;状态同步等问题&#xff0c;利用异步I/O&#xff0c; 让单线程原理阻塞&#xff0c;更好的使用cpu异步I/O实现现状 阻塞IO 操作系统内对于I/O只有两种方式: 阻塞和非阻塞。在调用阻塞I/O的时候&#xff0c;应用程序需…
阅读更多...
无损以太网的ROCE革命，队列的缓存空间优化分析

无损以太网的ROCE革命，队列的缓存空间优化分析

ROCE无损以太网&#xff0c;队列的缓存空间优化 多级缓存架构优化芯片性能&#xff1a;* 缓存空间细分为芯片级、端口级和队列级&#xff0c;实现精细管理。* 无损队列引入Headroom缓存空间&#xff0c;确保数据完整性。 在芯片层面&#xff1a; 静态缓存为端口提供保证的缓存空…
阅读更多...
Tomcat弱口令及war包漏洞复现（保姆级教程）

Tomcat弱口令及war包漏洞复现（保姆级教程）

1.环境搭建 靶机&#xff1a;Ubuntu 安装参考&#xff1a;安装Ubuntu详细教程_乌班图安装教程-CSDN博客 vulhub docker搭建tomcat漏洞环境 参考&#xff1a;vulhub docker靶场搭建-CSDN博客 工具&#xff1a;burpsuite 2.漏洞复现 2.1弱口令爆破 进入http://192.168.143…
阅读更多...
分类神经网络1：VGGNet模型复现

分类神经网络1：VGGNet模型复现

目录 分类网络的常见形式 VGG网络架构 VGG网络部分实现代码 分类网络的常见形式 常见的分类网络通常由特征提取部分和分类部分组成。 特征提取部分实质就是各种神经网络&#xff0c;如VGG、ResNet、DenseNet、MobileNet等。其负责捕获数据的有用信息&#xff0c;一般是通过…
阅读更多...
创新案例｜Amazon.com 2023 年营销策略：电子商务零售巨头商业案例研究

创新案例｜Amazon.com 2023 年营销策略：电子商务零售巨头商业案例研究

2022 年最后一个季度&#xff0c;亚马逊报告净销售额超过 1,492 亿美元。这种季节性峰值是亚马逊季度报告的典型特征&#xff0c;但增长是不可否认的&#xff0c;因为这是该公司有史以来最高的季度。毫无疑问&#xff0c;这家电商零售巨头继续引领电商增长。本文将介绍我们今天…
阅读更多...
Elasticsearch进阶篇(三)：ik分词器的使用与项目应用

Elasticsearch进阶篇(三)：ik分词器的使用与项目应用

ik分词器的使用 一、下载并安装1.1 已有作者编译后的包文件1.2 只有源代码的版本1.3 安装ik分词插件 二、ik分词器的模式2.1 ik_smart演示2.2 ik_max_word演示2.3 standard演示 三、ik分词器在项目中的使用四、ik配置文件4.1 配置文件的说明4.2 自定义词库 五、参考链接 一、下…
阅读更多...
最新文章

Copyright @ 2022~2023