Create an interactive 3D scene called “Pineapple Jelly” - a thick, translucent gummy pineapple ring that users can grab, stretch, bend, and release. Everything must run directly in the browser in one standalone HTML file using genuine WebGPU and WGSL shaders.
The main priorities are convincing soft-body behavior, beautiful light refraction, and satisfying interaction.
MODEL
* A round pineapple slice with a genuine hole through its center.
* Thick, juicy flesh, a slightly scalloped outer edge, and softly rounded corners.
* Both cut faces must be equally detailed. The ring can be flipped and viewed from every angle.
* Golden translucent flesh with delicate radial fibers, small bubbles, and elongated pale juice cells embedded inside.
* No skin, leaves, or seeds. It should look like a pineapple ring made of gummy candy, not a doughnut.
MATERIAL AND LIGHTING
* Rich honey-yellow coloring, wet gloss, and soft subsurface-style light scattering.
* Refraction, thickness-dependent transparency, controlled highlights, and Fresnel reflections around the edges.
* Stretched, thinner areas should transmit more light.
* A warm, light background, soft studio lighting, and a grounded contact shadow.
* Avoid blown-out highlights, excessive bloom, and a hard-glass appearance.
PHYSICS
* Use a volumetric soft-body mesh with elastic connections and volume constraints, such as XPBD.
* Allow users to grab either the outer or inner edge and pull it in any direction.
* Deformation should spread naturally through neighboring regions: the hole stretches, the flesh bends, and the opposite side responds with a slight delay.
* After release, the ring should spring back softly, wobble a few times, and gradually settle.
* No instant snapping, endless oscillation, torn geometry, or collapsing central hole.
* Implement gravity and ground collisions. The ring should squash slightly on impact and recover its shape.
* Internal fibers, bubbles, and juice cells must deform with the flesh instead of remaining stationary.
* Clicking through the empty center must not grab the object.
INTERFACE
* A minimal editorial layout with generous whitespace.
* A large italic serif heading on the left: “Pineapple Jelly.”
* A compact “THE SPECIMEN” control panel on the right.
* Three color presets: Golden, Amber, and Rosé. Change the tint while preserving the material properties.
* Sliders for Firmness and Internal damping.
* Buttons: Give it a nudge, Reset, Turn it over, and Pause.
* Toggles: ¼ speed and Show mesh.
* Small live readouts for mass, volume relative to rest volume, and kinetic energy.
* All interface text in English.
* Support both mouse and touch interaction.
TECHNICAL REQUIREMENTS
* Use actual 3D geometry and WebGPU rendering, not a video or a Canvas 2D imitation.
* Generate all geometry and materials in code, without external models or image assets.
* Separate the simulation mesh from the smoother visual surface to maintain good performance.
* Display a clear fallback message when WebGPU is unavailable.
* Test strong stretching, inner-edge grabbing, flipping, resetting, and mobile interaction.
Save the finished result as pineapple-jelly-webgpu.html. Deliver the complete working file, not a mockup or implementation plan.
The final experience should feel like a soft, stretchy, appetizing gummy toy that is genuinely fun to squish.
한국어 번역
“Pineapple Jelly”라는 이름의 인터랙티브 3D 장면을 만들어 주세요. 두툼하고 반투명한 구미 파인애플 링으로, 사용자가 잡고, 늘리고, 휘게 하고, 놓을 수 있어야 합니다. 모든 것은 하나의 독립 실행형 HTML 파일에서 진짜 WebGPU와 WGSL 셰이더를 사용해 브라우저에서 바로 실행되어야 합니다.
가장 중요한 것은 설득력 있는 소프트 바디 거동, 아름다운 빛의 굴절, 그리고 만족스러운 인터랙션입니다.
모델
* 중앙에 진짜 구멍이 뚫린 둥근 파인애플 슬라이스.
* 두툼하고 과즙이 풍부한 과육, 살짝 물결 모양인 바깥 가장자리, 부드럽게 둥글게 처리된 모서리.
* 양쪽 절단면 모두 똑같이 정교해야 합니다. 링은 뒤집어서 모든 각도에서 볼 수 있어야 합니다.
* 섬세한 방사형 섬유, 작은 기포, 그리고 내부에 박힌 길쭉하고 옅은 과즙 세포가 있는 황금빛 반투명 과육.
* 껍질, 잎, 씨앗은 없습니다. 도넛이 아니라 구미 캔디로 만든 파인애플 링처럼 보여야 합니다.
재질과 조명
* 풍부한 허니 옐로 색감, 젖은 듯한 광택, 부드러운 서브서피스 스타일의 광산란.
* 굴절, 두께에 따라 달라지는 투명도, 절제된 하이라이트, 가장자리의 프레넬 반사.
* 늘어나서 얇아진 부분은 더 많은 빛을 통과시켜야 합니다.
* 따뜻하고 밝은 배경, 부드러운 스튜디오 조명, 바닥에 접지된 컨택트 섀도.
* 날아가 버린 하이라이트, 과도한 블룸, 단단한 유리 같은 느낌은 피합니다.
물리
* XPBD 같은 탄성 연결과 부피 제약을 사용하는 볼류메트릭 소프트 바디 메시를 사용합니다.
* 사용자가 바깥쪽 또는 안쪽 가장자리를 잡고 어느 방향으로든 당길 수 있어야 합니다.
* 변형은 인접한 영역으로 자연스럽게 퍼져야 합니다: 구멍은 늘어나고, 과육은 휘고, 반대쪽은 약간의 지연을 두고 반응합니다.
* 놓은 뒤에는 링이 부드럽게 탄성 회복하며 몇 번 출렁이고 서서히 가라앉아야 합니다.
* 순간적으로 튕겨 붙는 현상, 끝없는 진동, 찢어진 지오메트리, 중앙 구멍이 무너지는 현상은 없어야 합니다.
* 중력과 지면 충돌을 구현합니다. 링은 충돌 시 살짝 눌렸다가 형태를 회복해야 합니다.
* 내부 섬유, 기포, 과즙 세포는 정지해 있지 않고 과육과 함께 변형되어야 합니다.
* 빈 중앙을 클릭해 통과할 때 오브젝트가 잡히면 안 됩니다.
인터페이스
* 여유로운 화이트스페이스를 살린 미니멀한 에디토리얼 레이아웃.
* 왼쪽에 크고 기울임꼴인 세리프 제목: “Pineapple Jelly.”
* 오른쪽에 간결한 “THE SPECIMEN” 컨트롤 패널.
* 세 가지 색상 프리셋: Golden, Amber, Rosé. 재질 속성은 유지하면서 색조만 바꿉니다.
* Firmness와 Internal damping 슬라이더.
* 버튼: Give it a nudge, Reset, Turn it over, Pause.
* 토글: ¼ speed, Show mesh.
* 질량, 초기 부피 대비 부피, 운동 에너지를 보여 주는 작은 실시간 수치 표시.
* 모든 인터페이스 텍스트는 영어로 합니다.
* 마우스와 터치 인터랙션을 모두 지원합니다.
기술 요구 사항
* 영상이나 Canvas 2D 모사가 아니라 실제 3D 지오메트리와 WebGPU 렌더링을 사용합니다.
* 외부 모델이나 이미지 에셋 없이 모든 지오메트리와 재질을 코드로 생성합니다.
* 좋은 성능을 유지하기 위해 시뮬레이션 메시와 더 매끄러운 시각 표면을 분리합니다.
* WebGPU를 사용할 수 없을 때 명확한 폴백 메시지를 표시합니다.
* 강한 늘리기, 안쪽 가장자리 잡기, 뒤집기, 리셋, 모바일 인터랙션을 테스트합니다.
완성된 결과를 pineapple-jelly-webgpu.html로 저장하세요. 목업이나 구현 계획이 아니라 완전히 동작하는 파일을 전달하세요.
최종 경험은 부드럽고 잘 늘어나며 먹음직스러운 구미 장난감을 실제로 눌러 보는 듯한 느낌이어야 합니다.
