오늘은 Express Family Web3d의 파일 Data 구조 및 모델 로딩 방식을 크게 수정했습니다.
이전의 Data를 수정하는것이 쉽지 않은 매우 귀찮은 부분인데 이렇게 변경한 이유는 크게 대용량 처리와 속도 그리고 확장성을 가지기 위함입니다.
샘플 프로젝트 SampleProject_Villa_2_7_animatedTrees.rvt 를 변환한 모습
와이어프레임의 모습
사실 이 엡은 대용량 처리가 원활하지 않아서 내부적으로 일정 크기 이상은 보여지지 않고 메시지 모델을 보여지도록 처리를 했습니다. 하지만 Revit의 아니 BIM의 모델 크기가 큰 것들이 많아서 이렇게 반쪽짜리 기능은 썩 맘에 들지 않았습니다.
첫번째로 수정한 것은 기존의 json형태의 웹3d 포멧의 크기를 최소화 하기 위에서 압축 방식을 사용하기로 했습니다. Web3d 내용을 담고있는 json 포멧은 문자 파일이라 보시면 됩니다. 이것을 압축하게 되면 크기를 최소화 할수 있게됩니다. 그리고 실행시 웹 브라우져 상에서 해제해도 Javascript의 버퍼 크기 때문에 오버플로우가 발생을 피할 수 있도록 Geometry 정보와 UserData 정보를 분리해서 압축했습니다.
ef3d 파일을 7Z 압축 프로그램으로 열었을때 모습
ef3d 압축 파일의 크기
이전 버전까지 사용하던 json 확장자는 fw3d 로 변경을 시켰습니다.
두번째로 Javascript에서 fw3d 압축 파일을 풀고 web3d object를 구성할때 자바 스크립트가 폭발하지 않도록 기존 Threejs의 라이브러리를 수정해서 적당한 시간을 두고 단계적으로 처리하도록 했습니다.
그결과 800MB이상의 모델을 안정적으로 웹 브라우져에서 띄울수 있게 되었습니다.
- 크롬 브라우져 열림
- 엣지 브라우져 열림
- IE 브라우져 실패 (기대하지 않았지만 혹시나 하는 마음으로 시도해봄)
그래도 Mesh의 개수가 많은 관계로 사용자 컨트롤시 최대한 FPS을 확보하기 위해서 몇가지 사용하던 트릭을 수정하게 되었습니다. Mesh 객체의 총 갯수중에서 특정수 이상에서 Visible설정과 효과를 On/Off하는 방식으로 사용자가 제어할때 답답함을 최소화 하게 처리했습니다. (카메라와 가까운 모델은 Visible을 변경하지 않습니다)
세번째로 BIM모델의 속성정보를 자바스크립트 객체에 넣던 방식을 웹브라우져내의 IndexedDB에 저장하고 필요할때 사용할 수 있도록 변경을 했습니다.
정말이지 제한된 웹브라우져 환경에서 대용량 모델들을 보여준다는것은 쉽지 않은 작업인것 같습니다.
그래도 geometry의 크기가 클수 있다는 불안감이 엄습하네요. 이것 또한 분할해서 압축파일에 넣고 로딩할 수 있게 변경해야 할 것 같습니다.
1GB 데이타를 자연스럽게 동작시킬때 까지 미친짓은 계속 될것 같습니다.
1.54GB (1,660,179,256 바이트)
시스템 사양
기종 : ThinkPad T550 노트북
CPU : Intel(R) Core(TM) i7-5600 CPU @ 2.60GHz , 6Core
GPU : Intel(R) HD Graphics 5500, 8GB
메모리 : 16GB
디스크 : SSD TOSHIBA THNSNJ512GCSU
덧글