HTML/CSS/JavaScript/WASMの練習

たまたまARMのクロス目当てに、LLVM/Clangをコンパイルしてみたら、targetにWebAssembly(WASM)が
入っていた https://seesaawiki.jp/cacko/d/LLVM/Clang
ので、メモだけしておく。当面は試さない。

output.wasmの動かし方:
WebAssemblyでoutput.wasmを生成したとして、どこで実行するのか?例えばLinux環境の場合、ターミナルから実行できるのか?
ChatGPT
WebAssembly (Wasm) モジュールは、通常、ウェブブラウザや特定のランタイム環境で実行されます。Linux環境でも、以下のようなツールやランタイムを使用することで、ターミナルからWebAssemblyモジュールを実行することができます。

1. Node.js
Node.jsは、WebAssemblyを実行するためのランタイム環境として非常に人気があります。Node.jsには、WebAssemblyを実行するためのネイティブサポートが含まれています。
実行手順:
1.1.Node.jsをインストールします(まだインストールしていない場合)。
1.2.以下のJavaScriptコードを作成して、WebAssemblyモジュールをロードして実行します。
// load_wasm.js
\const fs = require(‘fs’);
\const path = require(‘path’);
\const wasmBuffer = fs.readFileSync(path.resolve(__dirname, ‘output.wasm’));
\WebAssembly.instantiate(wasmBuffer).then(wasmModule => {
\ const { instance } = wasmModule;
\ console.log(instance.exports._start()); // _startはエントリーポイント関数
\});
1.3.ターミナルから実行します。
$ node load_wasm.js

2. WASI (WebAssembly System Interface)
WASIは、WebAssemblyモジュールがOSレベルの機能にアクセスできるようにするためのインターフェースです。WASI対応のランタイム(例:wasmtime、wasmer)を使用することで、WebAssemblyモジュールをコマンドラインから直接実行することができます。
実行手順 (wasmtimeを例に):
2.1.Wasmtimeをインストールします。
$ curl https://wasmtime.dev/install.sh -sSf | bash
2.2.WebAssemblyモジュールを実行します。
$ wasmtime output.wasm
2.3. Browser
もちろん、WebブラウザはWebAssemblyを実行するための標準的な環境です。ブラウザ上でWebAssemblyモジュールを実行するには、JavaScriptコードを使用してモジュールをロードします。

実行手順:
1.HTMLファイルとJavaScriptファイルを作成します。
\<!– index.html –>
\<!DOCTYPE html>
\<html>
\<head>
\ <title>WebAssembly Example</title>
\</head>
\<body>
\ <script src=”load_wasm.js”></script>
\</body>
\</html>
\
javascript
// load_wasm.js
\fetch(‘output.wasm’)
\ .then(response => response.arrayBuffer())
\ .then(bytes => WebAssembly.instantiate(bytes))
\ .then(results => {
\ const { instance } = results;
\ console.log(instance.exports._start()); // _startはエントリーポイント関数
\ });
2.ローカルサーバーを立ち上げて、ブラウザでindex.htmlを開きます。
$ python3 -m http.server

まとめ
WebAssemblyモジュールは、Node.js、WASIランタイム(wasmtime、wasmerなど)、およびウェブブラウザで実行することができます。Linux環境でターミナルから直接実行する場合は、Node.jsやWASIランタイムを使用することが一般的です。

CでWebサービス?:
ClangでのWebAssemblyについて、C言語で書く場合、どの様なWebサービスを作ることができるのか?
ChatGPT
ClangでWebAssemblyを使用してC言語でWebサービスを作成する場合、いくつかのタイプのアプリケーションやサービスが考えられます。WebAssemblyはブラウザ内での実行が主な用途ですが、他のランタイム環境でも動作します。以下にいくつかの例を挙げます。
1. 高パフォーマンスな計算アプリケーション
C言語の性能を活かして、高度な計算を必要とするアプリケーションをWebAssemblyで実装できます。例えば、科学技術計算、画像処理、音声・動画のエンコーディングやデコーディングなどが考えられます。
例:画像処理サービス
ユーザーがブラウザに画像をアップロードし、WebAssemblyでフィルタリングや変換を行うサービスを提供します。
2. ゲームエンジン
C言語で書かれたゲームエンジンをWebAssemblyにコンパイルし、ブラウザ上で実行することができます。これにより、ブラウザベースのゲームを高パフォーマンスで動作させることが可能です。
例:2D/3Dゲームエンジン
ユーザーがブラウザでアクセスしてプレイできるゲームを提供します。WebAssemblyを使用することで、ネイティブアプリケーションに近い性能を実現します。
3. レガシーコードのWeb移植
既存のC言語で書かれたアプリケーションやライブラリをWebAssemblyにコンパイルし、Webベースのインターフェースを提供することができます。これにより、既存の資産をWeb環境で再利用できます。
例:古いデスクトップアプリケーションのWeb版
企業が使用している古いC言語の業務アプリケーションをWebに移植し、ブラウザ経由でアクセス可能にします。
4. マルチプレイヤー対応のリアルタイムアプリケーション
リアルタイムでのインタラクションが必要なアプリケーションを、WebAssemblyとWebSocketsなどの通信技術を組み合わせて構築できます。
例:リアルタイム共同編集ツール
複数のユーザーが同時にドキュメントやコードを編集できるツールをWebAssemblyで実装します。
実装例:画像処理サービス
以下に、画像処理サービスの簡単な例を示します。

C言語コード(例:グレースケール変換)
\#include <stdint.h>
\void grayscale(uint8_t *image, int width, int height) {
\ for (int y = 0; y < height; y++) {
\ for (int x = 0; x < width; x++) {
\ int index = (y * width + x) * 4;
\ uint8_t r = image[index];
\ uint8_t g = image[index + 1];
\ uint8_t b = image[index + 2];
\ uint8_t gray = (r + g + b) / 3;
\ image[index] = image[index + 1] = image[index + 2] = gray;
\ }
\ }
\}

コンパイル
$ clang –target=wasm32 -nostartfiles -Wl,–no-entry -Wl,–export-all -o grayscale.wasm grayscale.c

JavaScriptコード
\fetch(‘grayscale.wasm’)
\ .then(response => response.arrayBuffer())
\ .then(bytes => WebAssembly.instantiate(bytes))
\ .then(results => {
\ const { instance } = results;
\ const grayscale = instance.exports.grayscale;
\
\ // 画像データを処理
\ const image = …; // 画像データのUint8Array
\ const width = …; // 画像の幅
\ const height = …; // 画像の高さ
\
\ grayscale(image, width, height);
\
\ // 処理された画像を表示
\ …
\ });

まとめ
ClangでWebAssemblyを使用してC言語でWebサービスを作成することで、高パフォーマンスな計算アプリケーション、ゲームエンジン、レガシーコードのWeb移植、リアルタイムアプリケーションなどを実現できます。WebAssemblyを使うことで、ブラウザ上でネイティブに近い性能を引き出すことが可能です。

snes9x WebAssembly、でググった:
https://kazuki-4ys.github.io/web_apps/snes9x-2005-wasm/
https://github.com/kxkx5150/Super-Famicom-wasm
(やるヤツいたか、やっぱり。学習用の題材としては最高かもしれない)
https://qiita.com/Usuyuki/items/c58b544329f8451bf357

参考情報:
WebAssembly(WASM) (2024.01)
https://zenn.dev/koduki/articles/9f86d03cd703c4
(Webの所はJSで書いて、それ以外をCで書いたら速くなる。メモリリークやヌルポしなきゃ無問題?)
https://zenn.dev/ken3pei/articles/1abbf7d974cf5d
このBusyBoxのimageを含んだものをdistrolessは提供している。
(Dockerのベースシステムは組み込みLinuxに向かっているのか?)
\
最近のbitbakeを調べた
https://seesaawiki.jp/lifewithopenzaurus/d/%ba%c7%b6%e1%a4%cebitbake%a4%f2%c4%b4%a4%d9%a4%bf

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です