Интерактивная 3D-игрушка «Целый арбуз» из глянцевого желе: тянуть, трясти и резать ножом, один HTML-файл на WebGL

Промпт

Создать "Whole Melon": единый самодостаточный HTML-файл (весь JS/CSS встроены, без этапа сборки, без библиотек) с большим целым арбузом из глянцевого желе, который можно брать, раскачивать и разрезать ножом. Рендеринг с использованием WebGPU (WGSL); если WebGPU отсутствует, показать чистую резервную карточку.

ФОРМА И МАТЕРИАЛ
- Арбуз представляет собой поле знаковых расстояний: эллипсоид (~32 см в длину), лежащий на боку с мягко приплюснутым брюшком.
- Слои по глубине под кожурой: темно-зеленая кожура с нерегулярными более темными полосами, идущими от полюса к полюсу (бесшовно по всей окружности), бледно-белая сердцевина, затем полупрозрачная красная мякоть, которая светлеет к корке. Добавьте бледно-желтое пятно на брюшке, шрам от стебля на одном конце и место цветения на другом.
- Около 700 семян в трехлопастном кольце примерно на двух третях радиуса (каплевидные, широким концом наружу), плюс крошечные пузырьки воздуха. Сетку семян использовать только вблизи разрезанных поверхностей; семя, через которое проходит нож, остается на одной стороне и слегка погружается под новую поверхность, так что оно просвечивает сквозь тонкую пленку желе.
- Три сорта: Crimson, Golden, Rosé.

КУСКИ И РАЗРЕЗАНИЕ
- Каждый кусок — это SDF арбуза, обрезанный полупространствами разрезов, которые его создали, со скругленными свежими краями (smooth max). Все куски разделяют исходную систему покоя арбуза, поэтому кожура, сердцевина, полосы и семена остаются точно там, где они выросли.
- Инструмент "Нож": пользователь рисует линию поперек арбуза. Штрих считывается поверх того, что он пересекает, чтобы получить вертикальную плоскость лезвия. Для каждого куска, через который проходит плоскость, подбирается наилучшее вращение куска, плоскость переносится в систему покоя и кусок делится на два.
- Создавайте новые куски совместно (генераторы с бюджетом времени на кадр), пока стальной нож (полированное лезвие, деревянная ручка с заклепками) выравнивается над штрихом и вдавливает канавку в желе. Меняйте новые куски в момент прорыва края, перенося положение и скорость мякоти, из которой они произошли, и позвольте лезвию раздвинуть их, пока оно погружается. Допускается до 24 кусков и отбрасывание тонких осколков.
- Для каждого куска: поверхностная сетка рендерит кожуру (оценивать только блоки у поверхности, один шаг Ньютона по ней), гексагональную решетку в главной системе координат куска с узлами границы, привязанными к поверхности, и быстрое барицентрическое вложение.

ФИЗИКА (XPBD на ЦП, фиксированные 60 Гц, 6 подшагов)
- Поэлементное самовращающееся согласование формы (8-узловые ячейки, вращение с начальным теплым состоянием, упрочнение при деформации), тетраэдрические объемные ограничения для почти несжимаемости, корка тверже мякоти.
- Демпфирование краев, а также демпфирование деформации каждого куска относительно его жесткого движения (никогда его падения или вращения), сопротивление качению по столу и спящий режим, когда спокойно.
- Контакт куска с куском против точного SDF каждого в наилучшем кадре; спящие куски действуют как стены. Контакт с полом с трением Кулона.
- Инструмент "Рука": возьмите любой кусок и потяните (прикрепление к мягкой области, с достаточным радиусом, чтобы перетаскивать куски по широкому столу). Прокрутка или второй палец вращают при удержании. Щипок или прокрутка масштабируют; перетаскивание пустого стола вращает камеру.

РЕНДЕРИНГ (фотографический продукт)
- Процедурная студия: бледный бумажный свип, верхний софтбокс, полосовая подсветка сзади слева, холодная заполняющая карточка.
- Желе: передние грани преломляют сцену позади по толщине луча вида (ближайший-задний проход), с поглощением по закону Бугера-Ламберта на материал, молочным рассеянием в сердцевине, подсветкой сзади по тонким краям, сахарными бликами, отражениями студии Френеля и бликами GGX.
- Семена, пузырьки и нож рисуются перед желе, поэтому они видны сквозь него преломленными.
- Нормали следуют локальной деформации желе (кофактор усредненного по узлам градиента деформации).
- Мягкая ключевая тень, окрашенная тем, что свет пересек первым (розоватая сквозь мякоть, темная сквозь корку), плюс контактная окклюзия по карте высот сверху вниз. MSAA, нейтральное тональное отображение Khronos PBR.

ИНТЕРФЕЙС (редакционный, как исследование материала)
- Кикер "Material Studies / No. 010" и большой курсивный шрифт с засечками "Whole / Melon."
- Панель с инструментами (Рука / Нож), Сорт, Твердость

Build "Whole Melon": a single self-contained HTML file (all JS/CSS inline, no build step, no libraries) with a big whole watermelon made of glossy jelly that you can grab, wobble and cut into pieces with a knife. Render with raw WebGPU (WGSL); if WebGPU is missing, show a clean fallback card.

SHAPE AND MATERIAL
- The melon is a signed distance field: an ellipsoid (~32 cm long) lying on its side with a softly flattened belly.
- Layers by depth under the skin: dark-green skin with irregular darker stripes running pole to pole (seamless all the way around), a pale pith band, then translucent red flesh that brightens toward the rind. Add a pale yellow field spot on the belly, a stem scar at one end and a blossom end at the other.
- About 700 seeds in a three-lobed ring at roughly two thirds of the radius (teardrops, wide end pointing outward), plus tiny air bubbles. Mesh seeds only near cut faces; a seed the knife goes through is kept by one side and eased just under the new face, so it shows through a thin film of jelly.
- Three varieties: Crimson, Golden, Rosé.

PIECES AND CUTTING
- Every piece is the melon SDF clipped by the half-spaces of the cuts that made it, with the fresh edges rounded (smooth max). All pieces share the melon's original rest frame, so rind, pith, stripes and seeds stay exactly where they grew.
- Knife tool: the user draws a line across the melon. Read the stroke on top of what it crosses to get a vertical blade plane. For each piece the plane passes through, fit the piece's best rotation, carry the plane into rest space, and split the piece in two.
- Build the new pieces cooperatively (generators with a per-frame time budget) while a steel knife (brushed blade, wooden handle with rivets) lines up over the stroke and presses a groove into the jelly. Swap the new pieces in the moment the edge breaks through, carrying over the position and velocity of the flesh they came from, and let the blade wedge them apart as it sinks. Allow up to about 24 pieces and reject slivers.
- For each piece: a surface-nets render skin (evaluate only the blocks near the surface, one Newton step onto it), a hex lattice in the piece's principal frame with boundary nodes snapped onto the surface, and a fast barycentric embedding.

PHYSICS (XPBD on the CPU, fixed 60 Hz, 6 substeps)
- Cell-wise co-rotational shape matching (8-node cells, warm-started rotation, strain stiffening), tet volume constraints for near-incompressibility, rind firmer than flesh.
- Edge damping, plus damping of each piece's deformation relative to its rigid motion (never its fall or tumble), rolling resistance on the table, and sleep when calm.
- Piece-to-piece contact against each other's exact SDF in a best-fit frame; sleeping pieces act as walls. Floor contact with Coulomb friction.
- Hand tool: grab any piece and pull (soft patch attachment, with enough reach to drag pieces across a wide table). Scroll or a second finger twists while holding. Pinch or scroll zooms; dragging the empty table orbits the camera.

RENDERING (a photographic product shot)
- Procedural studio: pale paper sweep, overhead softbox, back-left strip light, cool fill card.
- Jelly: front faces refract the scene behind by the view-ray thickness (nearest-back-face pass), with Beer–Lambert absorption per material, milky scattering in the pith, a back-lit glow at thin edges, sugar glints, Fresnel studio reflections and GGX highlights.
- Seeds, bubbles and the knife are drawn before the jelly, so they are seen refracted through it.
- Normals follow the jelly's local deformation (cofactor of the node-averaged deformation gradient).
- A soft key shadow coloured by what the light crossed first (rosy through flesh, dark through rind), plus contact occlusion from a top-down height map. MSAA, Khronos PBR Neutral tone mapping.

UI (editorial, like a material study)
- Kicker "Material Studies / No. 010" and a big italic serif title "Whole / Melon."
- A panel with Tool (Hand / Knife), Variety, Firmness and Internal damping sliders, Nudge, Reset, ¼ speed, Show mesh and Pause.
- Live readouts: mass, volume %, kinetic energy, piece count. A collapsible "Inside the experiment" note.
- Responsive down to phones.

Quality bar: it should look and move like a real glossy jelly watermelon, and every cut face should look like a sliced jelly melon with seeds just under the surface. Test headlessly with screenshots: the whole melon, mid-cut, many pieces, a close-up of a cut face, and mobile.