Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (16)
Room Planner Project
- 2. 2D Editer 실내 인테리어 공간 3D Viewer 2D Editer에서 배치한 가구들을 3D Viewer를 통해 시뮬레이션
- 3. 발표 내용 1. 동기 2. 주요기능 시연 3. 기술 소개 4. 마치며
- 5. 현황과 문제점 인테리어의 어려움 국내사이트의 부재 전문적인 툴 사용
- 6. 플러그인화를 통한 넓은 활용도 (온라인 쇼핑몰 / 오픈 마켓 등에서의 활용) 쉽고 간편한, 넓은 활용도 직관적인 화면구성 전문지식이 필요로 하지 않음 해결방안
- 8. 주요 기술 소개
- 9. 강력하고 간단한 자바스크립트 HTML5 Canvas 라이브러리 HTML Cnavas? Canvas 태그는 자바스크립트를 통해 다양한 그림을 그릴 수 있는 공간을 제공
- 10. Three.js? WebGL 을 보다 쉽게 사용하게 만든 라이브러리 WebGL? OpenGL 에 기반한 웹 표준 그래픽 라이브러리 플러그인 불필요 특히 3D를 표현에 적합 HTML Canvas API 요소의 일부분
- 11. 팀원소개 조장 송진수 조장 송진수 조원 고은혜 조원 박우균
Editor's Notes
- 안녕하세요. Room Planner 프로젝트 발표를 시작하겠습니다.
- 저희 Room Planner는 실내 인테리어를 2d에디터와 3d 뷰어를 통해 시뮬레이션 할 수 있는 웹 서비스 입니다.
- - 발표는 위와 같은 순서로 프로젝트 발표를 진행하겠습니다
- 여러분 한번쯤 실내구조 변경을 생각 해보신 적 이 있으십니까? 저 같은 경우 기분전환이나 집안환경 개선을 위해 실내구조 변경을 생각해 본 적이 있습니다.
- 하지만, 셀프 인테리어를 실행에 옮기기란 쉽지 않았습니다. 장롱이나 침대와 같은 커다란 가구를 옮기는 일이나. 벽지 혹은 바닥재나 화장실 타일 교체 역시 어려운 부분입니다. 이러한 고민을 덜어 줄 수 있는 서비스와 툴 등을 수소문 해보았지만. 대부분 해외서비스 이거나 전문가적인 지식이 필요한 툴들뿐이었습니다.
- 이와 같은 문제점들을 덜어보고자 일반 사용자들이 사용하기 쉽도록 아이콘 위주의 직관적이고 간편한 툴 제작을 생각하게 되었습니다.
- 저희 Room Planner 시연과 함께 주요기능을 살펴보시겠습니다.
- 저희 Room Planner에 적용 된 기술을 소개하겠습니다. 기본적인 화면 및 메뉴 구성은 HTML5와 CSS3 를 이용해서 구성하였습니다. 2d 에디트 화면은 HTML Canvas와 Canvas의 라이브러리인 Fabric.js 를 사용했으며 3d 뷰 화면은 WebGL의 경량 라이브러리인 three.js 를 사용하였습니다. 이들의 동적 이벤트는 자바스크립트와 제이쿼리를 사용하였습니다. 이중에 저희 Room Planner 의 핵심 적용 기술인 Fabric.js 와 three.js 라이브러리를 소개하도록 하겠습니다.
- Fabric.js 는 HTML5 Canvas의 라이브러리로 Canvas에서 프리드로잉 , 객체의 드래그 앤 드랍 , 회전과 크기조절 이미지 객체 나 텍스트 에디팅이 가능한 객체 제공 등의 기술을 지원합니다. 이를 통해 저희 Room Planner 2d editer의 도면과 오브젝트 생성 과 배치 조작 등에 기술이 적용되었습니다.<스페이스>
- 3d 뷰어를 구현하는데 적용한 핵심 기술인 Three.js 는 복잡한 WebGL의 작업을 간소화 해주는 자바스크립트 라이브러리 입니다. WebGL은 웹브라우저에서 제공하는 3차원 그래픽 자바스크립트 API 로서 플래시 , 실버라이트, 유니티 등의 플러그인이 없이 사용이 가능하고, GPU 가속을 사용한 높은 성능의 그래픽 구현이 가능하며, 이를 통해 웹에서도 고퀄리티의 3d게임 구현도 가능합니다. 이 WebGL을 이용해 단순한 평면 삼각형을 하나 그리는데 60~70줄 짜리 코드를 코딩 하였다면, Three.js 를 이용해서 회전하는 구체를 그리는데 30~40줄의 코드만 있으면 가능할 정도로 소스코드를 간소화 할 수 있는 라이브러리 입니다. 이상으로 저희 Room Planner의 핵심 기술인 fabric.js 와 three.js의 소개를 마치겠습니다.