코딩 · 개발

WebGL 3D 수면 시뮬레이션

WebGL 기반 인터랙티브 3D 수면 효과 및 물리 시뮬레이션 코드를 개발할 때 사용합니다.

추천 툴: Claude CodeAI 분류
쓰인 기법: 역할 부여 · 상세 요구사항 명시

프롬프트 원문

I want you to act as a Top-tier VFX Engineer specializing in particle systems and fluid simulation within WebGL environments.

Task:
Design a 3D interactive water surface system with buoyancy feedback for floating objects.

Visual & Technical Goals:

Simulate water surface reflection and refraction using Shaders or Plane Reflectors.

Implement a buoyancy algorithm that calculates the submerged volume of a 3D object and applies an upward force.

Generate dynamic particle splashes at the intersection point when an object enters the water.

Create a custom shader for periodic wave disturbance based on time and interaction coordinates.

Optimize the system using GPU Instanced Meshes to handle thousands of particles simultaneously without dropping frames.

한국어 풀이 보기(참고용)

당신은 WebGL 환경 내 입자 시스템 및 유체 시뮬레이션을 전문으로 하는 최상위 VFX 엔지니어 역할을 해주기를 바랍니다.

작업:
부유하는 개체에 대한 부력 피드백이 있는 3D 상호작용 수면 시스템을 설계하세요.

시각적 & 기술적 목표:

셰이더 또는 평면 반사경(Plane Reflectors)을 사용하여 수면 반사 및 굴절을 시뮬레이션합니다.

3D 개체의 침수된 부피를 계산하고 상향력을 적용하는 부력 알고리즘을 구현합니다.

개체가 물에 들어갈 때 교차점에서 동적 입자 물보라(splashes)를 생성합니다.

시간 및 상호작용 좌표를 기반으로 주기적인 파도 교란을 위한 커스텀 셰이더를 만듭니다.

GPU Instanced Meshes를 사용하여 프레임 드롭 없이 동시에 수천 개의 입자를 처리하도록 시스템을 최적화합니다.

활용Three.js 등 프레임워크를 명시하면 완성도 높은 코드를 얻을 수 있습니다.
활용목표 프레임률(FPS)이나 한계 입자 수를 지정하여 성능을 조정하세요.

출처 · prompts.chat · WebGL VFX & Fluid Interaction Specialist — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.

웹 화면(HTML) 결과

Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.

Three.js와 Custom GLSL Shader를 활용하여 수면 디스플레이스먼트, 프레넬 반사/굴절, 파동 간섭 효과를 가진 고성능 3D 수면 물리 시뮬레이션을 구현했습니다. 다중 샘플링 부력 물리 엔진과 InstancedMesh 기반의 입자 파티클 스플래시 시스템을 탑재하여 TPI 탐사 장비들이 실제 물 위에서 정밀하게 부유하고 반응하도록 제작되었습니다.

WebGL 3D 수면 시뮬레이션 실행 결과

새 창에서 보기 ↗데스크톱 1280px 화면을 0%로 보이는 중격리된 환경에서 실행되며 외부와 통신하지 않습니다.

텍스트 결과

Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).

실행 입력값 보기

I want you to act as a Top-tier VFX Engineer specializing in particle systems and fluid simulation within WebGL environments.

Task:
Design a 3D interactive water surface system with buoyancy feedback for floating objects.

Visual & Technical Goals:

Simulate water surface reflection and refraction using Shaders or Plane Reflectors.

Implement a buoyancy algorithm that calculates the submerged volume of a 3D object and applies an upward force.

Generate dynamic particle splashes at the intersection point when an object enters the water.

Create a custom shader for periodic wave disturbance based on time and interaction coordinates.

Optimize the system using GPU Instanced Meshes to handle thousands of particles simultaneously without dropping frames.

Three.js와 Custom GLSL Shader를 활용하여 수면 디스플레이스먼트, 프레넬 반사/굴절, 파동 간섭 효과를 가진 고성능 3D 수면 물리 시뮬레이션을 구현했습니다.
다중 샘플링 부력 물리 엔진과 InstancedMesh 기반의 입자 파티클 스플래시 시스템을 탑재하여 mopick 탐사 장비들이 실제 물 위에서 정밀하게 부유하고 반응하도록 제작되었습니다.

mopick 개선안

원문을 더 잘 동작하게 고쳐 쓴 프롬프트

원문을 그대로 넣으면 AI 가 매번 다르게 답하거나 중요한 부분을 빠뜨릴 수 있습니다. 개선안은 원문의 뜻과 언어는 그대로 두고 역할 · 바꿔 넣을 입력 칸 · 결과 형식 · 지킬 조건을 보완해 다시 쓴 버전입니다. 원문과 같은 곳(ChatGPT · Claude 등)에 그대로 붙여 넣어 쓰면 됩니다.

AI 평가 점수 — 명확성 · 구체성 · 결과 형식 · 재사용성 기준(100점)

원문78

개선안95

원문의 문제 → 개선안에서 고친 점

AI 역할레슨 01 배우기 ›
원문 · 없음AI 에게 맡길 역할이 정해져 있지 않아 답의 관점 · 수준이 그때그때 달라질 수 있었습니다.
개선 · 역할을 정함Act as a Top-tier VFX Engineer specializing in WebGL particle systems and fluid simulation
입력 칸레슨 05 배우기 ›
원문 · 없음바꿔 넣을 자리가 표시돼 있지 않아 쓸 때마다 원문을 직접 고쳐야 했습니다.
개선 · 2개[Target Framework, e.g., Three.js] · [Target FPS, e.g., 60 FPS]
작업 순서레슨 07 배우기 ›
원문 · 없음작업 순서가 정해져 있지 않아 AI 가 순서를 스스로 정해야 했습니다.
개선 · 3단계

고친 이유 (개선안을 만든 AI 의 설명)

1출력 형식을 세분화하여 코드와 이론이 체계적으로 작성되도록 개선
2프레임워크와 목표 프레임을 [대괄호] 변수로 처리하여 재사용성 강화
3부력 알고리즘 및 감쇄 제어 요구사항을 명확히 하여 구현 정확도 향상

이 개선안에 쓰인 기법 — 프롬프트 클래스에서 배우기

01역할 정하기 03결과 모양 정하기 05입력 칸으로 템플릿 만들기 07작업을 단계로 나누기

클래스 전체 ›

원문

I want you to act as a Top-tier VFX Engineer specializing in particle systems and fluid simulation within WebGL environments.

Task:
Design a 3D interactive water surface system with buoyancy feedback for floating objects.

Visual & Technical Goals:

Simulate water surface reflection and refraction using Shaders or Plane Reflectors.

Implement a buoyancy algorithm that calculates the submerged volume of a 3D object and applies an upward force.

Generate dynamic particle splashes at the intersection point when an object enters the water.

Create a custom shader for periodic wave disturbance based on time and interaction coordinates.

Optimize the system using GPU Instanced Meshes to handle thousands of particles simultaneously without dropping frames.

개선안 · 색칠한 [칸]에 내 내용을 넣어 쓰세요

Act as a Top-tier VFX Engineer specializing in WebGL particle systems and fluid simulations.

Task:
Design a production-ready 3D interactive water surface system with buoyancy feedback for floating objects using [Target Framework, e.g., Three.js].

Technical & Visual Requirements:
1. Shaders: Custom GLSL shaders for realistic reflection, refraction, and periodic wave disturbances driven by time and interaction coordinates.
2. Physics & Buoyancy: Implement a buoyancy algorithm calculating submerged volume to apply upward force and damping.
3. Particle VFX: Dynamic collision-based splashes optimized via GPU Instanced Meshes to maintain [Target FPS, e.g., 60 FPS] with thousands of particles.

Output Format:
- System Architecture & Math Model
- GLSL Shader Code (Vertex & Fragment)
- Core Logic (Buoyancy calculation & Instancing setup in JavaScript/TypeScript)
- Performance Optimization Strategies

‹ 라이브러리로

I want you to act as a Top-tier VFX Engineer specializing in particle systems and fluid simulation within WebGL environments. Task: Design a 3D interactive water surface system with buoyancy feedback for floating objects. Visual & Technical Goals: Simulate water surface reflection and refraction using Shaders or Plane Reflectors. Implement a buoyancy algorithm that calculates the submerged volume of a 3D object and applies an upward force. Generate dynamic particle splashes at the intersection point when an object enters the water. Create a custom shader for periodic wave disturbance based on time and interaction coordinates. Optimize the system using GPU Instanced Meshes to handle thousands of particles simultaneously without dropping frames.

당신은 WebGL 환경 내 입자 시스템 및 유체 시뮬레이션을 전문으로 하는 최상위 VFX 엔지니어 역할을 해주기를 바랍니다. 작업: 부유하는 개체에 대한 부력 피드백이 있는 3D 상호작용 수면 시스템을 설계하세요. 시각적 & 기술적 목표: 셰이더 또는 평면 반사경(Plane Reflectors)을 사용하여 수면 반사 및 굴절을 시뮬레이션합니다. 3D 개체의 침수된 부피를 계산하고 상향력을 적용하는 부력 알고리즘을 구현합니다. 개체가 물에 들어갈 때 교차점에서 동적 입자 물보라(splashes)를 생성합니다. 시간 및 상호작용 좌표를 기반으로 주기적인 파도 교란을 위한 커스텀 셰이더를 만듭니다. GPU Instanced Meshes를 사용하여 프레임 드롭 없이 동시에 수천 개의 입자를 처리하도록 시스템을 최적화합니다.