Wafermap 3D

검증 질문

개요

검토와 구현

전환 전에 ECharts-GL의 확장 지점을 따라가기

검증 질문. 기존 차트의 옵션과 데이터 모델이 3D 형상과 상호작용으로 이어지는 경로를 확인하며 활용 가능성을 검토했습니다.

검토. Bar3D의 시리즈 모델, 좌표계 layout, View와 geometry를 따라갔습니다. 로컬에는 설명 주석과 분석 메모가 남아 있었고 배포 원본과 다른 부분도 있어 버전을 고정한 소스와 대조했습니다.

flowchart LR
    Option["시리즈 옵션과 데이터"] --> Model["데이터 모델"]
    Model --> Layout["좌표 변환과 layout"]
    Layout --> View["View의 항목 처리"]
    View --> Geometry["geometry와 버퍼"]

확인 범위. 라이브러리가 제공하는 경로와 확장 지점을 조사한 기록입니다. 당시 메모의 성능 예시를 실제 벤치마크로 옮기지 않았고 ECharts-GL보다 Three.js가 빠르다는 결론도 추가하지 않았습니다. 자세한 분석은 ECharts-GL의 Bar3D 소스 읽기에 정리했습니다.

화면의 드래그 좌표를 선택 데이터로 바꾸기

검증 질문. 3D 화면에서 그린 영역과 shot, focus spot의 좌표를 같은 기준으로 비교해야 했습니다.

구현. 포인터의 화면 좌표를 정규화하고 raycaster와 평면의 교차점을 구해 그리드 좌표로 바꿨습니다. 시작점과 끝점을 store에 두고 선택을 끝낼 때 데이터를 걸렀습니다.

flowchart LR
    Pointer["포인터의 화면 좌표"] --> Ray["ray와 평면의 교차점"]
    Ray --> Grid["그리드 좌표의 시작과 종료"]
    Grid --> Filter["사각형 또는 원형 판정"]
    Filter --> Store["선택한 shot과 focus spot"]
    Store --> Table["데이터 표와 선택 개수"]

const minX = Math.min(selectionArea.startX, selectionArea.endX);
const maxX = Math.max(selectionArea.startX, selectionArea.endX);
const minY = Math.min(selectionArea.startY, selectionArea.endY);
const maxY = Math.max(selectionArea.startY, selectionArea.endY);

const selectedShots = shots.filter(shot =>
  shot.x >= minX && shot.x <= maxX
  && shot.y >= minY && shot.y <= maxY
);

확인 범위. 선택 데이터의 기준을 store에 두고 3D 영역과 표가 같은 결과를 읽도록 연결했습니다. 대규모 데이터의 선택 비용과 모든 카메라 상태의 좌표 정확성은 별도 재현이 필요한 항목으로 남겼습니다.

선택 모드와 실제 드래그 상태를 나누기

검증 질문. 선택하려고 드래그하는 동안 카메라가 같이 움직이면 영역을 그리기 어렵습니다. 선택 기능을 켠 상태와 지금 드래그하고 있는 상태도 서로 다릅니다.

구현. 선택 모드에서는 위에서 내려다보는 카메라 위치를 사용하고 회전을 껐습니다. 실제 드래그 중에는 pan과 zoom을 껐습니다. 데이터 표는 선택 개수와 각 종류의 첫 10개 행을 보여 주도록 만들었습니다.

확인 범위. 카메라 모드와 드래그 상태, 데이터 표를 연결한 부분을 직접 구현했습니다. 같은 계보의 후속 저장소 전체를 별도 본인 프로젝트로 세지 않았습니다.

결과와 남은 과제

전환 전의 라이브러리 검토와 이후 직접 만든 선택 UI를 한 흐름으로 남겼습니다. 다른 웨이퍼 저장소의 분석용 사본은 직접 구현 성과에서 제외했습니다. 실제 대량 데이터, 카메라와 배율에 따른 선택 좌표, 배포와 운영 범위는 추가 확인이 필요합니다.