ゼリーキャンディのシミュレーション比較

プロンプト

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.

日本語訳

「Melon Jelly」を作成してください — 本物の WebGPU と WGSL シェーダーを使い、ブラウザ上で直接動作する、洗練されたインタラクティブな 3D スイカゼリーのスライスです。
JavaScript と CSS を埋め込んだ、単一の自己完結型 HTML ファイルとして納品してください。これは実際に動作するインタラクティブな 3D シミュレーションでなければならず、静的レンダー、動画、2D の模倣ではいけません。
スイカ
厚みがあり、丸みを帯びた三角形のスイカのくさび形を作成し、以下を備えてください：
半透明のルビーレッドのゼリー状の果肉。
果肉と皮の間にある、淡く、わずかに半透明な層。
不規則な濃緑の縞模様が入った、光沢のある緑の外皮。

両方の露出面に埋め込まれた、個別にモデリングされた黒い種。
やわらかく丸められた角と、魅力的で十分な厚み。
スタジオで撮影した高級グミキャンディのように見せてください。ジューシーでやわらかく、ほとんど食べられるように感じられるべきです。ハイライトを白飛びさせずに、色は濃厚に保ってください。
ソフトボディ物理
四面体メッシュに XPBD の弾性拘束と体積保存拘束を組み合わせるなど、ボリューメトリックなソフトボディシミュレーションを使用してください。
ユーザーは次のことができる必要があります：
先端、角、果肉、または皮をつかむ。
スライスを伸ばす、曲げる、持ち上げる、そっとねじる。

放すと、ぐらついてから徐々に落ち着く様子を確認できます。
スライスは、単に剛体として移動したり拡大縮小したりするのではなく、局所的に目に見えて変形しなければなりません。皮は果肉より少し硬くしつつ、スライス全体は柔軟に保ってください。
伸ばしている間も体積を合理的に保ってください。要素の反転、暴走的な動き、恒久的なつぶれを防いでください。安定性のために、固定のシミュレーションタイムステップと上限付きのサブステップを使用してください。
放した後、動きは自然に減衰するべきです — 瞬時に元に戻ったり、終わりのない振動が続いたりしてはいけません。
種は変形する果肉に付着させたままにしてください。独立して浮いたり、空間に固定されたままになったりするのではなく、表面とともに移動し回転しなければなりません。
接地、穏やかな摩擦、やわらかな跳ね返りを含めてください。床への目に見えるめり込みは避けてください。
レンダリング
ネイティブ WebGPU と WGSL シェーダーを使用してください。
以下を含めてください：
厚みに依存した光の吸収。
ゼリーを通した屈折。

フレネル反射と光沢のあるハイライト。
薄いエッジを通したやわらかな透過光。
微細な内部のディテールと、いくつかの小さな気泡。

スライスの下のやわらかなコンタクトシャドウ。
明るくニュートラルなスタジオ背景。
果肉、淡い皮、緑の表皮は、それぞれ異なるマテリアルの応答を持つべきです。すべてを透明なガラスや不透明なプラスチックのように見せてはいけません。
スライスは大きく、観察しやすい状態に保ち、果肉、種、厚みが見えるスリークォーターのカメラアングルにしてください。
インターフェース
余白を十分に取ったミニマルなエディトリアルレイアウトを使用し、細い罫線、抑制の効いたコントロール、装飾的な UI グラデーションは使わないでください。
左上：
「MATERIAL STUDIES / NO. 009」
2 行に分割された、大きなイタリック体のセリフ見出し：「Melon」と「Jelly.」
小さなキャプション：
「A slice of summer.」
「A little wobble.」
「Too soft to share.」
右上：
レンダラーが動作しているときに「WEBGPU · LIVE」を表示する小さなステータスインジケーター。

右側のパネル：
「THE SPECIMEN」
スイカをイメージした、調和の取れた 3 つのカラープリセット。
現在値を表示する硬さスライダー。
現在値を表示する内部減衰スライダー。
「Give it a nudge」と「Reset」ボタン。
「¼ speed」と「Show mesh」のチェックボックス。

一時停止／再開ボタン。
左下：
スライスをつかんで伸ばせることを説明する短いヒント。
シミュレーションから得られる、質量、相対体積、運動エネルギーのライブ表示。該当する箇所では、例示的な単位や概算値であることを明確に記載してください。
右下：

物理学とレンダリングを簡潔に説明する、折りたたみ可能な「Inside the experiment」セクション。
挙動とパフォーマンス
マウスとタッチの両方の入力をサポートしてください。ポインターがオブジェクトの外に出てもドラッグが確実に続くよう、ポインターキャプチャを使用してください。
デスクトップとモバイルで、コントロールがスライスを覆わないレイアウトにしてください。
バッファを再利用し、ドラッグ中にジオメトリの再構築やシェーダーのコンパイルを避けてください。インタラクションをスムーズで応答性の高い状態に保ってください。
動きを減らす設定を尊重してください。WebGPU が利用できない場合は、偽のレンダラーに黙って差し替えるのではなく、明確な説明を表示してください。
検証
複数の位置からのドラッグ、強い伸張、繰り返しの放し、地面との衝突、すべてのスライダー、プリセット、一時停止、リセット、スローモーションをテストしてください。
モデルが安定した静止形状に戻ること、種が付着したままであること、メッシュが壊れていないこと、レンダリングエラーがないことを確認してください。
ゼリーの応答とライティングの品質を最優先してください。結果は、人が何度もつかんで遊びたくなるものであるべきです。

出典

原作者

vib3coded

公開日

2026-09-26（由推文 ID 反解）

原典

元の投稿を見る ↗

収録元

zhuyansen/awesome-opus-5.5-video · 2103741107225907467 · ライセンス未表明