선택한 단어 수는 입니다.
최소 단어 이상 선택하여야 합니다.
최소 단어 이상 선택하여야 합니다.
선택한 단어 수는 30입니다.
최대 10 단어까지만 선택 가능합니다.
최대 10 단어까지만 선택 가능합니다.
문제 정의
- 만약 인터넷 상에서 서로의 3D 모델링을 서로 같이 보면서 수정할 부분을 고치고 필요한 부분을 더한다면 좀 더 빠르고 효율적인 작업을 할 수 있을 것이다. 따라서 본 논문에서는 효과적이고 즉각적인 소통이 가능한 3D 모델링에 초점을 맞추었다.
- 본 논문에서는 인터넷 웹 브라우저 환경에서 서버-클라이언트 간의 3D 정보 교환을 통해 언제 어디서나 어떤 플랫폼을 이용하든 접근을 쉽게 할 수 있는 3D 협업 모델을 제안한다. 이를 위하여 웹 개발언어 중에서도 크로스 플랫폼을 지원하는 개발 언어인 HTML5와 자바스크립트(JavaScript)를 기반으로 제작했다.
제안 방법
- 첫 번째 단계에서 마우스 드래그 이벤트가 처음 발생한 경우라면 오브젝트의 밑면에 대한 가로, 세로 정보로 인식하여 해당 정보를 이용하여 오브젝트의 밑면을 그린다. 가로, 세로 데이터의 길이는 마우스 업, 마우스 다운 이벤트, 레이 피킹(Ray Picking)을 이용하여 데이터의 변화량으로 계산한다. 첫 번째 단계에서 마우스 드래그 이벤트가 두 번째 발생한 것으로 인식되면 두 번째 단계로 이동한다.
- 먼저 로컬 호스트 내에서 제대로 작동이 되는지 점검하였다. 로컬 호스트로 서버에 접속하여 두 개의 웹 브라우저를 실행하고 하나의 브라우저에서 조작을 하면 다른 브라우저에서도 변경된 내용이 실시간으로 반영되는지 확인하였다.(그림 7).
- js를 이용하여 컴퓨터에 서버를 구축한 후, 앞에서 언급했던 내용을 구현하였다. 먼저 로컬 호스트 내에서 제대로 작동이 되는지 점검하였다. 로컬 호스트로 서버에 접속하여 두 개의 웹 브라우저를 실행하고 하나의 브라우저에서 조작을 하면 다른 브라우저에서도 변경된 내용이 실시간으로 반영되는지 확인하였다.
- 오브젝트의 선택은 레이 캐스팅(RayCasting) 방식을 사용, 마우스로 클릭을 했을 때, 마우스 벡터의 좌표 값을 향해서 카메라에서 직선(picking ray)을 발사한다. 발사된 선(ray)은 처음 부딪히는 오브젝트의 정보를 찾아 배열에 저장, 필요한 클래스에서 사용하도록 구현하였다.
- 또한 크롬이나 파이어폭스와 같이 사람들이 많이 사용하는 웹브라우저들의 자바스크립트 엔진 성능이 향상되면서, 자바 스크립트로 구현되는 웹지엘의 성능도 많이 향상되었다[10]. 본 논문에서 제안한 시스템은 웹지엘을 이용하여 육면체(cube), 구(sphere), 원기둥(cylinder) 등 3D 오브젝트를 생성 할 수 있으며, 오브젝트 변형은 웹지엘 범용 라이브러리인 쓰리제이에스(Three.js)를 사용하여 만들었다. 오브젝트는 버튼을 클릭하여 미리 정해진 기본 값으로 생성하는 방법과 마우스 클릭 후 드래그 하여 생성하는 방법 두 가지를 만들었다.
- 기본적인 변수 설정 방법은 오픈지엘 라이브러리와 유사하다. 본 논문에서는 컨테이너, 카메라(camera), 라이트(light), 씬(scene), 렌더러(renderer) 변수 등을 선언한 후 객체화 시켜준다. 컨테이너 변수는 3D 오브젝트가 구현될 공간을 나타내며, id값을 가져오는 메서드를 사용하여 바디 태그 안에 미리 만들어둔 태그의 id값을 가져와 저장시켜준다.
- js)를 사용하여 만들었다. 오브젝트는 버튼을 클릭하여 미리 정해진 기본 값으로 생성하는 방법과 마우스 클릭 후 드래그 하여 생성하는 방법 두 가지를 만들었다.
- 전체적인 시스템 아키텍처를 구성할 때(그림2) 기본적인 인터페이스를 구성에는 HTML5 와 J-Query로 구현했다. 웹 환경에서 그래픽을 구현 할 땐 캔버스(Canvas), 가변 벡터 도형 처리(SVG), 웹지엘을 사용하는 방법이 있는데 본 연구에서는 자바스크립트가 API로 제공되는 웹지엘을 사용했다. 캔버스나 가변 벡터 도형 처리는 2D 그래픽을 구현할 경우에는 문제가 없지만 3D 그래픽을 구현할 수 없다는 한계가 있다.
- 이를 위하여 본 연구에서는 웹지엘을 이용한 웹상에서의 3D 구현과 협업에 초점을 맞추어 인터넷에서 오브젝트 구현과 동시에 많은 사람들과 소통이 가능하도록 하였다. 이로써 복잡하고 실시간 소통이 불가능한 정보 공유가 아닌 이용자들 간의 간단하고 즉각적인 반응이 가능하도록 하여 그래픽 산업에서의 효과적인 협업과정 모델을 수행할 수 있다.
- 본 논문에서는 인터넷 웹 브라우저 환경에서 서버-클라이언트 간의 3D 정보 교환을 통해 언제 어디서나 어떤 플랫폼을 이용하든 접근을 쉽게 할 수 있는 3D 협업 모델을 제안한다. 이를 위하여 웹 개발언어 중에서도 크로스 플랫폼을 지원하는 개발 언어인 HTML5와 자바스크립트(JavaScript)를 기반으로 제작했다.
대상 데이터
- 카메라는 원근 카메라(perspectiveCamera)를 사용하며 위치 좌표는(1000,500,1000), 룩엣(lookat) 메서드를 사용하여 카메라가(0,200,0)를 향하도록 설정한다. 라이트는 기본설정에는 디렉셔널 라이트(Directional Light)를 사용했다. 씬 구성에 필요한 변수들의 객체화가 끝난 후엔 에드(add) 메서드를 이용하여 씬에 등록한다.
- 컨테이너 변수는 3D 오브젝트가 구현될 공간을 나타내며, id값을 가져오는 메서드를 사용하여 바디 태그 안에 미리 만들어둔 태그의 id값을 가져와 저장시켜준다. 카메라는 원근 카메라(perspectiveCamera)를 사용하며 위치 좌표는(1000,500,1000), 룩엣(lookat) 메서드를 사용하여 카메라가(0,200,0)를 향하도록 설정한다. 라이트는 기본설정에는 디렉셔널 라이트(Directional Light)를 사용했다.
이론/모형
- 실시간 인터랙션을 위해서는 클라이언트간의 데이터를 공유해줄 서버가 필요하다. 서버 프로그래밍에는 여러 가지 방법이 있는데, 그 중에서 서버 사이드 언어로 자바스크립트를 기반으로 한 Node.js를 이용하였다. Node.
- 선택기능(select)의 구현은 레이 피킹 방식을 이용했다. 컨테이너 안을 클릭했을 때, 마우스 벡터 x, y값을 계산한다.
- js)를 이용하여 구현한다. 오브젝트의 선택은 레이 캐스팅(RayCasting) 방식을 사용, 마우스로 클릭을 했을 때, 마우스 벡터의 좌표 값을 향해서 카메라에서 직선(picking ray)을 발사한다. 발사된 선(ray)은 처음 부딪히는 오브젝트의 정보를 찾아 배열에 저장, 필요한 클래스에서 사용하도록 구현하였다.
- 클라이언트 간의 데이터 교환은 소켓 통신과 이벤트 구동형 (event-driven) 방식을 이용한다. 소켓 온(socket.
성능/효과
- 다음으로 외부 컴퓨터에서 서버가 설치된 컴퓨터에 접속하여 외부 컴퓨터에서도 오브젝트조작을 할 수 있음을 확인하고. 변경된 내용을 실시간으로 다른 컴퓨터와 공유하고 있다.
- 후자의 경우 반대로, 오브젝트의 변형을 통해 의견을 좀 더 자세하게 표현할 수 있지만, 툴이나 뷰어 등 프로그램 없이는 볼 없다는 단점이 있다. 따라서 본 연구에서는 여러 번 수정을 하여 파일을 보낼 필요가 없으므로, 작업 시간을 단축하여 효율성 높은 작업이 가능하다. 또한 웹 브라우저를 이용하기 때문에, 웹 브라우저가 웹지엘만 지원해준다면 OS에 종속되지 않고 간편하고 쉽게 사용할 수 있다.
- 실제로 물리적으로 멀리 떨어진 장소에서 모델링을 해본 결과, 실시간으로 의견을 나누면서 모델링 작업하니 적은 시간 안에 서로가 원하는 결과물을 만들어 낼 수 있었다. 또 전용 프로그램을 설치하는 번거로움을 줄일 수 있고 내보내기하여 서로 주고받는 시간을 줄여 작업 시간을 크게 단축시킬 수 있었다.
- 본 논문에서 제안한 시스템을 이용하면 실시간으로 오브젝트를 변형해가며 의견을 나눌 수 있기 때문에 좀 더 시각적이고 상호간의 소통이 가능하다. 협업할 때 자신이 만든 3D 모델을 다른 사람에게 보여주려면 스크린 샷을 찍거나, 프로그램에서 내보내기(Export)를 해준 파일을 보내주는 방법이 있다.
- 본 연구에서는 여러 사람들이 동시에 상호작용이 가능한 웹 환경을 제작하여 기존의 폐쇄적인 모델링 환경을 벗어난 실시간 협업 모델을 제안하였으며 실시간 피드백이 가능하고 3D 모델링 파일을 변환하거나 따로 내보내기하여 다른 사람들에게 보내야 하는 번거로운 작업을 줄임으로써 3D 모델링 작업 환경을 개선 할 수 있음을 보였다. 본 시스템은 5가지 기본 오브젝트와 밀어내기 기능을 제공하고 있으며 개별 컴퓨터에서 여러 가지 뷰를 자유롭게 볼 수 있다.
- 만약 외부 컴퓨터에서 구를 추가했다면 서버에 접속된 모든 컴퓨터에서 구가 추가된 것을 확인 할 수 있다. 외부 컴퓨터에서는 같은 오브젝트 정보를 마우스를 이용하여 카메라 위치에 따라 다른 각도에서 볼 수도 있으며, 서버 컴퓨터와 외부 컴퓨터에서 동시에 조작도 가능함을 확인하였다(그림 8).
- 또한 웹지엘뿐만 아니라 C3DL에 기반을 둔 모션뷰(Motionview)라는 웹 어플리케이션을 제안하여 아티스트나 모션캡처 스튜디오에서 사용자들이 서로 소통을 할 수 있도록 만든 바 있다[8]. 이 어플리케이션에서는 C3DL이라는 자바스크립트 라이브러리를 사용하여 웹지엘이나 3D 수학적 연산의 복잡성 없이 3D 콘텐츠를 웹 브라우저에 기본적인 3D 기능성을 제공하였다. [11]은 소셜 서비스를 위한 시공간 모델링 방안으로 장소와 시간, 이벤트, 사용자의 소셜 액티비티를 통해 휴먼 액티비티 그래프(Human Activity Graph)모델링 방안과 쿼드 릴레이션 팩터스(Quad Relation Factors)를 제안하고, 이를 위한 데이터 수집과 분석을 위한 하부 구조를 설계하였다.
후속연구
- 그러나 오늘날 인터넷 공간 안에서 공유하는 콘텐츠가 텍스트, 이미지와 같은 단면적인 정보들에서 복잡하고 다양한 동영상, 3D 모델링과 같은 멀티미디어 정보들로 바뀌어 가는 상황에서 이러한 평면적이고 단순한 인터페이스가 사용자들에게 효과적으로 정보를 전달하기에는 한계가 있다. 따라서 웹상에서 3D 효과를 구현한다면 사용자가 좀 더 효율적으로 정보를 받아들일 수 있을 것이다.
- 본 논문에서 제시한 예시 모델링은 비교적 단순한 모델에 대해 테스트하였는데, 보다 세밀하고 복잡한 모델로의 확장은 기술적으로 차이가 없으므로 실제 현장에서는 복잡한 모델에 충분히 적용될 수 있으며 모델링 단계별 작업 내역을 히스토리로 저장하는 기능이 추가된다면 사용자가 원하는 단계별 진행사항을 확인 할 수 있을 것이다. 또한 사용자가 3D 모델링 전용 소프트웨어에서 작업한 파일을 바로 웹 브라우저에서 볼 수 있도록 여러 가지 파일 형식을 지원하는 가져오기 기능과 웹 브라우저에서의 협업 후 수정된 3D 모델링을 바로 내보내기하여 다시 개별작업을 할 수 있도록 한다면 더욱 개선된 서비스를 제공 할 수 있을 것이다.
- 즉, 각 분야에서 협업하는 구성원들과 즉각적인 피드백을 할 수 없으며 느리고 번거로운 과정을 거치게 된다. 만약 인터넷 상에서 서로의 3D 모델링을 서로 같이 보면서 수정할 부분을 고치고 필요한 부분을 더한다면 좀 더 빠르고 효율적인 작업을 할 수 있을 것이다. 따라서 본 논문에서는 효과적이고 즉각적인 소통이 가능한 3D 모델링에 초점을 맞추었다.
- 본 시스템은 5가지 기본 오브젝트와 밀어내기 기능을 제공하고 있으며 개별 컴퓨터에서 여러 가지 뷰를 자유롭게 볼 수 있다. 본 논문에서 제시한 예시 모델링은 비교적 단순한 모델에 대해 테스트하였는데, 보다 세밀하고 복잡한 모델로의 확장은 기술적으로 차이가 없으므로 실제 현장에서는 복잡한 모델에 충분히 적용될 수 있으며 모델링 단계별 작업 내역을 히스토리로 저장하는 기능이 추가된다면 사용자가 원하는 단계별 진행사항을 확인 할 수 있을 것이다. 또한 사용자가 3D 모델링 전용 소프트웨어에서 작업한 파일을 바로 웹 브라우저에서 볼 수 있도록 여러 가지 파일 형식을 지원하는 가져오기 기능과 웹 브라우저에서의 협업 후 수정된 3D 모델링을 바로 내보내기하여 다시 개별작업을 할 수 있도록 한다면 더욱 개선된 서비스를 제공 할 수 있을 것이다.
※ AI-Helper는 부적절한 답변을 할 수 있습니다.