可交互的 3D 软糖柑橘切片

使用 WebGPU 创建一个精美、可交互的 3D 软糖柑橘切片。将完整体验交付为一个独立的 HTML 文件，其中嵌入 JavaScript 和 WGSL 着色器。 这必须是真正的实时 3D 模拟，不能是视频、图片或循环动画。 APPEARANCE 创建一片厚实的半圆形橙子切片，包含半透明多汁的果肉、八个清晰可辨的瓣状分区、精细的内部薄膜、微小气泡、浅色果瓤层和柔软的橙色果皮。 让它呈现高级软糖的质感：色彩饱和、带有光泽高光，光线能够穿过果肉，并具有可信的折射效果和柔和的接触阴影。避免过度泛光、颜色发白或呈现坚硬的塑料质感。 使用温暖明亮的工作室背景，以及留白充足、整洁的编辑风格界面。添加大号斜体衬线字体标题“Citrus Jelly”。控制项要紧凑，同时确保切片清晰可见。 软体物理 果冻般的触感是最重要的部分。 - 用鼠标或手指抓住切片的任意部位。 - 拖拽、提起、拉伸、扭转，然后松开。 - 让形变具有局部性：拉动一侧边缘时，附近的果肉应被拉伸，其余部分自然跟随。 - 松开后，切片应发生晃动和过冲，并逐渐恢复原始形状。 - 加入重力、惯性、阻尼、与地面的碰撞以及柔和的弹跳效果。 - 近似保持体积，防止网格塌陷或翻转到内部。 - 让果皮比果肉略硬一些。 - 内部瓣状分区、薄膜和气泡必须跟随形变，不能漂浮到主体外部。 使用稳定的体积软体求解器，例如采用四面体网格和 XPBD 约束。不要通过缩放或旋转整个物体来伪造柔软效果。 CONTROLS 加入三种配色预设：橙子、柠檬和红宝石。 添加： - 硬度滑块。 - 内部阻尼滑块。 - “轻推一下”按钮。 - 重置按钮。 - 四分之一速度复选框。 - 显示网格复选框。 - 暂停/继续按钮。 显示质量、静止体积百分比和动能的小型实时读数。 技术要求 使用真正的 WebGPU 进行渲染，并使用 WGSL 着色器。所有几何体和视觉细节都必须通过程序化方式生成，不得导入模型或图片文件。 让模拟更新独立于渲染帧率。支持桌面设备和触控设备。如果 WebGPU 不可用，请显示清晰的回退提示。 测试强力拖拽、反复松开、所有控制项以及窄屏显示。交付最终 HTML 前，修复不稳定的物理效果、损坏的几何体和视觉瑕疵。 最终效果应像一个小巧、可触摸操作的糖果实验，真正让人爱不释手。