Интерактивный 3D-ломтик арбузного желе на шейдерах WebGPU и WGSL в одном HTML-файле

Промпт

ПРОМПТ:
Создайте «Melon Jelly» — отполированный интерактивный 3D-слайс желеобразного арбуза, работающий непосредственно в браузере с использованием настоящего WebGPU и WGSL-шейдеров.
Предоставьте один автономный HTML-файл со встроенными JavaScript и CSS. Это должна быть настоящая интерактивная 3D-симуляция, а не статичный рендер, видео или 2D-имитация.
АРБУЗ
Создайте толстый, скруглённый треугольный ломтик арбуза со следующими характеристиками:
Полупрозрачная рубиново-красная желейная мякоть.
Светлый, слегка полупрозрачный слой между мякотью и коркой.
Глянцевая зелёная внешняя корка с неровными тёмно-зелёными полосами.

Отдельно смоделированные тёмные семечки, встроенные в обе открытые стороны.
Мягко скруглённые углы и привлекательная, ощутимая толщина.
Пусть он выглядит как дорогая жевательная конфета, сфотографированная в студии. Он должен казаться сочным, мягким и почти съедобным. Сохраняйте насыщенность цветов, не допуская чрезмерной пересветки бликов.
ФИЗИКА МЯГКОГО ТЕЛА
Используйте объёмную симуляцию мягкого тела, например тетраэдральную сетку с упругими ограничениями XPBD и ограничениями сохранения объёма.
Пользователь должен иметь возможность:
Схватить кончик, угол, мякоть или корку.
Растягивать, сгибать, поднимать и слегка скручивать ломтик.

После отпускания наблюдать, как он покачивается, а затем постепенно успокаивается.
Ломтик должен заметно деформироваться локально, а не просто перемещаться или масштабироваться как единый жёсткий объект. Сделайте корку немного более упругой, чем мякоть, сохранив гибкость всего ломтика.
Разумно сохраняйте объём при растягивании. Предотвращайте инверсию элементов, взрывное движение и необратимое разрушение формы. Используйте фиксированный временной шаг симуляции и ограниченное количество подшагов для стабильности.
После отпускания движение должно естественно затухать — без мгновенного возврата в исходное состояние и бесконечных колебаний.
Сохраняйте семечки прикреплёнными к деформирующейся мякоти. Они должны двигаться и вращаться вместе с поверхностью, а не плавать независимо или оставаться зафиксированными в пространстве.
Добавьте контакт с землёй, мягкое трение и лёгкие отскоки. Не допускайте заметного проникновения в поверхность пола.
РЕНДЕРИНГ
Используйте нативный WebGPU с WGSL-шейдерами.
Включите:
Поглощение света, зависящее от толщины.
Преломление света в желе.

Отражения Френеля и глянцевые блики.
Мягкий проходящий свет по тонким краям.
Ненавязчивые внутренние детали и несколько крошечных пузырьков воздуха.

Мягкие контактные тени под ломтиком.
Светлый нейтральный студийный фон.
Мякоть, светлая корка и зелёная кожица должны иметь различающиеся реакции материала. Не превращайте всё в прозрачное стекло или непрозрачный пластик.
Сделайте ломтик крупным и удобным для изучения, используя ракурс камеры в три четверти, открывающий вид на мякоть, семечки и толщину.
ИНТЕРФЕЙС
Используйте минималистичную редакционную компоновку с большим количеством свободного пространства, тонкими границами, сдержанными элементами управления и без декоративных градиентов в интерфейсе.
В левом верхнем углу:
“MATERIAL STUDIES / NO. 009”
Крупный курсивный заголовок с засечками, разбитый на две строки: “Melon” и “Jelly.”
Небольшая подпись:
“A slice of summer.”
“A little wobble.”
“Too soft to share.”
В правом верхнем углу:
Небольшой индикатор состояния, отображающий “WEBGPU · LIVE”, когда рендерер запущен.

Панель справа:
“THE SPECIMEN”
Три согласованных цветовых пресета в стиле арбуза.
Ползунок упругости с отображением текущего значения.
Ползунок внутреннего затухания с отображением текущего значения.
Кнопки “Give it a nudge” и “Reset”.
Флажки “¼ speed” и “Show mesh”.

Кнопка паузы / возобновления.
В левом нижнем углу:
Краткая подсказка о том, что ломтик можно схватить и растягивать.
Отображаемые в реальном времени масса, относительный объём и кинетическая энергия, рассчитанные на основе симуляции. Чётко укажите условные единицы или приблизительные значения там, где это уместно.
В правом нижнем углу:

Сворачиваемый раздел “Inside the experiment” с кратким объяснением физики и рендеринга.
ПОВЕДЕНИЕ И ПРОИЗВОДИТЕЛЬНОСТЬ
Поддерживайте ввод с помощью мыши и сенсорного экрана. Используйте захват указателя, чтобы перетаскивание оставалось надёжным, когда указатель покидает объект.
Сделайте так, чтобы компоновка работала на настольных и мобильных устройствах, а элементы управления не перекрывали ломтик.
Повторно используйте буферы и не пересоздавайте геометрию и не компилируйте шейдеры во время перетаскивания. Обеспечьте плавное и отзывчивое взаимодействие.
Учитывайте настройки уменьшения анимации. Если WebGPU недоступен, отображайте понятное объяснение вместо незаметной подмены на фальшивый рендерер.
ПРОВЕРКА
Проверьте перетаскивание из нескольких точек, сильное растягивание, повторные отпускания, столкновения с землёй, работу всех ползунков, пресетов, паузы, сброса и замедленного режима.
Убедитесь, что модель возвращается к устойчивой форме покоя, семечки остаются прикреплёнными, сетка сохраняет целостность и не возникает ошибок рендеринга.
В первую очередь обеспечьте качество реакции желе и освещения. Результат должен вызывать желание снова и снова хватать объект и играть с ним.

Create “Melon Jelly” - a polished, interactive 3D watermelon jelly slice that runs directly in the browser using genuine WebGPU and WGSL shaders.
Deliver a single, self-contained HTML file with embedded JavaScript and CSS. This must be an actual interactive 3D simulation, not a static render, video, or 2D imitation.
THE WATERMELON
Create a thick, rounded triangular watermelon wedge with:
Translucent ruby-red jelly flesh.
A pale, slightly translucent layer between the flesh and rind.
A glossy green outer rind with irregular dark-green stripes.

Individually modeled dark seeds embedded in both exposed sides.
Softly rounded corners and an appealing, substantial thickness.
Make it look like an expensive gummy candy photographed in a studio. It should feel juicy, soft, and almost edible. Keep the colors rich without overexposing the highlights.
SOFT-BODY PHYSICS
Use a volumetric soft-body simulation, such as a tetrahedral mesh with XPBD elastic and volume-preservation constraints.
The user must be able to:
Grab the tip, a corner, the flesh, or the rind.
Stretch, bend, lift, and gently twist the slice.

Release it and watch it wobble before gradually settling.
The slice must visibly deform locally, not simply move or scale as one rigid object. Make the rind slightly firmer than the flesh while keeping the whole slice flexible.
Preserve volume reasonably during stretching. Prevent inverted elements, explosive motion, and permanent collapse. Use a fixed simulation timestep and bounded substeps for stability.
After release, the motion should decay naturally - no instant snapping back and no endless oscillation.
Keep seeds attached to the deforming flesh. They must move and rotate with the surface rather than float independently or remain fixed in space.
Include ground contact, gentle friction, and soft bouncing. Avoid visible floor penetration.
RENDERING
Use native WebGPU with WGSL shaders.
Include:
Thickness-dependent light absorption.
Refraction through the jelly.

Fresnel reflections and glossy highlights.
Soft transmitted light through thin edges.
Subtle internal details and a few tiny air bubbles.

Soft contact shadows beneath the slice.
A light, neutral studio background.
The flesh, pale rind, and green skin should have distinct material responses. Avoid making everything look like clear glass or opaque plastic.
Keep the slice large and easy to inspect, with a three-quarter camera angle that reveals the flesh, seeds, and thickness.
INTERFACE
Use a minimal editorial layout with generous whitespace, thin borders, restrained controls, and no decorative UI gradients.
Top left:
“MATERIAL STUDIES / NO. 009”
A large italic serif heading split across two lines: “Melon” and “Jelly.”
Small caption:
“A slice of summer.”
“A little wobble.”
“Too soft to share.”
Top right:
A small status indicator showing “WEBGPU · LIVE” when the renderer is running.

Right-side panel:
“THE SPECIMEN”
Three coordinated watermelon-inspired color presets.
Firmness slider with its current value.
Internal damping slider with its current value.
“Give it a nudge” and “Reset” buttons.
“¼ speed” and “Show mesh” checkboxes.

Pause / Resume button.
Bottom left:
A short hint explaining that the slice can be grabbed and stretched.
Live mass, relative volume, and kinetic-energy readouts derived from the simulation. Clearly describe illustrative units or approximate values where appropriate.
Bottom right:

A collapsible “Inside the experiment” section briefly explaining the physics and rendering.
BEHAVIOR AND PERFORMANCE
Support both mouse and touch input. Use pointer capture so dragging remains reliable when the pointer leaves the object.
Make the layout work on desktop and mobile without controls covering the slice.
Reuse buffers and avoid rebuilding geometry or compiling shaders during dragging. Keep interaction smooth and responsive.
Respect reduced-motion preferences. If WebGPU is unavailable, display a clear explanation instead of silently substituting a fake renderer.
VALIDATION
Test dragging from several locations, strong stretches, repeated releases, ground collisions, all sliders, presets, pause, reset, and slow motion.
Check that the model returns to a stable resting shape, seeds stay attached, the mesh remains intact, and there are no rendering errors.
Prioritize the quality of the jelly response and lighting. The result should be something people want to keep grabbing and playing with.