「フロントエンド向けWebAssembly入門」リンク集(2023-12-05)

■本書を読む前に 日経BPのサイト https://bookplus.nikkei.com/catalog/

本書サポートサイト https://www.staffnet.co.jp/hp/pub/support/

■1章 図1-2 WebAssembly Binary Toolkit公式サイト https://github.com/WebAssembly/wabt#wabt-the-webassembly-binary-toolkit

図1-3 WebAssembly テキスト形式 https://developer.mozilla.org/ja/docs/WebAssembly/Understanding_the_text_format

図1-5 WebAssembly ブラウザーAPI https://developer.mozilla.org/ja/docs/WebAssembly/JavaScript_interface

図1-7 WebAssemblyに対応可能なプログラミング言語一覧 https://github.com/appcypher/awesome-wasm-langs

図1-8 C/C++からWebAssemblyへの変換 https://developer.mozilla.org/ja/docs/WebAssembly/C_to_wasm

図1-9 RustでWebAssembly実行ファイルを生成する https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_wasm

図1-10 AssemblyScriptの公式サイト https://www.assemblyscript.org/

図1-11 WebAssemblyをサポートするWebブラウザー https://caniuse.com/wasm

図1-18 Adobe Photoshop Web版の開発の経緯 https://web.dev/ps-on-the-web/

図1-19 OpenCV.js公式ページ https://docs.opencv.org/4.x/df/d0a/tutorial_js_intro.html

図1-20 babylon.js公式ページ https://www.babylonjs.com/

図1-21 Unity公式ブログ https://blog.unity.com/ja/technology/webassembly-is-here

図1-22 TensorFlowバックエンドの紹介 https://www.tensorflow.org/js/guide/platform_environment?hl=ja

図1-23 メルカリ公式の技術ブログ https://engineering.mercari.com/blog/entry/20211222-mercari-lens/

図1-24 WebAssembly標準化完了のプレスリリース https://www.w3.org/press-releases/2019/wasm/

図1-26 WebAssemblyコア仕様 https://webassembly.github.io/spec/core/

図1-28 WebAssembly追加機能の協議プロセス https://github.com/WebAssembly/meetings/blob/main/process/phases.md

図1-29 標準化が進行中のProposal一覧 https://github.com/WebAssembly/proposals

図1-30 WebAssembly の普及を推進する団体「Bytecode Alliance」 https://bytecodealliance.org/

図1-31 Bytecode AllianceのGitHub https://github.com/bytecodealliance/

■2章 Node.js公式サイト https://nodejs.org

Python 公式サイト https://www.python.org/downloads/windows/

図2-2 emscripten-core/emsdkをzip形式で一括ダウンロード https://github.com/emscripten-core/emsdk

7zipツール https://7-zip.opensource.jp

図2-9 WebAssemblyモジュールのインスタンス化で利用するAPI https://developer.mozilla.org/ja/docs/WebAssembly/Loading_and_running

図2-10 WebAssembly.instantiateStreaming() https://developer.mozilla.org/ja/docs/WebAssembly/JavaScript_interface/instantiateStreaming

図2-11 http-server公式サイト https://github.com/http-party/http-server#readme

■3章 図3-6 Moduleオブジェクトの詳細 https://emscripten.org/docs/api_reference/module.html

図3-7 emccコマンドの詳細 https://emscripten.org/docs/tools_reference/emcc.html

図3-8 Emscriptenのsettings.js の内容 https://github.com/emscripten-core/emscripten/blob/main/src/settings.js

7zipツール https://7-zip.opensource.jp

図3-16 EMSCRIPTEN_KEEPALIVEの解説 https://emscripten.org/docs/api_reference/emscripten.h.html#c.EMSCRIPTEN_KEEPALIVE

図3-19 cwrap()関数の詳細 https://emscripten.org/docs/api_reference/preamble.js.html?highlight=cwrap#cwrap

図3-20 ccall()関数の詳細 https://emscripten.org/docs/api_reference/preamble.js.html?highlight=ccall#ccall

図3-28 Closure Compiler公式サイト https://developers.google.com/closure/compiler?hl=ja

図3-29 「Debug C/C++ WebAssembly」のchromeウェブストア https://chromewebstore.google.com/detail/cc++-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb?pli=1

図3-34 WebAssemblyのC/C++コードのデバッグ https://developer.chrome.com/docs/devtools/wasm/

■4章 図4-3 EM_JSの利用方法 https://emscripten.org/docs/api_reference/emscripten.h.html?#c.EM_JS

図4-4 EM_ASMの利用方法 https://emscripten.org/docs/api_reference/emscripten.h.html?#c.EM_ASM

図4-5 ライブラリファイルの利用方法 https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#implement-a-c-api-in-javascript

7zipツール https://7-zip.opensource.jp

■5章 図5-1 Fixed-width SIMDの標準化は完了 https://github.com/WebAssembly/proposals/blob/main/finished-proposals.md#finished-proposals

図5-2 Threadsの標準化は実装段階のフェーズ https://github.com/WebAssembly/proposals#phase-3---implementation-phase-cg--wg

図5-3 Fixed-width SIMDとthreadは主要ブラウザーでサポート済み https://webassembly.org/roadmap/

図5-4 BlazeFaceアプリの紹介 https://javascript.plainenglish.io/face-detection-in-the-browser-using-tensorflow-js-facb2304ed91

図5-5 SIMD およびマルチスレッドによる高速化の効果 https://developers-jp.googleblog.com/2020/09/simd-tensorflowjs-webassembly.html

図5-8 WebAssembly SIMD命令一覧 https://github.com/WebAssembly/simd/blob/main/proposals/simd/NewOpcodes.md

図5-13 インテルのベクトル演算命令からWebAssemblyへの変換 https://emscripten.org/docs/porting/simd.html#compiling-simd-code-targeting-x86-sse-instruction-set

図5-14 インテルのベクトル演算命令の一覧 https://www.intel.com/content/www/us/en/docs/intrinsics-guide/index.html#ssetechs=SSE2

図5-15 Wasm Workers APIとPthreadの比較と選択ガイド https://emscripten.org/docs/api_reference/wasm_workers.html?%20#pthreads-vs-wasm-workers-which-one-to-use

図5-16 Wasm Workers APIの利用方法 https://emscripten.org/docs/api_reference/wasm_workers.html?#wasm-workers-api

図5-17 Pthreadの利用方法 https://emscripten.org/docs/porting/pthreads.html#pthreads-support

図5-18 SharedArrayBuffer利用時の必須ヘッダー https://web.dev/i18n/ja/coop-coep/#coop%E3%81%A8coep%E3%82%92%E7%B5%B1%E5%90%88%E3%81%99%E3%82%8B

図5-19 WebAssembly拡張機能の検出 https://web.dev/articles/webassembly-feature-detection?hl=en

7zipツール https://7-zip.opensource.jp

■6章 図6-3 TensorFlow公式サイト https://www.tensorflow.org/overview?hl=ja

図6-4 TensorFlow Lite公式サイト https://www.tensorflow.org/lite?hl=ja

図6-5 TensorFlow.js公式サイト https://www.tensorflow.org/js?hl=ja

図6-7 TensorFlow.jsのAPI https://js.tensorflow.org/api/latest/?hl=ja

図6-8 TensorFlow.js用の学習済みモデル https://www.tensorflow.org/js/models?hl=ja

図6-10 WASMバックエンドの詳細情報 https://www.npmjs.com/package/@tensorflow/tfjs-backend-wasm

図6-12 WebGLバックエンドの詳細情報 https://www.npmjs.com/package/@tensorflow/tfjs-backend-webgl

図6-14 CPUバックエンドの詳細情報 https://www.npmjs.com/package/@tensorflow/tfjs-backend-cpu

図6-15 手のポーズ検出モデルの紹介 https://blog.tensorflow.org/2021/11/3D-handpose.html

図6-16 手のポーズ検出モデルが推測する21のポイント https://github.com/tensorflow/tfjs-models/blob/master/hand-pose-detection/README.md#keypoint-diagram

図6-17 手のポーズ検出モデルの詳細情報 https://github.com/tensorflow/tfjs-models/tree/master/hand-pose-detection/src/tfjs

7zipツール https://7-zip.opensource.jp

■7章 図7-3 ソニー「メタバースハンド」の紹介 https://xtrend.nikkei.com/atcl/contents/18/00105/00138/

7zipツール https://7-zip.opensource.jp

図7-13 iOS における WASMバックエンドThreads機能の不具合 https://github.com/tensorflow/tfjs/issues/7540

図7-14 requestAnimationFrame()の紹介 https://developer.mozilla.org/ja/docs/Web/API/window/requestAnimationFrame

app06デモ https://staffnet.co.jp/wasm/app06/index.html