Files

T

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

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

6.2 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, tech_stack

title

WEBGL_multi_draw

📌 한 줄 통찰 (The Karpathy Summary)

WEBGL_multi_draw는 한 번의 드로우 콜(Draw Call)로 정렬된 다수의 드로우 요청을 한꺼번에 제출할 수 있게 해주는 WebGL 확장 기능(Extension)입니다 [1, 2]. Three.js에서는 BatchedMesh가 이 API를 활용하여 동일한 재질을 공유하지만 각기 다른 기하학적 구조(Geometry)를 가진 여러 객체들을 묶어 렌더링하는 데 사용됩니다 [3-5]. 다양한 고유 객체들을 처리할 때 기존의 개별 호출 방식에 비해 엄청난 성능 향상을 제공하지만, 브라우저 호환성 문제와 대규모 씬에서의 오버헤드 한계를 동시에 안고 있습니다 [6, 7].

📖 구조화된 지식 (Synthesized Content)

BatchedMesh에서의 활용과 최적화 기능 Three.js의 BatchedMesh 클래스는 WEBGL_multi_draw (구체적으로 multiDraw API)를 내부적으로 활용합니다 [1, 2]. 이를 통해 메모리에서 지오메트리를 중복시키지 않으면서도 지오메트리별 정렬(Sorting), 시야 절두체 컬링(Frustum Culling), 가시성 전환(Visibility Toggling), 인스턴싱 등의 기능을 단일 드로우 콜 내에서 수행할 수 있습니다 [2].
InstancedDraw와의 성능 비교 수십만 개(예: 10만 개 이상)의 동일한 인스턴스를 그릴 때는 [[InstancedMesh|InstancedMesh]]가 사용하는 instancedDraw가 더 우수한 성능을 발휘합니다 [3]. 반면, 1,000개 이상의 각기 다른 '고유한(unique)' 지오메트리 객체들을 그려야 할 때는 multiDrawElementsWEBGL이 매우 유용합니다 [8]. 10만 개의 고유 지오메트리를 기존의 바인딩 및 렌더링 호출(bindVertexArray + drawElements)로 처리하는 것과 비교하면, multiDraw 방식이 수천 배 더 빠른 속도를 제공합니다 [9].
인스턴싱 지원 변형 (Instanced Variants) 이 확장 기능에는 multiDrawArraysInstancedWEBGL 및 multiDrawElementsInstancedWEBGL과 같은 인스턴싱 지원 변형 함수도 포함되어 있습니다 [10]. 이들은 수천 개의 고유 객체와 다수의 인스턴스가 혼합된 복잡한 환경에서 객체들을 하나의 드로우 콜로 묶어 렌더링할 수 있게 해줍니다 [8].
브라우저 호환성 제약 Firefox 브라우저에서는 현재 WEBGL_multi_draw 확장을 지원하지 않습니다 [6, 11]. 이로 인해 Three.js 환경에서는 Firefox 지원을 위해 gl_DrawID를 에뮬레이트하는 속성을 추가하고, 지원되지 않을 경우 각 메쉬마다 새로운 드로우 콜을 생성하도록 하는 대체 수단(Fallback)이 필요합니다 [12].
성능 병목 현상 및 기술적 한계 지오메트리 수가 20만 개에 달할 정도로 규모가 커지면 BatchedMesh 사용 시 오히려 CPU 점유율이 치솟고 프레임이 심각하게 떨어지는 문제가 보고되었습니다 [13, 14]. 이는 매 프레임마다 드로우 "시작점(stArts)"과 "카운트(counts)" 정보를 담은 약 1.6MB 규모의 버퍼 데이터를 GPU로 업로드해야 하는 통신 오버헤드나, 인디렉트 텍스처 업데이트 지연과 관련이 있을 것으로 추정됩니다 [7, 15]. 또한 인스턴스 렌더링을 적용할 때 multiDrawArraysInstancedWEBGL 방식으로는 셰이더 내에서 특정 행렬이나 색상에 접근하기 위한 인스턴스 ID를 직접 검색할 방법이 없어 부가적인 텍스처 우회 처리가 요구되는 한계도 있습니다 [16].

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

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

🔗 지식 연결 (Graph)

Related Topics: BatchedMesh, InstancedMesh, Draw Call
Projects/Contexts: Three.js, WebGL
Contradictions/Notes: WEBGL_multi_draw는 다수의 고유 객체를 그릴 때 CPU의 드로우 콜 병목을 해소하기 위해 설계되었으나 [1, 9], 역설적으로 특정 임계치(예: 수십만 단위)를 넘어서면 관련 버퍼 업로드 및 GPU 텍스처 업데이트 비용 때문에 오히려 병합된 지오메트리(Merged Geometry) 방식보다 성능이 30~50% 더 악화되는 실증적 모순이 관찰되었습니다 [7, 17, 18].

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

💻 코드 패턴 (Code Patterns)

패턴 1: (TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)

# TODO

🤔 의사결정 기준 (Decision Criteria)

선택 A를 써야 할 때:

(TODO)

선택 B를 써야 할 때:

(TODO)

기본값:

(TODO)

❌ 안티패턴 (Anti-Patterns)

[안티패턴]: (TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)

6.2 KiB Raw Blame History