インタラクティブな3Dグミの柑橘スライス

WebGPUを使って、美しくインタラクティブな3Dグミの柑橘スライスを作成してください。JavaScriptとWGSLシェーダーを埋め込んだ、完全な体験を1つのスタンドアロンHTMLファイルで提供してください。 これは動画、画像、ループアニメーションではなく、リアルタイムの3Dシミュレーションでなければなりません。 APPEARANCE 厚みのある半円形のオレンジスライスを作成し、半透明でみずみずしい果肉、はっきり分かれた8つの房、繊細な内部の薄皮、小さな気泡、淡い白いワタの層、柔らかなオレンジ色の皮を表現してください。 高級感のあるグミキャンディのように見せてください。彩度の高い色、艶やかなハイライト、果肉を通り抜ける光、説得力のある屈折、柔らかな接地影を表現します。過度なブルーム、色あせた色合い、硬いプラスチックのような見た目は避けてください。 暖かみのある明るいスタジオ背景と、余白を十分に取ったクリーンなエディトリアル調のインターフェースを使用してください。大きなイタリック体のセリフフォントで「Citrus Jelly」と表示します。操作パネルはコンパクトにし、スライスが常にはっきり見えるようにしてください。 ソフトボディ物理 最も重要なのは、ゼリーらしい感触です。 - マウスまたは指でスライスのどの部分でもつかめるようにしてください。 - 引っ張る、持ち上げる、伸ばす、ひねる、放すといった操作に対応してください。 - 変形は局所的にしてください。片方の端を引っ張ると、その周辺の果肉が伸び、残りの部分は自然に追従するようにします。 - 放した後はスライスが揺れ、行き過ぎる動きを見せながら、徐々に元の形へ戻るようにしてください。 - 重力、慣性、減衰、地面との衝突、柔らかなバウンドを実装してください。 - 体積をおおむね維持し、メッシュが潰れたり裏返ったりしないようにしてください。 - 皮は果肉より少し硬めにしてください。 - 内部の房、薄皮、気泡は変形に追従し、ボディの外側に浮き出ないようにしてください。 XPBD拘束を用いた四面体メッシュなど、安定した体積ベースのソフトボディソルバーを使用してください。オブジェクト全体を拡大縮小したり回転させたりして、柔らかさを表現するのは避けてください。 CONTROLS 3つのカラープリセット（オレンジ、レモン、ルビー）を用意してください。 以下を追加してください。 - 硬さスライダー - 内部減衰スライダー - 「少し揺らす」ボタン - リセットボタン - 4分の1速チェックボックス - メッシュ表示チェックボックス - 一時停止／再開ボタン 質量、静止時体積に対する割合、運動エネルギーを小さなライブ表示で示してください。 技術要件 WGSLシェーダーによる本物のWebGPUレンダリングを使用してください。インポートしたモデルや画像ファイルは使わず、ジオメトリと視覚的なディテールをすべてプロシージャルに生成してください。 シミュレーションの更新をレンダリングのフレームレートから独立させてください。デスクトップとタッチデバイスに対応します。WebGPUが利用できない場合は、明確なフォールバックメッセージを表示してください。 強くドラッグする操作、繰り返し放す操作、すべてのコントロール、狭い画面での表示をテストしてください。完成したHTMLを納品する前に、不安定な物理挙動、壊れたジオメトリ、視覚的なアーティファクトを修正してください。 小さくて触って遊べる、心から操作を楽しめるキャンディの実験のような仕上がりにしてください。