WebGL

WebGL ボリュームレンダリング: ブラウザ GPU Shader の動き

ブラウザの WebGL ボリューム描画で GLSL、uniform、全画面 pass、frame timing がどう組み合わさるかを説明します。

学べること

なぜ WebGL が体積 Shading の互換経路として有効か。
JS、GLSL、uniform、フルスクリーンパスの関係。
ブラウザレンダーループ経由のタイミング計測の意味。
ブラウザやドライバ差が結果に与える影響。
WebGL と WebGPU の結果を分けて読む必要性。

簡単な定義

WebGL は JavaScript から GPU を使う実用的な経路として、体積レンダリングを多くのブラウザで扱える形にします。

Why does WebGL work for volume rendering? ガイド

WebGL ボリュームレンダリング: ブラウザ GPU Shader の動きの「Why does WebGL work for volume rendering?」では、ブラウザの WebGL ボリューム描画で GLSL、uniform、全画面 pass、frame timing がどう組み合わさるかを説明します。を中心に説明します。shader の複雑さ、ブラウザの描画経路、GPU の安定性を読むための内容です。

実測ではブラウザ、プリセット、ウィンドウサイズ、電源状態、熱状態を固定します。動作が重い場合は複雑度を下げるか停止してください。

How does a WebGL volume shader frame run? ガイド

WebGL ボリュームレンダリング: ブラウザ GPU Shader の動きの「How does a WebGL volume shader frame run?」では、ブラウザの WebGL ボリューム描画で GLSL、uniform、全画面 pass、frame timing がどう組み合わさるかを説明します。を中心に説明します。shader の複雑さ、ブラウザの描画経路、GPU の安定性を読むための内容です。

実測ではブラウザ、プリセット、ウィンドウサイズ、電源状態、熱状態を固定します。動作が重い場合は複雑度を下げるか停止してください。

gl.useProgram(program);
gl.uniform1f(uTime, elapsedSeconds);
gl.uniform2f(uResolution, width, height);
gl.drawArrays(gl.TRIANGLES, 0, 3);

What can change WebGL benchmark results? ガイド

WebGL ボリュームレンダリング: ブラウザ GPU Shader の動きの「What can change WebGL benchmark results?」では、ブラウザの WebGL ボリューム描画で GLSL、uniform、全画面 pass、frame timing がどう組み合わさるかを説明します。を中心に説明します。shader の複雑さ、ブラウザの描画経路、GPU の安定性を読むための内容です。

実測ではブラウザ、プリセット、ウィンドウサイズ、電源状態、熱状態を固定します。動作が重い場合は複雑度を下げるか停止してください。

重要ポイント

01 WebGL はデスクトップとモバイルで利用範囲が広い。
02 フルスクリーンパスは作業をフラグメントシェーダ中心に寄せる。
03 ブラウザ時間は有用だがネイティブ計測と同義ではない。
04 比較には「ブラウザ条件」を明記するのが前提。

FAQ