WebAssembly で画像のリサイズ処理をやってみたら JavaScript + Canvas API より遅かった話 - Qiita
WebAssembly(WASM) は JavaScript より計算処理が速いという話題がしばしば聞かれます。 では、単純な数値計算ではないけれど、JavaScript を利用した通常のフロントエンド開発だと時間がかかる処理を移植するとどうなるのでしょうか1。本記事ではその一例として、巨大画像（4K～）を指定したピクセル数までリサイズする処理を書いてみました。 リポジトリ: https://github.com/yokra9/wasm-image-resizer JavaScript + Canvas API でリサイズしてみる まず、比較のため JavaScript でリサイズ処理を書いておきましょう。とはいえ、TypeScript からコンパイルして生成します。 const url = "./img/sample.jpg"; const resp = await fetch(url)
Fastly、JavaScriptエンジンをWebAssemblyで実装。CDNエッジのサーバレス環境「Compute@Edge」でJavaScriptサポート発表（訂正済み）
Fastly、JavaScriptエンジンをWebAssemblyで実装。CDNエッジのサーバレス環境「Compute@Edge」でJavaScriptサポート発表（訂正済み） （お詫びとお知らせ：本記事はFastlyの発表と同社へのメールでの取材に基づいて執筆いたしましたが、記事公開後に同社より、回答を間違えたとの申し出がありました。そのため改めて同社から提供された情報を基に、タイトルと本文を訂正しました。訂正前の記事内容は本文最後にHTMLでコメントアウトされています。） 大手CDNベンダのFastlyは、CDNエッジで提供しているサーバレスコンピューティング環境「Compute@Edge」で、JavaScriptのサポートを発表しました。 JavaScript on Compute@Edge is here. https://t.co/wSHiJfPdvf pic.twitter.c
Making JavaScript run fast on WebAssembly - Bytecode Alliance
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations. Today, we’re starting work on optimizing JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. We should be clear here—if you’re run
GitHub - sql-js/sql.js: A javascript library to run SQLite on the web.
const initSqlJs = require('sql.js'); // or if you are in a browser: // const initSqlJs = window.initSqlJs; const SQL = await initSqlJs({ // Required to load the wasm binary asynchronously. Of course, you can host it wherever you want // You can omit locateFile completely when running in node locateFile: file => `https://sql.js.org/dist/${file}` }); // Create a database const db = new SQL.Database(
お手製wasmモジュールから別のwasmモジュールの関数を呼び出す
前提環境 node ver.12以上 WebAssemblyをnode.js上で動かすために必要な大まかな知識 動機 自作のコンパイラの吐き出すwasmから，rustで生成したwasmバイナリからexportされている，メモリを操作する関数を呼び出したい． 要約 instantiate(wasm [, obj]): 指定したwasmファイルを読み込み，インスタンス化して返す関数とします．objはオプショナル引数です．[1] from_rust.wasm: rustから生成したwasmバイナリとします local.wasm: 手元で作成したwasmバイナリとします exported_fn(): rustで作成した関数名とします const from_rust = await instantiate('from_wasm'); const importObj = { from_rust: We
WASMとRustはVue.js/React.jsを打倒するのか？ - JSへの侵略の歴史
はじめに 「Typescriptの次はRustかもしれない」という記事がバズってるのを見かけました。 なかなか面白くて、PAとしてのWASMとRustを比較している記事です。ちょうど最近「レガシーおじさん、SPAを始めてみた。そして限界を知る」でも書いた通り最近SPAに手を出してみたのですが、いろいろやろうとするとSSRのためのBackend for Frontend (BFF)等が必要になるとわかり「これJSでやる必要なくない？」とも感じていたのでちょうど良かったです。 こういうのを見るとRIAやGWTのように似たアプローチで廃れた技術や、登場が早すぎたMeteor、今も頑張ってるMSのBlazorなど色々頭をよぎります。といわけで歴史を俯瞰する意味でHTML + JavaScriptとそれ以外の技術のせめぎ合いの歴史やMSのBlazorやRustのyewなどWebassemblyを使う
WAVE.js/WAVE.wasm.js - 音楽ファイルをWeb上で自在に操作 MOONGIFT
Webブラウザで音楽を奏でる場合にはWebAudioがよく使われます。ローレベルなAPIなので、使いこなすのは時間がかかるかも知れません。それでも多くのライブラリが作られており、それらを使うことで、より簡易的に音楽ファイルなどを操作できるようになっています。 今回紹介するWAVE.js/WAVE.wasm.jsもその一つです。音楽ファイルの変換や、音程の変化などを行えるライブラリです。 WAVE.js/WAVE.wasm.jsの使い方 一例です。フォーマットの変換を行えます。 さらに指定部分だけの切り出し。 無音の追加。 WAVE.jsにはJavaScript版とWebAssembly版があります。WebAssembly版は機能が限定されますが、処理がとても高速です。WAVE.jsにはこの他、フェードイン/フェードアウト、逆再生、音声結合などの機能が用意されています。 WAVE.jsはJa
caffeine
Caffeine is a livecoding environment for web browsers, Deno, and WebAssembly. After adding it to a webpage, you can use it to make live persistent changes to that page and other pages running Caffeine, without reloading. You can interact with Caffeine from JavaScript in several ways: as a headless Web Worker, with which you post and receive messages (you are responsible for all DOM manipulation).
JavaScript で WebAssembly のバイナリを直接書き出してみた - Qiita
はじめに 趣味の自作言語で WebAssembly を吐いてみようかなと思いました。が、WebAssembly の仕様書を読むだけで理解するのは困難です。そこで手を動かしながら仕様書を少しずつ追いかけていくことで理解しようと思いました。せっかくなので誰か（主に数週間後の自分）の役に立てばなあ、と思い思考の記録を取った次第です。 参考文献 WebAssembly Specification 仕様書です WASM のバイナリの構造 WASM のバイナリは module です(これは正確な言い回しではないかもしれません。Overview の Modulesをよんで)。module の binary encoding はModulesに書いてあります。 ごちゃっとしていて圧倒されますが、以下の3点を押さえると読みやすくなると思います。 module は magic -- version -- se
ブラウザがJavaScriptを直接サポートしない世界 - Qiita
TL;DR WASMって凄いね．JavaScript処理系すら実装できるんだって． ならブラウザはWASMだけをサポートすれば楽なんじゃないかな． という考察記事です． 経緯 私は少し前からRustでJavaScript処理系を書いています．(まだまだ機能不足ですが) ある日，ふと思いました．*Rustで書いてるんだからWASMに変換するのも楽なんじゃないか?*と． 面白そうなので，試してみたわけです． 意外と面倒だった RustからWASMへと変換する方法を説明した記事は，調べればいくらでもでてきます．無論そのとおりに手を動かしてみるわけです． しかし，いざやってみるとコンパイラに結構文句を言われます．考えてみれば当たり前ですが，libcなんて使っていたらWASMには変換できません． なので余分なコードは削り，WASMに変換できるようコードを書き直しました． すると，すんなりWASMに変
ブルゾンちえみ判別器をブラウザ上に実装する - Qiita
皆さん、Yahoo!検索大賞 2017はご覧になりましか？ このアワードで大賞に輝くと、「今年の顔」の名誉を手に入れることができるんです。 そんな栄えある今年の大賞は、ブルゾンちえみとのこと。 他にも、俳優部門は高橋一生、女優部門は吉岡里帆、といった具合に各分野毎に受賞者がいます。 ところで、僕はあまりテレビを観ないので、誰が誰やらわかりません。 このままだと安心して2018年を迎えることができないので、画像を読み込んでそれが誰なのか判定するアプリが必要です。 一目見れば区別つきそうなものですが、僕の濁った目で直接見るよりも、機械に判定させた方がよいに決まっていますので、作ってみました。 実際の動きはこちらから確認できます。 今回はブルゾンちえみも含め、Yahoo!検索大賞の受賞者から以下の5人をピックアップし、判別できるようにしています。 ブルゾンちえみ(お笑い部門) 高橋一生(俳優部門
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - WebAssembly/js-promise-integration: JavaScript Promise Integration
V8 JavaScript Engine 9.0 Improves JavaScript to WebAssembly Performance
GitHub - maple3142/wasm-jseval: A safe eval library based on WebAssembly and Duktape/QuickJS.
GitHub - samthor/gumnut: JS parser in Web Assembly / C
GitHub - ceifa/wasmoon: A real lua 5.4 VM with JS bindings made with webassembly
GitHub - m4riuz/wasm-collector: Collects all WebAssembly modules from a given website
WebAssembly でも feature detection したい - Qiita
GitHub - wasmerio/wasmer-js: Monorepo for Javascript WebAssembly packages by Wasmer
Tweag I/O - Haskell WebAssembly calling JavaScript and back again