WebGPU

https://scrapbox.io/files/65982e3dd7eddf0024d37f11.png

直接ポーティングしてるわけじゃなくて、裏側で各OSのAPI利用するような形になってる。

WebGLとは違い、WebGPUは既存のネイティブAPIを直接ポートするものではない。Vulkan、Metal、Direct3D 12にある概念をベースにしており、これらのモダンなグラフィックAPI上で高性能を提供することを目指している。

https://scrapbox.io/files/6661258d3d0a4c001c6a174b.png

2.2.1 WebGL との共通点

➢ ブラウザ上で動作します

➢ グラフィクス API を持っています

➢ グラフィクス API は「グラフィクスパイプライン」に則って実行されます

➢ JavaScript の API なので JavaScript で動作します

(TypeScript もありますが、あれはトランスパイルして結局 JavaScript になります)

➢ WebAssembly でも動作します

➢ シェーダを記述することができます

➢ 固定パイプラインはありません(シェーダなしに表示できません)

2.2.2 WebGL との相違点

➢ WebGL とはそれぞれの API(関数やクラス)がちがいます

➢ GPU に対する命令はコマンドバッファに溜めて実行されます

➢ WebGPU では ComputeShader を使用することができます

➢ シェーダの指定が attachShader 等で個別に設定するではなく、パイプラインに関する

指定を PipelineState というオブジェクトにまとめて GPU に渡します

➢ シェーダ言語が C++ライクの GLSL ではなく Rust ライクの WGSL になります

汎用計算にも利用できる

Chrome 113がついにリリース🎉

Webグラフィックスの夜明けともいえる超目玉機能「WebGPU」が搭載されています。

WebGPUは、WebGLより描画性能があり、汎用計算にも利用できます。長年待ち続けていた、ウェブの可能性を広げる待望の新機能です。

これメッチャ重要！つまり、WebGPUで書かれたコードはChromeとかの最新ブラウザさえあればGPU動かせる（Web LLMもブラウザさえあればいかなるブラウザでも実行できる）

WebGLはOpenGLを扱うのに対して、WebGPUは、Direct3D 12、Metal、VulkanといったモダンでよりGPUのネイティブに近い3D APIに直接アクセスすることで、高い性能を実現します。

生WebGPUと生WebGLで同一表現のデモを作成し、ベンチマークで計測しました。

WebGPUで特徴的なのは、コンピュートシェーダーが使えること。

GPUの演算性能を活かして高速に数値計算を実行できます。WebGLにはない機能です。

CPUとWebGPUとで比較検証を行い、WebGPUの高速な演算性能を確認しています。

Googleが良い感じの学習コンテンツを用意しているのでやる

この Codelab では、WebGPU を使用して、コンウェイのライフゲームを作成します

WebGPU とは、ウェブアプリで GPU の機能を利用するための最新の API です

WebGL は 2007 年リリースの OpenGL ES 2.0 API をベースとしており、OpenGL ES 2.0 自体もさらに古い OpenGL API に基づくものでした

WebGPU は（中略）基盤となるネイティブ API よりもシンプルに利用できる API を目指して開発されました。

TypeScriptでも動くよ

WebGPU は TypeScript でも問題なく動作しますが、その場合は @webgpu/types 定義をインクルードする必要があります

WebGPU呼んで、色々処理させるだけ↓

code:javascript

// WebGPU使えるか問い合わせて

const adapter = await navigator.gpu.requestAdapter();

if (!adapter) {

throw new Error("No appropriate GPUAdapter found.");

}

// WebGPUを利用する

const device = await adapter.requestDevice();

レンダリングパイプラインとか書いて書き込む

code:javascript

const cellPipeline = device.createRenderPipeline({

label: "Cell pipeline",

layout: "auto",

vertex: {

module: cellShaderModule,

entryPoint: "vertexMain",

},

fragment: {

module: cellShaderModule,

entryPoint: "fragmentMain",

targets: [{

format: canvasFormat

}]

}

});

// After encoder.beginRenderPass()

pass.setPipeline(cellPipeline);

pass.setVertexBuffer(0, vertexBuffer);

pass.draw(vertices.length / 2); // 6 vertices

// before pass.end()

シェーダは特殊

WebGPU のシェーダーは、WebGPU シェーディング言語（WGSL）と呼ばれるシェーディング言語で記述します。WGSL の構文は Rust と少し似ています

---

あらゆるデバイスでLLM動かすプロジェクトで、そのWebを受け持っている？

https://scrapbox.io/files/65996db66e3f0a0023b40edf.png

WebとJavaScript APIを受け持っている

https://scrapbox.io/files/65996f160e160300249a4699.png

llama.cppとの比較。MLC使いもんならん言われとる

Web LLMではチョクでWebGPU触らず、tvm越しにWebGPU触っているっぽい

https://scrapbox.io/files/65996feca8c5870025ddc7d0.png

https://scrapbox.io/files/6599703eb41d400023105cce.png

https://scrapbox.io/files/659971bba362450024a3a985.png

https://scrapbox.io/files/659971efbba0fd0024010711.png

つまりイメージとしては、Web LLMはtvmランタイム越しにWebGPU使ってる感じっぽい

tvm形式にモデルがコンパイルされてて、Web LLM内ではtvm越しにWebGPU利用するように書いてる

tvm自体は色んなGPU（デバイス）で動作するランタイム

そもそもMLC自体もTVMをベースにしている

---

こんなのもあった

なんとC++で触っている（一旦パス）

---

概念的な説明

やはりGoogleのやつから入るのが良い

---

これはMLC用にモデルを変換したって理解で合ってるだろうか

Web LLMのドキュメントに自分でモデル追加する方法が書いてある

Bring Your Own Model Variant