React、Vue、Svelte、Solid、素のJavaScriptで使える、WebGPUシェーダーエフェクトのコンポーネント集。
gpujs/gpu.js
GPU.jsはシンプルなJavaScript関数をGPUシェーダーコードに変換し、ブラウザやNode.jsでGPU上で実行します。GPUが使えない場合は通常のJavaScriptにフォールバックします。
- スター
- 15,511
- フォーク
- 666
- 未解決の Issue
- 68
- 最終コミット
- 14 日前
これは何?
GPU.jsは、ブラウザとNode.jsの両方でGPUを汎用計算(GPGPU)に使うためのJavaScriptライブラリです。出力配列の各要素を計算する通常のJavaScript関数を記述すると、GPU.jsがシェーダー言語に変換してコンパイルし、GPU上で並列実行します。GPUが使えない場合は、同じ関数が通常のJavaScriptとして実行されます。
ライブラリの中核となるのはgpu.createKernel()で作成するカーネルです。出力サイズはsetOutput()で設定し、各スレッドの位置はthis.thread.x、y、zから取得します。対応バックエンドには、WebGL、WebGL2、Node.js向けのheadless GL、WebAssembly、オプトインで利用できるWebGPU、CPUフォールバックがあります。combineKernels()でカーネルを連結したり、パイプライン処理を使って中間結果をデバイス上に保持したりできます。
GPU.jsはcanvasへのグラフィカル出力、ブレークポイントを設定してカーネルコードをステップ実行できるデバッグモード、TypeScriptの型定義にも対応しています。v3ではカーネル呼び出しがPromiseを返す方向で開発が進められており、非同期モードはすでに利用できます。
主な機能
- 01通常のJavaScript関数をGPUシェーダーコードに自動変換します。
- 02GPUが使えない場合は通常のJavaScriptにフォールバックします。
- 03WebGL、WebGL2、headless GL、WebGPUのバックエンドを使って、ブラウザとNode.jsで実行できます。
- 04combineKernels()やパイプライン処理でカーネルを連結し、データ転送の繰り返しを避けます。
- 05グラフィカルモードでは結果をcanvasに描画します。
- 06ブレークポイントを使ったカーネルのデバッグ機能と、TypeScriptの型定義を備えています。
ユースケース
- Webページ上で行う行列演算や数値計算を高速化する。
- ブラウザでピクセルデータの画像処理やフィルター処理を実行する。
- 低レベルなコードへ移植する前に、JavaScriptでGPU並列アルゴリズムのプロトタイプを作成する。
- GPUが利用できるNode.jsサービスで、データ量の多い計算を高速化する。
クイックスタート
- 1
npm からパッケージをインストールする
npm install gpu.js - 2
GPU インスタンスと Node.js でカーネルを作成する
- 3
script タグまたは CDN 経由でブラウザビルドを使用する
使う前に知っておきたいこと
- 次のメジャーバージョン v3 では、すべてのカーネル呼び出しが Promise を返すようになり、現在書かれている同期コードが動作しなくなります。
- 同期カーネル呼び出しは、メインスレッドをブロックする WebGL の readback に依存します。
トピック
よくある質問
- gpu.js とは?
- GPU.jsはシンプルなJavaScript関数をGPUシェーダーコードに変換し、ブラウザやNode.jsでGPU上で実行します。GPUが使えない場合は通常のJavaScriptにフォールバックします。 GPU.jsは、ブラウザとNode.jsの両方でGPUを汎用計算(GPGPU)に使うためのJavaScriptライブラリです。出力配列の各要素を計算する通常のJavaScript関数を記述すると、GPU.jsがシェーダー言語に変換してコンパイルし、GPU上で並列実行します。GPUが使えない場合は、同じ関数が通常のJavaScriptとして実行されます。
- gpu.js は無料で使えますか?ライセンスは?
- gpu.js は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- gpu.js は今もメンテナンスされていますか?
- 活発にメンテナンス中。gpu.js の最終コミットは 2026年10月5日 です。
- gpu.js は何に使えますか?
- Webページ上で行う行列演算や数値計算を高速化する。 ブラウザでピクセルデータの画像処理やフィルター処理を実行する。 低レベルなコードへ移植する前に、JavaScriptでGPU並列アルゴリズムのプロトタイプを作成する。 GPUが利用できるNode.jsサービスで、データ量の多い計算を高速化する。
- gpu.js のインストール方法は?
- npm からパッケージをインストールする: npm install gpu.js GPU インスタンスと Node.js でカーネルを作成する script タグまたは CDN 経由でブラウザビルドを使用する
- gpu.js はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/gpujs/gpu.js
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
シミュレーションを一時停止してもスライダーを操作できる、ゲーム風スキルショットのVFX調整用Three.js・GLSLサンドボックス。
通常のJavaScriptの制御フローを、手書きの重みを持つ微分可能な行列乗算ネットワークに変換する研究プロジェクト。
Node.jsとChromiumを基盤に、JavaScript、HTML、CSSでクロスプラットフォームのデスクトップアプリを構築するフレームワーク。
ランタイム、バンドラー、テストランナー、パッケージマネージャーを単一の実行ファイルにまとめた、高速なJavaScript/TypeScriptツールキット。
ライブプレビューとReactの全ソースを備えた、ログイン不要のThree.js/WebGL UIコンポーネントカタログ