230610 - ThreeJS Viewer [kor]

[dusunax]

230610 - ThreeJS Viewer

2. Render 3D file

Task	Description	Status
A. Render 3D file	(1st phase) convert DICOM file to ply file by outside of the code.	Skiped (230611)
	(2st phase) render ply file, using threeJS.	Completed (230610)

• [prev_230607] #4
• [2-A-1, 2-A-2] from #5
• A-1. Converting DCM files to PLY (On hold as of 230609)
  • Reference Search_230608: Online file conversion (x), export to PLY format using viewer program (x
  • Attempted implementation of converter_230609: Dicom parser, vtk.js (pending)
• A-2. Rendering files_230610: Rendering PLY format files using three.js (completed)

  
  (Additional goals)

• [UX] Enable changing PLY files using input:file, display loading state
• [Docs] Refer to the official documentation and types of the ThreeJS library, improve understanding of WebGL usage
• [Refactor] Organize components and custom hooks for writing reusable code

  
  ---
  ### 🗂 Works 작업내용 
  ### A-1. dcm 파일을 ply로 변환 (230609 잠시 보류)

1. 레퍼런스 서치_230608 : 온라인 파일 변환 (x), 뷰어 프로그램을 사용해 ply포맷으로 export (x)
2. converter 구현 시도_230609 : dicom parser, vtk.js (x)

A-2. ply 파일을 랜더링

1. 파일을 랜더링_230610: three.js를 사용해 ply 포맷의 파일 랜더링 (o)

(추가 목표)

• input:file을 사용해 ply 파일을 변경할 수 있도록 하기, 로딩 중 상태를 표시
• ThreeJS 라이브러리 공식문서+타입을 확인하고, WebGL을 사용법의 이해도를 높이기

• 컴포넌트와 커스텀훅을 정리하여 재사용할 수 있는 코드 작성

A-1. dcm 파일을 ply로 변환

레퍼런스 서치_ 230608 (변환 실패)

• dcm 파일을 3D volume으로 바로 랜더링할 때 에러가 발생하는 이슈로 인해서, dcm 파일을 우선 ply로 변환하여 사용하는 방법으로 진행하기로 했고, 이를 구현하기 위해 레퍼런스를 찾는 과정을 6월 8일에 진행

1. 여러 온라인 파일 convert 사이트를 찾아보았으나, dcm에서 ply로 파일이 변환되지 않음.(선택 옵션에는 있으나, 변환 실패)
2. 솔루션 및 소스 코드를 찾아봄 Medit Link sw mathworks stackoverflow를 참고하여 vtk.js를 사용하여 직접 converter를 구현해보고자 함

converter 구현 시도_230609 (변환 실패)

• frontend\src\components\converter\DicomToPly.tsx
• vtk, binary 데이터에 대한 이해 부족으로 보임

A-2. ply 파일을 랜더링

고려하기

기존에 자바스크립트로 토대로, geometry 요소를 직접 create하거나, glb파일을 로드하여 작업해본 적이 있습니다. 이번 작업에 새로 고려해야 할 점은 다음과 같습니다.

• ply 로드
• 리액트와 타입스크립트

구현 목표

• [x] A-2. ply 파일을 화면에 랜더링(완료)
• [x] 로딩 중 상태를 화면에 표현
• [ ] 선택한 파일을 화면에 출력할 수 있도록 input:file 구현

단위 작업 목표

• 컴포넌트와 커스텀훅을 사용하여 다시 사용할 수 있는 코드를 작성합니다.
• 타입을 확인하며 ThreeJS를 사용한 WebGL 사용법의 이해도를 높입니다.

[dusunax]

PLYModel 에러 확인 및 해결

230610, 2시~3시반 진행

• 문제점
  • scene이 화면에 로드되지 않음
  • 다음 에러 발생

---

문제 원인 찾기 - threeJS의 각 object 확인

랜더러

Scene

loader

geometry

mesh

camera

⛔ OrbitControls ⛔

• 에러 메시지에서도 알 수 있듯이, OrbitControls단에서 에러가 발생한 것을 특정.

  
  camera.position.set(0, 0, 0);
  camera.lookAt(mesh);

console.log(camera);

const controls = new OrbitControls(camera); // 여기 controls.enableZoom = true; controls.autoRotate = true;

- 타입 확인 => 두번째 인자로 container 넘기는 코드 추가
```tsx
(alias) new OrbitControls(object: THREE.Camera, domElement?: HTMLElement | undefined): OrbitControls
import OrbitControls
Orbit controls allow the camera to orbit around a target.

@param object
The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.

@param domElement
The HTML element used for event listeners.

const controls = new OrbitControls(camera, container);
controls.enableZoom = true;
controls.autoRotate = true;

에러 해결 후 🛠

• 에러가 없어지고, scene이 로딩 되었지만 이미지 출력에 이상이 있습니다.

• 예상 문제점: 모델 크기가 너무 큼, 카메라 위치가 잘못됨, 빛이 부족함

  

• 수정 내용

  • camera.position.set(0, 0, 1000);으로 위치 조정
  • container에 appendChild하기 전, 내부의 loading 텍스트 지움

[dusunax]

두 가지 랜더링 방법 구현

랜더링의 경우

1. 최초 로딩 시, string을 전달, loadPLYModelBySrc(디폴트) ⇒ 선 작업 완료
2. 유저 input 시, File을 전달, loadPLYModelByFile ⇒ 작업 중

• 우측 상단 버튼의 기능입니다.
  • 아이콘 바꾸기, 파일 열기가 파일 저장 버튼처럼 보이는 점 => 아이콘을 바꾸고, 아예 canvas 화면을 저장하는 기능과 버튼을 추가하기 (load, save)

함수 분리

• loadPLYModelBySrc => ok

  /** plyPath: 경로의 ply model을 load합니다. */
  function loadPLYModelBySrc(
  renderer: THREE.WebGLRenderer,
  container: any,
  scene: THREE.Scene,
  plyPath: string
  ) {
  console.log("경로 로더");
  
  const loader = new PLYLoader();
  loader.load(plyPath, (geometry) => {
  handleGeometry(renderer, container, scene, geometry);
  });
  }

• handleGeometry

  handleGeometry (
  renderer: THREE.WebGLRenderer,
  container: any,
  scene: THREE.Scene,
  geometry: THREE.BufferGeometry<THREE.NormalBufferAttributes>
  ) => void

• loadPLYModelByFile => 로딩 x

  /** plyFile: ply model File을 load합니다. */
  function loadPLYModelByFile(
  renderer: THREE.WebGLRenderer,
  container: any,
  scene: THREE.Scene,
  plyFile: File
  ) {
  console.log("파일 로더");
  const loader = new PLYLoader();
  
  const reader = new FileReader();
  reader.onload = (event) => {
  if (event.target && event.target.result) {
    let plyData: string | ArrayBuffer = event.target.result;
  
    if (typeof plyData === "string") {
      const encoder = new TextEncoder();
      plyData = encoder.encode(plyData);
    }
  
    const plyDataUint8 = new Uint8Array(plyData);
    const geometry = loader.parse(plyDataUint8);
    console.log(geometry);
  
    handleGeometry(renderer, container, scene, geometry);
    reader.readAsArrayBuffer(plyFile);
  }
  };
  }

⛔ 현재 문제점 230611 (오전 1시) ⛔

• 함수 분리 => 완료
• 경우에 맞는 함수 실행 확인 => 완료
• loadPLYModelByFile 실행 후 mesh 로드되지 않음

[dusunax]

Close issue and move to the next documentation.

• [next_230611] #8