Three.js 소프트바디 물리 구현 프롬프트: Claude Opus 5.5 vs Gemini 4 Argon 구미베어 비교

Semichenko(@semichenkko)가 Three.js 기반의 반투명 젤리(구미베어) 인터랙션을 단일 자족형(self-contained) HTML 파일로 제작하는 상세 3D 프롬프트를 공개했습니다. 동일한 프롬프트를 Anthropic의 Claude Opus 5.5와 Google의 Gemini 4 Argon에 전달해 소프트바디(Soft body) 물리 연산, 셰이더 품질, 실행 토큰 비용을 직접 대조한 벤치마크 결과도 함께 공유되었습니다.

이미지 출처: @semichenkko on X

웹 환경에서 구미베어 특유의 탄성과 젤리 질감을 구현하려면 단순한 강체(Rigid body) 물리나 정적 메시 결합으로는 불가능합니다. 질점 기반의 소프트바디 형상 매칭 알고리즘과 빛 투과·굴절을 처리하는 PBR 재질 구성이 필수적인데, 대형 언어 모델 간 코드 생성 완성도와 물리 엔진 설계 능력에서 뚜렷한 격차가 확인되었습니다.

동일 프롬프트 테스트 결과: 젤리 물리(Opus 5.5) vs 플라스틱 조각상(Gemini 4 Argon)

원작자는 두 모델이 생성한 단일 HTML 코드를 대상으로 5가지 동일한 조작 시나리오(앞발 당기기, 머리 잡아당기기, 납작하게 누르기, 던지기, 상단에서 한 봉지 쏟아붓기)를 실행해 물리 엔진의 반응을 검증했습니다.

• Claude Opus 5.5 (실제 젤리 거동)

  • 신축성과 복원력: 발을 잡고 당기면 얇은 고무 가닥처럼 길게 늘어났다가, 손을 놓으면 감쇠 진동을 일으키며 젤리처럼 출렁거리며 제자리로 복원됩니다.
  • 부피 보존 압축: 곰을 누르면 팬케이크처럼 납작하게 눌린 뒤, 스스로 다시 튀어 오릅니다.
  • 충돌 및 반발: 곰을 집어 던지면 바닥에 부딪히며 탄성으로 튕겨 나가고, 주변에 있던 다른 곰들을 자연스럽게 밀쳐냅니다.
  • 광학 렌더링: 반투명(Translucent)하고 윤기 있는(Glossy) 외관과 함께 빛이 젤리 내부를 그대로 통과하는 모습을 정확히 재현했습니다.
  • 소요 비용: $7.2

• Gemini 4 Argon (단단한 플라스틱 거동)

  • 형상 변형 실패: 구미베어 특유의 소프트바디 특성이 사라지고 단단한 플라스틱 조각상처럼 동작합니다. 팔을 잡아당기면 탄성 변형 없이 뻣뻣한 막대기처럼 굳어집니다.
  • 충돌 판정 누락: 곰을 던졌을 때 인접한 곰과 충돌하지 않고 몸체를 그대로 관통(clip-through)하여 지나갑니다.
  • 적층 클리핑: 상단에서 곰 무리를 쏟아부었을 때 젤리 더미가 서로 맞물려 흔들리지 못하고 메시끼리 서로 파고드는 클리핑 현상이 발생합니다.
  • 소요 비용: $22 (더 많은 토큰을 소모했음에도 플라스틱 질감의 불완전한 결과물 생성)

Three.js 소프트바디 구미베어 생성 프롬프트 전문

Semichenko가 두 모델에 입력한 원문 프롬프트 전문입니다. 외부 번들러나 로컬 서버 없이 브라우저에서 단일 HTML 파일로 즉시 실행할 수 있도록 CDN Three.js 의존성만을 지정했습니다.

PROMPT

Build "Gummy Bears" - a single self-contained HTML file (three.js from a CDN is the only dependency): a handful of translucent gummy bears on a white table that you can grab, stretch, squash, throw and pour.

The bears
- Classic gummy bear silhouette: round head with two ears, short snout, plump body, stubby arms and legs, tiny molded eyes and nose
- Every part melts smoothly into the next - build the body as an implicit surface (metaballs / marching cubes), not separate spheres
- Material: real gummy candy. Translucent with transmission and refraction, colored light absorption that gets deeper in thick parts, glossy clearcoat with sharp highlights
- Colors: cherry red, orange, lemon yellow, apple green, clear pineapple
- Soft colored shadow under each bear, tinted by the bear's own color

Physics (this is the whole point - it must feel like jelly, not plastic)
- Each bear is a soft body: mass points for head, ears, snout, body, belly, hands and feet, held together by volume-preserving shape matching
- Limbs and neck are rendered as stretchy strands between points, getting thinner as they stretch
- Grab any part and pull: it stretches like rubber, the rest of the bear leans after it, on release it snaps back with a damped wobble
- Pull the head up: the neck stretches, the body follows, on release the bear squashes and hops
- Press down on the head: the bear pancakes, bulges sideways, then launches itself back up
- Throw a bear: it flies, squashes on landing, bounces and pushes other bears out of the way
- Bears collide with each other and never pass through one another
- Idle bears do small random hops with squash and stretch
- "Pour more bears" drops a handful from above into a wobbling, jiggling pile

UI
- Editorial product-page style on a white background. Large italic serif title "Gummy / Bears.", a short subtitle, a minimal card on the right with flavor swatches, a wobble slider, live "Stretch" and "Bounces" readouts and a "Pour more bears" button
- A subtle circular cursor that grows while grabbing
- ACES tone mapping, environment reflections, soft key and back light. Smooth 60fps

프롬프트 구조와 모델별 코드 생성 격차 분석

이번 프롬프트가 높은 난도를 갖는 이유는 단순한 3D 오브젝트 렌더링을 넘어, 웹 프론트엔드 환경에서 고비용의 실시간 연산을 단일 스크립트로 구현하도록 요구했기 때문입니다.

1. 암시적 곡면(Implicit Surface) 모델링: 머리, 귀, 몸통을 별개 구체(Sphere)로 조립하지 않고 마칭 큐브(Marching Cubes)나 메타볼(Metaballs) 방식을 지정해 부위 간 경계가 유기적으로 녹아드는 실루엣을 지시했습니다.
2. 부피 보존 형상 매칭(Volume-Preserving Shape Matching): 일반 강체 물리 엔진 대신 질점(Mass points) 기반의 소프트바디를 명시해, 인장(Stretch) 시 가닥이 가늘어지고 압축 시 옆으로 부풀어 오르는 물리 법칙을 코드로 기술하도록 유도했습니다.
3. PBR 셰이더 광학 특성: 실제 젤리 캔디 질감을 위해 단순 투명도가 아닌 투과(Transmission)와 굴절(Refraction), 두께에 따라 짙어지는 광 흡수(Colored light absorption), 날카로운 하이라이트의 유광 클리어코트(Clearcoat)를 조합하도록 요구했습니다.

결과적으로 Claude Opus 5.5는 복잡한 형상 매칭 물리와 Three.js 셰이더 파이프라인을 구성해 7.2달러의 비용으로 실시간 젤리 인터랙션을 완성한 반면, Gemini 4 Argon은 22달러의 비용을 소모하며 더 많은 토큰을 태우고도 메시 간 충돌 연산과 변형 물리를 단단한 플라스틱 구조로 처리했습니다. 고난도 WebGL 시뮬레이션 코드 생성 작업 시 모델 선택에 따른 결과물 품질과 API 비용 차이를 명확히 보여주는 사례입니다.

원문 출처

• Semichenko (@semichenkko) X 포스트: Opus 5.5 vs Gemini 4 Argon Three.js Gummy Bears Prompt