Желе з пітайї

Створіть інтерактивну 3D-сцену під назвою «Желе з пітайї» — половинку пітайї з м’якого напівпрозорого желе. Побудуйте весь проєкт в одному HTML-файлі, використовуючи справжній рендеринг WebGPU та шейдери WGSL. Не використовуйте готові моделі чи зображення. APPEARANCE Велика половинка пітайї лежить зрізом догори на світлій студійній поверхні. Насичено-малинова шкірка, тонкий світлий внутрішній шар і перламутрово-біла м’якоть. Приблизно 250 крихітних чорних насінин, природно розподілених по м’якоті. 12–14 м’ясистих пелюсток шкірки навколо плода, з переходом від рожевих основ до зелених кінчиків. Глянцева волога поверхня зі заломленням світла, дрібними внутрішніми бульбашками та м’якою контактною тінню. Матеріал має нагадувати м’яку желейну цукерку, а не твердий пластик. Збережіть насичені кольори, не допускаючи пересвічених відблисків. ФІЗИКА ТА ВЗАЄМОДІЯ Реалізуйте справжню деформацію м’якого тіла за допомогою об’ємної сітки з пружними зв’язками та обмеженнями, що зберігають об’єм, наприклад XPBD. Користувачі можуть хапати м’якоть мишею або пальцем, розтягувати її та відпускати. Деформація має зосереджуватися навколо точки захоплення, а не просто зміщувати весь об’єкт. Після відпускання плід має хитатися, тремтіти й поступово повертатися до початкової форми. Зробіть пелюстки шкірки перетягуваними окремо. Вони мають бути м’якшими за м’якоть, згинатися та пружно повертатися назад, залишаючись прикріпленими до плода. Насінини мають рухатися разом із деформованою поверхнею, не відриваючись і не занурюючись у м’якоть. Забезпечте стабільність симуляції під час сильного розтягування, контакт із підлогою та захист від інвертованих елементів. ВІЗУАЛЬНИЙ ДИЗАЙН Використайте мінімалістичний світлий інтерфейс у стилі студії з редакційною естетикою: багато вільного простору, тонкі рамки, стримані елементи керування та жодного зайвого декору. Угорі ліворуч: «MATERIAL STUDIES / NO. 019» Великий курсивний заголовок із засічками у два рядки: «Желе з пітайї». Під ним: «Трохи дике». «Трохи солодке». «Дуже м’який дракон». Праворуч додайте плаваючу панель із заголовком «THE SPECIMEN», що містить: Плашка щільності: ρ 1.04 g/cm³. Три пресети: Pearl — біла м’якоть і рожева шкірка. Ruby — малинова м’якоть і рожева шкірка. Gold — світла м’якоть і золотиста шкірка. Повзунки Firmness та Internal damping із видимими значеннями. Кнопки «Give it a nudge» та «Reset». Прапорці «¼ speed» і «Show mesh». Кнопка «Pause». Також додайте: Кнопку повноекранного режиму з можливістю вийти з нього. Індикатор стану «WEBGPU · LIVE». Поточні показники маси, відсотка відновленого об’єму та кінетичної енергії. Коротку підказку щодо взаємодії: «Потягніть м’якоть. Смикніть пелюстку. Відпустіть». Згортаний розділ «Inside the experiment» із точним поясненням реалізації. ТЕХНІЧНІ ВИМОГИ Надайте один самодостатній файл із назвою pitaya-jelly-webgpu.html. Використовуйте справжній рендеринг WebGPU, а не імітацію на Canvas 2D. Створіть усю геометрію процедурно. Використовуйте заломлення з урахуванням товщини, відбиття Френеля та м’яке студійне освітлення. Використовуйте фіксований часовий крок симуляції для стабільної поведінки. Підтримайте взаємодію на комп’ютерах і сенсорних пристроях, а також адаптивне компонування. Не допускайте дорогої реконструкції геометрії чи компіляції шейдерів під час перетягування. Показуйте зрозуміле повідомлення-пояснення, якщо WebGPU недоступний. Перевірте перетягування, відпускання, відновлення форми, пресети, скидання, паузу, повноекранний режим і мобільне компонування. Головні пріоритети — переконлива поведінка желе, красиві матеріали та приємна взаємодія. Результат має сприйматися як відшліфований ігровий експеримент із матеріалом.