bone_creature

English | 日本語

概要

• 複数のスキンメッシュ（触手）を同時にアニメーションし、ボーン変形と法線マップの見え方を確認するサンプルです。
• SmoothShader を使った「スキニング + 法線マップ」の実運用例として構成しています。

実行方法

• 実行ファイルは ./bone_creature.html です
• WebGPU に対応したブラウザで開き、必要に応じて help panel や HUD と合わせて確認してください

使用している webg 機能

• WebgApp: Screen / Shader / Space / Camera / Input / Message の標準初期化
• Skeleton / Bone: ボーン階層と姿勢更新
• Shape + ウェイト: スキニング対象メッシュ
• SmoothShader: ボーン変形対応の法線マップ付きライティング
• Texture: 手続きノイズから高さマップと法線マップを生成
• WebgApp.setGuideLines / setStatusLines: 操作説明と runtime 状態表示
• Touch: モバイル向けの回転 / action ボタン

確認ポイント

• 触手がボーン階層に追従して連続的に変形するかを確認し、ウェイト設定と姿勢更新が破綻していないかを検証します
• 法線マップあり/なしで陰影の密度が変化するかを確認し、SmoothShader の導入効果を見積もります
• ボーン表示を有効化したときに、可視ボーンの向きと実際のメッシュ変形方向が一致するかを確認します
• guide は画面下、status は画面上に分けてあり、表示の役割を分離したサンプルとしても確認します

操作方法

• ArrowUp / ArrowDown: クリーチャ全体をX軸方向に回転
• ArrowLeft / ArrowRight: クリーチャ全体をY軸方向に回転
• Q / E: クリーチャ全体をZ軸方向に回転
• B: ボーン表示のON / OFF
• P: 一時停止のON / OFF
• S: スクリーンショット保存