互動式 3D 果凍柑橘切片

使用 WebGPU 製作精美、可互動的 3D 果凍柑橘切片。將完整體驗放在單一獨立 HTML 檔案中，內嵌 JavaScript 與 WGSL 著色器。 這必須是真正的即時 3D 模擬，而不是影片、圖片或循環動畫。 APPEARANCE 製作一片厚實的半圓形橙子切片，具有半透明、多汁的果肉、八個清楚分隔的瓣片、細緻的內部膜、微小氣泡、淡色白膜層，以及柔軟的橙色果皮。 讓它呈現高級果凍糖果的質感：高飽和色彩、亮澤高光、光線穿透果肉、逼真的折射，以及柔和的接觸陰影。避免過度泛光、色彩泛白或堅硬的塑膠外觀。 使用溫暖明亮的工作室背景，以及留白充足、簡潔俐落的編輯風介面。加入大型斜體襯線標題「柑橘果凍」。控制項保持精簡，並確保切片清楚可見。 軟體物理 果凍般的柔軟手感是最重要的部分。 - 使用滑鼠或手指抓住切片的任意部位。 - 拉動、提起、拉伸、扭轉，然後放開。 - 讓變形具有局部性：拉動一側時，附近的果肉應被拉伸，其餘部分則自然跟隨。 - 放開後，切片應先晃動並略微回彈，然後逐漸恢復原本形狀。 - 加入重力、慣性、阻尼、與地面碰撞及柔軟彈跳。 - 大致維持體積，避免網格塌陷或翻轉到內外顛倒。 - 讓果皮比果肉稍微硬一些。 - 內部瓣片、薄膜與氣泡必須隨變形一起移動，不得飄浮到本體外。 使用穩定的體積式軟體求解器，例如搭配 XPBD 約束的四面體網格。不要透過縮放或旋轉整個物件來模擬柔軟感。 CONTROLS 加入三種色彩預設：橙子、檸檬與紅寶石。 加入： - 紮實度滑桿。 - 內部阻尼滑桿。 - 「推它一下」按鈕。 - 重設按鈕。 - 四分之一速核取方塊。 - 顯示網格核取方塊。 - 暫停／繼續按鈕。 顯示質量、靜止體積百分比與動能的小型即時讀值。 技術要求 使用真正的 WebGPU 搭配 WGSL 著色器進行渲染。所有幾何與視覺細節都必須以程序式方式產生，不得匯入模型或圖片檔案。 讓模擬更新獨立於渲染影格率。支援桌面裝置與觸控裝置。若無法使用 WebGPU，請顯示清楚的替代提示訊息。 測試大力拖曳、連續多次放開、所有控制項及窄螢幕顯示。交付完成的 HTML 前，修正不穩定的物理效果、損壞的幾何結構與視覺瑕疵。 成品應該像一個小巧、可觸摸互動的糖果實驗，讓人玩起來確實感到滿足。