ピタヤゼリー

「ピタヤゼリー」というインタラクティブな3Dシーンを作成してください。柔らかく半透明なゼリーでできた、ドラゴンフルーツの半分を表現します。プロジェクト全体を単一のHTMLファイルに実装し、実際のWebGPUレンダリングとWGSLシェーダーを使用してください。既成のモデルや画像アセットは使用しないでください。 APPEARANCE 明るいスタジオのテーブルに、切り口を上にして置かれた大きなドラゴンフルーツの半分。 鮮やかなラズベリーピンクの皮、薄く淡い色の内皮、真珠のように白い果肉。 果肉全体に自然に分布する、約250個の小さな黒い種。 果実の周囲に12～14枚の肉厚な皮の花びらを配置し、根元のピンクから先端の緑へと色を変化させる。 光の屈折、小さな内部気泡、柔らかな接地影を備えた、つややかで濡れた表面。 素材は硬いプラスチックではなく、柔らかなグミキャンディのように見せてください。白飛びさせず、彩度の高い色を保ってください。 物理演算とインタラクション 弾性接続と体積保持制約を備えたボリュームメッシュを使い、XPBDなどによる本格的なソフトボディ変形を実装してください。 ユーザーはマウスまたは指で果肉をつかみ、引き伸ばしてから離せるようにしてください。 変形はオブジェクト全体を単純に移動させるのではなく、つかんだ位置の周囲に集中させてください。 離した後は、果実が揺れ、ぷるぷると振動し、徐々に元の形へ戻るようにしてください。 皮の花びらは1枚ずつドラッグできるようにしてください。果肉より柔らかく、果実に付いたまま曲がって元に戻るようにします。 種は変形する表面に追従し、浮いたり果肉に沈み込んだりしないようにしてください。 強く引っ張った場合もシミュレーションを安定させ、床との接触を維持し、要素の反転を防止してください。 ビジュアルデザイン ミニマルで明るいテーマのスタジオ風インターフェースにしてください。エディトリアルな美しさを意識し、十分な余白、細いボーダー、控えめなコントロールを用い、不要な装飾は避けます。 左上： 「MATERIAL STUDIES / NO. 019」 大きな斜体のセリフ体見出しを2行で表示： 「ピタヤゼリー。」 その下に： 「ちょっとワイルド。」 「ちょっとスイート。」 「とても柔らかなドラゴン。」 右側には「THE SPECIMEN」というタイトルのフローティングパネルを追加し、以下を含めてください： 密度バッジ：ρ 1.04 g/cm³。 3つのプリセット： Pearl — 白い果肉とピンクの皮。 Ruby — ラズベリー色の果肉とピンクの皮。 Gold — 淡い色の果肉と黄金色の皮。 現在値を表示するFirmnessスライダーとInternal dampingスライダー。 「軽く揺らす」と「リセット」ボタン。 「¼速度」と「メッシュを表示」のチェックボックス。 「一時停止」ボタン。 さらに以下も含めてください： 終了オプション付きのフルスクリーンボタン。 「WEBGPU · LIVE」ステータスインジケーター。 質量、静止時体積に対する割合、運動エネルギーをリアルタイムで表示。 短い操作ヒント：「果肉を引っ張る。花びらを引く。手を離す。」 実装を正確に説明する、折りたたみ可能な「実験の内部」セクション。 技術要件 pitaya-jelly-webgpu.htmlという名前の、自己完結型のファイルを1つ納品してください。 Canvas 2Dの見せかけではなく、実際のWebGPUレンダリングを使用してください。 すべてのジオメトリをプロシージャルに生成してください。 厚みを考慮した屈折、フレネル反射、柔らかなスタジオ照明を使用してください。 一貫した挙動を実現するため、固定タイムステップでシミュレーションを実行してください。 レスポンシブなレイアウトで、デスクトップとタッチ操作に対応してください。 ドラッグ中に高コストなジオメトリ再構築やシェーダーコンパイルを行わないでください。 WebGPUが利用できない場合は、明確なフォールバックメッセージを表示してください。 ドラッグ、リリース、形状の回復、プリセット、リセット、一時停止、フルスクリーン、モバイルレイアウトを検証してください。 最優先するのは、説得力のあるゼリーらしい挙動、美しい素材表現、そして気持ちよく操作できるインタラクションです。完成物は、洗練されたプレイアブルな素材実験のように感じられるものにしてください。