Files

T

koriweb 5ba5a55c78 feat: Wiki 지식 자산 업데이트 - UX Scenarios, Frontend, Game Design, Topics 추가 [2026-05-08]

2026-05-08 19:52:07 +09:00

5.5 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, tags, raw_sources, last_reinforced, github_commit, inferred_by

title

Raycasting

📌 한 줄 통찰 (The Karpathy Summary)

Raycasting(레이캐스팅)은 가상의 광선(Ray)과 3D 환경 내 객체들 간의 교차점을 감지하는 계산 기법입니다 [1, 2]. 3D 씬 내에서 사용자가 화면을 클릭하여 특정 객체를 선택(Picking)하거나 드래그하는 등의 사용자 상호작용(Interaction)을 구현할 때 필수적으로 사용됩니다 [3-5]. Three.js 환경에서는 THREE.[[Raycaster|Raycaster]] 클래스를 통해 이 기능을 수행할 수 있습니다 [2, 3].

📖 구조화된 지식 (Synthesized Content)

기본 작동 원리
- Raycaster는 시작점(주로 카메라)에서 특정 방향으로 무한히 뻗어가는 광선을 사용합니다 [2]. 카메라와 화면 좌표(마우스 클릭 위치 등)를 기반으로 광선을 설정할 수 있습니다 [6].
- intersectObjects 메서드를 호출하면 광선과 교차하는 객체들의 배열을 거리순으로 반환합니다. 반환된 항목에는 교차된 대상 객체(item.object)와 세계 좌표계 기준의 정확한 교차 지점(item.point) 정보가 포함됩니다 [7-10].
성능 최적화 기법 (BVH 도입)
- 복잡한 지오메트리를 상대로 반복적인 레이캐스팅을 수행하면 성능 저하가 발생할 수 있습니다.
- 이를 해결하기 위해 공간 분할 구조인 [[three-mesh-bvh|three-mesh-bvh]](Bounding Volume Hierarchy) 라이브러리를 활용하면, 80,000개 이상의 폴리곤에 대해서도 60fps로 매우 빠른 레이캐스팅(Fast Raycasting) 쿼리를 수행할 수 있습니다 [11-13].
InstancedMesh 환경에서의 제약 및 고려사항
- InstancedMesh는 네이티브 레이캐스터를 지원하지만, 초기에는 모든 인스턴스 멤버의 모든 삼각형을 검사해야 하여 성능상 한계가 있었습니다 [14, 15].
- Three.js r151 버전 이후부터는 바운딩 볼륨(Bounding Volume)을 통한 빠른 조기 종료(Early-out) 테스트를 지원하여 속도가 개선되었습니다 [16, 17]. 그러나 인스턴스를 이동시키는 등 변환이 발생한 후에는 반드시 computeBoundingSphere()와 computeBoundingBox()를 수동으로 재계산해주어야 레이캐스팅이 정상 작동합니다 [16, 18].
- 일부 커스텀 구현(예: A-Frame용 컴포넌트)에서는 유연성과 성능 확보를 위해 InstancedMesh 자체에 대한 직접적인 레이캐스팅 대신, 동일한 형태의 보이지 않는 메시(Invisible Mesh)를 멤버별로 생성하여 레이캐스팅의 타겟으로 삼는 우회법을 사용하기도 합니다 [15, 19, 20].
셰이더 애니메이션과의 충돌
- 애니메이션과 위치 변환이 CPU를 거치지 않고 GPU 셰이더 내부에서 독자적으로 계산되는 경우, CPU는 객체의 최종 변환 상태를 알지 못합니다. 이로 인해 CPU 기반의 레이캐스팅 연산이 불가능해지거나 오작동할 수 있습니다 [14, 21].
대안 기술 (GPU Picking)
- 복잡한 연산이 필요한 레이캐스팅의 대안으로, 객체의 고유 ID를 색상으로 화면 밖(Off-screen) 픽셀 버퍼에 그린 뒤 렌더링된 픽셀 색상을 읽어 객체를 식별하는 'GPU 피킹(Color-based Picking)' 기술도 존재합니다 [22, 23].

⚠️ 모순 및 업데이트 (Contradictions & Updates)

과거 데이터와의 충돌: 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
정책 변화: Graphics & Performance 분야의 자동 자산화 수행.

🔗 지식 연결 (Graph)

Related Topics: THREE.Raycaster, Bounding Volume Hierarchy (BVH), InstancedMesh, GPU Picking
Projects/Contexts: 3D 사용자 상호작용 및 마우스 피킹 (Picking) 구현, three-mesh-bvh 라이브러리 연동
Contradictions/Notes: InstancedMesh를 사용할 때 GPU 성능 이점은 크지만, 각 인스턴스마다 CPU 기반 레이캐스팅을 처리하거나 개별 정밀도를 조작하는 데는 유연성이 떨어집니다 [15]. 또한 셰이더로 지오메트리를 변경하면 CPU 레이캐스팅과 데이터 불일치가 발생하므로 설계 시 주의가 필요합니다 [21].

Last updated: 2026-04-19

🤖 LLM 활용 힌트 (How to Use This Knowledge)

언제 이 지식을 쓰는가:

(TODO)

언제 쓰면 안 되는가:

(TODO)

🧪 검증 상태 (Validation)

정보 상태: needs_review
출처 신뢰도: A
검토 이유: (P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)

🧬 중복 검사 (Duplicate Check)

기존 유사 문서: (TODO: 인덱서 클러스터 리포트 참조)
처리 방식: UPDATE (자동 정규화)
처리 이유: Phase 1 정규화 — 옛 템플릿/누락 필드 보강.

🕓 변경 이력 (Changelog)

날짜	변경 내용	처리 방식	신뢰도
2026-05-08	P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화)	UPDATE	A

5.5 KiB Raw Blame History