인쇄용 Shade3D 데이터를 three.js로 표시

인쇄용으로 작성된 Shade3D 데이터를 three.js로 표시시키기 위해 변환해 보았을 때의 메모

출력 형식



Shade3D의 대응 출력 파일 형식 중에서 three.js에 대응하고 있는 FBX, Wavefront OBJ(OBJ)당을 출력해 보고 사이즈가 컸기 때문에, 출력된 FBX를 Blender로 열어 glTF로 변환

Shade3D에서 glTF를 가져오기/내보내는 플러그인이 있지만 Standard/Professional 버전에서만 사용할 수 있습니다. (Basic판에서는 사용 불가)

Blender에서 FBX 형식을 glTF 형식으로 변환하여 Three.js에서 애니메이션을 적용합니다 (1/2)

FBX로 변환 할 때 한 작업


  • 형상명을 모두 일본어→반각의 영문자 또는 숫자로 변경

  • 렌더링 부울을 하고 있는 곳은 Shade3D 특유의 기능이므로, 부울 연산을 한다
    불리언이란?
  • 법선 반전
    면의 뒤집어가 있는 경우, 인쇄용의 렌더링은 문제 없지만, FBX 방식으로 내보내면 면이 빠져 버린다.
    이것이 꽤 있었기 때문에, 표시 옵션의 「양면(뒷면 칼라)」로 확인해, 색이 붙은 부분을 자유 곡면등으로부터 폴리곤 메쉬로 변환해, 법선의 반전의 작업을 해 가는(뒤로가 있다 그런데 블루로 표시된다)
    다각형 메쉬의 법선을 반전
  • 형상은 폴리곤 메쉬로 한다
    자유 곡면에서도 FBX 내보내기시 자동으로 다각형 메쉬로 변환되지만 너무 작거나 낭비가 많을 수 있으므로 Shade3D에서 다각형 메쉬로 변환하여 미리 최적화 할 수 있습니다.
  • 표면 재질은 마스터 서피스화
    이것은 데이터에서 재료가 마스터 서피스 되었기 때문에 그대로

  • fbx 형식으로 내보낼 때주의해야 할 점

    위의 작업으로 처음 내보내면 면이 빠진 부분이 표시되게 되었다.

    three.js로 표시



    three.js examples의 webgl_loader_gltf.html 소스 참조
    three.js examples

    앞으로



    변환한 데이터의 사이즈는 obj나 fbx의 사이즈보다는 작아졌지만, glTF+bin 파일로 상당한 크기였기 때문에 타블렛에서는 표시할 수 없었다.
    보다, 사이즈를 작게 하는 방책을 생각하고 싶다.

    변환된 원 데이터가 미세한 데이터이었기 때문에, 폴리곤 메쉬를 거칠게 하는 것은 표시가 상당히 열화하지만 극적으로 사이즈가 줄어들지는 않았다. DRACO 압축도 했지만 obj 파일은 극적으로 크기가 줄었지만 mtl 파일을 압축 파일에 적용하는 방법을 몰랐다. 또, glTF 2.0 확장 사양의 Draco 확장도 했지만, 왠지 용량이 늘어나는 것에. . 이것은 방법이 나쁜 것인가. 이 근처도 더 알아보고 싶다.
    극적으로 3D 데이터 용량을 줄이는 DRACO 압축 데이터를 자전으로 그리는 방법

    좋은 웹페이지 즐겨찾기