火龙果果冻

创建一个名为“火龙果果冻”的交互式 3D 场景：一个由柔软半透明果冻制成的半个火龙果。使用真实的 WebGPU 渲染和 WGSL 着色器，在单个 HTML 文件中完成整个项目。不要使用预制模型或图像素材。 APPEARANCE 将一个切面朝上放置在明亮工作室台面上的大型半个火龙果。 果皮呈浓郁的覆盆子粉色，带有一圈薄薄的浅色内果皮，以及珍珠般的白色果肉。 果肉上自然分布约 250 颗微小黑色种子。 果实周围有 12–14 片肉质果皮花瓣，从粉色根部渐变为绿色尖端。 表面光泽湿润，带有光线折射、细小内部气泡和柔和的接触阴影。 材质应呈现柔软软糖般的质感，而不是坚硬塑料。保留高饱和色彩，避免高光过曝。 物理与交互 使用带有弹性连接和保持体积约束的体积网格，实现真实的软体形变，例如 XPBD。 用户可以用鼠标或手指抓住果肉，拉伸后松开。 形变应集中在抓取点附近，而不是简单地平移整个物体。 松开后，果实应摇摆、抖动，并逐渐恢复原始形状。 让果皮花瓣可以单独拖拽。它们应比果肉更柔软，在保持与果实连接的同时弯曲并弹回。 种子必须跟随形变表面移动，不能飘离或陷入果肉。 在强力拉拽时保持模拟稳定，并处理与地面的接触，防止元素翻转。 视觉设计 使用简约明亮的工作室风格界面，并采用编辑设计美学：留白充足、边框纤细、控件克制，不添加多余装饰。 左上角： “材质研究 / 编号 019” 使用大号斜体衬线字体，分两行显示标题： “火龙果果冻。” 下方显示： “有一点野。” “有一点甜。” “一条非常柔软的龙。” 右侧添加一个名为“标本”的浮动面板，其中包含： 密度标签：ρ 1.04 g/cm³。 三个预设： 珍珠——白色果肉和粉色果皮。 红宝石——覆盆子色果肉和粉色果皮。 黄金——浅色果肉和金色果皮。 “硬度”和“内部阻尼”滑块，并显示当前数值。 “轻轻推一下”和“重置”按钮。 “¼ 倍速”和“显示网格”复选框。 “暂停”按钮。 同时包括： 带退出全屏选项的全屏按钮。 “WEBGPU · 实时”状态指示器。 实时显示质量、静止体积百分比和动能。 简短的交互提示：“拉一拉果肉。拽一下花瓣。松手。” 可折叠的“实验内部”部分，准确说明实现方式。 技术要求 交付一个名为 pitaya-jelly-webgpu.html 的自包含文件。 使用真实的 WebGPU 渲染，而不是模拟 Canvas 2D。 所有几何体都必须程序化生成。 使用考虑厚度的折射、菲涅耳反射和柔和的工作室光照。 使用固定的模拟时间步长，确保行为一致。 支持桌面端和触控交互，并采用响应式布局。 拖拽过程中避免昂贵的几何体重建或着色器编译。 WebGPU 不可用时显示清晰的回退提示。 验证拖拽、松开、形状恢复、预设、重置、暂停、全屏和移动端布局。 首要目标是呈现令人信服的果冻般行为、精美的材质和令人满足的交互。最终效果应像一款经过精心打磨、可玩的材质实验。