Three.js와 GLSL 기반의 인터랙티브 3D 공간 정렬 게임 인터페이스를 제작할 때 유용합니다.
I want you to act as a Creative Technologist and VFX Architect. Create a 3D spatial alignment game prototype used for matching synonyms or paired language concepts. Game Name: 《Resonance Wave: Synchronic Clusters》. Game Function: The user is presented with two large floating geometric structures constructed entirely out of interactive particle clouds. The left cluster and the right cluster fluctuate according to a Sine wave function. The user can rotate and shift the right cluster using mouse drag vectors. The objective is to align the spatial orientation and topology of the two structures. When the rotation matrices match (indicating a conceptual pairing), the particles enter a 'quantum entanglement' phase, instantly fusing into a single unified geometric shape via an implosion effect. Design Style: Dreamlike surrealism. A clean, borderless white background where the particle structures are mapped with fluid holographic gradients and additive blending to create a floating light aesthetic. Technologies Used: Three.js using BufferGeometry and Points for high-performance particle management, custom GLSL vertex shaders for the Sine wave deformation, and Quaternion math for precise orientation matching.
Creative Technologist 겸 VFX Architect 역할을 맡아 주기를 바랍니다. 유의어나 짝을 이루는 언어 개념을 매칭하는 데 사용되는 3D 공간 정렬 게임 프로토타입을 제작해 주세요. 게임 이름: 《Resonance Wave: Synchronic Clusters》. 게임 기능: 사용자에게는 완전히 인터랙티브한 파티클 클라우드로 구성된 두 개의 대형 부유 기하학적 구조가 제시됩니다. 왼쪽 클러스터와 오른쪽 클러스터는 정현파(Sine wave) 함수에 따라 요동칩니다. 사용자는 마우스 드래그 벡터를 사용하여 오른쪽 클러스터를 회전하고 이동할 수 있습니다. 목표는 두 구조의 공간적 방향과 위상을 일치시키는 것입니다. 회전 행렬이 일치하면(개념적 페어링을 의미함), 파티클은 '양자 얽힘' 단계에 진입하여 내파(implosion) 효과를 통해 즉시 하나의 통합된 기하학적 모양으로 융합됩니다. 디자인 스타일: 몽환적인 초현실주의. 테두리가 없는 깔끔한 흰색 배경에 파티클 구조가 유동적인 홀로그램 그라데이션과 가산 혼합(additive blending)으로 매핑되어 공중에 떠 있는 빛의 미학을 연출합니다. 사용 기술: 고성능 파티클 관리를 위해 BufferGeometry 및 Points를 사용하는 Three.js, 정현파 변형을 위한 맞춤형 GLSL 정점 셰이더(vertex shader), 정밀한 방향 일치를 위한 쿼터니언(Quaternion) 연산.
출처 · prompts.chat · 《Resonance Wave: Synchronic Clusters》 — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
입자 구름 형태의 3D 기하학 클러스터를 회전·정렬하여 개념 간 동기화 상태를 맞추는 공간 정렬 인터랙티브 서라운드 시뮬레이터입니다. Three.js 파티클 시스템과 쿼터니언 연산을 기반으로 정렬 성공 시 입자가 중앙으로 융합·폭발하는 양자 얽힘 연출을 구현했습니다.
I want you to act as a Creative Technologist and VFX Architect. Create a 3D spatial alignment game prototype used for matching synonyms or paired language concepts. Game Name: 《TPI 공진 파동: 동기화 클러스터》. Game Function: The user is presented with two large floating geometric structures constructed entirely out of interactive particle clouds. The left cluster and the right cluster fluctuate according to a Sine wave function. The user can rotate and shift the right cluster using mouse drag vectors. The objective is to align the spatial orientation and topology of the two structures. When the rotation matrices match (indicating a conceptual pairing), the particles enter a 'quantum entanglement' phase, instantly fusing into a single unified geometric shape via an implosion effect. Design Style: Dreamlike surrealism. A clean, borderless white background where the particle structures are mapped with fluid holographic gradients and additive blending to create a floating light aesthetic. Technologies Used: Three.js using BufferGeometry and Points for high-performance particle management, custom GLSL vertex shaders for the Sine wave deformation, and Quaternion math for precise orientation matching.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
I want you to act as a Creative Technologist and VFX Architect. Create a 3D spatial alignment game prototype used for matching synonyms or paired language concepts. Game Name: 《mopick 공진 파동: 동기화 클러스터》. Game Function: The user is presented with two large floating geometric structures constructed entirely out of interactive particle clouds. The left cluster and the right cluster fluctuate according to a Sine wave function. The user can rotate and shift the right cluster using mouse drag vectors. The objective is to align the spatial orientation and topology of the two structures. When the rotation matrices match (indicating a conceptual pairing), the particles enter a 'quantum entanglement' phase, instantly fusing into a single unified geometric shape via an implosion effect. Design Style: Dreamlike surrealism. A clean, borderless white background where the particle structures are mapped with fluid holographic gradients and additive blending to create a floating light aesthetic. Technologies Used: Three.js using BufferGeometry and Points for high-performance particle management, custom GLSL vertex shaders for the Sine wave deformation, and Quaternion math for precise orientation matching.
입자 구름 형태의 3D 기하학 클러스터를 회전·정렬하여 개념 간 동기화 상태를 맞추는 공간 정렬 인터랙티브 서라운드 시뮬레이터입니다. Three.js 파티클 시스템과 쿼터니언 연산을 기반으로 정렬 성공 시 입자가 중앙으로 융합·폭발하는 양자 얽힘 연출을 구현했습니다.
mopick 개선안
원문을 그대로 넣으면 AI 가 매번 다르게 답하거나 중요한 부분을 빠뜨릴 수 있습니다. 개선안은 원문의 뜻과 언어는 그대로 두고 역할 · 바꿔 넣을 입력 칸 · 결과 형식 · 지킬 조건을 보완해 다시 쓴 버전입니다. 원문과 같은 곳(ChatGPT · Claude 등)에 그대로 붙여 넣어 쓰면 됩니다.
AI 평가 점수 — 명확성 · 구체성 · 결과 형식 · 재사용성 기준(100점)
AI 역할레슨 01 배우기 ›
원문 · 없음AI 에게 맡길 역할이 정해져 있지 않아 답의 관점 · 수준이 그때그때 달라질 수 있었습니다.
개선 · 역할을 정함Act as a Creative Technologist and VFX Architect. Create a functional 3D spatial alignment
입력 칸레슨 05 배우기 ›
원문 · 없음바꿔 넣을 자리가 표시돼 있지 않아 쓸 때마다 원문을 직접 고쳐야 했습니다.
개선 · 2개[Insert Concept Pairs, e.g., 'Ephemeral' and 'Fleeting'] · [Insert Tolerance, e.g., 0.05 radians]
작업 순서레슨 07 배우기 ›
원문 · 없음작업 순서가 정해져 있지 않아 AI 가 순서를 스스로 정해야 했습니다.
개선 · 5단계
이 개선안에 쓰인 기법 — 프롬프트 클래스에서 배우기
01역할 정하기03결과 모양 정하기04지킬 조건 걸기05입력 칸으로 템플릿 만들기07작업을 단계로 나누기09구역을 나눠 쓰기
원문
I want you to act as a Creative Technologist and VFX Architect. Create a 3D spatial alignment game prototype used for matching synonyms or paired language concepts. Game Name: 《Resonance Wave: Synchronic Clusters》. Game Function: The user is presented with two large floating geometric structures constructed entirely out of interactive particle clouds. The left cluster and the right cluster fluctuate according to a Sine wave function. The user can rotate and shift the right cluster using mouse drag vectors. The objective is to align the spatial orientation and topology of the two structures. When the rotation matrices match (indicating a conceptual pairing), the particles enter a 'quantum entanglement' phase, instantly fusing into a single unified geometric shape via an implosion effect. Design Style: Dreamlike surrealism. A clean, borderless white background where the particle structures are mapped with fluid holographic gradients and additive blending to create a floating light aesthetic. Technologies Used: Three.js using BufferGeometry and Points for high-performance particle management, custom GLSL vertex shaders for the Sine wave deformation, and Quaternion math for precise orientation matching.
개선안 · 색칠한 [칸]에 내 내용을 넣어 쓰세요
Act as a Creative Technologist and VFX Architect. Create a functional 3D spatial alignment web game prototype named 《Resonance Wave: Synchronic Clusters》 for matching synonyms or paired language concepts (e.g., [Insert Concept Pairs, e.g., 'Ephemeral' and 'Fleeting']). ### Objective Generate a complete, executable single-file HTML/Three.js code implementation for the prototype. ### Specifications & Mechanics 1. **Design Style**: Dreamlike surrealism. Clean, borderless white background (`#FFFFFF`) with floating particle structures mapped using fluid holographic gradients and additive blending (`Three.AdditiveBlending`). 2. **Particle Engine**: Render left and right geometric clusters using `Three.BufferGeometry` and `Three.Points` for high performance. 3. **Deformation Shader**: Custom GLSL vertex shader driving dynamic Sine wave fluctuations based on an elapsed `time` uniform. 4. **Interaction**: Enable mouse/touch drag vector controls to rotate and shift the right cluster using `Three.Quaternion` math. 5. **Matching Condition**: Measure Quaternion distance. When alignment tolerance is within `[Insert Tolerance, e.g., 0.05 radians]`, trigger a 'quantum entanglement' phase that fuses both clusters into a single shape via an implosion animation. ### Expected Output Format - Complete self-contained HTML file with embedded CSS, Three.js import, custom GLSL shaders, and interaction event handlers.