3D 버텍스 데이터 → 입자 버퍼 매핑 원리
본 시스템은 3D 메시 표면의 임의 위치 버텍스 데이터를 추출하여 GPU 버텍스 버퍼(Float32Array Attribute Buffer)에 매핑한 후, 셰이더 내부에서 실시간 보간 연산을 수행합니다.
// 1. 3D 메시 버텍스 좌표 추출 및 셰이더 속성(Attribute)에 바인딩
const targetPositions = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount; i++) {
const p = getSurfacePointFromMesh(geometry);
targetPositions[i * 3 + 0] = p.x;
targetPositions[i * 3 + 1] = p.y;
targetPositions[i * 3 + 2] = p.z;
}
geometry.setAttribute('aTarget', new THREE.BufferAttribute(targetPositions, 3));
핵심 매커니즘:
- GPGPU 보간 연산: 현재 위치(position)에서 목표 위치(aTarget)로 smoothstep 커브를 이용해 부드럽게 이동합니다.
- Simplex 3D Noise: 모핑이 일어나는 중간 시점(uProgress ≈ 0.5)에서 3차원 심플렉스 노이즈 벡터를 입자 위치에 가산하여 유기적인 입자 분해 및 재조합 효과를 만듭니다.
- 마우스 반발력 Field: 3D 공간상의 마우스 광선 패스 경로에 접하는 입자들에게 척력(Repulsion)을 전달합니다.