WGSL
WebGPU Shadeing Language
https://www.w3.org/TR/WGSL/
https://gpuweb.github.io/gpuweb/wgsl/
WebGPUで使用するシェーディング言語
この文書のステータス
このセクションでは、この文書の公開時点におけるステータスについて説明します。最新のW3C出版物のリストとこの技術レポートの最新版は、W3C標準およびドラフト索引でご覧いただけます。
この仕様に関するフィードバックとコメントを歓迎します。この仕様に関する議論にはGitHub Issuesを推奨します。または、GPU for the Webワーキンググループのメーリングリスト(public-gpu@w3.org、アーカイブ)にコメントを送信することもできます。このドラフトでは、ワーキンググループでまだ議論されていない保留中の課題をいくつか取り上げています。これらの課題の妥当性を含め、結論はまだ出ていません。
この文書は、GPU for the Webワーキンググループによって勧告トラックを用いた勧告候補ドラフトとして公開されました。この文書は、少なくとも2025年2月28日までは勧告候補のままです。
ワーキンググループは、最新のGPUシステムAPIを用いて、少なくとも2つのブラウザで各機能の実装を実証する予定です。テストスイートは、実装レポートの作成に使用されます。
候補勧告としての公開は、W3Cおよびそのメンバーによる承認を意味するものではありません。候補勧告草案は、ワーキンググループが後続の候補勧告スナップショットに含める予定の、前回の候補勧告からの変更点を統合したものです。
この文書は随時維持および更新されます。この文書の一部は作業中です。
この文書は、W3C特許ポリシーに基づいて活動するグループによって作成されました。W3Cは、グループの成果物に関連して行われたすべての特許開示の公開リストを維持管理しており、このページには特許開示に関する指示も記載されています。必須クレーム(Essential Claim(s))を含むと考える特許について実際に知っている個人は、W3C特許ポリシーのセクション6に従って情報を開示しなければなりません。
この文書は、2025年8月18日付のW3Cプロセスドキュメントに準拠します。
1. はじめに
WebGPU シェーディング言語 (WGSL) は、WebGPU 用のシェーダー言語です。つまり、WebGPU API を使用するアプリケーションは、WGSL を使用して、GPU 上で実行されるシェーダーと呼ばれるプログラムを表現します。
code:例1
// テクスチャ付きジオメトリをポイント ライトで照らすフラグメント シェーダー。
// Lights from a storage buffer binding.
struct PointLight {
position : vec3f,
color : vec3f,
}
struct LightStorage {
pointCount : u32,
point : array<PointLight>,
}
@group(0) @binding(0) var<storage> lights : LightStorage;
// Texture and sampler.
@group(1) @binding(0) var baseColorSampler : sampler;
@group(1) @binding(1) var baseColorTexture : texture_2d<f32>;
// 関数の引数は頂点シェーダ(vertex shader)からの値です。
@fragment
fn fragmentMain(@location(0) worldPos : vec3f,
@location(1) normal : vec3f,
@location(2) uv : vec2f) -> @location(0) vec4f {
// テクスチャからサーフェスの基本色をサンプリングします。 Sample the base color of the surface from a texture.
let baseColor = textureSample(baseColorTexture, baseColorSampler, uv);
let N = normalize(normal);
var surfaceColor = vec3f(0);
// シーンのポイント ライトをループします。 Loop over the scene point lights.
for (var i = 0u; i < lights.pointCount; i++) {
let worldToLight = lights.pointi.position - worldPos;
let dist = length(worldToLight);
let dir = normalize(worldToLight);
// この光が表面の色に及ぼす影響を決定します。 Determine the contribution of this light to the surface color.
let radiance = lights.pointi.color * (1 / pow(dist, 2));
let nDotL = max(dot(N, dir), 0);
// 表面の色への光の寄与を蓄積します。 Accumulate light contribution to the surface color.
surfaceColor += baseColor.rgb * radiance * nDotL;
}
// 累積された表面の色を返します。 Return the accumulated surface color.
return vec4(surfaceColor, baseColor.a);
}