# Cloth Drop on a Chrome Sphere

- Author: @EvoLinkAi
- Card: Creator prompt
- Theme: Simulations
- Stack: Not rebuilt
- Interaction: Drag
- Licence: Credited link (Shared publicly by the author; full text with credit, removed on request)
- Verified: not yet
- Original post: https://x.com/EvoLinkAi/status/2108912941328154844

## Original prompt

```text
Build a polished, interactive 3D cloth simulation for a visual comparison between AI coding models.

The central visual: a square piece of fabric drops onto a stationary chrome sphere. We repeat the exact same drop with progressively denser cloth meshes, showing how the deformation changes.

Create a working browser application using Three.js and TypeScript/JavaScript. Implement and run it in the current workspace. Complete the project autonomously, test it, and fix problems before finishing.

VISUAL DIRECTION

Aim for a premium, oddly satisfying 3D animation: one large, clearly visible subject, beautiful fabric, convincing contact, and restrained studio lighting.

Use a 16:9 composition. The finished recording will be stacked with two other recordings inside a vertical 9:16 video, so everything must remain legible when reduced to one-third of a phone screen.

Scene:
- A stationary, polished chrome sphere above a matte dark charcoal floor.
- A square of rich coral-red satin fabric suspended horizontally above it.
- Fabric side length approximately 2.6 times the sphere diameter, so the edges can drape around the sphere.
- A large soft key light, gentle fill, and a subtle rim light.
- Broad studio reflections that make the chrome readable.
- Soft contact shadows and visible folds.
- A restrained dark background, with strong separation between fabric, sphere, and floor.

The fabric should look like woven satin, not rubber, liquid, foil, or plastic. Use subtle texture and restrained sheen. Render both sides correctly.

Choose a fixed, slightly elevated three-quarter camera angle that reveals the sphere’s top and the hanging fabric edges. Keep the subject large while leaving enough room for the initial drop.

No camera orbit during the automatic showcase. No decorative dashboard, branding, model names, introductory splash screen, or unnecessary text.

REAL CLOTH SIMULATION

Use a real-time physical simulation. A position-based or extended position-based dynamics solver is appropriate, but choose an implementation you can make reliable and performant.

The motion must emerge from gravity, constraints, and collision handling.

Do not:
- Replace the cloth with a prerecorded video.
- Use a shader wave or a canned vertex animation as a substitute for simulation.
- Animate vertices toward a precomputed draped shape.
- Display arbitrary face counts unrelated to the mesh.
- Swap in a high-resolution cloth while displaying a low-resolution label.

Implement:
- Gravity.
- Structural constraints that resist stretching.
- Shear resistance.
- Bending resistance.
- Damping.
- Stable sphere and floor collisions.
- A small collision margin that prevents visible intersections without making the cloth float.
- Consistent simulation timing independent of rendering frame rate.

The cloth is completely free when released: do not pin its corners.

Use the same physical dimensions and target material properties at every mesh density. Account for mesh spacing when setting masses and constraints so changing the mesh density does not arbitrarily change total mass or fabric stiffness.

Use the same deterministic initial setup at every level. A small fixed offset or rotation relative to the sphere is acceptable to create attractive asymmetric folds, but keep it identical across all runs.

Prioritize preventing the cloth from cutting through the sphere. At coarse mesh resolutions, checking only vertices is insufficient: an edge or triangle can intersect the sphere while its vertices remain outside it. Handle this as well as practical, and do not hide failures with camera placement.

Allow coarse meshes to look coarse. Higher resolutions should reveal more detailed deformation naturally, without fabricated “improvement.”

MESH RESOLUTIONS AND HONEST LABELING

Use these square simulation grids:

2 × 2 cells = 4 quads
4 × 4 cells = 16 quads
8 × 8 cells = 64 quads
16 × 16 cells = 256 quads
32 × 32 cells = 1,024 quads
64 × 64 cells = 4,096 quads

Each quad is rendered as two triangles.

The large recording label should read:
“4 FACES”
“16 FACES”
“64 FACES”
“256 FACES”
“1,024 FACES”
“4,096 FACES”

Include a small, consistent subtitle:
“quad grid”

In the expanded controls, show the exact quad, triangle, and vertex counts. Derive them from the active mesh.

Do not add hidden subdivision that misrepresents the displayed resolution. Shading may be smooth, but the cloth’s visible geometry must match the selected grid.

AUTOMATIC SHOWCASE — EXACTLY 24 SECONDS

Add a “Showcase” button that starts a deterministic sequence.

Six stages, exactly four seconds per stage:

1. 4 faces
2. 16 faces
3. 64 faces
4. 256 faces
5. 1,024 faces
6. 4,096 faces

For each stage:
- First 0.25 seconds: reset the cloth to the identical suspended starting position and display the updated count.
- Next 3.75 seconds: release it and simulate the fall and draping.
- Immediately reset into the next stage without a loading screen or a long transition.

Pre-create or prepare the required resources so switching resolutions does not cause a noticeable pause.

Keep camera, lighting, fabric color, object positions, and simulation time scale identical throughout.

Do not slow down the simulation at higher resolutions to preserve frame rate. Optimize the solver instead.

At the end, retain the last scene and allow interaction. Provide a one-click replay.

INTERACTION

Outside the automatic showcase, support:
- Selecting any mesh resolution.
- Dropping/resetting the cloth.
- Pausing/resuming.
- Toggling a subtle wireframe overlay.
- Grabbing and dragging the fabric with the mouse or touch.
- Releasing the fabric so normal simulation resumes.

Dragging should temporarily constrain the grabbed region, not teleport the whole cloth. Limit dragging to keep the simulation stable.

Switching resolution must cleanly replace the cloth and reset its state.

Provide a recording mode that hides controls and the cursor when inactive, leaving only the scene and the compact face-count label. The label must stay in exactly the same position for all stages.

Make the main scene responsive, with a reliable 16:9 capture layout. Avoid scrollbars and clipped content.

ENGINEERING AND PERFORMANCE

Use the tools and dependencies available in the workspace. Procedural materials and environment lighting are welcome; avoid dependence on fragile external asset URLs.

Aim for smooth desktop playback at 60 fps, with a minimum target of 30 fps at the highest resolution. Measure performance in the actual browser if available. Do not claim a frame rate you have not measured.

Use fixed simulation time steps, appropriate substeps, and efficient data structures. Avoid unnecessary per-frame allocation.

Handle:
- Repeated showcase starts.
- Reset during a simulation.
- Switching resolution during interaction.
- Releasing the pointer outside the canvas.
- Window resizing.
- Cleaning up replaced geometries and event handlers.

If performance becomes a problem, optimize before reducing visual quality. Do not silently reduce the requested mesh resolution.

PRIORITIES

1. Working cloth physics and convincing contact with the sphere.
2. Beautiful, readable fabric and lighting.
3. Reliable synchronized 24-second showcase.
4. Smooth performance.
5. Minimal, functional controls.

Keep the scope focused. Do not spend time building unrelated UI or extra scenes.

VALIDATION

Before finishing:
- Run the application.
- Verify every mesh count.
- Run the complete showcase.
- Inspect low-resolution collisions as well as high-resolution folds.
- Test reset, replay, wireframe, and dragging.
- Check the 16:9 recording composition.
- Inspect browser errors if browser tools are available.
- Fix the problems you observe.

If you cannot visually inspect the browser, state that clearly rather than claiming visual verification.

Finish with a short summary:
- How to launch the app.
- How to start the showcase and recording mode.
- What you tested.
- Any remaining limitations.

Deliver the working application, not just an implementation plan.

Inspired by @noclipepe

Use the Haiku 5.5 API in your agent：

https://evolink.ai/claude-haiku-5-5?utm_source=twitter&utm_medium=thread&utm_campaign=fabric-test
```

Not rebuilt by 3dmotion yet. Credit stays with @EvoLinkAi.

Prompt by @EvoLinkAi (https://x.com/EvoLinkAi/status/2108912941328154844) via 3dmotion.io/e/cloth-drop-on-a-chrome-sphere