토털리티 엔진: 시네마틱 이클립스 대성당

다음 이름의 완성도 높고 시각적으로 인상적인 독립 실행형 단일 파일 HTML/WebGL 경험을 제작하세요:

totality-engine.html 파일을 documents/llm-benchmarks에 저장하세요

아이디어를 설명하는 데 그치지 마세요. 실제로 작동하는 완전한 HTML 파일을 생성해 현재 디렉터리에 저장하세요.

샌드박스 디오라마가 아닌 32초 길이의 시네마틱 단편 루프를 제작하세요. 핵심은 카메라 연출입니다. 인터랙션은 영상이 한 번 재생된 후 제공되는 부가 기능입니다.

월드:
개기일식이 진행되는 순간의 물에 잠긴 고딕 대성당입니다. 검은 물이 네이브 바닥을 뒤덮고 있습니다. 교차부를 가득 채운 것은 ‘토털리티 엔진’이라 불리는 기념비적인 황동 천문 시계입니다. 중첩된 오러리 링, 유리 행성, 검은 태양 코어, 금색 장식이 달린 40미터 높이의 짙은 대리석 진자가 구성 요소입니다. 젖은 석회암, 녹청, 촛불, 금빛 먼지가 어우러집니다. 모든 요소는 프로시저럴 코드로 제작하세요. 외부 모델, 텍스처, 이미지, 파일 형태의 폰트, 오디오를 사용하지 마세요.

연출된 영상 구성(시계 하나, 명명된 비트, 심리스 루프):

0.0–4.0초 DUST
극단적인 클로즈업입니다. 붉은 금빛 광선 속에서 먼지 입자 하나가 회전합니다. 주변 맥락은 거의 보여 주지 않습니다. 천천히 푸시인합니다.

4.0–10.0초 NAVE
카메라가 뒤로 물러나며 상승합니다. 대성당 교차부의 검은 물이 무릎 높이까지 차오른 곳에 있습니다. 리브 볼트가 안개 속으로 멀어집니다. 진자가 화면 왼쪽에서 들어와 무겁고 느리게 움직이며, 질량이 느껴질 만큼 가까이 스쳐 지나갑니다. 카메라에서 물결이 퍼져 나갑니다.

10.0–18.0초 ASCENT
진자가 상승하는 궤적을 따라 이동합니다. 볼트 안에 설치된 오러리를 드러내세요. 서로 다른 기울기를 가진 중첩 황동 링을 최소 4개 배치하고, 대기가 서로 다른 유리 행성 3개(구름형, 고리형, 폭풍 띠형)를 보여 주세요. 중심에는 검은 태양 코어가 있습니다. 트리포리움 곳곳에는 촛불 무리가 놓여 있습니다. 금빛 먼지가 중력을 거슬러 위로 떨어집니다.

18.0–24.0초 THREAD
카메라가 오러리 사이를 통과합니다. 고리형 행성의 유리를 관통해 지나가세요(투명도 트릭이 아닌 굴절을 사용). 잠시 행성의 고리 평면을 따라 이동한 뒤 검은 태양을 향해 빠져나옵니다. 다음 진자 스윙이 진자 주변의 빛을 약한 중력 렌즈처럼 휘게 만듭니다.

24.0–30.0초 TOTALITY
코로나가 폭발하듯 퍼져 백금빛 불의 링이 되고, 이 링은 오러리의 가장 바깥쪽 휠로 변합니다. 실제로 들릴 듯한 시계의 틱 소리 한 번과 함께 모든 링이 완벽하게 정렬된 상태로 튕겨 들어간 뒤, 코로나가 그 상태를 유지합니다. 화면을 흰색으로 페이드아웃하지 마세요. 불의 링을 배경으로 기계 전체의 실루엣을 유지하세요.

30.0–32.0초 CODA
프레임 0과 일치하는 느린 연속 동작으로 자연스럽게 이어져 루프가 보이지 않게 하세요. 갑작스러운 컷 전환은 사용하지 마세요.

첫 번째 전체 재생이 끝나면 드래그로 오빗 카메라를 조작하고, 마우스 휠로 줌하며, "영상 다시 재생" 컨트롤을 사용할 수 있게 하세요. 일시정지 버튼은 언제나 작동해야 합니다. 선택 사항: 1–5 키를 누르면 각 비트의 시작 지점으로 이동합니다.

장면 구성:
- 전경·중경·배경을 분명하게 구성하세요. NAVE에서는 진자가 전경을 차지해야 합니다. 볼트와 안개로 깊이감을 만드세요.
- 기계가 거대하게 보이도록 사람 크기를 가늠할 수 있는 기준물(물에 잠긴 신도석, 쓰러진 첨탑, 촛불 행렬 등)을 최소 2개 배치하세요.
- 물은 실제 머티리얼이어야 합니다. 오러리의 반사, 은은한 프레넬 효과, 느린 디스플레이스먼트, 진자와 카메라가 만드는 물결을 구현하세요.
- 유리 행성은 빛나는 공이 아니라 두꺼운 유리로 제작하세요. 적어도 하나의 행성을 통해 왜곡된 대성당이 보여야 합니다.
- 황동에는 묵직한 질감이 있어야 합니다. 그림자에서는 어둡고, 코로나 빛은 테두리에만 닿게 하세요.
- 촛불과 금빛 먼지는 인스턴싱하세요. 먼지는 ASCENT와 TOTALITY 중에만 위로 끌려 올라가야 합니다.
- 리브 볼트, 플라잉 버트레스 실루엣, 그리고 먼 벽에 있는 거대한 원형 장미창/일식 개구부를 배치하세요. 개구부는 검은 태양과 정렬되어야 합니다.
- 팔레트는 제한하고 고정하세요: 젖은 석회암 #8a8680, 황동 #c4a574, 녹청 #2f6f66, 일식 진홍색 #6b1020, 코로나 #ffe9c2, 검은 물 #05070c, 금빛 먼지 #e6c27a. 시안, 마젠타, 네온, 무지개, 보라색과 검은색을 조합한 "AI 느낌"은 사용하지 마세요.
- 타이포그래피는 작고 간결한 제목 "TOTALITY ENGINE"과 비트 이름만 사용하세요. 대시보드가 아니라 영화적인 화면이어야 합니다.

기술 요구 사항:
- 안정적인 CDN에서 Three.js를 불러오세요. HTML, CSS, JS는 모두 이 하나의 파일에 포함해야 합니다.
- 모든 애니메이션은 이름이 지정된 비트 구간과 단일 경과 시간 시계로 구동하세요. 독립적인 Math.random 루프, 셰이더 내 Date.now, 시드가 없는 노이즈는 사용하지 마세요. 시드가 지정된 RNG만 사용하고 시드는 상수 0xA2E1로 설정하세요.
- 카메라 연출은 부드러운 보간을 사용하고, 큰 움직임에는 ease-in-out을 적용하세요. 진자에는 더 무거운 이징을 적용해야 합니다(질량이 있기 때문입니다). TOTALITY로 이어지는 정착 동작에는 긴 꼬리감을 주세요. 선형 오빗을 기본 카메라로 사용하면 실패입니다.
- 기성 머티리얼을 그럴듯하게 꾸미는 방식이 아니라 커스텀 GLSL(ShaderMaterial 또는 풀스크린 패스)을 사용하세요:
1. 물(반사 + 프레넬 + 느린 디스플레이스먼트)
2. 검은 태양 코로나(스프라이트가 아닌 불꽃/플라즈마)
3. 진자 렌징(THREAD 중 보브 주변에서 빛이 휘어지는 효과)
4. 최소 하나의 행성에 적용하는 두꺼운 유리
- 먼지, 촛불, 반복되는 석재/황동 셀에는 InstancedMesh를 사용하세요. 개별 Mesh 오브젝트를 수천 개 생성하지 마세요.
- 포스트 프로세싱은 사용해도 되지만 라이팅을 대체해서는 안 됩니다. 블룸을 사용한다면 코로나와 촛불에만 은은하게 적용하세요. 장면 전체에 UnrealBloom을 적용하면 실패입니다.
- 안개, 젖은 표면의 반사, 일식 개구부로 분위기를 만드세요. 실제로 셰이더가 구동하는 경우가 아니라면 "신성 광선"을 값싼 투명 콘으로 구현하지 마세요.
- 브라우저 전체 창에 맞게 반응형으로 제작하고 리사이즈를 처리하세요. 2023년형 노트북에서 60fps를 목표로 합니다. 선택해야 한다면 카메라 연출을 줄이기 전에 파티클 수를 줄이세요.
- 작고 눈에 띄지 않는 UI만 사용하세요: 제목, 현재 비트, 일시정지, 다시 재생. FPS 카운터, dat.gui, 디버그 헬퍼를 남겨 두지 마세요.
- TODO 주석, 의사 코드, 플레이스홀더, 누락된 함수, "X를 사용하면 더 좋아집니다" 같은 문구를 넣지 마세요.
- 로드되면 영상이 자동으로 시작되어야 합니다. 시작 버튼 뒤에 정지 화면만 보여 주면 실패입니다.

품질 기준:
Three.js 예제가 아니라 단편 영화의 한 장면처럼 보여야 합니다. 26초 시점의 스크린샷이 "일식이 진행되는 순간의 대성당 크기 시계"로 읽히지 않는다면 아직 완성된 것이 아닙니다. 오브젝트를 더 추가하기 전에 구도, 머티리얼, 카메라를 먼저 반복 개선하세요.