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

Промпт

Создайте «Squid Jelly» — красивую, интерактивную 3D-мармеладную кальмарку, которую пользователи могут хватать, растягивать и сжимать прямо в своем браузере. Предоставьте полный автономный HTML-файл, использующий настоящий WebGPU.

АРТ-ДИРЕКЦИЯ

Сделайте кальмарку похожей на премиальную полупрозрачную мармеладную конфету:
- Вытянутая, сужающаяся мантия с закругленным кончиком.
- Два широких, тонких, ромбовидных боковых плавника.
- Восемь более коротких изогнутых щупалец и два более длинных питательных щупальца с закругленными кончиками в форме булавы.
- Маленькие присоски и милая, сдержанная мордочка.

Используйте теплый кремовый фон, мягкое студийное освещение и едва заметную тень на земле. Держите кальмарку большой и по центру, с элегантной, не загроможденной композицией.

ГЕОМЕТРИЯ

Сгенерируйте всю геометрию процедурно. Никаких внешних моделей или файлов изображений.

Плавно соедините щупальца и плавники с телом. Их основания должны оставаться погруженными и прикрепленными при сильных растяжениях, без видимых зазоров или плавающих частей.

Присоски и глаза должны следовать за деформирующейся поверхностью. Придайте плавникам тонкий, гибкий профиль, а длинным щупальцам — тонкие стержни с более толстыми кончиками.

МАТЕРИАЛ МАРМЕЛАДА

Создайте убедительный глянцевый, полупрозрачный мармелад:
- Поглощение цвета в зависимости от толщины.
- Преломление и мягкое внутреннее рассеяние света.
- Гладкие студийные отражения и деликатные краевые блики.
- Несколько крошечных пузырьков, встроенных внутрь материала.
- Более насыщенный цвет в толстых участках и большая полупрозрачность вдоль тонких плавников и кончиков щупалец.

Избегайте непрозрачного пластика, выцветших цветов, пересвеченных бликов, видимых швов сетки и мерцающей прозрачности.

ФИЗИКА МЯГКОГО ТЕЛА

Используйте стабильную симуляцию массово-пружинной или позиционно-основанной динамики с приблизительным сохранением объема.

Мантия должна ощущаться мягкой, но весомой. Щупальца должны изгибаться независимо, в то время как длинные щупальца и плавники должны быть более гибкими.

Позвольте пользователям хватать тело, плавники или щупальца в точке клика. Растяжение должно сначала деформировать близлежащую геометрию, а остальное должно следовать упруго. Не имитируйте мягкость, масштабируя или вращая всю модель.

При отпускании кальмарка должна покачиваться, восстанавливать свою форму и постепенно успокаиваться. Включите гравитацию, столкновения с полом, трение и демпфирование. Предотвратите прохождение придатков сквозь пол.

Используйте фиксированные шаги симуляции, ограниченное растяжение и надежные ограничения крепления, чтобы повторяющиеся сильные растяжения не могли разорвать модель или дестабилизировать симуляцию.

ВЗАИМОДЕЙСТВИЕ

- Щелкните левой кнопкой мыши или коснитесь кальмарки, чтобы схватить и растянуть ее.
- Перетаскивайте правой кнопкой мыши или перетаскивайте пустое пространство, чтобы плавно вращать камеру.
- Поддержка ограниченного масштабирования и сенсорного управления на мобильных устройствах.
- Держите жесты камеры отдельно от перетаскивания объекта.

Добавить:
- Дать ей толчок
- Сбросить
- Сбросить вид
- Пауза
- Ползунок упругости
- Ползунок внутреннего демпфирования
- Переключатель скорости ¼
- Переключатель отображения сетки

Предоставьте три цветовые палитры материала: Коралловая, Лагуна и Виноградная. Переключение цветов не должно сбрасывать симуляцию.

ИНТЕРФЕЙС

Используйте минималистичный редакционный макет:
- Вверху слева: небольшая надпись «ИССЛЕДОВАНИЯ МАТЕРИАЛОВ».
- Крупный курсивный заголовок с засечками: «Squid Jelly».
- Подпись: «Немного чернил. Немного покачивания. Очень сладкое морское существо».
- Вверху справа: индикатор состояния WebGPU.
- Справа: компактная панель управления «ОБРАЗЕЦ».
- Внизу слева: короткая подсказка по взаимодействию.

Используйте чистые элементы управления без засечек, тонкие границы и много свободного пространства. Адаптируйте макет для мобильных устройств, не закрывая кальмарку.

КАЧЕСТВО И ПРОИЗВОДИТЕЛЬНОСТЬ

Используйте настоящую 3D-геометрию и нативное рендеринг WebGPU с шейдерами WGSL, а не 2D-имитацию или предварительно записанную анимацию.

Повторно используйте сетки и буферы. Не перестраивайте геометрию во время перетаскивания. Приоритет отдавайте стабильным взаимодействиям и плавной производительности.

Тестируйте сильные растяжения, повторяющиеся отпускания, прикрепление придатков, столкновения с полом, смену палитр, паузу, сброс и управление камерой.

Предоставьте четкое сообщение об ошибке, если WebGPU недоступен.

Предоставьте полный рабочий HTML, а не макет или фрагмент кода. Результат должен ощущаться как маленькая живая мармеладная игрушка: глянцевая, весомая, гибкая и неотразимо приятная для растягивания.

Create “Squid Jelly” — a beautiful, interactive 3D gummy squid that users can grab, stretch, and squish directly in their browser. Deliver a complete standalone HTML file using genuine WebGPU.

ART DIRECTION

Make the squid look like a premium translucent gummy candy:
- An elongated, tapered mantle with a rounded tip.
- Two broad, thin, diamond-shaped side fins.
- Eight shorter curled arms and two longer feeding tentacles with rounded club-shaped tips.
- Small suction cups and a cute, understated face.

Use a warm off-white background, soft studio lighting, and a subtle ground shadow. Keep the squid large and centered, with an elegant, uncluttered composition.

GEOMETRY

Generate all geometry procedurally. No external models or image files.

Connect the arms, tentacles, and fins smoothly to the body. Their roots must remain embedded and attached during strong pulls, with no visible gaps or floating parts.

Suction cups and eyes must follow the deforming surface. Give the fins a thin, flexible profile and the longer tentacles slender shafts with thicker tips.

JELLY MATERIAL

Create convincing glossy, translucent jelly:
- Thickness-dependent color absorption.
- Refraction and soft internal light scattering.
- Smooth studio reflections and delicate rim highlights.
- A few tiny bubbles embedded inside the material.
- Richer color in thick areas and greater translucency along thin fins and tentacle tips.

Avoid opaque plastic, washed-out colors, blown-out highlights, visible mesh seams, and flickering transparency.

SOFT-BODY PHYSICS

Use a stable mass-spring or position-based dynamics simulation with approximate volume preservation.

The mantle should feel soft but substantial. Arms should bend independently, while long tentacles and fins should be more flexible.

Let users grab the body, fins, or tentacles at the clicked location. Pulling must deform the nearby geometry first, with the rest following elastically. Do not fake softness by scaling or rotating the entire model.

On release, the squid should wobble, recover its shape, and gradually settle. Include gravity, floor collisions, friction, and damping. Prevent appendages from passing through the floor.

Use fixed simulation steps, bounded stretching, and robust attachment constraints so repeated strong pulls cannot tear the model apart or destabilize the simulation.

INTERACTION

- Left-click or touch the squid to grab and stretch it.
- Right-drag or drag empty space to gently orbit the camera.
- Support limited zoom and mobile touch controls.
- Keep camera gestures separate from object dragging.

Add:
- Give it a nudge
- Reset
- Reset view
- Pause
- Firmness slider
- Internal damping slider
- ¼ speed toggle
- Show mesh toggle

Provide three material palettes: Coral, Lagoon, and Grape. Switching colors must not reset the simulation.

INTERFACE

Use a minimal editorial layout:
- Top left: small “MATERIAL STUDIES” label.
- Large italic serif heading: “Squid Jelly.”
- Caption: “A little ink. A little wiggle. A very sweet sea creature.”
- Top right: WebGPU status indicator.
- Right side: compact “THE SPECIMEN” control panel.
- Bottom left: a short interaction hint.

Use clean sans-serif controls, thin borders, and generous whitespace. Adapt the layout for mobile without covering the squid.

QUALITY AND PERFORMANCE

Use real 3D geometry and native WebGPU rendering with WGSL shaders, not a 2D imitation or prerecorded animation.

Reuse meshes and buffers. Do not reconstruct geometry during dragging. Prioritize stable interactions and smooth performance.

Test strong pulls, repeated releases, appendage attachments, floor collisions, palette changes, pause, reset, and camera controls.

Provide a clear fallback message if WebGPU is unavailable.

Deliver the full working HTML, not a mockup or code fragment. The result should feel like a little living gummy toy: glossy, weighty, flexible, and irresistibly satisfying to stretch.