はじめに RubyKaigi2023が2023年5月11日から13日の3日間で開催されていることを最終日に知ったため、午後以降のセッションにオンラインで参加しました。 参加した「Load gem from browser」というセッションでruby.wasmという言葉が初耳で気になったので、少し調べてみました！ ruby.wasmって何？ セッション中では、「ruby.wasmはrubyスクリプトをブラウザ上で動かすことができる技術」とお話しされていました。 ruby.wasmについては、ruby.wasmについて でも説明されています。 ruby.wasmを触ってみる https://github.com/ruby/ruby.wasmを参考に↓のRubyコードが記載されたHTMLコードを作成し、ブラウザ上（chrome）で実行 <html> <script src="https://cd
GitHub - ethanhs/python-wasm: Build scripts and configuration for building CPython for Emscripten
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ruby.wasmバイナリにgemを組み込むときのトラブル回避HACK(2024/06版) - ルニラボ
はじめに ruby.wasmバイナリに3rd party製のgem組み込んだ際のトラブルシュートのログを書き残しておきます。 2024年6月現在のHACKです。今後の開発が進めば不要になると想定しています。 こちらのスライドの補足記事です。 speakerdeck.com 前提 下記PRにより、Bundlerと ruby_wasm gemを利用して独自のruby.wasmバイナリが作成できるようになっています。 github.com $ bundle init Writing new Gemfile to /tmp/tmp.ZeVCP05HyB/Gemfile $ bundle add ruby_wasm $ bundle add rainbow $ bundle exec rbwasm build -o ruby.wasm (snip) INFO: Packaging gem: rain
WebAssemblyの言語としての仕様を理解するため、Rustのコードがrustc/wasm-bindgenによってWebAssemblyにどのようにコンパイルされるかを延々と試したメモ。Mapping High Level Constructs to LLVM IRを意識している。 yubrot/wasm-sandbox - GitHub WebAssembly Specification WebAssembly Interface Types Proposal WebAssembly Interface Types: Interoperate with All the Things! rustwasm/wasm-bindgen ビルドにはwasm-packを用いているため、出力はnpmパッケージの形になる。また .wasm ファイルはwasm-optによる最適化がかかった形となる。
PostgreSQLをブラウザ上で実行するOSS「Postgres-WASM」を触ってみた | DevelopersIO
PostgreSQLをブラウザ上で実行する「Postgres-WASM」がオープンソースとして公開されました。 We've open sourced Postgres WASM Hat tip to all the amazing engineers that made it possible for us to glue this together, including those at @supabase and @_snaplet Join the discussion on HN! pic.twitter.com/u4tIceRF66 — Peter Cilliers-Pistorius ?? (@appfactory) October 3, 2022 2022年8月にCrunchy DataがPOSTGRES PLAYGROUND としてブラウザ版PostgreSQLをサービス提
irb.wasm: IRB on browser powered by wasm
2023/9/15 WebAssembly night #11の@RI5255 (https://twitter.com/RI5255) の発表資料です。 SeckHack365で取り組んでいるWASM Runtime x Microkernelという試み(https://github.com/RI5255/mavis) について紹介します。
Introduction 先日、DockerがWasmをサポートするテクニカルプレビューを発表しました。 これにより、dockerコマンドでWasmを実行したり、 WasmイメージをDocker Hubにpushして 使うことが可能になります。 本稿ではシンプルなWasmプログラムをRustで作成し、 docker imageをDocker Hubへpushして実行してみます。 Environment macOS : 13.0.1 Rust : 1.65.0 Docker : 20.10.18 Dockerはここにあるリンクから、 対象のプラットフォームにあったものをインストールしておきましょう。 また、Docker Hubへimageのpushもするので、 Docker IDも必要です。 Setup 正しくDockerがインストールしてあるかチェック。 % docker --versio
はじめに 最近、lambdaでwasmを利用できることを知ったので、画像のリサイズ処理をwasm（Rust）で行った場合の速度を計測してみました。 環境構築 環境構築には下記を使用しました。 Terraform Docker Git AWSリソースの用意 AWSリソースの作成にはTerraformで行います。 今回使用したtfファイルはこちらになります。 AWS 構成 作成する手順は下記の通り。 git clone https://github.com/takenoko-gohan/terraform-image-resizing-on-cloudfront.git cd terraform-image-resizing-on-cloudfront terraform init # 問題がないか確認 # 変数 prefix は任意の値を指定してください terraform plan -va
In my last post, we explored how to build WASM modules, both with and without WASI support, using Clang. In a comment on Reddit, it was mentioned that much of the setup I walked through in that post could be avoided by just leveraging Zig’s WASI supprt. This is a great point, and I would recommend doing the same. The following command is inarguably simpler than what I described. However, there are
How to build ruby.wasm on Apple Silicon Mac - ローファイ日記
ここまでのあらすじ ＜読み飛ばし推奨＞ 子どもたちのためにJava版マインクラフトを買い、よーしパパ*1MOD作って「威厳*2」を見せちゃうぞ〜 と思ったが全くやる気配がない。 一方で、子どもは無限の時間をScratchに費やしていた。Scratch 3.0はReactで作られていることが知られており、いわゆるSPA（もしかして、この用語もう古い？）であり、基本的にはGitHub Pagesのようなバックエンドレスな環境にもデプロイできる。 また、TypeScript/JavaScript＋Reactで拡張を書くことが出来る。自作の拡張は残念ながら公式のScratchでは利用できないが、自分でビルドしてデプロイしたScratchインスタンスで使うことができる。一種のMODである。例えば機械学習に触れることが出来る拡張を有効にしたMODが知られている。 champierre.github.i
前提 重い計算を Rust + WebAssembly でやる WebAssembly のパッケージは wasm-pack でビルドする WebAssembly は WebWorker で動かす アプリは React で書く アプリの設定を頑張りたくないので react-scripts （create-react-app） を使う react-app-rewired react-scripts では、WebWorker と WebAssembly のロードができないので設定する必要がある。 react-scripts で eject せずに設定を追加するために react-app-rewired を使う。 worker-loader では WebWorker から WebAssembly を import できなかったので、workerize-loader を使う。 こんな感じで conf
GitHub - streamdal/streamdal: Client-side observability using Wasm
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Note: This post is part 2 of my Webassembly Game of Life series, if you haven't already you can read part 1 here. So when I posted my last Webassembly Game of Life post I had a few improvements I wanted to make to it. Some that I mentioned in that post (like bitpacking the board so it took less memory), and some that I mentioned to friends who read it (like switching from Canvas2D to WebGL or WebG
2019/7/20 カーネル/VM探検隊15回の @nullpo_head (https://twitter.com/nullpo_head) の発表資料です。 高レベル言語ランタイム、型付きアセンブリ、Software Fault Isolationなどの手法を紹介しつつ、任意のプログラムを安全にカーネル空間で動かそうという野望に答えるクールな挑戦達を紹介します。
Wasmで少しだけ手軽にRubyとRubyスクリプトを持ち運ぶ
やりたいことRuby の環境を作らずに基本的なスクリプトを動作させたい 非エンジニアの環境で 1 ファイルでコマンドを動作させたいというほどの環境の縛りはない簡単に Docker 環境で基本的なコードが動けばよい、程度今回できたことWasm 版 Ruby を Wasm Runtime 上で動かす基本的な Ruby コードと Wasm 版 Ruby を一つの Wasm module にパッケージし、それを Wasm Runtime 上で動かす さらに Wasm module を compile しておいて起動を速くする（Rubyについてはまだまだ課題は多いが）Wasm を使うことで直接実行バイナリを生成できない言語でも JVM + .war 程度の使い勝手である程度のことができることが分かった実験に使ったのは macOS 13.6.7 ( arm64 darwin 22 )Ruby 3.2.
web-sys: requestAnimationFrame - The `wasm-bindgen` Guide
web-sys: A requestAnimationFrame Loop View full source code or view the compiled example online This is an example of a requestAnimationFrame loop using the web-sys crate! It renders a count of how many times a requestAnimationFrame callback has been invoked and then it breaks out of the requestAnimationFrame loop after 300 iterations. Cargo.toml You can see here how we depend on web-sys and activ
Trunk | Build, bundle & ship your Rust WASM application to the web
Trunk is a WASM web application bundler for Rust. Trunk uses a simple, optional-config pattern for building & bundling WASM, JS snippets & other assets (images, css, scss) via a source HTML file. Getting Started Install First, install Trunk via one of the following options. Plain cargo Download the sources and build them yourself: cargo install --locked trunk You can also toggle some features usin
Lisp Game Jam - "Wireworld" - Hoot's low level WASM tooling in action -- Spritely Institute
This blogpost focuses on our second Spring Lisp Game Jam 2023 entry, wasm4-wireworld, an implementation of Wireworld on top of Hoot's lower-level assembly tools which are a part of our Guile → WASM project to bring Spritely Goblins-powered distributed applications to the common web browser. For our entry, we targeted WASM-4, a "fantasy console" which uses low-level WebAssembly constructs. In fact,
tl;dr regex crate のサイズが重い(700k) wasm-pack 環境で単純な正規表現のユースケースなら js-sys::RegExp を使う方が速度/サイズ両面で有利 なぜ調査するか wasm で軽量プログラミング言語を作りたいと思い、rust のパーサジェネレータを調べていた。 nom でサンプルの #ff00cc みたいなカラーコードをパースする example を wasm ビルドすると、16kb程度なのに対し、lalrpop で簡単な構文で生成した wasm binary が 697kb になってしまった。 追ってみると lalrpop は構文定義の grammar.lalrpop から grammar.rs を生成する precompile 処理と、その後のランタイム処理で使われる lalrpop-util がある。 この lalrpop-util は reg
Backend agnostic server-side rendering (SSR) for Web Components Web Components are the browser native way to extend HTML. But as a primarily browser based technology they are defined with JavaScript which limits them to either rendering solely client side — which has janky performance, poor SEO, and is not optimally accessible — or within a server-side JavaScript runtime, which isn’t always an opt
GitHub - proxy-wasm/spec: WebAssembly for Proxies (ABI specification)
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Rust+wasmでWebSocket上にバイナリデータ(CBOR)を流してみる - aptpod Tech Blog
この記事はAptpod Advent Calendar 2019の10日目の記事です。 先端技術調査グループの大久保です。 前回の記事では、WebSocketのechoサーバにアクセスするwasmをRustとGoで作成しました。今回は、echoだけでは物足りないので、意味のあるバイナリデータをサーバから流して、クライアント側、すなわちWebブラウザ上に表示するまでやってみます。あまり大きくないデータならJSONにして文字列を流せば良いのですが、JSONだとサイズが問題になるようなケースを想定して、JSONよりコンパクトなCBORを使ってみます。 ちなみに今回はRust作ったところで力尽きたので、対応するGoのコードは残念ながらありません。 実装 3つのクレートに実装を分けます。送るデータの定義、エンコード、デコードを担当するmydataクレート、サーバを担当するws-serverクレート、
M1 MacのNode.jsで FATAL ERROR: wasm code commit Allocation failed - process out of memory が出る場合の対処法
M1 MacのNode.jsで FATAL ERROR: wasm code commit Allocation failed - process out of memory が出る場合の対処法 <--- Last few GCs ---> [85561:0x128008000] 3569 ms: Scavenge 167.1 (187.8) -> 157.3 (189.3) MB, 6.9 / 0.0 ms (average mu = 0.975, current mu = 0.953) task [85561:0x128008000] 3606 ms: Mark-sweep 157.5 (189.3) -> 137.5 (190.0) MB, 5.6 / 0.0 ms (+ 28.2 ms in 439 steps since start of marking, biggest ste
whisper.cpp : WASM example
Minimal whisper.cpp example running fully in the browser Usage instructions: Load a ggml model file (you can obtain one from here, recommended: tiny or base) Select audio file to transcribe or record audio from the microphone (sample: jfk.wav) Click on the "Transcribe" button to start the transcription Note that the computation is quite heavy and may take a few seconds to complete. The transcripti
前回までのあらすじ： cargo-componentを使ってWebAssemblyコンポーネント（Wasmコンポーネント）を作りました Wasmtimeで実行しました wasm-toolsを使って作成したコンポーネントのワールドを出力しました 今回の内容： WebAssembly Interface Type（WIT）を使ってWasmコンポーネントのインターフェースを定義します wit-bindgenの力を借りつつ、インターフェースをRustで実装します 実装したWasmコンポーネントをコンポーネントレジストリーに登録します。 用意するもの Rustのツールチェーン cargo-component Wasmtime wasm-tools 前回作成したhello-wasm-cliプロジェクト hello-wasm-cliプロジェクトは次のようなフォルダー構成をしています： . ├── Car
はじめに Wasmの特徴 仮想マシン実行環境 スタック 関数 グローバル変数 メモリ テーブル 命令セット データ型 数値演算 ベクトル演算 変数、メモリ、テーブルアクセス 制御フロー ランタイムとのインタフェース バイナリフォーマット タイプ インポート 関数 テーブル メモリ グローバル エクスポート スタート エレメント データ 終わりに 執筆者 : 小田 逸郎 はじめに WebAssembly(以下、Wasm)というものが世間で話題となっているようです。 元々、Webブラウザで実行されるバイトコードであるという程度の認識で、Java みたいなものか(?)くらいの感想しかなく、あまり関心はなかったのでした。 しかしながら、最近、Kubernetesでコンテナの代わりにWasmアプリケーション を扱えるような記述を見かけるに至り、「は？(なんじゃそりゃ)」と、 にわかに関心が出てきたの
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 様々なローカルアプリケーションがWeb化していますが、JavaScriptの実行速度はネイティブアプリケーションに比べて劣ってしまいます。しかしWebAssemblyを用いることで大幅に改善できます。 今回紹介するWASM-ImageMagickは名前の通り、ImageMagickをWebAssembly化したソフトウェアです。 WASM-ImageMagickの使い方 回転するテキストを生成します。Web上だけで画像を作成しています。 画像をエフェクトしたり、アニメーションGIFを生成したりできます。 WASM-ImageMagickの実行速度は十分使えるレベルです。二つの画像をモーフィングしてアニメーションGIFにしたり、加工したりするのも簡単です。ちょっとした加工であればIm
inductor / Kohei Ota in California on Twitter: "「もし2008年にWASMがあったらDockerを作る必要がなかっただろう」というかつてDockerを作った男の発言もあるくらいにはWASMはランタイムとしてもアツい技術です。 https://t.co/CvWdkXZEEU #kernelvm"
「もし2008年にWASMがあったらDockerを作る必要がなかっただろう」というかつてDockerを作った男の発言もあるくらいにはWASMはランタイムとしてもアツい技術です。 https://t.co/CvWdkXZEEU #kernelvm
(Unity-chan: © Unity Technologies Japan/UCL) さすがにこの規模のアプリケーションをwasm2cして動作させている例は他に無いんじゃないかという気がする。PhysXとか入ってるし。 何ができたの Node.jsでUnity WebGLのアプリを動くようにした (OpenGL ES2とSDLを使用) 更に、WebAssembly部分を wasm2c でネイティブコードにAOTコンパイルできるようにした 将来的にはNode.jsも動作には不要にできるはずだが、今のところそこには至っていない。 これにより、JavaScriptインタプリタさえ何とかすれば、Cで書かれたSDLプログラムと同等の移植性をUnity WebGL出力にもたせることができた。 動機 個人的に製作中のゲームの開発/オーサリング環境をWebAssemblyに集約する上で、それなりの規模
Wordleという、いくつかのヒントをもとに5文字の英単語を当てるゲームがあります。 ヒントには次のような物があります。 正解の単語に含まれない文字 正解の単語に含まれる文字 正解の単語に含まれて、位置が一致した文字 これらの情報を元に英単語の辞書から候補となる単語を検索するアプリケーションを作りました。 次にスクリーンショットを表示します。 上から 正解の単語に含まれない文字 正解の単語に含まれる文字 正解の単語に含まれて、位置が一致した文字 を入力して検索すると、候補になる文字列を表示します。 このアプリケーションは辞書を検索するだけです。 辞書も5文字の英単語に限定されているので、せいぜい4500語です。 ブラウザに配信するスクリプトに埋め込める分量です。 つまり辞書と検索機能の両方をブラウザだけで完了出来る小さなアプリケーションです。 現在RubyのWebAssemblyバイナリが
GitHub - inkeliz/karmem: Karmem is a fast binary serialization format, faster than Google Flatbuffers and optimized for TinyGo and WASM.
Karmem was create to solve one single issue: make easy to transfer data between WebAssembly host and guest. While still portable for non-WebAssembly languages. We are experimenting with an "event-command pattern" between wasm-host and wasm-guest in one project, but sharing data is very expensive, and FFI calls are not cheap either. Karmem encodes once and shares the same content with multiple gues
Crustacean over IPToday we are going to walk through a simple video-chat application in Rust using WebRTC. Scope of this tutorialOverview of WebRTC and Signalling flowRust to WASM code for 2 way video + audio call client in the browserSeriously Simple Signalling ServerPre-requisitesRust + Cargo installed2 WebRTC-capable BrowsersSome experience using Rust.Longish ForewordYou need to enabled Media C
ruby.wasm の JS::Object のプロパティ呼び出しをさらに便利にする - ブログのおんがえし
ruby.wasm でいろいろ遊んでいます。実験場も作りました。 rubywasm-sample.ongaeshi.me JS::Object が楽しくて、JSのオブジェクトをRubyから透過的に扱えます。メソッド呼び出しもできるしブロックで関数を渡せたしりします。 require 'js' JS.eval("return 1 + 2") # => 3 JS.global[:document].write("Hello, world!") div = JS.global[:document].createElement("div") div[:innerText] = "click me" JS.global[:document][:body].appendChild(div) div.addEventListener("click") do |event| puts event # =>
svg2png-wasmをつくった
つくったもの svg2png-wasm という名前に全ての情報が入っていますが、 WebAssembly を内部で利用して SVG 画像を PNG 画像に変換することができます。 つくった経緯 SVG のメリット SVG は XML で記述されるベクター画像ですが、以下のような利点があると考えています。 ベクター画像なため拡大してもドットが見えてこない 文字列で構築できるので（文字や図形を中心とした画像を）非常に低いコストで動的に生成できる Markdown で記述されたドキュメント内で表示できる（ついでにアニメーションできる） よく見るこれも SVG svg2png-wasm のアイコンも SVG SVG のデメリット 動的に生成しやすいとなると OGP の画像に設定したくなります（なります）。 ですが、そうは問屋がおろしません。 Facebook のドキュメントによれば、JPEG, G
Thanks for checking out N64 Wasm! An N64 emulator that runs in the browser. It is a port of the excellent RetroArch ParaLLEl Core to WebAssembly. This project started because I wanted to have a well playing open-source N64 emulator designed for the web. I also wanted to learn OpenGL and this was a good way to dive in. Game compatibility is decent with a good portion of the 3D games playable and at
WebAssembly Hub と WASM OCI Image Specification について / Intro: WebAssembly Hub and WASM OCI Image Specification
Envoy Meetup Tokyo #2 で発表したスライドとなります。 https://envoytokyo.connpass.com/event/175256/ 発表時の録画は以下を参照ください。 https://youtu.be/ICN35mxcEXU?t=8685
何も考えずにWASMインスタンスを混ぜると危ないかも
WASMの複数インスタンス間でWebAssembly.Memoryを共有すればダイナミックリンクみたいなことが実現できるかも。と思い調査したときのメモです。 結論としては、WASMインスタンス間でのWebAssembly.Memoryの共有は、私の力量では危ないということが分かりました。(2021年9月現在) 下記バージョンのClangを利用して確認しています。 WASMの状態管理 はじめに、WASMインスタンスは下記状態があります。 WebAssembly.Memory ... いわゆるメモリで、Clangが生成したコードではヒープやスタックの一部、定数が格納されているようでした。 WebAssembly.Global ... WASM内の環境、外側の環境からアクセスできるグローバル変数を表します。 WebAssembly.Table ... (現状は)WASM内からアクセスする関数ポイ
eBPFとWASMに思いを馳せる2022（Masaya Aoyama） — TechFeed Conference 2022講演より
【書き起こし】eBPFやWASMも徐々に成熟し、新たなプロダクトも出てきています。このセッションではそれらのプロダクトを紹介し、2022年に思いを馳せたいと思います。 本記事は、TechFeed Conference 2022のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画（YouTubeチャンネル登録もお願いします。） スライド資料へのリンク 本日は「eBPFとWASMに思いを馳せる2022」というテーマで、CyberAgentの青山が発表させていただきます。 ふだんはKubernetes基盤のプロダクトオーナーとして勤めるほか、いくつかの会社で技術顧問やカンファレンスのCo-chairなどを務めています。また著書としては『Kubernete
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【RubyKaigi2023】 初耳だったruby.wasmを簡単に触ってみる - Qiita
PythonでWebAssemblyを実装してみる #Python #WebAssembly #WASM #フロント開発 - クリエーションライン株式会社
rustc/wasm-bindgenの生成するWebAssemblyを観察する
irb.wasm: IRB on browser powered by wasm
自作WASMランタイムをKernelに改造する試み.pdf
Wasm with Dockerを試す | DevelopersIO
lambda@edge上でwasmを使用した画像リサイズにおける速度
Understanding Every Byte in a WASM Module
wasm-pack + WebWorker + react-scripts - Qiita
Pure Wasm Life 2: Optimizing Webassembly and Canvas
カーネル空間ですべてのプロセスを動かすには -TAL, SFI, Wasmとか -
wasm-pack で regex を使う時のビルドサイズとパフォーマンスの調査
Introducing Enhance WASM — Begin Blog
Hello, world! with Wasm Component（ライブラリー編）
Wasm入門（仕様編） - VA Linux エンジニアブログ
WASM-ImageMagick - ImageMagickをWebAssemblyでWebアプリから使いやすく
Unity WebGLをwasm2cでC言語に変換して動かす
Wordle攻略用のアプリケーションをruby.wasmで作りつつ貢献した話 - Qiita
WebRTC Video chat tutorial using Rust+WASM
GitHub - nbarkhina/N64Wasm: A web based N64 Emulator