Интерактивный 3D-арбуз из желе на WebGPU: его можно тянуть как мармелад и резать стальным ножом

Промпт

ПРОМПТ:
Создай "Melon Jelly Knife" — один автономный HTML-файл (melon-jelly-knife.html) с интерактивным физически симулируемым ломтиком арбуза из жевательного мармелада, который можно растягивать как желе И разрезать на части видимым стальным ножом с анимацией каждого разреза.

── Платформа ──
- Только WebGPU + WGSL, весь JS/CSS встроен, без внешних библиотек. ES-модуль в одном <script type="module">.
- Если отсутствует navigator.gpu / adapter, показывай элегантную редакционную карточку-заглушку ("This specimen needs WebGPU.") с конкретным объяснением — никогда не имитируй работу с помощью упрощённого рендерера. В этом состоянии отключай элементы управления.
- Восстанавливайся после потери устройства (пересобирай рендерер не более двух раз), выводи ошибки компиляции WGSL через getCompilationInfo.
- Фиксированный шаг симуляции 60 Гц с аккумулятором (не более 3 шагов за кадр), переключатель скорости ¼, пауза (Space), клавиши: N — толкнуть, R — сбросить, K — переключить нож, H — рука.

── Дизайн страницы (редакционное «исследование материала») ──
- Тёплый бумажный фон студии #E2DFDA; 3D-пол — бесконечная студийная циклорама, точно совпадающая по тону с этим цветом.
- В левом верхнем углу: небольшой капительный лейбл "MATERIAL STUDIES / NO. 009", огромный курсивный заголовок с засечками "Melon / Jelly." (вторая строка с отступом) и слоган из 3 строк с засечками.
- В правом верхнем углу статусная плашка "WEBGPU · LIVE / PAUSED / UNAVAILABLE".
- Правая панель (тонкие границы 1px, полупрозрачная бумага): Tool (сегментированные кнопки Hand | Knife с небольшими линейными иконками), образцы Variety (Crimson, Golden, Rosé — каждый меняет цвет мякоти, корки, семян, оттенка тени и акцента интерфейса), ползунки Firmness (trembling ↔ set) и Internal damping (lively ↔ syrupy), кнопки "Give it a nudge", Reset, Pause, флажки ¼ speed и Show mesh.
- В левом нижнем углу: подсказка об инструменте курсивным шрифтом с засечками, строка показателей в реальном времени (Mass ≈ g, Volume % of rest, Kinetic µJ, Pieces) и сноска "illustrative scale" (1 sim unit ≈ 3.5 cm, gummy 1.3 g/cm³).
- В правом нижнем углу сворачиваемый блок "Inside the experiment" с заметками, простыми словами объясняющими физику, рендеринг и способ разрезания.
- Пунктирная направляющая линия SVG во время рисования траектории ножа; небольшие всплывающие сообщения ("Missed — draw the blade across the slice.", "Too thin to cut there.", "That's plenty of pieces.").
- Камера помещает ломтик в свободную область между заголовком, панелью и показателями (сдвиг объектива), вращается при перетаскивании по пустому пространству, масштабируется колесом, двойной щелчок сбрасывает вид, мягко следует за ломтиком, если тот далеко отброшен.
- Адаптивность: при ширине менее ~860px компоновка выстраивается вертикально (заголовок, canvas ~58vh, подсказка, панель) с сенсорными областями размером не менее 44px; prefers-reduced-motion смягчает вступительную анимацию и демпфирование.

── Ломтик ──
- Толстый (T ≈ 0.58) ломтик арбуза в форме сектора с половиной угла ~32°, внутренним радиусом ~1.62, все углы в плоскости скруглены (ρ = 0.17), верхние и нижние грани с фаской (~0.13).
- Слои по глубине, начиная от корки: тёмно-зелёная кожура с нерегулярными более тёмными полосами, светлая кремово-зелёная прослойка, затем полупрозрачная красная мякоть; чёрные семечки-капли, расположенные дугами, и несколько крошечных пузырьков воздуха, взвешенных внутри.
- Рендеринг как полупрозрачной конфеты: преломление сцены позади в экранном пространстве, толщина в каждом пикселе по проходу глубины задних граней, поглощение по Beer–Lambert для каждого преломлённого семпла (ограничено толщиной сзади, чтобы вокруг семян не появлялись ореолы), размытое изображение с джиттером, рассеивание по типу подповерхностного и свечение в сторону ключевого источника света, блики Fresnel + GGX, мягкое студийное окружение (процедурные софтбоксы).
- Пол: мягкая тень PCSS-lite от ключевого источника света сзади-слева-сверху (тень окрашена в цвет мякоти), контактное AO по карте высот сверху вниз. MSAA ×4, HDR, тональное отображение PBR-Neutral, sRGB, дизеринг.

── Физика (ощущается как настоящий мармелад) ──
- Мягкое тело из тетраэдров (триангуляция Делоне для решётки с джиттером внутри формы), XPBD с небольшими шагами (~10 подшагов, по 1 итерации):
• сопоставление формы для каждого тетраэдра с совместным вращением (взвешенная массой ковариация, извлечение вращения кватернионом Мюллера, равномерная доля жёсткости) — без инверсий и паразитного крутящего момента;
• ограничения объёма для каждого тетраэдра (почти несжимаемые);
• демпфирование относительной скорости рёбер, управляемое ползунком damping; firmness преобразуется в податливость формы по логарифмической шкале;
• контакт с полом со статическим/кинетическим трением, лёгкое сопротивление воздуха, демпфирование при покое, ограничение скорости, защита от NaN с мягким сбросом.
- Инструмент Hand: захват в любой точке (лучевой выбор на поверхности со скиннингом, снисходительный запасной вариант в экранном пространстве), мягкое прикрепление участка (радиус ~0.4), следующего за указателем на плоскости, обращённой к камере, ограничение досягаемости, запрет продавливания в пол; колесо мыши или второй палец закручивает захваченный участок. Nudge = игривый импульс. Reset снова роняет весь ломтик.
- Сетка рендера получает скиннинг по тетраэдрам через барицентрическое встраивание; нормали пересчитываются каждый кадр.

── Разрезание на части ──
- Мир представляет собой список частей. Каждая часть — выпуклый многоугольник I в исходной плоскости ломтика; его контур расширен диском радиусом ρ (скруглённые углы), выдавлен на толщину ломтика с теми же фасками, слоями корки, семенами и пузырьками (семена/пузырьки сохраняются только там, где помещаются внутри).
- Разрез преобразует мировую плоскость в исходную систему координат каждой пересечённой части (наилучшая жёсткая система координат деформированной части), пересекает её со средней плоскостью → получается прямая; обрезает I до двух половин со смещением на ±ρ, чтобы оба пересобранных контура точно сходились в месте разреза; отбрасывает тонкие фрагменты ("too thin").
- Все части объединяются в ОДНУ симуляцию (идентификатор компонента для каждой частицы) и ОДНУ сетку рендера; каждая часть остаётся отдельным мягким телом, которое можно захватывать, растягивать и снова разрезать; части сталкиваются друг с другом (взаимодействия частица–частица, предварительно отсекаемые по AABB, сдвиг на несколько мм за проход, чтобы свежие поверхности плавно расходились, а не резко разлетались). Максимум 14 частей. Готовые сетки кэшируются для каждой части, поэтому Reset выполняется мгновенно.
- Перенос состояния при каждой пересборке: новые исходные частицы встраиваются в старые тетраэдры и получают интерполированные позиции и скорости.

── Видимый нож (главная звезда этой версии) ──
- Небольшая овощечистка в стиле nakiri, процедурно смоделированная: прямоугольное лезвие (длина ~1.72, высота ~0.63 — выше ломтика), прямая режущая кромка с лёгким подъёмом и скруглённым носиком спереди, тонкая заточенная фаска вдоль кромки, плоская заточка до обуха ~0.03, чёткие складки (дублированные вершины), полированная стальная больстерная часть, овальная рукоять из ореха, слегка расширяющаяся, с тремя стальными заклёпками и плоскими торцевыми крышками. Локальная система координат: +x направлена к острию, кромка находится на y=0.
- Материалы в шейдере сцены: шлифованная сталь с градиентом предметной съёмки (тёмная плита отражается внизу, яркая полоса сверху), полосы софтбоксов, более светлая атласная фаска, зеркальная больстерная часть; орех с прямой текстурой волокон, атласным масляным блеском и заклёпками. Жёстко позиционируется на CPU каждый кадр.
- Нож отрисовывается на проходе сцены (за поверхностью желе), поэтому часть, погружённая в желе, видна сквозь него с преломлением; он отбрасывает тень, но не учитывается в карте высот AO.
- Поведение:
• Наведение (инструмент Knife): нож парит примерно в 0.42 над ломтиком, а его кромка находится точно под курсором; лезвие обращено боком к камере и слегка наклонено к зрителю; при выборе инструмента опускается сверху; в режиме Hand скрыт.
• Во время рисования: выравнивается вдоль траектории, кромка проходит чуть выше желе, рукоять всегда слева (каноническое направление относительно правой стороны камеры).
• При отпускании: траектория, прочитанная на поверхности, над которой она была проведена, задаёт ВЕРТИКАЛЬНУЮ плоскость лезвия; разрез планируется, а новые части + новое мягкое тело предварительно строятся немедленно (поэтому последующая замена занимает всего ~10 мс и во время анимации не возникает рывка).
• Хореография (~1.1 с, учитывает ¼ скорости и паузу): выравнивание (0.16 с) → нажатие: кромка погружается примерно на ~0.13 ниже верха, а физический коллайдер вдавливает желе, формируя под ним округлую борозду — оно сминается, прежде чем поддаться (до 0.42 с) → прорыв: новый мир подменяется, лезвие продолжает движение к доске, а клиновидный коллайдер плавно разводит две новые поверхности (ограничение в несколько мм за подшаг, зазор увеличивается с глубиной) и удерживает края разреза внизу на глубине прорыва → короткая пауза → подъём обратно в положение наведения, освобождающий края, чтобы они пружинисто вернулись с дрожанием.
• Промахи показывают всплывающее сообщение, и нож остаётся на месте; новые траектории игнорируются, пока выполняется разрез; Reset отменяет его.

── Планка качества ──
- Плавные 60 fps на GPU ноутбука среднего класса; никаких выделений памяти в цикле кадра, кроме выполнения разрезов.
- Детерминированный тестовый хук в window (например, __melon с sim, camera, pick, planCut, startCut, advance(seconds), статистикой по каждой части), чтобы анимацию можно было пошагово воспроизводить и делать скриншоты.
- Отточенная, спокойная, музейная типографика; всё должно быть читаемо на телефоне и настольном компьютере.

Create "Melon Jelly Knife" — a single self-contained HTML file (melon-jelly-knife.html) with an interactive, physically simulated gummy watermelon slice that you can pull like jelly AND cut into pieces with a visible steel knife that animates every cut.

── Platform ──
- WebGPU + WGSL only, all JS/CSS inline, no external libraries. ES module in one <script type="module">.
- If navigator.gpu / adapter is missing, show an elegant editorial fallback card ("This specimen needs WebGPU.") with a specific explanation — never fake it with a lesser renderer. Disable the controls in that state.
- Recover from device loss (rebuild the renderer up to twice), surface WGSL compile errors via getCompilationInfo.
- Fixed 60 Hz simulation step with an accumulator (max 3 steps/frame), ¼-speed toggle, pause (Space), keyboard: N nudge, R reset, K toggle knife, H hand.

── Page design (editorial "material study") ──
- Warm paper studio backdrop #E2DFDA; the 3D floor is an infinite studio sweep that tones to exactly this colour.
- Top-left masthead: small caps label "MATERIAL STUDIES / NO. 009", huge italic serif title "Melon / Jelly." (second line indented), and a 3-line serif tagline.
- Top-right status pill "WEBGPU · LIVE / PAUSED / UNAVAILABLE".
- Right panel (thin 1px borders, translucent paper): Tool (Hand | Knife segmented buttons with small line icons), Variety swatches (Crimson, Golden, Rosé — each recolours flesh, rind, seeds, shadow tint and the UI accent), sliders Firmness (trembling ↔ set) and Internal damping (lively ↔ syrupy), buttons "Give it a nudge", Reset, Pause, checkboxes ¼ speed and Show mesh.
- Bottom-left: tool hint in italic serif, live readouts row (Mass ≈ g, Volume % of rest, Kinetic µJ, Pieces) with an "illustrative scale" footnote (1 sim unit ≈ 3.5 cm, gummy 1.3 g/cm³).
- Bottom-right collapsible "Inside the experiment" notes explaining the physics, rendering and the cutting method in plain prose.
- A dashed SVG guide line while drawing a knife stroke; small toast messages ("Missed — draw the blade across the slice.", "Too thin to cut there.", "That's plenty of pieces.").
- The camera frames the slice inside the free area between masthead, panel and readouts (lens shift), orbits on empty-space drag, zooms on wheel, double-click resets view, gently follows the slice if it is thrown far.
- Responsive: under ~860px the layout stacks (masthead, canvas ~58vh, hint, panel) with 44px+ touch targets; prefers-reduced-motion softens the intro and damping.

── The slice ──
- A thick (T ≈ 0.58) wedge of watermelon: sector with ~32° half-angle, inner radius ~1.62, all corners rounded in plane (ρ = 0.17) and top/bottom edges bevelled (~0.13).
- Layers by depth from the rind: dark green skin with irregular darker stripes, a pale cream-green band, then translucent red flesh; black teardrop seeds arranged in arcs and a few tiny air bubbles suspended inside.
- Rendered as translucent candy: screen-space refraction of the scene behind, per-pixel thickness from a back-face depth pass, Beer–Lambert absorption per refracted tap (capped by back thickness so seeds don't halo), jittered blur, subsurface-like scatter and glow toward the key light, Fresnel + GGX highlights, soft studio environment (procedural softboxes).
- Floor: PCSS-lite soft shadow from a key light behind-left-above (shadow tinted by the flesh colour), contact AO from a top-down height map. MSAA ×4, HDR, PBR-Neutral tone mapping, sRGB, dither.

── Physics (feels like real gummy candy) ──
- Tetrahedral soft body (Delaunay of a jittered lattice inside the shape), XPBD with small steps (~10 substeps, 1 iteration each):
• co-rotational per-tet shape matching (mass-weighted covariance, Müller quaternion rotation extraction, uniform stiffness fraction) — no inversions, no ghost torque;
• per-tet volume constraints (near-incompressible);
• edge relative-velocity damping controlled by the damping slider; firmness maps to shape compliance on a log scale;
• floor contact with static/kinetic friction, light air drag, settle-damping when nearly at rest, speed cap, NaN guard with gentle reset.
- Hand tool: grab anywhere (ray pick on the skinned surface, forgiving screen-space fallback), soft patch attachment (radius ~0.4) that follows the pointer on a camera-facing plane, reach limit, never pushed into the floor; wheel or a second finger twists the held patch. Nudge = a playful impulse. Reset drops the whole slice again.
- Render mesh is skinned to the tets by barycentric embedding; normals recomputed each frame.

── Cutting into pieces ──
- The world is a list of pieces. Each piece is a convex polygon I in the slice's rest plane; its outline is I dilated by a disk of radius ρ (rounded corners), extruded to the slice thickness with the same bevels, rind layers, seeds and bubbles (seeds/bubbles kept only where they fit inside).
- A cut maps a world plane into each crossed piece's rest frame (best-fit rigid frame of the deformed piece), intersects it with the mid-plane → a straight line; clip I into two halves offset by ±ρ so both rebuilt outlines meet exactly at the cut; reject slivers ("too thin").
- All pieces are concatenated into ONE simulation (component id per particle) and ONE render mesh; each piece is its own soft body you can grab, stretch and cut again; pieces collide with each other (AABB-pruned particle–particle pushes, a few mm per pass so fresh faces ease apart instead of popping). Max 14 pieces. Built meshes are cached per piece so Reset is instant.
- State transfer on every rebuild: new rest particles are embedded in the old tets and take over interpolated positions and velocities.

── The visible knife (the star of this version) ──
- A small nakiri-style vegetable knife modelled procedurally: rectangular blade (length ~1.72, height ~0.63 — taller than the slice), straight edge with a slight lift and rounded nose at the front, thin ground bevel along the edge, flat grind to a ~0.03 spine, sharp creases (duplicated vertices), polished steel bolster, oval walnut handle that swells slightly with three steel rivets and flat end caps. Local frame: +x toward the tip, edge on y=0.
- Materials in the scene shader: brushed steel with a product-shot gradient (dark board reflected low, bright sweep high), softbox streaks, satin lighter bevel, mirror bolster; walnut with straight grain, satin oil sheen, rivets. Posed rigidly on the CPU each frame.
- The knife is drawn in the scene pass (behind the jelly surface), so the part buried in the jelly is seen refracted through it; it casts a shadow but stays out of the AO height map.
- Behaviour:
• Hover (knife tool): the knife floats ~0.42 above the slice with its edge exactly under the cursor, blade side-on to the camera, slightly rolled toward the viewer; it drops in from above when the tool is selected; hidden in hand mode.
• While drawing: it lines up along the stroke, edge just above the jelly, handle always on the left (canonical direction relative to camera right).
• On release: the stroke read on the surface it was drawn over defines a VERTICAL blade plane; the split is planned and the new pieces + new soft body are pre-built immediately (so the swap later costs only ~10 ms and there is no hitch mid-animation).
• Choreography (~1.1 s, respects ¼ speed and pause): align (0.16 s) → press: the edge sinks ~0.13 below the top and a physical collider pushes the jelly into a rounded groove under it — it squashes before it gives (to 0.42 s) → break-through: the new world is swapped in, the blade continues to the board while a wedge collider eases the two new faces apart (limited to a few mm per substep, gap growing with depth) and holds the cut lips down at the break-through depth → short hold → lift back to hover, releasing the lips so they spring back with a jiggle.
• Misses show a toast and the knife stays put; new strokes are ignored while a cut is animating; Reset cancels it.

── Quality bar ──
- Smooth 60 fps on a mid-range laptop GPU; no allocations in the frame loop except on cuts.
- Deterministic test hook on window (e.g. __melon with sim, camera, pick, planCut, startCut, advance(seconds), per-piece stats) so the animation can be stepped and screenshotted.
- Polished, calm, museum-like typography; everything readable on phone and desktop.