webg samples

samples/gltf_loader/hand.glb の手を読み込み、各指ポーズの action 自体は Action で再生しつつ、「今どの action を選ぶか」は AnimationState が決める構成を確認できます。

3D 空間の原点に X / Y / Z の基準軸を置き、座標系の向きとスケール感を確認する教育用サンプルです

Billboard クラスで、常に camera 正面を向く particle 表現を描画するサンプルです

BloomPass を使って、3D scene を一度 offscreen RenderTarget へ描いてから bloom 合成して canvas へ戻すサンプルです。

複数のスキンメッシュ（触手）を同時にアニメーションし、ボーン変形と法線マップの見え方を確認するサンプルです。

webg のゲーム向け基礎機能を使って、3D 表現を取り入れたシンプルなブロック崩しを作るサンプルです。

webgの基本機能（シーン管理、衝突、HUD、音）をまとめて使った3Dブロック崩しの統合サンプルです。

main.js 内で指定した Collada (.dae) ファイルを読み込み、ModelAsset に正規化してから表示するサンプルです。

space.checkCollisions() で軸平行境界ボックス重なり判定（AABB, 広域）の候補を取り、サンプル内の球 vs mesh 距離判定で詳細衝突を検証するサンプルです。

CommandPalette.js が default style、起動 gesture、button、stepper、select を持つ高水準 UI 部品の実験サンプルです。

samples/bloom の比較対象となる Compute Shader 版です。

WebGPU の Compute Shader を使い、格子状の布を mass-spring モデルで更新するサンプルです

sample-local MRT passでalbedo、view-space normal、depthをG-bufferへ出力します。

Compute Shader で多段階ぼかしを行い、Sample Step と stage 別 scale で品質とGPU負荷を調整できます。

scene color の 3x3 近傍を Compute Shader で読み、Sobel filter によるエッジ検出を行います。

SSAO、directional / spot Shadow Map、SSR、DoF、Bloom、Edge を ComputeEffectPipeline でまとめて扱う高水準 API の実験サンプルです。

ModelAsset JSON のアニメーションを再生しながら、ComputeEffectPipeline の画面効果を切り替えて確認できる汎用 JSON ビューアです。

WebGPU の Compute Shader を使い、大量の粒子を GPU 側で更新して描画するサンプルです

球体の位置、半径、速度、反発係数、摩擦係数、色をstorage bufferへ保持します。

第20章のポストプロセス描画フローを、fragment shader の FullscreenPass ではなく Compute Shader で加工するサンプルです。

webg coreのShadowMapPassでstatic/skinned Shapeの単一directional light shadow mapを検証します。spot shadowは別コアAPIとして高水準pipelineから利用できます。

scene colorとsampleable depthをCompute Shaderで読み、depth-only SSAOを計算します。

sample内のMRT geometry passでlit color、view-space normal、depthをG-bufferへ出力します。

sample-local G-bufferのalbedo、view-space normal、depthをCompute Shaderから読みます。

WebGPU の Compute Shader を使い、2 枚の texture を ping-pong しながら毎フレーム内容を書き換えるサンプルです

VignettePass の fragment shader 版と比較するため、同じ周辺減衰を Compute Shader 1 dispatch で処理します。

webg ベースで作った 3D falling-block game です

球体を複数配置し、色・テクスチャ・回転・カメラ操作をまとめて確認するサンプルです。

ノードの親子関係を実行中に attach / detach で切り替えるサンプルです。

DofPass の多段階ぼかしを使い、Focus Range を stage 1つ分の幅として調整できます。

WebgApp の layoutMode: "embedded" と fixedCanvasSize を使い、本文の途中へ埋め込んだ canvas の中で .glb ビューアを動かすサンプルです

Orbit、First Person、Followの役割と、アプリケーションが作るcamera階層の違いを確認するサンプルです。

shader 側に追加した fog を、WebgApp ベースのサンプルで一通り試すためのサンプルです。

main.js 内で指定した glTF / GLB ファイルを読み込み、ModelAsset に正規化してから表示するサンプルです。

README.md の「標準の使い方」にある WebgApp 例を、すぐ実行して確認できるサンプルとして切り出したものです

samples/gltf_loader/hand.glb の手モデルと AnimationState を使って、ジャンケンを行うサンプルです。

main.js 内で指定した ModelAsset JSON ファイルを読み込み、そのまま表示するサンプルです。

README.md の「標準の使い方」にある low-level 例を、そのまま実行しやすいサンプルとして切り出したものです

WebgApp で camera と HUD を整え、terrain mesh そのものは Shape の low-level API だけで作るサンプルです

スマートフォンやタブレットのタッチ操作に最適化した Blender 風の 3D modeler です

Primitive.js が返す ModelAsset を ModelValidator で検証し、ModelBuilder で Shape に変換して表示するサンプルです。

PhysicsSpace の中で複数の sphere が床、壁、球同士で反発しながら跳ねる見え方を確認するサンプルです

BoxCollider を持つ複数の body が、回転しながら落下し、空中や床上で接触し、押し合いながら落ち着いていく見え方を確認するサンプルです

WebgApp を土台に、Texture.js の手続きハイトマップ生成と法線マップ生成を同時に確認するサンプルです。

Scene JSON を SceneAsset.load() で読み込み、WebgApp.validateScene() と WebgApp.loadScene() を通してそのまま表示するサンプルです。

primitive 系サンプル群の中では、texture / image normal / procedural normal の見え方比較を 1 本へ寄せる主入口です。

ウェイト分布や回転軸を切り替えながら、スキニング変形を詳細に観察する教材向けサンプルです。

AudioSynth と GameAudioSynth を使い、SE と BGM を同じ画面で調整しながら確認するサンプルです。

ToneSynth だけを使い、単音または3和音で波形、envelope、reverb の違いを確認するサンプルです。