WO2014051250A1

WO2014051250A1 - 3차원 객체 생성 장치 및 그 방법

Info

Publication number: WO2014051250A1
Application number: PCT/KR2013/006915
Authority: WO
Inventors: 심욱
Original assignee: 에스케이플래닛 주식회사
Priority date: 2012-09-26
Filing date: 2013-07-31
Publication date: 2014-04-03
Also published as: CN104254878B; KR20140040416A; US9367957B2; CN107256207B; KR101911906B1; CN107256207A; US20150371441A1; CN104254878A; JP2015518217A; JP5908653B2

Abstract

본 발명은 3차원 객체 생성 장치 및 방법에 관한 것으로, 2차원 웹 페이지의 구성 요소를 격자화 및 다수의 폴리곤으로 나누어 3차원 객체를 생성하는 3차원 객체 생성부, 상기 생성된 3차원 객체에서 객체 조작 신호가 입력되면, 상기 객체 조작 신호에 따라 해당 개별 격자 요소의 꼭지점 좌표값을 변경하여 3D transform matrix를 생성하고, 상기 생성된 3D transform matrix를 기 정의된 CSS transform에 적용하여 변형된 3차원 객체를 생성하는 3차원 객체 조작 처리부를 포함한다.

Description

3차원 객체 생성 장치 및 그 방법

본 발명은 3차원 객체 생성 장치 및 그 방법에 관한 것으로, 보다 상세하게는 2차원 웹 페이지의 구성 요소를 격자화 및 다수의 폴리곤(polygon)으로 나누어 3차원 객체를 생성하고, 생성된 3차원 객체에서 객체 조작 신호가 입력된 경우, 객체 조작 신호에 따라 해당 개별 격자 요소의 꼭지점 좌표값을 변경하여 3D transform matrix를 생성하고, 생성된 3D transform matrix를 기 정의된 CSS(cascading style sheet) transform에 적용하여 변형된 3차원 객체를 생성하는 3차원 객체 생성 장치 및 그 방법에 관한 것이다.

최근 자동화가 진전되고 정보사회로의 발전이 진행되면서 컴퓨터 그래픽의 응용분야가 급속히 확대되고 있으며, 특히 3차원 그래픽을 이용하는 분야가 급증하고 있다.

종래에 제공되는 대부분의 3차원 객체 시스템은 3차원 폴리곤(polygon) 처리 방식을 사용하여 3차원 객체를 생성 및 조작하고 있다. 폴리곤은 3차원 컴퓨터 그래픽에서 입체 형상을 표현할 때 사용하는 가장 작은 단위인 다각형을 의미한다.

한편, 웹 페이지에서 3D 기술을 제공하기 위한 대표적인 방식으로 WebGL이 사용되고 있다. WebGL의 경우 가장 기본적이고 보편적인 3D 그래픽 기술인 OpenGL과 유사한 기술로 low-level 개발 환경을 통해 임의의 형태를 지닌 폴리곤 객체의 생성 및 조작이 가능하여 3D 게임 등에 광범위하게 활용될 수 있다.

그러나, WebGL은 PC 환경에서 Chrome 등의 최신 브라우저만 지원하며 성능 및 호환성 등의 이유로 모바일 기기에서는 지원하지 못하는 단점이 있다.

본 발명은 상기한 문제점을 해결하기 위하여 안출된 것으로, 본 발명의 목적은 사각형 형태의 quadrangle을 기본 요소로 삼각형 형태의 폴리곤(polygon)을 에뮬레이션(emulation)함으로써, 기본적인 3차원 변형 기술(3d transform)인 rotate, translate, scale과 2차원 변형 기술(2d transform)인 skew만으로도 폴리곤 형태의 3차원 객체를 생성하고 조작할 수 있도록 하는 3차원 객체 생성 장치 및 그 방법을 제공하는데 있다.

본 발명의 또 다른 목적은 모바일 기기에서 지원 가능한 CSS 2D/3D Transform 기술을 활용하여 Genie Effect, 3D Morphing, Page turn effect 등의 효과를 구현할 수 있을 뿐 아니라, 폴리곤 기반의 3차원 객체 생성 및 조작을 가능하게 하는 3차원 객체 생성 장치 및 그 방법을 제공하는데 있다.

본 발명의 또 다른 목적은 기본적인 3D transform만을 지원하는 제한된 환경(예컨대 모바일 웹)에서도 임의 형태를 지닌 폴리곤 기반의 3차원 객체를 생성 및 조작함으로써, 다양한 사용자 인터페이스 및 그래픽 효과를 제공할 수 있는 3차원 객체 생성 장치 및 그 방법을 제공하는데 있다.

본 발명의 또 다른 목적은 웹 기반 요소의 격자화를 통해 폴리곤 기반의 3차원 객체를 생성할 수 있는 3차원 객체 생성 장치 및 그 방법을 제공하는데 있다.

상술한 과제를 해결하기 위한 본 발명의 일 측면에 따르면, 2차원 웹 페이지의 구성 요소를 격자화 및 다수의 폴리곤으로 나누어 3차원 객체를 생성하는 3차원 객체 생성부, 상기 생성된 3차원 객체에서 객체 조작 신호가 입력되면, 상기 객체 조작 신호에 따라 해당 개별 격자 요소의 꼭지점 좌표값을 변경하여 3D transform matrix를 생성하고, 상기 생성된 3D transform matrix를 기 정의된 CSS transform에 적용하여 변형된 3차원 객체를 생성하는 3차원 객체 조작 처리부를 포함하는 3차원 객체 생성 장치가 제공된다.

상기 3차원 객체 생성부는 상기 웹 페이지의 구성요소를 일정 개수의 사각형 격자로 균일하게 나누어 사각형 격자 요소를 생성하는 사각형 격자요소 생성모듈, 상기 생성된 각 사각형 격자 요소의 대각 방향 꼭지점을 이어서 두 개의 삼각형으로 나누고, 각 사각형 격자 요소를 복제한 후, 두 사각형이 서로 다른 삼각형 영역만 보이도록 투명도를 조절하여 다수의 폴리곤을 생성하는 3차원 객체 생성 모듈을 포함할 수 있다.

상기 사각형 격자 요소 생성 모듈은 상기 웹 페이지의 구성요소가 이미지인 경우, 원본 이미지에 대응되는 격자 형태의 개별 이미지를 서비스 제공 장치로부터 전달받거나 브라우저 내부 연산을 통해 원본 이미지를 비트맵 형태로 변환한 후 격자 이미지를 자체적으로 생성하고, 상기 웹 페이지의 구성 요소가 이미지가 아닌 경우, 구분 태그를 이용하여 사각형 격자 요소를 생성할 수 있다.

상기 3차원 객체 생성 모듈은 상기 구성 요소가 보여지는 삼각형 이외 영역의 투명도를 '0'으로 설정하여, 해당 두 사각형의 서로 다른 영역의 삼각형에서만 구성요소가 보이도록 할 수 있다.

상기 3차원 객체 조작 처리부는 상기 3차원 객체 생성부에서 생성된 3차원 객체를 구성하는 각 격자 요소의 꼭지점 좌표값을 저장하는 좌표값 저장 모듈, 상기 3차원 객체에서 객체 조작 신호가 입력된 경우, 상기 객체 조작 신호에 따라 개별 격자 요소의 꼭지점 좌표값을 변경하고, 상기 변경된 꼭지점 좌표값과 상기 좌표값 저장 모듈에 저장된 꼭지점 좌표값을 이용하여 각 격자 요소들의 3D transform matrix를 생성하는 3D transform matrix 생성 모듈, 상기 생성된 3D transform matrix를 CSS transform에 적용하여 변형된 3차원 객체를 생성하는 3차원 객체 변형 모듈을 포함할 수 있다.

본 발명의 다른 측면에 따르면, 3차원 객체 생성 장치가 2차원의 웹 페이지 구성요소를 3차원 객체로 생성 및 조작하는 방법에 있어서, (a) 상기 웹 페이지의 구성요소를 일정 개수의 사각형 격자로 균일하게 나누어 사각형 격자 요소를 생성하는 단계, (b) 상기 생성된 각 사각형 격자 요소의 대각 방향 꼭지점을 이어서 두 개의 삼각형으로 나누고, 각 사각형 격자 요소를 복제한 후, 두 사각형이 서로 다른 삼각형 영역만 보이도록 투명도를 조절하여 3차원 객체를 생성하는 단계를 포함하는 3차원 객체 생성 방법이 제공된다.

상기 3차원 객체 생성 방법은 상기 (b) 단계 이후, 상기 생성된 3차원 객체에서 객체 조작 신호가 입력된 경우, 상기 객체 조작 신호에 따라 개별 격자 요소의 꼭지점 좌표값을 변경하고, 상기 변경된 꼭지점 좌표값과 변경전 꼭지점 좌표값을 이용하여 각 격자 요소들의 3D transform matrix를 생성하는 단계, 상기 생성된 3D transform matrix를 기 정의된 CSS transform에 적용하여 변형된 3차원 객체를 생성하는 단계를 더 포함하는 것을 특징으로 하는 3차원 객체 생성 방법이 제공된다.

상기 (b) 단계에서, 상기 웹 페이지의 구성요소가 이미지인 경우, 원본 이미지에 대응되는 격자 형태의 개별 이미지를 서비스 제공 장치로부터 전달받거나 브라우저 내부 연산을 통해 원본 이미지를 비트맵 형태로 변환한 후 격자 이미지를 자체적으로 생성하고, 상기 웹 페이지의 구성 요소가 이미지가 아닌 경우, 구분 태그를 이용하여 사각형 격자 요소를 생성할 수 있다.

본 발명의 또 다른 측면에 따르면, 웹 페이지의 구성요소를 일정 개수의 사각형 격자로 균일하게 나누어 사각형 격자 요소를 생성하는 단계, 상기 생성된 각 사각형 격자 요소의 대각 방향 꼭지점을 이어서 두 개의 삼각형으로 나누고, 각 사각형 격자 요소를 복제한 후, 두 사각형이 서로 다른 삼각형 영역만 보이도록 투명도를 조절하여 3차원 객체를 생성하는 단계, 상기 생성된 3차원 객체에서 객체 조작 신호가 입력된 경우, 상기 객체 조작 신호에 따라 개별 격자 요소의 꼭지점 좌표값을 변경하고, 상기 변경된 꼭지점 좌표값과 변경전 꼭지점 좌표값을 이용하여 각 격자 요소들의 3D transform matrix를 생성하는 단계, 상기 생성된 3D transform matrix를 기 정의된 CSS transform에 적용하여 변형된 3차원 객체를 생성하는 단계를 포함하는 3차원 객체 생성 방법이 프로그램으로 기록된 전자장치에서 판독 가능한 기록매체가 제공된다.

본 발명에 따르면, 사각형 형태의 quadrangle을 기본 요소로 삼각형 형태의 폴리곤(polygon)을 에뮬레이션(emulation)함으로써, 기본적인 3차원 변형 기술(3d transform)인 rotate, translate, scale만으로도 폴리곤을 이용한 3차원 객체를 생성하고 조작할 수 있다.

또한, 모바일 기기에서 지원 가능한 CSS 3D Transform 기술을 활용하여 Genie Effect, 3D Morphing, Page turn effect 등의 효과를 구현할 수 있을 뿐 아니라, 폴리곤 기반의 3차원 객체 생성 및 조작을 가능하게 할 수 있다.

또한, 기본적인 3D transform만을 지원하는 제한된 환경(예컨대 모바일 웹)에서도 임의 형태를 지닌 폴리곤 기반의 3차원 객체를 생성 및 조작함으로써, 다양한 사용자 인터페이스 및 그래픽 효과를 제공할 수 있다.

또한, 웹 기반 요소의 격자화를 통해 폴리곤 기반의 3차원 객체를 생성할 수 있다.

도 1은 본 발명의 실시예에 따른 3차원 객체 생성을 위한 시스템을 나타낸 도면.

도 2는 본 발명의 실시예에 따른 3차원 객체 생성 장치의 구성을 개략적으로 나타낸 블럭도.

도 3은 도 2에 도시된 3차원 객체 생성부의 구성을 상세히 나타낸 블럭도.

도 4는 도 2에 도시된 3차원 객체 조작 처리부의 구성을 상세히 나타낸 블럭도.

도 5는 본 발명의 실시예에 따른 3차원 객체 생성 장치가 3차원 객체를 생성 및 조작하는 방법을 나타낸 흐름도.

도 6은 본 발명의 실시예에 따른 3차원 객체 생성 장치가 3차원 객체를 생성하는 방법을 나타낸 흐름도.

도 7은 본 발명의 실시예에 따른 3차원 객체 생성 방법을 설명하기 위한 화면 예시도.

도 8은 본 발명의 실시예에 따른 3차원 객체 생성 장치가 변형된 3차원 객체를 생성하는 방법을 나타낸 흐름도.

도 9는 본 발명의 실시예에 따른 변형된 3차원 객체 생성 방법을 설명하기 위한 화면 예시도.

[부호의 설명]

100 : 3차원 객체 생성장치 110 : 통신부

120 : 입력부 130 : 출력부

140 : 저장부 150 : 3차원 객체 생성부

152 : 사각형 격자 요소 생성 모듈 154 : 3차원 객체 생성 모듈

160 : 3차원 객체 조작 처리부 162 : 좌표값 저장 모듈

164 : 3D transform matrix 생성 모듈

166 : 3차원 객체 변형 모듈

본 발명의 전술한 목적과 기술적 구성 및 그에 따른 작용 효과에 관한 자세한 사항은 본 발명의 명세서에 첨부된 도면에 의거한 이하 상세한 설명에 의해 보다 명확하게 이해될 것이다.

CSS(cascading style sheet)는 웹 문서의 화면 구성 및 렌더링 방식을 지정하기 위한 기술로 2차원 평면좌표계에 적용되는 translate, rotate, scale, skew 등의 2D transform, 3차원 입체좌표계에 적용되는 translate3d, rotate3d, scale3d 등의 3D transform, 각 transform 사이의 애니메이션 효과를 지원한다.

또한, CSS는 웹 문서를 구성하는 개별 구성 요소의 간단한 조작에 적합한 기술로 메뉴바/버튼/이미지 등의 단순한 UI 구성 요소 혹은 각 웹 페이지 간의 이동 시에 전환 효과를 제공하는 용도로 사용되어왔다. 그러나, 본 발명에서는 웹 문서의 개별 구성 요소(특히 이미지)를 사각형 형태의 조각으로 더욱 작게 분해한 후, 이를 폴리곤과 유사한 형태로 만들어 임의의 3차원 객체를 생성하고 조작하는 용도로 사용될 수 있다.

이하 도면을 참조하여 3차원 객체를 생성하고 조작하는 기술에 대해 설명하기로 한다.

도 1은 본 발명의 실시예에 따른 3차원 객체 생성을 위한 시스템을 나타낸 도면이다.

도 1을 참조하면, 3차원 객체 생성을 위한 시스템은 3차원 객체 생성 장치(100)의 요청에 따라 웹 또는 왑 페이지를 제공하는 서비스 제공 장치(200)를 포함한다.

3차원 객체 생성 장치(100)는 평면 형태의 2차원 웹 페이지 구성 요소를 다수의 폴리곤으로 나누어 3차원 객체를 생성하고, 3차원 객체에 포함된 개별 격자 요소의 꼭지점 위치를 조작하여 변형된 3차원 객체를 생성한다.

이러한 3차원 객체 생성 장치(100)는 통신 기능 및 근거리 통신 기능을 탑재한 사용자 장치라면 어느 것이라도 적용될 수 있다. 예를 들면, 노트북, 무선통신 단말, 스마트폰(Smart phone), PMP(Portable Media Player), PDA(Personal Digital Assistant), 타블렛 PC(Tablet PC), 셋탑박스(Set-top box), 스마트 TV 등 다양한 장치가 될 수 있다.

3차원 객체 생성 장치(100)에 대한 상세한 설명은 도 2를 참조하기로 한다.

서비스 제공 장치(200)는 3차원 객체 생성 장치(100)의 요청에 따라 웹 또는 왑 페이지를 3차원 객체 생성 장치(100)에 제공한다.

도 2는 본 발명의 실시예에 따른 3차원 객체 생성 장치의 구성을 개략적으로 나타낸 블럭도, 도 3은 도 2에 도시된 3차원 객체 생성부의 구성을 상세히 나타낸 블럭도, 도 4는 도 2에 도시된 3차원 객체 조작 처리부의 구성을 상세히 나타낸 블럭도이다.

도 2를 참조하면, 3차원 객체 생성 장치(100)는 통신망을 통해 데이터를 송수신하는 통신부(110), 입력부(120), 출력부(130), 저장부(140), 3차원 객체 생성부(150), 3차원 객체 조작 처리부(160)를 포함한다.

통신부(110)는 3차원 객체 생성 장치(100)와 서비스 제공 장치를 통신망을 통해 상호 연결시키는 통신 수단으로서, 예를 들어 이동통신, 위성통신 등의 무선 통신모듈, 인터넷 등의 유선 통신모듈, 와이파이 등의 근거리 무선 통신모듈 등을 포함할 수 있다.

입력부(120)는 3차원 객체 생성 장치(100)의 동작 제어를 위한 사용자 요청을 입력받기 위한 수단으로, 사용자의 조작에 따라서 사용자의 요청을 전기 신호로 변환한다. 입력부(120)는 사용자로부터 문자, 숫자 및 텍스트 정보를 입력받는 키 입력 수단을 말하며, 키 입력 수단은 키보드, 키패드, 터치 스크린 등으로 구현될 수 있다.

출력부(130)는 3차원 객체 생성 장치(100)가 접속한 웹 사이트 데이터를 표시한다. 또한, 출력부(130)는 애플리케이션 구동에 따른 화면 정보를 디스플레이하는 디스플레이 수단을 말하며, 이러한 출력부(130)는 LCD(Liquid Crystal Display), OLED(Organic Light Emitting Diodes) 등 소형 평판 디스플레이장치로 구현되는 것이 바람직하다. 또한, 전술한 입력부(120)와 겹쳐 터치 스크린 형태로 구현될 수 있다.

저장부(140)는 3차원 객체 생성 장치(100)의 동작 제어 시 필요한 프로그램과, 그 프로그램 수행 중에 발생되는 데이터를 저장한다.

3차원 객체 생성부(150)는 2차원 웹 페이지 구성 요소의 격자화를 통해 해당 구성요소를 다수의 폴리곤으로 나누어 3차원 객체를 생성한다. 3차원 객체는 다수의 폴리곤(polygon)으로 표현된다. 일반적으로 폴리곤은 점(dot), 선(line), 삼각형(triangle) 중 어느 한 형태를 갖는다. 삼각형 폴리곤은 좌표(x, y, z) 및 자신의 각 정점(vertex)에서의 그 밖의 다른 속성 (예를 들면, 색상(color), 텍스쳐(texture) 좌표 등)에 의해 표시된다. 폴리곤 정점의 좌표(x, y)는 출력부(130) 상에서의 위치를 나타낸다. 좌표(z)는 정점이 3차원 장면의 선택된 뷰 포인트(view point)로부터 떨어져 있는 거리를 나타낸다.

3차원 객체 생성부(150)에 대해 도 3을 참조하면, 3차원 객체 생성부(150)는 사각형 격자 요소 생성 모듈(152), 3차원 객체 생성 모듈(154)을 포함한다.

사각형 격자 요소 생성 모듈(152)은 웹 페이지의 구성요소를 일정 개수의 사각형 격자로 균일하게 나누어 사각형 격자 요소를 생성한다. 웹 페이지의 구성요소는 이미지, 텍스트 등의 객체를 포함할 수 있다. 따라서, 사각형 격자 요소 생성 모듈(152)은 웹 페이지의 구성요소가 이미지인 경우, 원본 이미지에 대응되는 격자 형태의 개별 이미지를 서비스 제공 장치로부터 전달받을 수 있다. 또한, 사각형 격자 요소 생성 모듈(152)은 javascript 등을 활용한 브라우저 내부 연산을 통해 원본 이미지를 비트맵 형태로 변환한 후 격자 이미지를 자체적으로 생성할 수 있다. 또한, 사각형 격자 요소 생성 모듈(152)은 웹 페이지의 구성 요소가 이미지가 아닌 경우, <div>, <span> 등의 구분 태그를 이용하여 해당 구성요소를 사각형 격자로 분해하여 사각형 격자 요소를 생성할 수 있다.

3차원 객체 생성 모듈(154)은 사각형 격자 요소 생성 모듈(152)에서 생성된 각 사각형 격자 요소의 대각 방향 꼭지점을 이어서 두 개의 삼각형으로 각각 나눈 후, 각 사각형 격자 요소를 복제하여 두 사각형이 서로 다른 삼각형 영역만 보이도록 투명도를 조절하여 다수의 폴리곤을 생성한다. 이때, 생성된 다수의 폴리곤으로 이루어진 구성 요소가 3차원 객체일 수 있다. 즉, 3차원 객체 생성 모듈(154)은 각 사각형 격자 요소의 대각 방향 꼭지점을 이어 두 개의 삼각형으로 나눈 뒤, 해당 사각형 격자 요소를 두 벌로 복제하여 두 사각형이 서로 다른 삼각형 영역만 보이도록 각 삼각형 영역의 투명도를 조절한다. 예를 들어, 이미지의 경우, 3차원 객체 생성 모듈(154)은 보여지는 삼각형 이외의 영역에 투명도(알파값)를 '0'으로 설정하여, 해당 두 사각형의 서로 다른 영역의 삼각형에서 이미지가 보이도록 할 수 있다. 또한, 이미지 외 요소의 경우, 3차원 객체 생성 모듈(154)은 한쪽 삼각형은 투명도(알파값)을 '1'로 설정하고, 나머지 삼각형은 투명도(알파값)를 '0'으로 설정하여, 한쪽 삼각형에서만 구성요소가 보이도록 할 수 있다.

다시 도 2를 참조하면, 3차원 객체 조작 처리부(160)는 3차원 객체 생성부(150)에서 생성된 3차원 객체에서 객체 조작 신호가 입력되면, 상기 객체 조작 신호에 따라 개별 격자 요소의 꼭지점 좌표값을 변경하여 3D transform matrix를 생성하고, 상기 생성된 3D transform matrix를 기 정의된 CSS transform에 적용하여 변형된 3차원 객체를 생성한다. 즉, 3차원 객체 생성 이후에는 3차원 객체에 포함된 개별 격자 요소의 꼭지점 위치를 조작하여 원본 이미지 혹은 구성 요소의 형태를 자유롭게 변형할 수 있어야 한다. 따라서, 3차원 객체 조작 처리부(160)는 객체 조작 신호가 입력된 경우, 그 객체 조작 신호에 따라 해당 격자 요소들의 형태를 3D transform에 의해 적절하게 변형시켜 원본 이미지를 임의 형태의 3차원 객체로 변형할 수 있다.

3차원 객체 조작 처리부(160)에 대해 도 4를 참조하면, 3차원 객체 조작 처리부(160)는 좌표값 저장모듈(162), 3D transform matrix 생성 모듈(164), 3차원 객체 변형 모듈(166)을 포함한다.

좌표값 저장 모듈(162)은 3차원 객체 생성부(150)에서 생성된 3차원 객체를 구성하는 각 격자 요소의 꼭지점 좌표값을 저장한다. 이때 좌표값 저장모듈(162)은 개별 격자 요소의 꼭지점 좌표값을 배열 등의 형태로 만들어 저장할 수 있다.

3D transform matrix 생성 모듈(164)은 3차원 객체 생성부(150)에서 생성된 3차원 객체에서 객체 조작 신호가 입력된 경우, 상기 객체 조작 신호에 따라 개별 격자 요소의 꼭지점 좌표값을 변경하고, 변경된 꼭지점 좌표값과 좌표값 저장 모듈(162)에 저장된 꼭지점 좌표값을 이용하여 각 격자 요소들의 3D transform matrix를 생성한다.

즉, 사용자가 터치입력, 마우스 등을 이용하여 3차원 객체의 개별 격자 요소를 이동시키거나, 기 저장된 애니메이션 로직 등의 이벤트에 의해 개별 격자 요소가 이동된 경우, 3D transform matrix 생성 모듈(164)은 객체 조작 신호가 입력된 것으로 판단하여, 그 객체 조작 신호에 따라 개별 격자요소들의 꼭지점 좌표값을 변경하고, 모든 격자 요소에 대해 행렬 연산을 수행하여 CSS 연산에 필요한 3D transform matrix들을 생성한다. 이때 생성된 3D transform matrix은 개별 격자 요소마다 상이한 값을 가질 수 있다. 한편, 3D transform matrix 생성 모듈(164)은 화면상에 보이지 않는 꼭지점(즉, 투명한 삼각형 영역에 있는 꼭지점)은 연산에 포함시키지 않는다.

3D transform matrix 생성 모듈(164)이 3D transform matrix를 생성하는 방법에 대해 살펴보면, 화면상에 보이는 3개 꼭지점의 현재 값을 각각 O1(x1, y1, z1), O2(x2, y2, z2), O3(x3, y3, z3)라 하고, 객체 조작 신호에 따라 변경된 꼭지점 좌표값을 D1(a1, b1, c1), D2(a2, b2, c2), D3(a3, b3, c3)라 하며, 구하고자 하는 transform matrix를 M이라 하면, 3D transform matrix 생성 모듈(164)은 M*O1 = D1, M*O2 = D2, M*O3 = D3의 행렬 방정식을 만족해야 한다.

3x3 matrix의 경우 M은, O1, O2, O3을 열로 하는 행렬(P_origin)의 역행렬을 D1, D2, D3를 열로 하는 행렬(P_destination)의 앞에 곱하여 쉽게 찾을 수 있다. 그러나, 일반적인 transform matrix는 translate, perspective transform을 적용하기 위해 3x3이 아닌 4x4 형태로 수학식 1과 같은 행렬식(M_Transform)이 성립하며 이 경우 해가 여러 개 존재하므로 일반적으로 역행렬이 존재하지 않는다.

[수학식 1]

그러므로, 3D transform matrix 생성 모듈(164)은 이러한 문제를 해결하기 위하여 scale, translate, rotate, skew matrix를 개별적으로 구하는 방식을 이용한다. Translate(tx, ty, tz)와 perspective(0 0 0 1) 관련 부분을 제외하고 transform matrix를 3x3 형태로 재구성하면 수학식 2와 같다.

[수학식 2]

여기서, M_T`는 M_Transform를 재구성한 행렬, P_o`는 P_origin를 재구성한 행렬, P_d`는 P_destination룰 재구성한 행렬일 수 있다.

수학식 2의 M_T`행렬을 scale, rotate, skew matrix로 분해하면 수학식 3과 같다.

[수학식 3]

여기서, M_Rotate는 rotate 행렬, M_skew는 skew 행렬, M_scale는 scale 행렬일수 있다.

Rotation matrix(M_Rotate)의 경우, 원 좌표와 변경 좌표값을 이용하여 수학식 4와 같은 행렬 B를 생성한 후 Singular Value Decomposition을 통해 수학식 5와 같이 구할 수 있다.

[수학식 4]

[수학식 5]

where

skew matrix와 scale matrix의 경우 삼각형 각 변의 길이 차이와 내각 값의 차이를 통하여 비교적 간단하게 구할 수 있으나 단일 값이 아닌 여러 개의 해가 존재한다. 이 경우, skew를 x 혹은 y 방향만 존재한다고 가정하여 구할 수 있다. 상기 과정으로 얻은 transform matrix는 유일한 해가 아니므로 알고리즘의 변형을 통해 상이한 transform matrix를 구할 수도 있다.

3차원 객체 변형 모듈(166)은 3D transform matrix 생성 모듈(164)에서 생성된 3D transform matrix들을 CSS transform에 적용하여 변형된 3차원 객체를 생성한다. 즉, 상기 생성된 3D transform matrix들을 이용하여 변경된 꼭지점을 지닌 개별 격자 요소들에 CSS Transform을 적용하면, 객체 조작 신호에 따라 변형된 3차원 객체를 생성할 수 있다. CSS Transform의 경우 HTML을 구성하는 개별 요소(element)에 대한 2차원 transform 효과 또는 3차원 transform 효과를 적용하기 위한 기술로 rotate, translate, scale, skew 조작 및 이를 조합하여 처리할 수 있는 matrix 인터페이스를 제공한다. 사각형 형태의 HTML 요소를 개별 조작하기 위한 기술이므로 다수의 폴리곤을 지닌 복잡한 형태의 3차원 객체를 생성하거나 이러한 객체의 외형을 변경시키는 작업이 아닌, 화면 전환, 메뉴 구성 등의 간단한 3D 효과가 필요한 부분에 주로 사용된다. CSS Transform의 경우 PC 뿐 아니라 최신의 모바일 기기에서도 지원을 하고 있어 호환성이 높다.

도 5는 본 발명의 실시예에 따른 3차원 객체 생성 장치가 3차원 객체를 생성 및 조작하는 방법을 나타낸 흐름도이다.

도 5를 참조하면, 3차원 객체 생성 장치는 2차원 웹 페이지 구성 요소를 격자화 및 다수의 폴리곤으로 나누어 3차원 객체를 생성한다(S402). 자유로운 3차원 형태의 객체 생성을 위해서는 기본적으로 평면 형태의 직사각형인 웹 페이지의 구성 요소를 다수의 폴리곤(삼각형 객체)으로 나누는 작업이 필요하다. 따라서, 3차원 객체 생성 장치는 3차원 객체를 생성하기 위해 2차원 웹 페이지 구성요소를 다수의 폴리곤으로 나눈다. 3차원 객체 생성 장치가 3차원 객체를 생성하는 방법에 대한 상세한 설명은 도 6을 참조하기로 한다.

단계 S402의 수행 후, 생성된 3차원 객체에서 객체 조작 신호가 입력되면(S404), 3차원 객체 생성 장치는 입력된 객체 조작 신호에 따른 3D transform matrix를 생성한다(S406). 그런 후, 3차원 객체 생성장치는 생성된 3D transform matrix를 CSS transform에 적용하여 변형된 3차원 객체를 생성한다(S408).

상기 3차원 객체 생성 장치가 변형된 3차원 객체를 생성하는 방법에 대한 상세한 설명은 도 8을 참조하기로 한다.

도 6은 본 발명의 실시예에 따른 3차원 객체 생성 장치가 3차원 객체를 생성하는 방법을 나타낸 흐름도, 도 7은 본 발명의 실시예에 따른 3차원 객체 생성 방법을 설명하기 위한 화면 예시도이다.

도 6을 참조하면, 3차원 객체 생성 장치는 웹 페이지의 구성요소를 일정 개수의 사각형 격자 요소로 균일하게 나누고(S502), 나누어진 각 사각형 격자 요소의 대각 방향 꼭지점을 이어서 두 개의 삼각형으로 나눈다(S504).

단계 S504의 수행 후, 3차원 객체 생성 장치는 각 사각형 격자 요소를 복제하여 두 사각형이 서로 다른 삼각형 영역만 보이도록 투명도를 조절하여 3차원 객체를 생성한다(S506).

3차원 객체 생성 장치가 3차원 객체를 생성하는 방법에 대해 도 7을 참조하면, 3차원 객체 생성 장치는 (a)와 같은 이미지(600)를 (b)와 같이 작은 사각형 형태의 격자로 균일하게 나눈다(610). 그런 후, 3차원 객체 생성 장치는 각 사각형 격자 요소의 대각 방향 꼭지점을 이어서 두 개의 삼각형으로 나누어 (c)와 같이 생성한다. 그런 후, 3차원 객체 생성 장치는 (d)와 같이 사각형 격자 요소를 복제하여 제1사각형(630a)에는 왼쪽 상위 삼각형 영역의 이미지가 보이도록 하고, 제2사각형(630b)에는 오른쪽 하위 삼각형 영역의 이미지만 보이도록 투명도를 조절하여 3차원 객체를 생성한다.

도 8은 본 발명의 실시예에 따른 3차원 객체 생성 장치가 변형된 3차원 객체를 생성하는 방법을 나타낸 흐름도, 도 9는 본 발명의 실시예에 따른 변형된 3차원 객체 생성 방법을 설명하기 위한 화면 예시도이다.

도 8을 참조하면, 3차원 객체 생성 장치는 3차원 객체에 대한 개별 격자 요소들의 꼭지점 좌표값을 저장한다(S702).

단계 S702의 수행 후, 3차원 객체에서 객체 조작 신호가 입력되면(S704), 3차원 객체 생성 장치는 객체 조작 신호에 따라 개별 격자 요소의 꼭지점 좌표값을 변경하고(S706), 상기 변경된 꼭지점 좌표값과 상기 저장된 꼭지점 좌표값을 이용하여 각 격자 요소들의 3D transform matrix를 생성한다(S708).

그런 후, 3차원 객체 생성 장치는 상기 생성된 3D transform matrix를 기 정의된 CSS transform에 적용하여 변형된 3차원 객체를 생성한다(S710).

3차원 객체 생성 장치가 3차원 객체를 변형하는 방법에 대해 도 9를 참조하면, 도 7의 (d)와 같은 3차원 객체를 사용자가 도 9의 (a)와 같이 제1사각형 격자 요소(800a)와 제2사각형 격자 요소(800b)를 이동시키면, 3차원 객체 생성 장치는 제1사각형 격자 요소(800a)와 제2사각형 격자 요소(800b)의 꼭지점 좌표값을 변화시킨다. 그런 후, 3차원 객체 생성 장치는 (b)와 같이 변형된 격자 요소 두 개를 조합하여 변형된 3차원 객체(810)를 생성한다. 이때, 두 개의 사각형 격자 요소는 두 개의 꼭지점을 공유할 수 있다.

한편, 본 발명의 다른 측면에 따르면, 웹 페이지의 구성요소를 일정 개수의 사각형 격자로 균일하게 나누어 사각형 격자 요소를 생성하는 단계, 상기 생성된 각 사각형 격자 요소의 대각 방향 꼭지점을 이어서 두 개의 삼각형으로 나누고, 각 사각형 격자 요소를 복제한 후, 두 사각형이 서로 다른 삼각형 영역만 보이도록 투명도를 조절하여 3차원 객체를 생성하는 단계, 상기 생성된 3차원 객체에서 객체 조작 신호가 입력된 경우, 상기 객체 조작 신호에 따라 개별 격자 요소의 꼭지점 좌표값을 변경하고, 상기 변경된 꼭지점 좌표값과 변경전 꼭지점 좌표값을 이용하여 각 격자 요소들의 3D transform matrix를 생성하는 단계, 상기 생성된 3D transform matrix를 기 정의된 CSS transform에 적용하여 변형된 3차원 객체를 생성하는 단계를 포함하는 3차원 객체 생성 방법이 프로그램으로 기록된 전자장치에서 판독 가능한 기록매체가 제공된다. .

이러한 3차원 객체 생성 방법은 프로그램으로 작성 가능하며, 프로그램을 구성하는 코드들 및 코드 세그먼트들은 당해 분야의 프로그래머에 의하여 용이하게 추론될 수 있다. 또한, 3차원 객체 생성 방법에 관한 프로그램은 전자장치가 읽을 수 있는 정보저장매체(Readable Media)에 저장되고, 전자장치에 의하여 읽혀지고 실행될 수 있다.

이와 같이, 본 발명이 속하는 기술분야의 당업자는 본 발명이 그 기술적 사상이나 필수적 특징을 변경하지 않고서 다른 구체적인 형태로 실시될 수 있다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적인 것이 아닌 것으로서 이해해야만 한다. 본 발명의 범위는 상기 상세한 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 그 등가개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다.

본 발명은 본 발명의 목적은 사각형 형태의 quadrangle을 기본 요소로 삼각형 형태의 폴리곤(polygon)을 에뮬레이션(emulation)함으로써, 기본적인 3차원 변형 기술(3d transform)인 rotate, translate, scale만으로도 폴리곤을 이용한 3차원 객체를 생성하고 조작할 수 있도록 하는 3차원 객체 생성 장치 및 그 방법에 적용될 수 있다.

Claims

2차원 웹 페이지의 구성 요소를 격자화 및 다수의 폴리곤(polygon) 으로 나누어 3차원 객체를 생성하는 3차원 객체 생성부; 및

상기 생성된 3차원 객체에서 객체 조작 신호가 입력되면, 상기 객체 조작 신호에 따라 해당 개별 격자 요소의 꼭지점 좌표값을 변경하여 3D transform matrix를 생성하고, 상기 생성된 3D transform matrix를 기 정의된 CSS transform(Cascading Style Sheet transform)에 적용하여 변형된 3차원 객체를 생성하는 3차원 객체 조작 처리부;

를 포함하는 3차원 객체 생성 장치.
제1항에 있어서,

상기 3차원 객체 생성부는 상기 웹 페이지의 구성요소를 일정 개수의 사각형 격자로 균일하게 나누어 사각형 격자 요소를 생성하는 사각형 격자요소 생성모듈; 및

상기 생성된 각 사각형 격자 요소의 대각 방향 꼭지점을 이어서 두 개의 삼각형으로 나누고, 각 사각형 격자 요소를 복제한 후, 두 사각형이 서로 다른 삼각형 영역만 보이도록 투명도를 조절하여 다수의 폴리곤을 생성하는 3차원 객체 생성 모듈을 포함하는 것을 특징으로 하는 3차원 객체 생성 장치.
제2항에 있어서,

상기 사각형 격자요소 생성 모듈은 상기 웹 페이지의 구성요소가 이미지인 경우, 원본 이미지에 대응되는 격자 형태의 개별 이미지를 서비스 제공 장치로부터 전달받거나, 브라우저 내부 연산을 통해 원본 이미지를 비트맵 형태로 변환한 후 격자 이미지를 자체적으로 생성하고, 상기 웹 페이지의 구성 요소가 이미지가 아닌 경우, 구분 태그를 이용하여 사각형 격자 요소를 생성하는 것을 특징으로 하는 3차원 객체 생성 장치.
제1항에 있어서,

상기 3차원 객체 조작 처리부는,

상기 3차원 객체 생성부에서 생성된 3차원 객체를 구성하는 각 격자 요소의 꼭지점 좌표값을 저장하는 좌표값 저장 모듈;

상기 3차원 객체에서 객체 조작 신호가 입력된 경우, 상기 객체 조작 신호에 따라 개별 격자 요소의 꼭지점 좌표값을 변경하고, 상기 변경된 꼭지점 좌표값과 상기 좌표값 저장 모듈에 저장된 꼭지점 좌표값을 이용하여 각 격자 요소들의 3D transform matrix를 생성하는 3D transform matrix 생성 모듈; 및

상기 생성된 3D transform matrix를 CSS transform에 적용하여 변형된 3차원 객체를 생성하는 3차원 객체 변형 모듈을 포함하는 것을 특징으로 하는 3차원 객체 생성 장치.
3차원 객체 생성 장치가 2차원의 웹 페이지 구성요소를 3차원 객체로 생성 및 조작하는 방법에 있어서,

(a) 상기 웹 페이지의 구성요소를 일정 개수의 사각형 격자로 균일하게 나누어 사각형 격자 요소를 생성하는 단계; 및

(b) 상기 생성된 각 사각형 격자 요소의 대각 방향 꼭지점을 이어서 두 개의 삼각형으로 나누고, 각 사각형 격자 요소를 복제한 후, 두 사각형이 서로 다른 삼각형 영역만 보이도록 투명도를 조절하여 3차원 객체를 생성하는 단계;

를 포함하는 3차원 객체 생성 방법.
제5항에 있어서,

상기 (b) 단계 이후,

상기 생성된 3차원 객체에서 객체 조작 신호가 입력된 경우, 상기 객체 조작 신호에 따라 개별 격자 요소의 꼭지점 좌표값을 변경하고, 상기 변경된 꼭지점 좌표값과 변경전 꼭지점 좌표값을 이용하여 각 격자 요소들의 3D transform matrix를 생성하는 단계; 및

상기 생성된 3D transform matrix를 기 정의된 CSS transform에 적용하여 변형된 3차원 객체를 생성하는 단계를 더 포함하는 것을 특징으로 하는 3차원 객체 생성 방법.
제5항에 있어서,

상기 (b) 단계에서,

상기 웹 페이지의 구성요소가 이미지인 경우, 원본 이미지에 대응되는 격자 형태의 개별 이미지를 서비스 제공 장치로부터 전달받거나 브라우저 내부 연산을 통해 원본 이미지를 비트맵 형태로 변환한 후 격자 이미지를 자체적으로 생성하고, 상기 웹 페이지의 구성 요소가 이미지가 아닌 경우, 구분 태그를 이용하여 사각형 격자 요소를 생성하는 것을 특징으로 하는 3차원 객체 생성 방법.
웹 페이지의 구성요소를 일정 개수의 사각형 격자로 균일하게 나누어 사각형 격자 요소를 생성하는 단계;

상기 생성된 각 사각형 격자 요소의 대각 방향 꼭지점을 이어서 두 개의 삼각형으로 나누고, 각 사각형 격자 요소를 복제한 후, 두 사각형이 서로 다른 삼각형 영역만 보이도록 투명도를 조절하여 3차원 객체를 생성하는 단계;

상기 생성된 3차원 객체에서 객체 조작 신호가 입력된 경우, 상기 객체 조작 신호에 따라 개별 격자 요소의 꼭지점 좌표값을 변경하고, 상기 변경된 꼭지점 좌표값과 변경전 꼭지점 좌표값을 이용하여 각 격자 요소들의 3D transform matrix를 생성하는 단계; 및

상기 생성된 3D transform matrix를 기 정의된 CSS transform에 적용하여 변형된 3차원 객체를 생성하는 단계를 포함하는 3차원 객체 생성 방법이 프로그램으로 기록된 전자장치에서 판독 가능한 기록매체.