Інтерактивний 3D-шматочок желейного цитруса

Створіть красивий інтерактивний 3D-шматочок желейного цитруса за допомогою WebGPU. Реалізуйте весь досвід в одному автономному HTML-файлі з вбудованими JavaScript і WGSL-шейдерами. Це має бути справжня 3D-симуляція в реальному часі, а не відео, зображення чи зациклена анімація. APPEARANCE Створіть товстий напівкруглий шматочок апельсина з напівпрозорою соковитою м’якоттю, вісьмома чітко вираженими сегментами, тонкими внутрішніми мембранами, дрібними бульбашками, світлим шаром альбедо та м’якою помаранчевою шкіркою. Надайте йому вигляду преміальної желейної цукерки: насичений колір, глянцеві відблиски, проникнення світла крізь м’якоть, переконливу рефракцію та м’які контактні тіні. Уникайте надмірного bloom-ефекту, вибілених кольорів і вигляду твердого пластику. Використайте теплий світлий студійний фон і чистий редакційний інтерфейс із достатньою кількістю вільного простору. Додайте великий курсивний заголовок із засічками “Citrus Jelly.” Елементи керування мають бути компактними, а шматочок — добре помітним. ФІЗИКА М’ЯКОГО ТІЛА Відчуття желе — найважливіша частина. - Захоплюйте будь-яку частину шматочка мишею або пальцем. - Тягніть, підіймайте, розтягуйте, скручуйте й відпускайте його. - Деформація має бути локальною: якщо потягнути за один край, сусідня м’якоть повинна розтягуватися, а решта — природно реагувати на рух. - Після відпускання шматочок має хитатися, виходити за початкове положення та поступово відновлювати первісну форму. - Додайте гравітацію, інерцію, демпфування, зіткнення із землею та м’які відскоки. - Приблизно зберігайте об’єм і не допускайте руйнування сітки чи вивертання її навиворіт. - Шкірка має бути трохи пружнішою за м’якоть. - Внутрішні сегменти, мембрани та бульбашки повинні деформуватися разом із тілом, не випливаючи за його межі. Використайте стабільний об’ємний солвер для м’якого тіла, наприклад тетраедральну сітку з обмеженнями XPBD. Не імітуйте м’якість масштабуванням або обертанням усього об’єкта. CONTROLS Додайте три пресети кольорів: апельсин, лимон і рубін. Додайте: - Повзунок пружності. - Повзунок внутрішнього демпфування. - Кнопку “Легенько підштовхнути”. - Кнопку скидання. - Прапорець чверті швидкості. - Прапорець відображення сітки. - Кнопку призупинення/відновлення. Відображайте невеликі показники в реальному часі для маси, відсотка початкового об’єму та кінетичної енергії. ТЕХНІЧНІ ВИМОГИ Використайте справжній рендеринг WebGPU із WGSL-шейдерами. Генеруйте всю геометрію та візуальні деталі процедурно, без імпортованих моделей або файлів зображень. Оновлення симуляції мають бути незалежними від частоти кадрів рендерингу. Забезпечте підтримку настільних і сенсорних пристроїв. Якщо WebGPU недоступний, покажіть зрозуміле резервне повідомлення. Перевірте сильне перетягування, повторні відпускання, усі елементи керування та вузькі екрани. Перед передаванням готового HTML виправте нестабільну фізику, пошкоджену геометрію та візуальні артефакти. Результат має нагадувати маленький тактильний експеримент із цукеркою, з яким справді приємно взаємодіяти.