KR102292789B1 - 디스플레이장치 및 그 제어방법 - Google Patents

디스플레이장치 및 그 제어방법 Download PDF

Info

Publication number
KR102292789B1
KR102292789B1 KR1020150049240A KR20150049240A KR102292789B1 KR 102292789 B1 KR102292789 B1 KR 102292789B1 KR 1020150049240 A KR1020150049240 A KR 1020150049240A KR 20150049240 A KR20150049240 A KR 20150049240A KR 102292789 B1 KR102292789 B1 KR 102292789B1
Authority
KR
South Korea
Prior art keywords
web
objects
displayed
memory
image
Prior art date
Application number
KR1020150049240A
Other languages
English (en)
Other versions
KR20160120128A (ko
Inventor
김창연
묘재영
Original Assignee
삼성전자 주식회사
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 삼성전자 주식회사 filed Critical 삼성전자 주식회사
Priority to KR1020150049240A priority Critical patent/KR102292789B1/ko
Priority to US15/091,636 priority patent/US10133711B2/en
Publication of KR20160120128A publication Critical patent/KR20160120128A/ko
Application granted granted Critical
Publication of KR102292789B1 publication Critical patent/KR102292789B1/ko

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/45—Management operations performed by the client for facilitating the reception of or the interaction with the content or administrating data related to the end-user or to the client device itself, e.g. learning user preferences for recommending movies, resolving scheduling conflicts
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/10—Geometric effects
    • G06T15/40—Hidden part removal
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/131—Fragmentation of text files, e.g. creating reusable text-blocks; Linking to fragments, e.g. using XInclude; Namespaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T1/00—General purpose image data processing
    • G06T1/60—Memory management
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/50—Lighting effects
    • G06T15/503—Blending, e.g. for anti-aliasing
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/41—Structure of client; Structure of client peripherals
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/60—Network structure or processes for video distribution between server and client or between remote clients; Control signalling between clients, server and network components; Transmission of management data between server and client, e.g. sending from server to client commands for recording incoming content stream; Communication details between server and client 
    • H04N21/61—Network physical structure; Signal processing
    • H04N21/6106—Network physical structure; Signal processing specially adapted to the downstream path of the transmission network
    • H04N21/6125—Network physical structure; Signal processing specially adapted to the downstream path of the transmission network involving transmission via Internet
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81—Monomedia components thereof
    • H04N21/8146—Monomedia components thereof involving graphical data, e.g. 3D object, 2D graphics
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2210/00—Indexing scheme for image generation or computer graphics
    • G06T2210/08—Bandwidth reduction

Abstract

본 발명의 실시예에 따른 디스플레이장치는, 복수의 오브젝트를 포함하는 웹 기반 컨텐츠를 수신하는 통신부와; 영상을 표시하는 표시부와; 표시부에 표시되는 영상의 데이터가 로딩되도록 마련된 메모리와; 웹 기반 컨텐츠의 복수의 오브젝트 중에서 제1오브젝트의 영역이 하나 이상의 제2오브젝트의 영역을 커버하도록 표시되는 것에 대응하여, 제1오브젝트의 데이터는 메모리에 로딩되게 처리하고, 제2오브젝트의 데이터는 메모리에 로딩되지 않게 처리하는 적어도 하나의 프로세서를 포함하는 것을 특징으로 한다.

Description

디스플레이장치 및 그 제어방법 {DISPLAY APPARATUS AND CONTROL METHOD THEREOF}
본 발명은 인터넷에 접속하여 웹 페이지(web page) 등의 영상을 표시하거나 웹 어플리케이션(web application)을 실행할 수 있는 웹 플랫폼(web platform)을 갖춘 디스플레이장치 및 그 제어방법에 관한 것으로서, 상세하게는 웹 플랫폼 상에서 특정 그래픽 요소가 실행 및 표시될 때에 해당 그래픽 요소를 처리하는 시스템의 부하를 저감시키는 구조의 디스플레이장치 및 그 제어방법에 관한 것이다.
영상처리장치는 외부로부터 수신되는 영상신호/영상데이터를 다양한 영상처리 프로세스에 따라서 처리한다. 영상처리장치는 처리된 영상데이터를 자체 구비한 디스플레이 패널 상에 영상으로 표시하거나, 또는 패널을 구비한 타 디스플레이장치에서 영상으로 표시되도록 이 처리된 영상신호를 해당 디스플레이장치에 출력할 수 있다. 즉, 영상처리장치는 영상데이터를 처리 가능한 장치라면 영상을 표시 가능한 패널을 포함하는 경우 및 패널을 포함하지 않는 경우 모두 포함할 수 있다. 전자의 경우를 특히 디스플레이장치라고 지칭하며 그 예시로는 TV, 휴대용 멀티미디어 재생기가 있고, 후자의 경우의 예시로는 셋탑박스(set-top box)가 있다.
사용자의 요구가 다양해짐에 따라서, 영상처리장치, 특히 디스플레이장치는 단순히 컨텐츠의 영상만을 표시하는 기능에 그치지 않고, 보다 심화되고 확장된 기능을 지원한다. 예를 들면, 디스플레이장치는 인터넷에 접속하여 웹 페이지를 표시하거나 또는 웹 기반의 어플리케이션을 실행할 수 있다. 방송데이터 컨텐츠 또는 로컬 컨텐츠와 같은 일반적인 컨텐츠 영상의 경우와 마찬가지로, 디스플레이장치는 CPU(central processing unit) 및 GPU(graphics processing unit)에 의해 웹 페이지의 데이터를 분석 및 처리함으로써 웹 페이지의 영상을 표시한다.
그런데, 웹 페이지 또는 웹 어플리케이션이 포함하는 그래픽 요소들 중에는 단순한 이미지 뿐만 아니라 고도의 연산 처리를 필요로 하는 그래픽 오브젝트가 있는 바, 일 예시로는 게임 등에 주로 적용되는 3차원 그래픽 오브젝트가 있다. 이러한 그래픽 오브젝트는 CPU 및 GPU, 특히 GPU의 처리 비중이 크므로, 시스템 자원의 제한이 있는 디스플레이장치인 경우에, 그래픽 오브젝트의 처리 시에 디스플레이장치의 성능이 저하되는 일이 발생할 수도 있다.
따라서, 고도의 연산 처리를 필요로 하는 그래픽 오브젝트를 포함한 웹 기반 어플리케이션을 실행할 때에, 디스플레이장치가 효율적으로 해당 어플리케이션을 실행하기 위해서는 그래픽 오브젝트의 표시 시에 CPU 또는 GPU의 연산 부담을 경감할 수 있는 설계 또는 방법이 필요하다.
본 발명의 실시예에 따른 디스플레이장치는, 복수의 오브젝트를 포함하는 웹 기반 컨텐츠를 수신하는 통신부와; 영상을 표시하는 표시부와; 상기 표시부에 표시되는 상기 영상의 데이터가 로딩되도록 마련된 메모리와; 상기 웹 기반 컨텐츠의 상기 복수의 오브젝트 중에서 제1오브젝트의 영역이 하나 이상의 제2오브젝트의 영역을 커버하도록 표시되는 것에 대응하여, 상기 제1오브젝트의 데이터는 상기 메모리에 로딩되게 처리하고, 상기 제2오브젝트의 데이터는 상기 메모리에 로딩되지 않게 처리하는 적어도 하나의 프로세서를 포함하는 것을 특징으로 한다. 제1오브젝트에 의해 커버됨으로써 화면에 나타나지 않는 제2오브젝트가 메모리에 로딩되지 않게 차단하기 때문에, 영상 표시에 관련된 불필요한 연산이 수행되는 것을 최소화하고, 디스플레이장치의 부하를 줄임으로써 제1오브젝트의 실행 속도를 확보할 수 있다.
여기서, 상기 적어도 하나의 프로세서는, 상기 제1오브젝트의 영역이 상기 하나 이상의 제2오브젝트의 영역을 커버하도록 하는 지시에 응답하여 상기 제1오브젝트에 3차원 그래픽 처리가 수행되는지 여부를 판단하고, 상기 제1오브젝트에 3차원 그래픽 처리가 수행되는 것으로 판단하면 상기 지시에 따라서 상기 제1오브젝트의 크기가 조정되어 표시되게 처리할 수 있다. 이로써, 제1오브젝트가 고도의 연산을 필요로 하는 3차원 그래픽 처리 대상일 때에, 제1오브젝트의 실행 속도가 떨어지지 않도록 할 수 있다.
여기서, 상기 적어도 하나의 프로세서는, 상기 제1오브젝트가 상기 메모리에 로딩될 때에 기 설정된 API(application programming interface)를 호출하여 처리되는 것이면 상기 제1오브젝트가 3차원 그래픽 처리가 수행되는 것으로 판단할 수 있다. 여기서, 상기 기 설정된 API는 WebGL을 포함할 수 있다. 이로써, 제1오브젝트가 상대적으로 고도의 연산을 필요로 하는 대상인지를 명확히 판단할 수 있다.
또한, 상기 적어도 하나의 프로세서는, 상기 웹 기반 컨텐츠로부터 상기 복수의 오브젝트를 추출하는 CPU와; 상기 CPU에 의해 추출된 상기 복수의 오브젝트 중에서 3차원 그래픽 처리 대상인 오브젝트를 처리하는 GPU를 포함할 수 있다. 여기서, 상기 CPU는 상기 지시에 응답하여, 상기 추출한 복수의 오브젝트 중에서 상기 하나 이상의 제2오브젝트를 제외하고 상기 제1오브젝트만을 상기 GPU에 전달할 수 있다. 여기서, 상기 GPU는 상기 CPU로부터 전달받은 하나 이상의 상기 오브젝트를 렌더링한 텍스처를 상기 메모리에 로딩하며, 상기 메모리에 로딩된 상기 텍스처가 복수이면 상기 복수의 텍스처를 조합하고, 상기 메모리에 로딩된 상기 텍스처가 하나이면 상기 조합 없이 상기 하나의 텍스처를 상기 영상으로 표시되게 처리할 수 있다. 이로써, CPU에 의한 오브젝트의 추출 과정 및 GPU에 의한 오브젝트의 렌더링 과정 각각에서 불필요한 연산 대상을 줄일 수 있는 바, CPU 및 GPU의 연산에 의한 부하를 줄일 수 있다.
또한, 상기 적어도 하나의 프로세서는, 상기 웹 기반 컨텐츠의 상기 영상을 표시하도록 하는 지시를 수신하면, 상기 복수의 오브젝트를 포함하는 상기 영상이 표시되도록 상기 복수의 오브젝트를 상기 메모리에 로딩할 수 있다. 이로써, 어느 한 오브젝트를 풀스크린으로 표시하지 않는 경우에, 영상에서 복수의 오브젝트가 나타나도록 할 수 있다.
또한, 상기 제1오브젝트의 영역이 상기 하나 이상의 제2오브젝트의 영역을 커버하도록 표시되는 것은, 상기 제1오브젝트가 상기 표시부에서 상기 웹 기반 컨텐츠의 상기 영상이 표시되도록 기 설정된 표시영역의 전체에 표시되는 동작을 포함할 수 있다. 즉, 제1오브젝트가 표시부 또는 웹 브라우저의 웹뷰에서 풀스크린으로 표시되게 사용자가 지시하는 경우에 대응하여 본 발명의 사상을 적용할 수 있다.
여기서, 상기 복수의 오브젝트가 렌더링 시에 각기 로딩되도록 마련된 복수의 버퍼를 더 포함하며, 상기 적어도 하나의 프로세서는, 상기 복수의 버퍼 중에서 WebGL을 사용하게 마련된 상기 버퍼에 로딩되는 상기 오브젝트만을 렌더링하게 처리할 수 있다. 이로써, WebGL을 사용하는 오브젝트가 WebGL을 사용하지 않는 타 오브젝트와의 동기화 및 합성되는 동작이 발생하는 것을 제거할 수 있다.
또한, 본 발명의 실시예에 따른 디스플레이장치는, 복수의 그래픽 레이어를 포함하는 웹 컨텐츠를 수신하는 통신부와; 영상을 표시하는 표시부와; 상기 웹 컨텐츠의 영상이 상기 표시부에 표시되도록 상기 그래픽 레이어가 로딩되게 마련된 메모리와; 상기 통신부에 수신되는 상기 웹 컨텐츠로부터 상기 복수의 그래픽 레이어를 추출하고, 상기 표시부에 상기 웹 기반 컨텐츠의 영상이 표시되도록 상기 추출한 그래픽 레이어가 상기 메모리에 로딩되게 처리하는 적어도 하나의 프로세서를 포함하며, 상기 적어도 하나의 프로세서는, 상기 웹 컨텐츠의 상기 복수의 그래픽 레이어 중에서 일 레이어의 크기를 조정하는 지시의 수신에 응답하여 상기 레이어의 크기를 조정하고, 상기 복수의 그래픽 레이어 중에서 상기 크기가 조정된 레이어에 중첩되는 하나 이상의 레이어가 상기 메모리에 로딩되지 않게 차단하는 것을 특징으로 한다. 어느 한 레이어에 의해 커버됨으로써 화면에 나타나지 않는 나머지 레이어가 메모리에 로딩되지 않게 차단하기 때문에, 영상 표시에 관련된 불필요한 연산이 수행되는 것을 최소화하고, 디스플레이장치의 부하를 줄임으로써 영상의 표시 속도를 확보할 수 있다.
여기서, 상기 적어도 하나의 프로세서는, 상기 복수의 그래픽 레이어 중에서 상기 크기가 조정된 레이어에 의해 기 설정된 면적 이상 커버되는 하나 이상의 레이어를 선택하고, 상기 선택된 레이어가 상기 메모리에 로딩되지 않게 차단할 수 있다. 이로써, 어느 한 레이어가 타 레이어를 커버하는지 여부를 판단할 수 있다.
또한, 본 발명의 실시예에 따른 디스플레이장치의 제어방법은, 복수의 오브젝트를 포함하는 웹 기반 컨텐츠를 수신하는 단계와; 메모리에 영상의 데이터를 로딩하는 단계와; 상기 메모리에 로딩된 상기 데이터에 기초하여 상기 영상을 표시하는 단계를 포함하며, 상기 데이터를 로딩하는 단계는, 웹 기반 컨텐츠의 상기 복수의 오브젝트 중에서 제1오브젝트의 영역이 하나 이상의 제2오브젝트의 영역을 커버하도록 표시되는 것에 대응하여, 상기 제1오브젝트의 데이터는 상기 메모리에 로딩하고, 상기 제2오브젝트의 데이터는 상기 메모리에 로딩하지 않게 처리하는 단계를 포함하는 것을 특징으로 한다. 제1오브젝트에 의해 커버됨으로써 화면에 나타나지 않는 제2오브젝트가 메모리에 로딩되지 않게 차단하기 때문에, 영상 표시에 관련된 불필요한 연산이 수행되는 것을 최소화하고, 디스플레이장치의 부하를 줄임으로써 제1오브젝트의 실행 속도를 확보할 수 있다.
여기서, 상기 데이터를 로딩하는 단계는, 상기 제1오브젝트의 영역이 상기 하나 이상의 제2오브젝트의 영역을 커버하도록 하는 지시에 응답하여 상기 제1오브젝트에 3차원 그래픽 처리가 수행되는지 여부를 판단하는 단계와; 상기 제1오브젝트에 3차원 그래픽 처리가 수행되는 것으로 판단하면 상기 지시에 따라서 상기 제1오브젝트의 크기가 조정되어 표시되게 처리하는 단계를 포함할 수 있다. 이로써, 제1오브젝트가 고도의 연산을 필요로 하는 3차원 그래픽 처리 대상일 때에, 제1오브젝트의 실행 속도가 떨어지지 않도록 할 수 있다.
여기서, 상기 제1오브젝트가 상기 메모리에 로딩될 때에 기 설정된 API를 호출하여 처리되는 것이면 상기 제1오브젝트가 3차원 그래픽 처리가 수행되는 것으로 판단될 수 있다. 여기서, 상기 기 설정된 API는 WebGL을 포함할 수 있다. 이로써, 제1오브젝트가 상대적으로 고도의 연산을 필요로 하는 대상인지를 명확히 판단할 수 있다.
또한, 상기 제1오브젝트의 영역이 상기 하나 이상의 제2오브젝트의 영역을 커버하도록 표시되는 것은, 상기 제1오브젝트가 상기 디스플레이장치의 표시부에서 상기 웹 기반 컨텐츠의 상기 영상이 표시되도록 기 설정된 표시영역의 전체에 표시되는 동작을 포함할 수 있다. 즉, 제1오브젝트가 표시부 또는 웹 브라우저의 웹뷰에서 풀스크린으로 표시되게 사용자가 지시하는 경우에 대응하여 본 발명의 사상을 적용할 수 있다.
도 1은 본 발명의 제1실시예에 따른 디스플레이장치의 예시도,
도 2는 도 1의 디스플레이장치의 구성 블록도,
도 3은 도 1의 디스플레이장치의 처리부의 구성 블록도,
도 4는 도 1의 디스플레이장치에 표시되는 웹 페이지 영상의 일례를 나타내는 예시도,
도 5는 도 4의 웹 페이지에서 일 그래픽 오브젝트를 풀스크린으로 표시하는 모습을 나타내는 예시도,
도 6은 도 1의 디스플레이장치의 웹 플랫폼의 계층 구조를 나타내는 구성 블록도,
도 7은 도 1의 디스플레이장치가 웹 페이지를 영상으로 표시하기 위한 분석 단계를 나타내는 블록도,
도 8은 HTML 구조에 따라서 작성된 웹 문서의 예시도,
도 9는 도 8의 웹 문서의 HTML 구조에 기초하여 구축된 DOM 트리의 예시도,
도 10은 본 발명의 제1실시예에 따라서, 렌더 오브젝트 트리의 오브젝트들 중에서 GPU에 의한 가속 처리가 수행되는 오브젝트들을 표시하는 원리를 나타내는 예시도,
도 11은 본 발명의 제2실시예에 따라서, 렌더 오브젝트 트리의 오브젝트들 중에서 GPU에 의한 가속 처리가 수행되는 오브젝트들을 표시하는 원리를 나타내는 예시도,
도 12 및 도 13은 본 발명의 제2실시예에 따른 디스플레이장치의 제어방법을 나타내는 플로우차트,
도 14는 본 발명의 제3실시예에 따른 디스플레이장치의 제어방법을 나타내는 플로우차트,
도 15는 본 발명의 제4실시예에 따른 디스플레이장치에서 웹 페이지를 렌더링하기 위해 사용되는 버퍼의 동작을 나타내는 구성 블록도,
도 16은 본 발명의 제5실시예에 따라서 오브젝트를 풀스크린으로 표시하는 원리를 나타내는 예시도,
도 17은 본 발명의 제6실시예에 따라서 오브젝트를 풀스크린으로 표시하는 원리를 나타내는 예시도,
도 18은 본 발명의 제8실시예에 따라서 오브젝트를 표시하는 원리를 나타내는 예시도,
도 19은 본 발명의 제9실시예에 따라서 오브젝트를 표시하는 원리를 나타내는 예시도,
도 20은 본 발명의 제1실시예 및 제2실시예 각각에 의한 소요시간을 대비시킨 그래프,
도 21은 WebGL에 관련된 기 설정된 다양한 테스트 케이스를 본 발명의 제1실시예 및 제2실시예에 따라서 각기 테스트한 결과를 나타내는 그래프,
도 22는 본 발명의 제10실시예에 따른 디스플레이장치에서 웹 어플리케이션을 표시하는 방법을 나타내는 플로우차트,
도 23은 본 발명의 제11실시예에 따른 디스플레이장치에서 웹 어플리케이션을 표시하는 방법을 나타내는 플로우차트,
도 24는 본 발명의 제12실시예에 따른 디스플레이장치에서 웹 컨텐츠의 영상을 표시하는 원리를 나타내는 예시도이다.
도 25는 도 24의 웹 컨텐츠 영상에서 제1레이어를 확대시켰을 때에, 확대된 제1레이어에 의해 타 레이어가 커버되는 모습을 나타내는 예시도이다.
이하에서는 첨부도면을 참조하여 본 발명에 따른 실시예들에 관해 상세히 설명한다. 이하 실시예들의 설명에서는 첨부된 도면들에 기재된 사항들을 참조하는 바, 각 도면에서 제시된 동일한 참조번호 또는 부호는 실질적으로 동일한 기능을 수행하는 구성요소를 나타낸다.
만일, 실시예에서 제1구성요소, 제2구성요소 등과 같이 서수를 포함하는 용어가 있다면, 이러한 용어는 다양한 구성요소들을 설명하기 위해 사용되는 것이며, 용어는 하나의 구성요소를 다른 구성요소와 구별하기 위하여 사용되는 바, 이들 구성요소는 용어에 의해 그 의미가 한정되지 않는다. 실시예에서 사용하는 용어는 해당 실시예를 설명하기 위해 적용되는 것으로서, 본 발명의 사상을 한정하지 않는다.
또한, 실시예에서는 본 발명의 사상과 직접적인 관련이 있는 구성들에 관해서만 설명하며, 그 외의 구성에 관해서는 설명을 생략한다. 그러나, 본 발명의 사상이 적용된 장치 또는 시스템을 구현함에 있어서, 이와 같이 설명이 생략된 구성이 불필요함을 의미하는 것이 아님을 밝힌다. 실시예에서 "포함하다" 또는 "가지다"와 같은 용어는 명세서 상에 기재된 특징, 숫자, 단계, 동작, 구성요소 또는 이들의 조합이 존재함을 지정하기 위한 것이며, 하나 이상의 다른 특징, 숫자, 단계, 동작, 구성요소 또는 이들의 조합이 존재하거나 부가되는 가능성을 배제하는 것은 아니다.
도 1은 본 발명의 제1실시예에 따른 디스플레이장치(100)의 예시도이다.
도 1에 도시된 바와 같이, 본 실시예의 디스플레이장치(100)는 TV로 구현되며, 방송국의 송출장비(미도시)로부터 방송 컨텐츠를 수신하여 방송영상을 표시하는 것 뿐만 아니라, 로컬 접속된 영상재생장치(미도시)로부터 다양한 영상컨텐츠를 제공받아 영상으로 표시할 수 있다. 또한, 디스플레이장치(100)는 인터넷에 통신 접속됨으로써 서버(10)에 접속할 수 있는 바, 서버(10)로부터 스트리밍 방식 또는 VOD(video-on-demand) 방식 등에 따라서 영상컨텐츠를 제공받을 수 있다. 또한, 디스플레이장치(100)는 서버(10)로부터 웹 페이지(20) 또는 웹 어플리케이션과 같은 웹 기반의 컨텐츠를 제공받아 실행할 수 있다.
웹 페이지(20)를 표시하는 경우에, 디스플레이장치(100)는 웹 브라우저(web browser) 프로그램을 실행하고, 서버(10)에 사용자가 입력 또는 지정한 특정 어드레스의 웹 페이지(20)의 데이터를 요청한다. 디스플레이장치(100)는 서버(10)로부터 수신되는 데이터를 분석하고, 분석 결과에 따라서 데이터를 웹 브라우저의 웹 페이지 표시영역 내에 영상으로 표시한다.
웹 페이지(20)는 사전에 약속된 규격에 따라서 작성되므로, 디스플레이장치(100)는 해당 규격에 따라서 웹 페이지(20)를 분석한다. 웹 페이지(20)는 HTML(hypertext markup language), XML(extensible markup language) 등과 같은 구조적 문서 규격에 따른다. 구조적 문서라는 것은 문서를 이루는 복수의 요소들이 상호간에 계층적인 관계를 가지는 형식의 문서를 의미한다.
디스플레이장치(100)가 웹 페이지(20)의 데이터를 분석하여 웹 페이지(20)를 표시하는 방법에 관한 자세한 내용은 후술한다.
도 2는 디스플레이장치(100)의 구성 블록도이다.
도 2에 도시된 바와 같이, 본 실시예에 따른 디스플레이장치(100)는 TV이지만, 본 발명의 사상이 반영될 수 있는 디스플레이장치(100)는 TV에만 한정되지 않는다. 예를 들면, 디스플레이장치(100)는 휴대용 멀티미디어 재생장치, 태블릿, 모바일 폰과 같이 영상을 표시할 수 있는 제반 전자장치로 구현될 수 있다. 또는, 본 발명의 사상은, 자체적으로 영상을 표시할 수 없고 대신 타 디스플레이장치 또는 모니터에 영상을 출력하는 셋탑박스나 컴퓨터본체에도 적용될 수 있다.
디스플레이장치(100)는 외부와 데이터/신호를 송수신하도록 통신하는 통신부(110)와, 통신부(110)에 수신되는 데이터가 영상신호이면 이를 영상으로 표시하는 표시부(120)와, 사용자에 의한 입력 동작이 수신되는 입력부(130)와, 데이터가 저장되는 저장부(140)와, 디스플레이장치(100)의 제반 동작을 제어하며 데이터를 처리하는 처리부(150)를 포함한다.
통신부(110)는 디스플레이장치(100)가 서버(10) 등과 같은 외부와 양방향 통신이 가능하도록 로컬 또는 네트워크를 통한 데이터의 송수신을 수행한다. 통신부(110)는 각 통신규격에 따른 접속 포트 또는 접속 모듈의 집합체에 의해 구현될 수 있으며, 지원 가능한 프로토콜 및 통신 접속 대상이 어느 하나의 종류 또는 형식으로 한정되지 않는다. 예를 들면, 통신부(110)는 방송신호를 튜닝하기 위한 튜너(미도시), AP(미도시)와의 무선통신을 위한 와이파이 통신모듈(미도시), 별도의 유선 접속을 위한 이더넷 모듈(미도시), USB 메모리의 접속을 위한 USB 포트(미도시) 등을 포함할 수 있다.
표시부(120)는 처리부(150)에 의해 처리되는 영상신호를 영상으로 표시한다. 예를 들면, 표시부(120)는 처리부(150)로부터 출력되는 튜닝된 방송신호를 방송영상으로 표시한다. 표시부(120)의 구현 방식은 한정되지 않으며, 예를 들면 액정(liquid crystal), 플라즈마(plasma), 발광 다이오드(light-emitting diode), 유기발광 다이오드(organic light-emitting diode), 면전도 전자총(surface-conduction electron-emitter), 탄소 나노 튜브(carbon nano-tube), 나노 크리스탈(nano-crystal) 등의 다양한 디스플레이 방식으로 구현될 수 있다.
표시부(120)는 그 구현 방식에 따라서 부가적인 구성을 추가적으로 포함할 수 있다. 예를 들면, 액정 방식인 경우에, 표시부(120)는 액정 디스플레이 패널(미도시)과, 액정 디스플레이 패널(미도시)에 광을 공급하는 백라이트유닛(미도시)과, 액정 디스플레이 패널(미도시)을 구동시키는 패널구동기판(미도시) 등을 포함한다.
입력부(130)는 사용자의 조작 또는 입력에 따라서 기 설정된 다양한 제어 커맨드 또는 정보를 처리부(150)에 전달한다. 입력부(130)는 사용자의 의도에 따라서 사용자의 조작에 의해 발생하는 다양한 이벤트를 정보화하여 처리부(150)에 전달한다. 입력부(130)는 정보의 입력방식에 따라서 다양한 형태로 구현될 수 있는 바, 예를 들면 디스플레이장치(100) 외측에 설치된 키/버튼, 디스플레이장치(100)의 본체와 이격된 별도의 리모트 컨트롤러, 표시부(120)에 일체화된 터치스크린 등이 가능하다.
저장부(140)는 처리부(150)의 처리 및 제어에 따라서 다양한 데이터가 저장된다. 저장부(140)는 처리부(150)에 의해 억세스됨으로써, 데이터의 독취(read), 기록(write), 수정(edit), 삭제(delete), 갱신(update) 등이 수행된다. 저장부(140)는 디스플레이장치(100)의 시스템 전원의 제공 유무와 무관하게 데이터를 보존할 수 있도록 플래시메모리(flash-memory), 하드디스크 드라이브(hard-disc drive)와 같은 비휘발성 메모리로 구현된다.
처리부(150)는 통신부(110)에 수신되는 데이터/신호에 대해 다양한 프로세스를 수행한다. 통신부(110)에 영상신호가 수신되면, 처리부(150)는 영상신호에 대해 영상처리 프로세스를 수행하고, 이러한 프로세스가 수행된 영상신호를 표시부(120)에 출력함으로써 표시부(120)에 영상이 표시되게 한다.
처리부(150)가 수행하는 영상처리 프로세스의 종류는 한정되지 않으며, 예를 들면 입력되는 스트림을 영상, 음성, 부가데이터의 각 하위 스트림으로 구분하는 디멀티플렉싱(de-multiplexing), 영상스트림의 영상 포맷에 대응하는 디코딩(decoding), 인터레이스(interlace) 방식의 영상스트림을 프로그레시브(progressive) 방식으로 변환하는 디인터레이싱(de-interlacing), 영상스트림을 기 설정된 해상도로 조정하는 스케일링(scaling), 영상 화질 개선을 위한 노이즈 감소(noise reduction), 디테일 강화(detail enhancement), 프레임 리프레시 레이트(frame refresh rate) 변환 등을 포함할 수 있다.
처리부(150)는 데이터의 종류, 특성에 따라서 다양한 프로세스를 수행할 수 있으므로 처리부(150)가 수행 가능한 프로세스를 영상처리 프로세스로 한정할 수 없으며, 또한 처리부(150)가 처리 가능한 데이터가 통신부(110)에 수신되는 것만으로 한정할 수 없다. 예를 들면, 처리부(150)는 디스플레이장치(100)에 사용자의 발화가 입력되면 기 설정된 음성처리 프로세스에 따라서 해당 발화를 처리할 수 있다. 처리부(150)는 이러한 여러 기능을 통합시킨 SOC(system-on-chip)가 인쇄회로기판에 장착되거나, 또는 이러한 각 프로세스를 독자적으로 수행할 수 있는 개별적인 칩셋(chip-set)들이 인쇄회로기판 상에 장착된 영상처리보드(미도시)로 구현된다.
이하, 처리부(150)의 구성에 관해 구체적으로 설명한다.
도 3은 처리부(150)의 구성 블록도이다. 본 도면에서 설명하는 구성요소들은 처리부(150)의 구성 중에서 본 발명의 실시예와 직접적인 관련성이 있는 일부일 뿐이므로, 이들 구성요소들만으로 처리부(150)를 구현할 수 있는 것은 아니다. 실제 제품으로 처리부(150)를 구현하기 위해서는, 본 실시예에서 설명하지 않은 추가적인 구성들을 필요로 하며, 이는 본 발명의 사상과 직접적으로 관련되지 않은 사항이므로 설명하지 않는다.
도 3에 도시된 바와 같이, 처리부(150)는 시스템 버스(151)를 통해 접속된 CPU(153), GPU(157), RAM(155)을 포함한다. 시스템 버스(151)에는 저장부(140), 통신부(110), 표시부(120)가 접속됨으로써 CPU(153) 또는 GPU(157)에 대해 데이터의 송수신이 가능하다.
CPU(153)는 데이터의 연산 및 소프트웨어의 실행이 수행되는 하드웨어로서, 기계어로 작성된 프로그램의 명령어를 해석하여 연산하고, 그 결과를 외부로 출력한다. CPU(153)는 시스템 버스(151)를 통해 디스플레이장치(100)의 타 구성요소와 데이터를 교환하면서 디스플레이장치(100)의 시스템 전체를 제어하는 바, 디스플레이장치(100)의 모든 작동 과정을 제어한다. CPU(153)는 주변의 IC(integrated circuit)이 별도 설치된 형태의 MCU(micro control unit)과, IC가 통합된 SOC의 형태가 있다.
CPU(153)는 기본적으로 인출(fetch), 해독(decode), 실행(execute)의 세 단계로 구성된 일련의 동작을 반복함으로써 명령어를 실행해 나간다. 인출 단계는 주 기억장치인 저장부(140)에 저장된 명령어 하나를 독취하는 단계이며, 해독 단계는 독취한 명령어를 제어 정보로 해독하는 단계이며, 실행 단계는 해독된 명령을 실행하는 단계이다. CPU(153)는 한 명령어의 실행이 끝나면 다음 명령어에 대한 인출 단계를 시작한다.
CPU(153)는 CPU(153)에서 처리할 명령어를 저장하는 역할을 하는 프로세서 레지스터(processor register)와, 데이터에 대한 산술연산 및 논리연산을 담당하는 산술논리연산유닛(arithmetic logic unit, ALU)과, 명령어의 해석 및 실행을 위해 CPU(153)를 내부적으로 제어하는 제어부(control unit)와, 내부 버스를 포함한다.
GPU(157)는 그래픽 처리, 그 중에서도 특히 연산 처리의 부담이 많은 3차원 그래픽 데이터의 처리를 주로 담당한다. CPU(153) 및 GPU(157)는 데이터/정보의 연산 처리를 수행한다는 측면에서는 유사하다. 다만, CPU(153)가 전반적인 종류의 데이터를 처리하는 것에 비해, GPU(157)는 표시부(120)에 영상으로 표시되는 그래픽 데이터를 전문적으로 처리한다는 차이가 있다. GPU(157)는 그래픽 렌더링(graphic redering)에 사용되는 특수한 명령어들을 포함하므로, CPU(153)에 비해 효율적으로 그래픽 처리가 가능하다.
영상으로 표시되기 위한 그래픽 데이터는 2차원 그래픽 데이터와 3차원 그래픽 데이터로 구분할 수 있다. 이 중에서 3차원 그래픽 데이터는 2차원 그래픽 데이터는 물론, 텍스트 데이터나 오디오 데이터 등과 같은 기타 종류의 데이터에 비해 고도의 연산 처리를 요구한다. 그런데, CPU(153)는 기본적으로 디스플레이장치(100)의 전반적인 동작을 위한 제어를 수행한다. 만일 GPU(157)가 없이 CPU(153) 단독으로 3차원 그래픽 데이터까지 처리하게 되면, CPU(153)의 부담이 과도하게 되어 디스플레이장치(100) 전체적인 퍼포먼스가 저하될 수 있다. 이에, 그래픽 연산을 전문적으로 수행하는 GPU(157)가 디스플레이장치(100)에 추가됨으로써, CPU(153)의 연산 부담을 줄일 수 있다.
여기서, GPU(157)가 처리하기 위한 연산 처리의 부담이 많은 데이터는 3차원 그래픽 데이터인 것만으로 한정할 수 없으며, GPU(157)는 2차원 그래픽 데이터를 처리할 수 있다. 또는, GPU(157)는 CPU(153)가 수행하는 통상적인 일반 어플리케이션의 연산을 대신할 수 있는 바, 이를 GPGPU(general-purpose computing on graphics processing units)라고 지칭한다.
이하, GPU(157)에 의한 3차원 그래픽 데이터의 처리에 관련된 몇 가지 용어의 의미에 관해 설명한다.
렌더링은 디지털 연산에 의해 어떠한 모델, 또는 복수의 모델을 포함하는 장면으로부터 영상을 만들어내는 과정을 의미한다. 하나의 장면의 데이터는 구조화된 오브젝트(object)들과, 오브젝트들에 의해 장면을 표현하기 위한 오브젝트들의 배열, 시점, 텍스처 맵핑(texture mapping), 조명, 셰이딩(shading) 정보를 포함한다. 이들 정보에 기초한 렌더링에 의해 디지털 영상이 생성된다. 렌더링 방식은 기본적으로 GPU(157)를 통한 그래픽스 파이프라인(graphics pipeline)을 따라서 장면 데이터에 저장되어 있는 3차원 데이터로부터 2차원의 영상을 만들어내는 과정이다.
그래픽스 파이프라인 또는 렌더링 파이프라인은 3차원 영상을 2차원 래스터(raster) 영상으로 표현하기 위한 단계적인 방법을 지칭한다. 래스터는 영상을 2차원 배열 형태의 픽셀로 구성하고, 이들 픽셀들의 모습을 조합하여 하나의 영상 정보를 표현하는 방식을 의미한다.
텍스처는 3차원 그래픽에서 폴리곤(polygon)으로 제작한 입체에 좌표값을 맞춰 렌더링했을 때 보이게 되는 2차원 이미지이다. 즉, 텍스처 맵핑은 가상의 3차원 물체의 표면에 세부적 질감의 묘사를 하거나 색을 칠하는 기법으로서, 2차원 이미지를 3차원 입체의 표면에 사상함으로써 물체가 사실적으로 보이게 한다.
이상 설명한 구조의 디스플레이장치(100)에서 웹 페이지 영상을 표시하는 예시에 관해, 이하 설명한다.
도 4는 디스플레이장치(100)에 표시되는 웹 페이지 영상의 일례를 나타내는 예시도이다.
도 4에 도시된 바와 같이, 디스플레이장치(100)가 실행 및 표시하는 웹 브라우저 프로그램(210)은 실제 웹 페이지의 영상이 표시되는 영역인 웹뷰(webview)(211)와, 웹뷰(211)를 둘러싸며 웹 페이지에 관련된 기능을 조정하는 옵션이 포함된 브라우징 프레임(browsing frame)(213)을 포함한다. 다른 웹 페이지가 표시되도록 사용자가 지정하면, 웹 브라우저 프로그램(210)이 제공하는 브라우징 프레임(213)은 그대로 있고, 웹뷰(211)에 표시되는 웹 페이지가 전환된다.
브라우징 프레임(213)은 웹 브라우저 프로그램에 따라서 다양한 형태 및 기능을 반영할 수 있으며, 기본적으로는 웹 페이지의 어드레스를 입력 및 표시하기 위한 어드레스 표시 영역과, 웹 페이지의 표시를 제어하기 위한 다양한 메뉴와 같은 사용자 인터페이스를 포함한다.
앞서 설명한 바와 같이 웹 페이지는 HTML과 같은 구조적 문서 규격에 따라서 작성되어 있는 바, 디스플레이장치(100)가 수신하는 웹 페이지의 데이터는 계층 구조를 가지는 여러 오브젝트를 포함한다. 이러한 오브젝트는 텍스트, 이미지, 동영상, 오디오, 3차원 그래픽 요소 등을 포함한다.
여기서, 사용자는 웹 페이지 내의 특정한 3차원 그래픽 오브젝트(220)를 선택하여 풀스크린(full-screen)으로 표시하도록 지정할 수 있다.
도 5는 도 4의 웹 페이지에서 일 그래픽 오브젝트(220)를 풀스크린으로 표시하는 모습을 나타내는 예시도이다.
도 5에 도시된 바와 같이, 그래픽 오브젝트(220)는 웹뷰(211)의 영상표시 가능영역 전체에 확장 표시되며, 웹 페이지 영상의 나머지 그래픽 요소들은 표시되지 않는다. 여기서, 풀스크린의 의미는 웹뷰(211)를 대상으로 할 수도 있지만, 표시부(120, 도 2 참조)를 대상으로 할 수도 있다. 즉, 그래픽 오브젝트(220)가 풀스크린으로 표시된다는 의미는, 그래픽 오브젝트(220)는 웹뷰(211) 전체 뿐만이 아닌 표시부(120, 도 2 참조)의 영상표시영역 전체에 확장 표시되는 경우에도 적용이 가능하다.
그런데, 그래픽 오브젝트(220)가 풀스크린으로 표시되는 동안에, 디스플레이장치(100)에 의해 텍스처로서 렌더링되는 그래픽 요소는 그래픽 오브젝트(220) 뿐만 아니라 웹 페이지에 포함된 타 오브젝트들도 포함한다. 이와 같이 표시되지 않는 타 오브젝트가 렌더링되는 것은, 불필요한 연산으로 인해 디스플레이장치(100)의 퍼포먼스를 낮추게 된다. 이를 방지하는 위한 실시예에 관해서는 후술한다.
이하, 웹 페이지의 구조에 관해 설명한다. 웹 페이지는 여러 가지 방식이 적용될 수 있지만, 일례로 HTML, CSS(cascading style sheets), 자바 스크립트(Java script)를 포함하여 구성될 수 있다.
HTML은 웹 페이지를 작성할 때 사용하는 프로그래밍 언어의 한 종류로서, 특히 하이퍼텍스트를 작성하기 위해 개발되었다. HTML은 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들의 작성에 사용되고 있다. HTML은 전자 문서의 서식을 정의하기 위해 만들어졌으며, 국제표준 SGML의 부분 집합으로 정의된다. HTML은 SGML에서 특히 하이퍼텍스트를 강조하여 만들어진 언어이며, 아스키 코드로 된 일반적인 텍스트로 구성되었다.
HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어를 포함한다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. HTML은 다양한 오브젝트를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 "<>"에 의해 둘러싸인 태그(tag)로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 페이지의 구현을 위해 자바 스크립트, 본문, 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다.
CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로서, HTML, XHTML, XML 등에 사용한다. CSS는 레이아웃과 스타일을 정의할 때의 자유도가 높다. 마크업 언어를 웹 페이지의 몸체로 비유하면, CSS는 그 몸체를 꾸미기 위한 옷과 악세서리로 비유할 수 있다. 즉, HTML 구조를 그대로 두고 CSS만 변경하더라도 웹 페이지의 형태가 바꾸어 표시될 수 있다.
기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 이에 관련되는 전체 페이지의 내용이 한꺼번에 변경된다. 이에, CSS의 적용에 의해 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.
자바 스크립트는 객체 기반의 스크립트 프로그래밍 언어로서, HTML의 정적이고 단조로운 부분을 극복하여 웹 페이지에서의 동적인 부분을 표현할 수 있도록 한다. 자바 스크립트는 HTML 문서 내에 직접 기술하는 방식으로 적용되며, "script"의 태그를 사용함으로써 웹 페이지 내에서 구별될 수 있다.
이하, 웹 페이지를 표시하기 위한 디스플레이장치(100)의 웹 플랫폼(300)의 구조에 관해 설명한다.
도 6은 디스플레이장치(100)의 웹 플랫폼(300)의 계층 구조를 나타내는 구성 블록도이다.
도 6에 도시된 바와 같이, 웹 플랫폼(300)은 가장 하위 계층에 운영체제(310)가 있으며, 운영체제(310) 상에 윈도우 관리자(320) 및 OpenGL(351)이 있고, 윈도우 관리자(320) 상에 웹 엔진(330)이 있다. 웹 페이지 및 웹 어플리케이션(340)은 웹 엔진(330) 상에서 실행된다. 또한, 웹 엔진(330)은 렌더링 엔진(331), JS 엔진(333), WebGL(353)을 포함한다. 여기서, WebGL(353) 및 OpenGL(351)은 API(application programming interface)(350)이다.
운영체제(310)는 디스플레이장치(100)의 시스템 하드웨어를 관리하며, 제반 어플리케이션을 실행하기 위해 하드웨어 추상화 플랫폼 및 공통 시스템 서비스를 제공하는 시스템 소프트웨어이다. 운영체제(310)는 실행되는 어플리케이션이 CPU 등을 비롯한 시스템 자원들을 사용할 수 있도록 제공하고, 이들을 추상화하여 파일 시스템 등의 서비스를 제공한다. 운영체제(310)는 기본적으로 사용자에게 어플리케이션을 쉽고 효율적으로 실행할 수 있는 환경을 제공하고, 디스플레이장치의 하드웨어 및 소프트웨어 자원을 효율적으로 할당, 관리 및 보호하며, 잘못된 자원 사용의 감시와, 입출력 장치 등의 자원에 대한 연산과 제어를 관리한다.
윈도우 관리자(320)는 웹 브라우징 프로그램에 의한 복수의 윈도우의 처리 및 표시를 관리한다. 여기서 지칭하는 윈도우는, 앞선 도 4에서 도시된 바와 같은 브라우징 프레임(213, 도 4 참조) 및 웹뷰(211, 도 4 참조) 각각을 의미한다. 윈도우 관리자(320)는 웹 엔진(330)의 하위 계층에서, 웹 엔진(330)에 의해 표시되는 윈도우인 웹뷰(211, 도 4 참조)를 브라우징 프레임(213, 도 4 참조)과 조합시킴으로써 전체적인 브라우징 영상을 표시하도록 처리한다.
웹 엔진(330)은 웹뷰(211, 도 4 참조)에 웹 페이지의 영상이 표시되도록 처리한다. 윈도우 관리자(320)와 비교할 때, 웹 엔진(330)은 웹 페이지의 영상 처리를 수행하는 것에 비해, 윈도우 관리자(320)는 웹 엔진(330)에 의해 표시되는 웹 페이지의 윈도우를 별도의 타 윈도우와 함께 표시되도록 하는 차이가 있다. 즉, 웹 엔진(330)은 웹 페이지의 렌더링에만 관여한다.
렌더링 엔진(331)은 웹 코어(web core)라고도 지칭한다. 렌더링 엔진(331)은 웹 페이지의 HTML 및 CSS를 분석하고, 분석 결과를 영상으로 표시되게 렌더링한다. 렌더링 엔진(331)의 예시로는 웹킷(Webkit) 엔진과 게코(Gecko) 엔진이 있는데, 웹킷 엔진은 최초 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진으로부터 출발하였다. 웹킷 엔진의 렌더링 클래스는 C++ 컴파일러 내에 포함되어 있는 기능인 RTTI(runtime type information) 기법을 사용한다. RTTI는 오브젝트의 유형을 실행 시에 결정할 수 있도록 허락하는 방식이다.
JS 엔진(333)은 JS 파서(parser)라고도 지칭한다. JS 엔진(333)은 웹 페이지의 자바 스크립트 코드를 분석하여, 실행되도록 처리한다.
API(350)는 어플리케이션이 사용할 수 있도록, 운영체제(310) 또는 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 의미한다. 즉, API(350)는 어플리케이션이 운영체제(310)에 대해 어떤 처리를 위해서 호출할 수 있는 서브루틴 또는 함수의 집합이다. API(350)는 어플리케이션 내에서 실행을 위해 특정 서브루틴에 연결을 제공하는 함수를 호출하는 것으로 구현된다. 그러므로 하나의 API(350)는 함수의 호출에 의해 요청되는 작업을 수행하기 위해 이미 존재하거나 또는 연결되어야 하는 몇 개의 프로그램 모듈이나 루틴을 가진다.
OpenGL(351)은 1992년 실리콘 그래픽스에서 만든 2차원 및 3차원 그래픽 표준 API 규격으로서, 프로그래밍 언어 사이 또는 플랫폼 사이의 교차 응용 프로그래밍을 지원한다. OpenGL(351)은 약 250여개 가량의 함수 호출을 이용하여 단순한 기하도형에서부터 복잡한 3차원 장면의 생성이 가능하게 한다.
그래픽 라이브러리(graphic library)는 구체성을 기준으로 하여 고수준과 저수준으로 분류되는데, OpenGL(351)은 저수준 라이브러리에 속한다. VRML(virtual reality modeling language)과 같은 고수준 라이브러리는 물체간의 관계를 정의함으로써 장면을 그려낸다. 이에 비해 저수준 라이브러리는 모델링보다는 랜더링 기능에 중점을 두며, 세부적인 명령을 일일이 전달함으로써 물체의 가장 기본적인 요소를 그린다. 저수준 라이브러리는 고수준 라이브러리에 비해 사용 방법이 더 어렵지만 보다 세밀한 부분까지 그릴 수 있다.
OpenGL(351)은 GL 및 GLU의 두 가지 라이브러리를 포함한다. GL은 기본적인 그리기 기능을 제공하는 핵심 라이브러리로서, OpenGL(351)의 본체에 해당한다. GL은 기초 도형을 렌더링하는 함수들을 포함한다. 한편, GLU는 GL을 보조하는 유틸리티 라이브러리이다. GLU는 분할, 투영 등의 고급 기능을 제공하며, 입체 도형을 생성하는 편의 기능도 제공한다.
WebGL(353)은 웹 기반의 그래픽 라이브러리이다. WebGL(353)은 자바 스크립트 언어를 통해서 사용할 수 있으며, 호환성을 가진 웹 브라우저에서 인터랙티브한 3차원 그래픽을 사용할 수 있도록 제공한다. WebGL(353)은 플러그인의 사용 없이 3차원 그래픽스 API를 제공하는 캔버스 HTML 요소의 일부분이다.
WebGL(353)은 OpenGL ES 2.0을 기반으로 하며, 3차원 그래픽을 사용하기 위한 프로그래밍 인터페이스를 제공한다. 여기서, OpenGL ES는 임베디드 단말을 위한 OpenGL이다. OpenGL ES는 3차원 컴퓨터 그래픽스 API인 OpenGL의 서브셋으로, 휴대전화, PDA 등과 같은 임베디드 단말을 위한 API이다.
웹 페이지 또는 웹 어플리케이션(340)의 그래픽 오브젝트의 표시를 위해서는, 해당 그래픽 오브젝트에 대해 OpenGL(351)이 호출됨으로써 텍스처에 로딩되어야 한다. 그러나, 웹 기반의 그래픽 오브젝트의 경우에, 바로 OpenGL(351)의 함수를 호출하는 것은 설계 구조상 용이하지 않을 수 있다. 이에, 그래픽 오브젝트에 대해 WebGL(353)의 함수가 호출되고, 호출된 WebGL(353)의 함수에 의해 다시 OpenGL(351)의 대응 함수가 호출되는 방식이 적용된다. 즉, 웹 기반의 그래픽 오브젝트는 WebGL(353)의 호출 과정을 거쳐서 OpenGL(351)을 호출한다.
WebGL(353)의 의의는 웹 기반으로 동작하는 어플리케이션이나 또는 웹 문서의 오브젝트를 GPU의 가속 처리에 의해 3차원 렌더링이 수행되도록 할 수 있다는 점이다. 즉, 3차원 그래픽 오브젝트는 WebGL(353)의 호출에 의해 웹 기반에서 구현될 수 있다.
이하, 디스플레이장치(100)가 웹 페이지를 영상으로 표시하는 과정에 관해 설명한다.
도 7은 디스플레이장치(100)가 웹 페이지를 영상으로 표시하기 위한 분석 단계를 나타내는 블록도이다.
도 7에 도시된 바와 같이, S110 단계에서, 디스플레이장치(100)는 웹 페이지의 문서 구조를 분석한다. 문서 구조의 분석은 웹 페이지의 HTML, CSS, 자바 스크립트의 분석을 포함하는 바, 웹 페이지 내부의 데이터가 태그, 스크립트, 데이터 등으로 분류된다.
S120 단계에서, 디스플레이장치(100)는 문서 구조의 분석 결과에 기초하여 DOM 트리(tree)를 구축한다. 즉, 디스플레이장치(100)는 HTML 문서의 태그를 DOM 노드로 변경하여, 하위 컨텐츠들을 분류 배치한다.
S130 단계에서, 디스플레이장치(100)는 DOM 트리에 기초하여 렌더 오브젝트(render object) 트리를 구축한다. 렌더 오브젝트 트리는 DOM 트리에 대해 CSS에서 정의된 스타일 요소들을 결합한 구조이다. 렌더 오브젝트 트리는 영상으로 표시되는 문서의 모든 DOM 정보와, 각 DOM 노드의 스타일 정보를 포함한다.
S140 단계에서, 디스플레이장치(100)는 렌더 오브젝트 트리에 기초하여 렌더 레이어(render layer) 트리를 구축한다. 렌더 레이어 트리는 렌더 오브젝트 트리의 노드들 중에서 실제로 영상으로 표시되는 노드들의 집합이다. 즉, 렌더 레이어 트리는 화면에 그려지지 않는 노드들은 포함하지 않는 바, 디스플레이장치(100)가 웹 페이지의 영상을 표시하기 위한 페인팅(painting)을 수행하는 기초가 된다.
S150 단계에서, 디스플레이장치(100)는 렌더 레이어 트리에 기초하여 그래픽 레이어(graphic layer) 트리를 구축한다. 그래픽 레이어 트리는 렌더 레이어 트리의 노드들 중에서 가속 컴포지터(accelerated compositor)를 사용하는 노드들의 집합이다.
가속 컴포지터는 GPU가 처리되는 그래픽 레이어 트리의 노드들을 조합한다. 초기의 웹 플랫폼에서부터 사용하는 2차원 그래픽 렌더링은 CPU에 의해 수행되는 것에 비해, 웹 게임 등에 사용되는 3차원 그래픽 렌더링은 고도의 연산처리를 필요로 하므로 CPU보다는 GPU에 의해 수행된다. WebGL은 이러한 3차원 그래픽 렌더링을 지원하는 바, 가속 컴포지터는 WebGL의 호출에 의해 텍스처로 렌더링되는 3차원 그래픽 오브젝트들을 조합한다.
렌더 레이어 트리 및 그래픽 레이어 트리는 모두 영상으로 표시되기 위한 그래픽 오브젝트를 포함한다. 다만, 그래픽 레이어 트리는 3차원 그래픽 오브젝트와 같이 GPU에 의한 고도의 연산이 필요한 노드만을 포함한다. 이에 비해, 렌더 레이어 트리는 그래픽 레이어 트리의 노드와, 고도의 연산을 필요로 하지 않고 CPU 또는 GPU에 의해 처리되는 2차원 그래픽 오브젝트들의 노드를 포함한다.
S160 단계에서, 디스플레이장치(100)는 그래픽 레이어 트리의 각 노드에 대해 API를 호출한다.
S170 단계에서, 디스플레이장치(100)는 API 호출에 따라서 각 그래픽 오브젝트를 비디오 메모리의 각 텍스처에 로딩한다.
S180 단계에서, 디스플레이장치(100)는 비디오 메모리에 로딩된 각 텍스처를 조합한다.
S190 단계에서, 디스플레이장치(100)는 조합된 텍스처를 표시한다. 이에 의하여, 디스플레이장치(100)는 웹 페이지를 표시한다.
이하, HTML 문서에 기초하여 DOM 트리를 구축하는 방법에 관해 설명한다.
도 8은 HTML 구조에 따라서 작성된 웹 문서의 예시도이다.
도 9는 도 8의 웹 문서의 HTML 구조에 기초하여 구축된 DOM 트리의 예시도이다.
도 8에 도시된 바와 같이, 웹 문서는 HTML 태그 내에 텍스트 컨텐츠가 기술되어 있다. 태그는 html 내에 head 및 body가 있으며, head 내에는 title이, body 내에는 h1 및 form이 있다. title 태그는 "test"라는 컨텐츠를 가지며, h1 태그는 "example"이라는 컨텐츠를 가지며, form 태그는 "sample"이라는 컨텐츠를 가진다.
이와 같이, HTML에 따라서 작성된 각 태그 및 컨텐츠는 상호간에 상위계층 및 하위계층으로 구분되는 바, HTML 구조로부터 이러한 계층 구조를 보다 명확하게 나타내는 DOM 트리가 구축될 수 있다.
도 9에 도시된 바와 같이, 웹 문서 전체를 나타내는 노드인 document 아래에 루트(root) 노드인 html이 있다. html 아래에는 head 및 body 노드가 있으며, head 아래에는 title 노드가 있고, body 아래에는 h1 및 form 노드가 있다. 또한, title, h1, form의 각각의 노드 아래에는 "test", "example", "sample"의 컨텐츠가 있다.
디스플레이장치(100)는 웹 페이지를 표시하기 위해, 먼저 도 8과 같이 기술된 문서를 분석하여 도 9와 같은 DOM 트리를 구축하고, DOM 트리에 기초하여 렌더 오브젝트 트리, 렌더 레이어 트리, 그래픽 레이어 트리를 도출한다.
이하, DOM 트리 구축 이후, 그래픽 레이어 트리의 오브젝트들을 영상으로 표시하는 원리에 관해 설명한다.
도 10은 렌더 오브젝트 트리(410)의 오브젝트들 중에서 GPU에 의한 가속 처리가 수행되는 오브젝트들을 표시하는 원리를 나타내는 예시도이다. 본 도면에서는 실시예를 간략히 설명하기 위해 DOM 트리 및 렌더 레이어 트리는 나타내지 않았으나, 실제 분석 동작에서는 DOM 트리 및 렌더 레이어 트리의 구축이 수행됨을 밝힌다.
도 10에 도시된 바와 같이, DOM 트리에 의해 구축된 렌더 오브젝트 트리(410)가 다섯 개의 노드(R1, R2, R3, R4, R5)를 포함하는 예시를 고려한다. 렌더 오브젝트 트리(410)에서 각 노드(R1, R2, R3, R4, R5) 사이의 화살표는 계층 관계를 나타낸다. 본 예시에서, 제2노드(R2) 및 제3노드(R3)는 제1노드(R1)의 하위 계층이며, 제4노드(R4)는 제2노드(R2)의 하위 계층이며, 제5노드(R5)는 제4노드(R4)의 하위 계층이다.
이들 노드(R1, R2, R3, R4, R5) 중에서 렌더링 처리되지 않는 노드(R2)를 제외한 나머지가 렌더 레이어 트리로 구축되며, 다시 이들 중에서 GPU에 의해 처리되기 위한 노드(R1, R3, R4, R5)가 그래픽 레이어 트리(420)로 구축된다. 즉, 그래픽 레이어 트리(420)의 각 노드(G1, G3, G4, G5)는 렌더 오브젝트 트리(410)의 일부 노드(R1, R3, R4, R5)에 대응한다.
그래픽 레이어 트리(420)의 구축 단계까지의 동작은 CPU에 의해 처리되며, 이후의 처리 동작은 GPU에 의해 처리된다. GPU는 그래픽 레이어 트리(420)의 노드(G1, G3, G4, G5)에 대해 API(430)를 호출하고, API(430) 호출에 의해 처리된 결과를 비디오 메모리(440)의 텍스처(T1, T3, T4, T5)에 각기 로딩한다. API(430)는 본 실시예의 경우에 WebGL 및 OpenGL을 포함하는 바, 각 노드(G1, G3, G4, G5)에 대해 WebGL의 함수가 호출되면, 다시 WebGL의 함수에 의해 OpenGL의 함수가 호출되어 처리된다.
GPU는 비디오 메모리(440)에 로딩되어 있는 각 텍스처(T1, T3, T4, T5)를 컴포지팅하여 웹뷰에 표시한다. 이와 같은 과정에 따라서, 디스플레이장치(100)는 웹 페이지의 영상을 표시할 수 있다.
그런데, 앞선 도 4 및 도 5에 관련하여 설명한 바와 같이, 웹 페이지 영상에 포함되는 오브젝트들 중에서 GPU의 처리가 필요한 일 오브젝트를 풀스크린으로 표시하는 경우에, 이와 같은 처리방법은 연산 처리의 낭비를 초래할 수 있다. 여기서, 풀스크린이라는 의미는 웹뷰에서의 풀스크린이거나 또는 표시부에서의 풀스크린일 수 있다.
웹뷰 상에 일 오브젝트만 풀스크린으로 표시된다는 것은, 표시되는 해당 오브젝트 이외의 타 오브젝트들은 웹뷰에 표시되지 않는다는 것을 의미한다. 그런데, 앞서 설명한 처리 과정에 따르면 그래픽 레이어 트리(420)의 각 노드(G1, G3, G4, G5)에 대응하는 모든 텍스처(T1, T3, T4, T5)를 컴포지팅하여 표시하게 된다. 따라서, 만일 그래픽 레이어 트리(420)의 일 노드(G5)에 대응하는 텍스처(T5)를 제외한 나머지 텍스처(T1, T3, T4)는 불필요한 요소이다. 또한, 나머지 텍스처(T1, T3, T4)가 불필요한 요소라는 것은, 그 이전 단계인 렌더 오브젝트 트리(410) 및 그래픽 레이어 트리(420)의 구축 시에 대응 노드들이 포함될 필요가 없다는 것을 의미한다.
따라서, 웹 페이지의 오브젝트들 중에서 특별히 고도의 연산이 필요하다고 분류된 오브젝트를 풀스크린으로 표시하는 경우에, 본 실시예는 불필요한 렌더링 과정을 포함하므로, CPU 및 GPU의 연산 부담을 증가시킬 수 있다.
이에, 앞선 실시예에서의 이와 같은 문제점을 해소하기 위한 제2실시예에 관해, 이하 설명한다.
도 11은 렌더 오브젝트 트리의 오브젝트들 중에서 GPU에 의한 가속 처리가 수행되는 오브젝트들을 표시하는 원리를 나타내는 예시도이다. 본 도면은 앞선 도 10의 실시예에 대비되도록 나타낸 것이다.
도 11에 도시된 바와 같이, 사용자가 현재 표시되어 있는 웹 페이지에서 일 오브젝트(R5)를 풀스크린으로 표시하도록 지정하는 경우를 고려한다. 디스플레이장치(100)는 이러한 사용자의 입력에 응답하여 웹 페이지의 DOM 구조를 분석한다. 디스플레이장치(100)는 DOM 구조 분석 결과에 따라서, 렌더 오브젝트 트리(450)를 구축한다.
여기서, 디스플레이장치(100)는 렌더 오브젝트 트리(450)에 풀스크린으로 표시할 노드(R5)만을 포함시키고, 표시하지 않을 노드(R1, R2, R3, R4)는 렌더 오브젝트 트리(450)에서 제외시킨다.
이와 같이 렌더 오브젝트 트리(450)가 구축되면, 이로부터 도출되는 그래픽 레이어 트리(460) 또한 풀스크린으로 표시할 노드(R5)에 대응하는 노드(G5)만을 포함하게 된다. 노드(G5)는 API(470)를 호출함으로써 비디오 메모리(480)의 텍스처(T5)에 로딩된다.
본 실시예의 비디오 메모리(480)에는 텍스처(T5)만이 로딩된 상태이므로, 디스플레이장치(100)는 별도의 컴포지팅 동작 없이 해당 텍스처(T5)만을 웹뷰에 표시한다.
앞선 도 10의 경우에는 렌더 오브젝트 트리(410, 도 10 참조)의 노드(R1, R3, R4, R5)에 대응하는 텍스처(T1, T3, T4, T5)가 비디오 메모리(440, 도 10 참조)에 로딩되므로, 디스플레이장치(100)는 표시되지 않는 텍스처(T1, T3, T4)를 풀스크린으로 표시하는 텍스처(T5)와 컴포지팅하였다.
그러나, 본 실시예에서는 풀 스크린으로 표시할 노드(R5)에 대한 렌더링을 수행하고 나머지 노드(R1, R2, R3, R4)에 대해서는 렌더링을 수행하지 않는다. 트리 구조의 분석 및 구축은 CPU에 의해 수행되는데, 풀스크린으로 표시되지 않는 노드(R1, R2, R3, R4)에 대해서는 트리 구조에서 제외시키므로, CPU의 연산 부하를 줄일 수 있다. 또한, API(470)의 호출, 텍스처 렌더링 및 영상 표시는 GPU에 의해 수행되는데, 풀스크린으로 표시하지 않는 노드(R1, R2, R3, R4)에 대한 작업이 줄어들게 되므로, GPU의 연산 부하를 줄일 수 있다.
본 실시예의 내용을 정리하면 다음과 같다. 디스플레이장치(100)는 웹 기반의 컨텐츠로부터 영상으로 표시하기 위한 복수의 오브젝트를 추출할 수 있으며, 추출한 복수의 오브젝트를 메모리에 로딩함으로써 웹 기반 컨텐츠의 영상을 표시할 수 있다. 복수의 오브젝트는 영상 내에서 지정된 위치에 배치된다.
만일, 이들 오브젝트 중에서 사용자가 제1오브젝트를 전체화면으로 표시하도록 지시하는 경우를 고려한다. 단, 반드시 전체화면일 필요는 없으며, 제1오브젝트의 크기를 조정하는 지시일 수도 있다. 제1오브젝트의 크기를 확대 조정하는 지시에 따라서, 디스플레이장치(100)는 제1오브젝트의 크기를 확대 조정하여 표시한다. 이 때, 영상 내의 복수의 오브젝트 중에는 크기가 조정된 제1오브젝트에 의해 커버되는 위치에 있는 제2오브젝트가 하나 이상 있을 수 있다. 이 경우에, 디스플레이장치(100)는 이러한 하나 이상의 제2오브젝트가 메모리에 로딩되지 않게 차단함으로써, 제2오브젝트가 렌더링되지 않도록 한다.
이하, 본 실시예에 따른 디스플레이장치(100)의 제어방법에 관해 설명한다.
도 12 및 도 13은 디스플레이장치(100)의 제어방법을 나타내는 플로우차트이다.
도 12에 도시된 바와 같이, S210 단계에서, 디스플레이장치(100)는 복수의 오브젝트를 포함하는 웹 문서를 수신한다.
S220 단계에서, 디스플레이장치(100)는 웹 문서의 일 오브젝트를 풀스크린으로 표시하도록 지시하는 사용자 입력을 수신하였는지 판단한다.
해당 사용자 입력을 수신하였다면, S230 단계에서, 디스플레이장치(100)는 지시한 오브젝트가 GPU에 의한 처리 대상인지 여부를 판단한다.
지시한 오브젝트가 GPU에 의한 처리 대상인 것으로 판단하면, S240 단계에서, 디스플레이장치(100)는 웹 문서의 복수의 오브젝트 중에서 해당 오브젝트 이외의 오브젝트들을 제외한 렌더 오브젝트 트리를 구축한다.
S250 단계에서, 디스플레이장치(100)는 렌더 오브젝트 트리의 오브젝트에 대해 API를 호출하여 텍스처에 로딩한다.
S260 단계에서, 디스플레이장치(100)는 로딩된 텍스처를 풀스크린으로 표시한다.
도 13에 도시된 바와 같이, 앞선 S220 단계에서 사용자 입력을 수신하지 않았거나 또는 S230 단계에서 오브젝트가 GPU에 의한 처리 대상이 아닌 것으로 판단하면, 디스플레이장치(100)는 통상적인 처리 동작을 실행하도록 S270 단계로 이행한다.
S270 단계에서, 디스플레이장치(100)는 웹 문서의 복수의 오브젝트를 포함하도록 렌더 오브젝트 트리를 구축한다.
S280 단계에서, 디스플레이장치(100)는 렌더 오브젝트 트리의 오브젝트에 대해 API를 호출하여 각 텍스처에 로딩한다.
S290 단계에서, 디스플레이장치(100)는 복수의 오브젝트가 각기 로딩된 각 텍스처들을 컴포지팅한다.
S300 단계에서, 디스플레이장치(100)는 컴포지팅된 텍스처들을 표시한다.
앞선 실시예에서의 디스플레이장치(100)는 사용자가 풀스크린으로 표시하도록 지시한 오브젝트가 GPU 처리 대상인지 여부를 판단하였다. 그러나, 디스플레이장치(100)는 CPU 또는 GPU를 구분하지 않고, 오브젝트가 고도의 연산 처리가 필요한 대상인지 여부를 판단할 수도 있다. 또는, 디스플레이장치(100)는 오브젝트가 특정 API, 즉 WebGL의 호출을 필요로 하는지 여부를 판단할 수도 있다. 이하, 이러한 실시예에 따른 제어방법에 관해 설명한다.
도 14는 본 발명의 제3실시예에 따른 디스플레이장치(100)의 제어방법을 나타내는 플로우차트이다.
도 14에 도시된 바와 같이, S310 단계에서, 디스플레이장치(100)는 복수의 오브젝트를 포함하는 웹 문서를 수신한다.
S320 단계에서, 디스플레이장치(100)는 웹 문서의 일 오브젝트를 풀스크린으로 표시하도록 지시하는 사용자 입력을 수신하였는지 판단한다. 해당 사용자 입력을 수신하지 않았다면, 앞선 도 13에 나타난 과정으로 이행한다.
해당 사용자 입력을 수신하였다면, S330 단계에서, 디스플레이장치(100)는 지시한 오브젝트가 WebGL의 호출을 필요로 하는지 여부를 판단한다. 지시한 오브젝트가 WebGL을 호출하지 않는 것으로 판단하면, 앞선 도 13에 나타난 과정으로 이행한다.
지시한 오브젝트가 WebGL을 호출하는 것으로 판단하면, S340 단계에서, 디스플레이장치(100)는 웹 문서의 복수의 오브젝트 중에서 해당 오브젝트 이외의 오브젝트들을 제외한 렌더 오브젝트 트리를 구축한다.
S350 단계에서, 디스플레이장치(100)는 렌더 오브젝트 트리의 오브젝트에 대해 WebGL을 호출하여 텍스처에 로딩한다.
S360 단계에서, 디스플레이장치(100)는 로딩된 텍스처를 풀스크린으로 표시한다.
이러한 방법에 의하여, WebGL을 사용하는 오브젝트를 포함하는 웹 페이지 또는 웹 어플리케이션에서, 높은 fps(frame per second)를 통한 부드러운 화면 전개를 사용자에게 제공할 수 있다. 특히, 사용자에게 웹 기반 게임을 제공할 때에 부드러운 게임 플레이가 가능하게 하고, 웹 플랫폼 그래픽 퍼포먼스에서 큰 향상을 보일 수 있는 바, 특히 네이티브(native) 어플리케이션 수준의 높은 그래픽 성능을 웹 어플리케이션에서 제공할 수 있다.
이하, 본 발명의 사상을 앞선 실시예들과 다른 관점에서 본 실시예에 관해 설명한다.
도 15는 본 발명의 제4실시예에 따른 디스플레이장치(100)에서 웹 페이지를 렌더링하기 위해 사용되는 버퍼(510, 520, 530, 540)의 동작을 나타내는 구성 블록도이다.
도 15에 도시된 바와 같이, 디스플레이장치(100)는 웹 페이지 또는 오브젝트를 렌더링하기 위해 사용되는 버퍼(510, 520, 530, 540)를 가진다. 버퍼(510, 520, 530, 540)는 네 개로 구성되어 있는 바, 웹 페이지가 렌더링되는 장소인 제1버퍼(510), 제1버퍼(510)에서 렌더링이 완료된 웹 페이지가 옮겨져 임시 저장되는 장소인 제2버퍼(520), 제2버퍼(520)의 웹 페이지가 옮겨져 웹뷰에 페인팅하기 이전에 대기하는 장소인 제3버퍼(530), 웹뷰에 그려지는 웹 페이지가 있는 장소인 제4버퍼(540)이다.
제3버퍼(530)는 오프스크린(off-screen) 버퍼라고도 한다. 제4버퍼(540)는 온스크린(on-screen) 버퍼라고도 하며, 웹 페이지가 웹뷰에 표시되고 있는 동안에 해당 웹 페이지의 데이터가 존재한다.
이와 같이, 버퍼(510, 520, 530, 540)가 여러 개로 구현되는 이유는, 웹 페이지의 데이터 입력, 표시, 변경, 처리 등의 동작이 짧은 시간 동안에 이루어지기 때문이다. 디스플레이장치(100)는 웹 페이지 또는 오브젝트가 버퍼(510, 520, 530, 540) 사이를 이동함에 있어서, 버퍼(510, 520, 530, 540)들 간에 동기를 맞춤으로써 버퍼(510, 520, 530, 540)의 오버플로우/언더플로우를 방지하며 웹 페이지가 정상적으로 표시될 수 있도록 한다.
앞선 제1실시예의 경우에, 웹 페이지의 데이터는 제1버퍼(510)에 입력되어 페인팅된 이후에 순차적으로 제2버퍼(520), 제3버퍼(530), 제4버퍼(540)로 이동한다.
그런데, 앞선 제2실시예 및 제3실시예의 경우에, 디스플레이장치(100)는 WebGL을 사용하는 오브젝트만을 풀스크린으로 표시하는 바, 해당 오브젝트를 웹뷰에 다이렉트로 렌더링한다. 따라서, 이러한 경우에는 제1버퍼(510) 및 제2버퍼(520)를 사용하지 않고 제3버퍼(530) 및 제4버퍼(540)만이 사용된다. 별도의 컴포지팅이 필요하지 않으므로 해당 오브젝트의 데이터를 제3버퍼(530)에 입력되며, 디스플레이장치(100)는 제3버퍼(530)의 오브젝트를 제4버퍼(540)로 이동시킴으로써 해당 오브젝트가 웹뷰에 풀스크린으로 표시되게 한다.
도 16은 본 발명의 제5실시예에 따라서 오브젝트(621)를 풀스크린으로 표시하는 원리를 나타내는 예시도이다.
도 16에 도시된 바와 같이, 디스플레이장치(100)는 WebGL을 사용하지 않는 오브젝트(611)를 페인팅하게 마련된 제1페인트루프(paint loop)(610)와 WebGL을 사용하는 오브젝트(621)을 페인팅하게 마련된 제2페인트루프(620)를 포함한다. 페인트루프는 버퍼에서 일 오브젝트 또는 웹 페이지가 페인팅되는 동작을 의미하는 것으로서, 웹 페이지가 표시되는 동안 이러한 동작이 반복되어 실행되므로 루프라는 표현을 사용한다.
만일 일 오브젝트(621)를 풀스크린으로 표시하지 않고 모든 오브젝트(611, 621)를 표시하는 경우에는, 디스플레이장치(100)는 제1페인트루프(610)에 의해 페인팅되는 오브젝트(611) 및 제2페인트루프(620)에 의해 페인팅되는 오브젝트(621)를 컴포지팅하여 웹뷰에 표시한다. 제1페인트루프(610)에 의한 페인팅 완료 시점 및 제2페인트루프(620)에 의한 페인팅 완료 시점이 차이가 있을 수 있으므로, 디스플레이장치(100)는 이 두 가지 페인팅 동작의 완료되는 시점에서 동기화를 통해 컴포지팅을 수행한다.
반면, 오브젝트(621)를 풀스크린으로 표시하는 경우에는, 디스플레이장치(100)는 제1페인트루프(610)에 의한 페인팅 동작을 배제시키고, 제2페인트루프(620)에 의한 페인팅 동작만에 의해 오브젝트(621)를 페인팅하여 웹뷰에 풀스크린 텍스처(630)로 표시한다. 앞선 실시예들에서 설명한 바와 같이, DOM 트리 구조에서 오브젝트(611)를 포함하지 않도록 렌더 오브젝트 트리를 구축하면, 제1페인트루프(610)에서 페인팅할 대상이 없으므로 제1페인트루프(610)에 의한 페인팅은 수행되지 않는다.
제1페인트루프(610)에 의한 페인팅 동작이 수행되지 않으면 WebGL을 사용하지 않는 오브젝트(611)는 페인팅되지 않는 바, 제1페인트루프(610) 및 제2페인트루프(620) 사이의 컴포지팅 및 동기는 불필요하다.
도 17은 본 발명의 제6실시예에 따라서 오브젝트(721)를 풀스크린으로 표시하는 원리를 나타내는 예시도이다.
도 17에 도시된 바와 같이, 디스플레이장치(100)는 WebGL을 사용하지 않는 오브젝트(711)를 페인팅하게 마련된 제1페인트루프(710)와 WebGL을 사용하는 오브젝트(721)을 페인팅하게 마련된 제2페인트루프(720)를 포함한다.
오브젝트(721)를 풀스크린으로 표시하도록 지시하는 사용자 입력이 수신됨에 따라서, 제2페인트루프(720)는 오브젝트(721)의 페인팅을 수행하여 풀스크린 텍스처(730)를 생성한다.
여기서, 본 실시예에서는 DOM 트리 구조에서 WebGL을 사용하지 않는 오브젝트(711)를 포함하도록 렌더 오브젝트 트리가 구축된다. 이에 따라서, 제1페인트루프(710)는 오브젝트(711)의 페인팅을 수행하고, 복수 개의 오브젝트(711)의 각 텍스처를 컴포지팅한 컴포지트 텍스처(740)를 생성한다.
제1페인트루프(710)에 의한 텍스처(740) 및 제2페인트루프(720)에 의한 텍스처(730)의 생성이 각기 완료되면, 디스플레이장치(100)는 이들 텍스처(730, 740) 중에서 사용자 입력에 대응하는 풀스크린 텍스처(730)를 선택한다. 디스플레이장치(100)는 선택한 풀스크린 텍스처(730)를 웹뷰에 표시한다.
본 실시예가 앞선 제5실시예와 상이한 점은, 제1페인트루프(710)에 의해 오브젝트(711)의 페인팅이 수행된다는 점과, 각기 생성된 텍스처(730, 740) 중 어느 하나가 선택되어 표시된다는 점이다. 즉, WebGL을 사용하는 오브젝트(721)의 텍스처(730)를 풀스크린으로 표시한다는 결과는 본 실시예 및 제5실시예가 동일하지만, 동일한 결과를 도출하기 위한 중간 과정은 상이하다.
도 18은 본 발명의 제8실시예에 따라서 오브젝트(811, 821)를 표시하는 원리를 나타내는 예시도이다.
도 18에 도시된 바와 같이, 어느 한 오브젝트(811, 821)를 풀스크린으로 표시하지 않고 모든 오브젝트(811, 821)를 표시하고자 한다면, 제1페인트루프(810)는 오브젝트(811)를 페인팅하고, 제2페인트루프(820)는 오브젝트(821)를 페인팅한다. 본 실시예에서는 모든 오브젝트(811, 821)를 웹뷰에 표시하도록, 제1페인트루프(810) 및 제2페인트루프(820) 사이에 동기화가 수행된다.
각각의 페인팅이 완료되면, 제1페인트루프(810)에 의한 텍스처 및 제2페인트루프(820)에 의한 텍스처의 컴포지팅이 수행됨으로써 컴포지트 텍스처(830)가 생성된다. 디스플레이장치(100)는 컴포지트 텍스처(830)를 웹뷰에 표시한다.
그런데, 이 경우에는 각각의 페인팅이 완료될 때까지 제1페인트루프(810) 및 제2페인트루프(820) 중 어느 하나가 대기하여 컴포지팅을 수행한다. 그러나, 제1페인트루프(810) 및 제2페인트루프(820) 사이의 동기를 수행하지 않을 수도 있다.
도 19은 본 발명의 제9실시예에 따라서 오브젝트(911, 921)를 표시하는 원리를 나타내는 예시도이다.
도 19에 도시된 바와 같이, 제1페인트루프(910)는 오브젝트(911)의 페인팅을 수행하여 텍스처(930)를 생성한다. 한편, 제2페인트루프(920)는 오브젝트(921)의 페인팅을 수행하여 텍스처(940)를 생성한다.
디스플레이장치(100)는 이와 같이 생성된 두 텍스처(930, 940)를 컴포지팅하여 컴포지트 텍스처(950)를 생성하고, 컴포지트 텍스처(950)를 웹뷰에 표시한다.
본 실시예가 앞선 제8실시예와 상이한 점은 다음과 같다. 제8실시예는 제1페인트루프(810, 도 18 참조) 및 제2페인트루프(820, 도 18 참조) 사이의 동기화가 수행됨으로써 컴포지팅이 수행되는 바, 이는 웹 엔진(330, 도 6 참조) 내부에서 동기화를 위한 시간 지연이 발생하는 것을 의미한다. 이러한 동작은 주로 CPU에서 수행되는 바, 상대적으로 오랜 시간이 소요된다.
이에 비해, 본 실시예는 제1페인트루프(910) 및 제2페인트루프(920)에 의해 각각 텍스처(930, 940)가 생성된 이후에 웹 엔진(330, 도 6 참조)의 외부에서 컴포지팅이 수행된다. 이러한 동작은 CPU가 아닌 GPU에 의해 수행되는 바, CPU의 동작보다 빠른 속도가 가능하다. 이에, 본 실시예는 제8실시예에 비해 웹 엔진(330, 도 6 참조) 내부에서의 동기화 지연이 적고, 소요시간을 보다 줄일 수 있다.
이하, 본 발명의 제1실시예 대비 제2실시예에 의한 효과에 관해 설명한다.
도 20은 제1실시예 및 제2실시예 각각에 의한 소요시간을 대비시킨 그래프이다. 본 도면에서 상측의 그래프는 제1실시예에 관한 것이며, 하측의 그래프는 제2실시예에 관한 것이다. 본 그래프는 제1실시예 및 제2실시예의 상대비교를 위한 것으로서, 실험 환경에 관한 구체적인 설명은 생략한다.
도 20에 도시된 바와 같이, 소정의 웹 페이지에 대하여 제1실시예에 따라서 처리하는 경우에, DOM 트리 분석 및 구축, 컴포지트, 동기, GPU 처리 과정이 순차적으로 진행된다. DOM 트리 분석에 소요되는 시간은 10ms, 컴포지트에 소요되는 시간은 5ms, 동기화에 소요되는 시간은 10ms, GPU 처리에 소요되는 시간은 10ms로 각각 측정되었다.
반면, 동일한 웹 페이지에 대하여 제2실시예에 따라서 처리하는 경우에, DOM 트리 분석 및 구축, GPU 처리 과정이 순차적으로 진행된다. DOM 트리 분석에 소요되는 시간은 5ms, GPU 처리에 소요되는 시간은 10ms로 각각 측정되었다.
이하, 그래프가 이와 같이 나타난 이유에 관해 설명한다.
제2실시예는 제1실시예에 비해 조합 및 동기 과정이 없다. 제2실시예에서 DOM 구조 분석 시에 WebGL을 사용하지 않는 오브젝트를 제외시키고 렌더 오브젝트 트리를 구축하고, 렌더 오브젝트 트리가 풀스크린으로 표시하기 위한 WebGL을 사용하는 오브젝트만을 포함하였기 때문이다. 즉, 풀스크린으로 표시하기 위한 하나의 오브젝트만이 GPU에 의해 처리되므로, 컴포지팅 및 동기화를 진행할 오브젝트가 없다.
또한, 제2실시예는 제1실시예에 비해 DOM 분석의 소요 시간이 절반 정도로서, 상대적으로 짧다. 앞서 설명한 바와 같이, 제2실시예에서 렌더 오브젝트 트리가 WebGL을 사용하지 않는 오브젝트를 포함하지 않기 때문에, 이후 렌더 레이어 트리, 그래픽 레이어 트리의 구축에 소요되는 시간 또한 짧아짐으로써 전체적인 트리 분석 및 구축 시간이 줄어든다.
다만, GPU 처리 시간은 제1실시예 및 제2실시예가 동일한데, 이는 오브젝트의 수에 상관없이 웹뷰에 표시되는 화면의 크기는 고정되어 있기 때문이다.
이와 같이, WebGL을 사용하는 오브젝트를 풀스크린으로 표시함에 있어서, 본 발명의 제2실시예가 제1실시예에 비해 소요시간이 훨씬 짧다는 것을 알 수 있다. 또한, CPU 및 GPU의 연산이 줄어들기 때문에, 디스플레이장치(100)의 시스템 부하를 저감시킬 수 있다.
특히, 풀스크린으로 표시하기 위한 오브젝트가 3차원 웹 게임인 경우에, 사용자가 쾌적하게 웹 게임을 즐길 수 있는 수치인 60fps를 확보하기 위해서는 1프레임을 16ms 이내에 처리하여야 한다. 제2실시예의 경우에는 1프레임 당 15ms가 가능하므로, 이에 따라서 높은 fps 처리가 가능한 웹 게임을 제공할 수 있다.
도 21은 WebGL에 관련된 기 설정된 다양한 테스트 케이스를 제1실시예 및 제2실시예에 따라서 각기 테스트한 결과를 나타내는 그래프이다.
도 21에 도시된 바와 같이, WebGL을 테스트하기 위한 기 설정된 여러 개의 테스트 케이스에 대해, GPU의 렌더링 시에 프레임이 1초에 몇 번 그려지는지 측정한 결과를 제1실시예 및 제2실시예 각각에 대해 그래프로 나타나 있다. 그래프에서 세로축은 fps이며, 수치가 클수록 우수한 결과를 나타낸다.
가로축의 LerningWebGL7, LerningWebGL8, LerningWebGL9, Acuarium, Toon-shading, Cubemap, ImageSphere, Spacerocks, Ivank Engine은 WebGL 테스트를 위해 제공되는 테스트 케이스의 명칭이다. 이 중에서, LerningWebGL7, LerningWebGL8, LerningWebGL9 등은 3차원 그래픽 요소보다는 2차원 그래픽 요소가 많고, Acuarium, Cubemap 등은 3차원 그래픽 요소를 현저히 많이 포함하고 있다.
제1실시예는, LerningWebGL7, LerningWebGL8, LerningWebGL9, ImageSphere에 대해서는 60fps 내지는 이에 근접하는 fps 수치를 나타내고 있다. 그러나, 제1실시예는 3차원 그래픽 요소가 많은 Cubemap, Spacerocks, Ivank Engine에서는 40fps대로 떨어지고, 특히 Acuarium에서는 30fps로 크게 떨어짐을 알 수 있다.
이는, 3차원 그래픽이 많은 웹 페이지 또는 웹 어플리케이션의 경우에, 제1실시예는 품질의 저하가 현저히 나타날 수 있다는 것을 의미한다.
반면, 제2실시예는, 모든 테스트 케이스에 대해 고르게 50fps 이상의, 경우에 따라서는 60fps의 수치를 나타내고 있다는 것을 알 수 있다. 특히, 제1실시예가 낮은 fps 수치를 나타내는 Acuarium 및 Cubemap에 대해서는 55fps 이상의 수치를 나타내고 있다. 이와 같이, 제2실시예는 3차원 그래픽 요소가 많은 경우에서도 fps 수치가 현저히 떨어지지 않으므로, 3차원 그래픽이 많은 웹 페이지 또는 웹 어플리케이션에 적용된다면 품질의 저하를 최소화할 수 있다.
도 22는 본 발명의 제10실시예에 따른 디스플레이장치(100)에서 웹 어플리케이션을 표시하는 방법을 나타내는 플로우차트이다.
도 22에 도시된 바와 같이, S1110 단계에서 디스플레이장치(100)는 웹 어플리케이션을 수신한다. S1120 단계에서 JS Parser, 즉 자바 스크립트 엔진에 의한 웹 어플리케이션의 분석이 수행된다.
S1130 단계에서, 디스플레이장치(100)는 웹 어플리케이션의 오브젝트들 중에서, WebGL을 사용하는 일 오브젝트가 풀스크린으로 표시되도록 지시하는 입력이 수신되는지 판단한다.
만일 풀스크린 지시 입력이 수신되지 않았다면, S1140 단계에서 DOM 렌더링이 수행된다. DOM 렌더링에서는 각각의 오브젝트에 대해, 자바 스크립트의 분석을 수행하는 JS Parser, DOM 트리를 구축하는 Add DOM Tree, 렌더 레이어 트리를 구축하는 Add Render Layer Tree, 그래픽 레이어 트리를 구축하는 Add Graphic Layer Tree의 과정이 순차적으로 수행된다. 그리고, 각 오브젝트 사이에 동기화가 수행된다.
이러한 동기화에 따라서, S1150 단계에서 각 오브젝트의 텍스처가 조합되는 Composite가 수행된다. 이후, S1180 단계에서 디스플레이장치(100)는 컴포지팅된 텍스처를 표시한다.
한편, 풀스크린 지시 입력이 수신되었다면, S1160 단계에서 해당 오브젝트에 대해 JS Paser에 의한 자바 스크립트 분석과, 그래픽 라이브러리를 호출하는 GL call이 수행됨으로써, 오브젝트의 텍스처가 생성된다.
S1170 단계에서 디스플레이장치(100)는 해당 텍스처를 타 텍스처와 컴포지팅이 필요한지 여부를 판단한다. 컴포지팅이 필요하다고 판단하면, 디스플레이장치(100)는 S1150 단계로 이행하여 컴포지팅을 수행한다. 반면, 컴포지팅이 필요하지 않다고 판단하면, S1180 단계에서 디스플레이장치(100)는 해당 텍스처를 표시한다.
도 23은 본 발명의 제11실시예에 따른 디스플레이장치(100)에서 웹 어플리케이션을 표시하는 방법을 나타내는 플로우차트이다.
도 23에 도시된 바와 같이, 본 실시예의 과정들은 웹 엔진에 의해 수행되는 WebEngine Layer 및 윈도우 관리자에 의해 수행되는 Window Compositor Layer 중 어느 하나의 차원에 포함된다.
S1210 단계에서 디스플레이장치(100)는 웹 어플리케이션을 수신한다. S1220 단계에서 JS Parser, 즉 자바 스크립트 엔진에 의한 웹 어플리케이션의 분석이 수행된다.
이후, 웹 어플리케이션의 오브젝트들 중에서, DOM 렌더링 대상의 오브젝트와 WebGL 렌더링 대상의 오브젝트가 분류되어 각기 처리된다. 전자는 후자와 상이하게 WebGL 호출을 필요로 하지 않는 오브젝트이다.
DOM 렌더링은 S1230 단계에서 수행된다. DOM 렌더링에서는 각각의 오브젝트에 대해, 자바 스크립트의 분석을 수행하는 JS Parser, DOM 트리를 구축하는 Add DOM Tree, 렌더 레이어 트리를 구축하는 Add Render Layer Tree, 그래픽 레이어 트리를 구축하는 Add Graphic Layer Tree의 과정이 순차적으로 수행된다. 그리고, 각 오브젝트 사이에 동기화가 수행되며, S1240 단계에서 각 오브젝트의 텍스처가 조합되는 Composite가 수행된다.
이후, S1250 단계에서 디스플레이장치(100)는 DOM 렌더링 결과에 따라서 컴포지팅된 텍스처에 대해 WebGL 렌더링에 의한 텍스처를 추가로 컴포지팅할 것인지를 판단한다.
컴포지팅할 것으로 판단하면, S1260 단계에서 디스플레이장치(100)는 텍스처들을 최종 컴포지팅하는 Window Composite를 수행하고, S1270 단계에서 이를 표시한다.
한편, WebGL 렌더링은 S1280 단계에서 수행된다. S1280 단계에서 해당 오브젝트에 대해 JS Paser에 의한 자바 스크립트 분석과, 그래픽 라이브러리를 호출하는 GL call이 수행됨으로써, 오브젝트의 텍스처가 생성된다.
S1290 단계에서 디스플레이장치(100)는 해당 텍스처를 타 텍스처와 컴포지팅이 필요한지 여부를 판단한다. 컴포지팅이 필요하다고 판단하면, 디스플레이장치(100)는 S1260 단계로 이행하여 컴포지팅을 수행한다. 반면, 컴포지팅이 필요하지 않다고 판단하면, 디스플레이장치(100)는 S1270 단계로 이행하여 해당 텍스처를 표시한다.
이상의 전체 과정 중에서, S1260 단계 및 S1270 단계는 WebEngine Layer가 아닌 Window Compositor Layer에서 수행된다. 이 경우에, 동기 보장이나 다른 DOM 텍스처 윈도우가 컴포지팅되지 않게 처리함으로써 성능의 향상을 기대할 수 있다. 또한, 렌더링의 속도를 크게 요구하지 않는 상황에서는, DOM 렌더링도 컴포지팅할 수도 있다.
도 24는 본 발명의 제12실시예에 따른 디스플레이장치(100)에서 웹 컨텐츠의 영상(1300)을 표시하는 원리를 나타내는 예시도이다.
도 24에 도시된 바와 같이, 디스플레이장치(100)는 복수의 그래픽 레이어(1310, 1320, 1330)를 포함하는 웹 컨텐츠를 수신한다. 디스플레이장치(100)는 각 그래픽 레이어(1310, 1320, 1330)를 렌더링하여 비디오 메모리(미도시)에 로딩한다. 웹 컨텐츠는 각 그래픽 레이어(1310, 1320, 1330)가 영상(1300) 내에 어느 위치에 배치될 것인지 정의하는 정보를 포함하는 바, 디스플레이장치(100)는 해당 정보에 따라서 각 그래픽 레이어(1310, 1320, 1330)를 중첩시켜 웹 컨텐츠 영상(1300)을 표시한다.
그런데, 만일 사용자로부터 복수의 그래픽 레이어(1310, 1320, 1330) 중에서 제1레이어(1310)를 풀스크린으로 표시하도록 지시하는 입력이 수신되면, 디스플레이장치(100)는 제1레이어(1310)가 풀스크린으로 표시되도록 제1레이어(1310)의 크기를 조정한다.
도 25는 도 24의 웹 컨텐츠 영상(1300)에서 제1레이어(1310)를 확대시켰을 때에, 확대된 제1레이어(1311)에 의해 타 레이어(1320, 1330)가 커버되는 모습을 나타내는 예시도이다.
도 25에 도시된 바와 같이, 만일 디스플레이장치(100)가 제1레이어(1310)를 확대시킴으로써 풀스크린된 제1레이어(1311)로 표시한다면, 제2레이어(1320) 및 제3레이어(1330)는 제1레이어(1311)에 의해 덮임으로써 영상(1300)에 표시되지 않을 것이다.
이에, 디스플레이장치(100)는 풀스크린된 제1레이어(1311)에 의해 커버되는 것으로 판단되는 제2레이어(1320) 및 제3레이어(1330)가 비디오 메모리(미도시)에 로딩되지 않도록 차단한다. 따라서, 비디오 메모리(미도시)에는 제1레이어(1311)만이 로딩되는 바, 디스플레이장치(100)는 영상(1300)에 풀스크린으로 표시된 제1레이어(1311)가 표시되도록 한다. 또한, 제2레이어(1320) 및 제3레이어(1330)가 비디오 메모리(미도시)에 로딩되지 않도록 차단함으로써, 디스플레이장치(100)는 표시되지 않는 레이어(1320, 1330)에 대한 연산이 수행되지 않도록 할 수 있다.
본 실시예에서는 하나의 레이어(1311)를 풀스크린으로 표시하는 경우에 관해 설명하였으나, 레이어(1311)가 풀스크린으로 표시되는 경우로만 본 발명의 사상을 한정할 수 없다. 레이어(1310)는 풀스크린을 아니지만 소정 크기로 확대 표시될 때에도 타 레이어(1320, 1330)를 커버할 수 있는 바, 이러한 경우에도 본 발명의 사상이 적용될 수 있다. 만일 제1레이어(1310)의 크기가 확대되어 제2레이어(1320)를 커버하고 제3레이어(1330)를 커버하지 않는다면, 디스플레이장치(100)는 제1레이어(1310) 및 제3레이어(1330)가 비디오 메모리(미도시)에 로딩되게 하고 제2레이어(1320)가 비디오 메모리(미도시)에 로딩되지 않게 차단할 수 있다.
본 발명의 예시적 실시예에 따른 방법들은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 이러한 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 예를 들어, 컴퓨터 판독 가능 매체는 삭제 가능 또는 재기록 가능 여부와 상관없이, ROM 등의 저장 장치와 같은 휘발성 또는 비휘발성 저장 장치, 또는 예를 들어, RAM, 메모리 칩, 장치 또는 집적 회로와 같은 메모리, 또는 예를 들어 CD, DVD, 자기 디스크 또는 자기 테이프 등과 같은 광학 또는 자기적으로 기록 가능함과 동시에 기계(예를 들어, 컴퓨터)로 읽을 수 있는 저장 매체에 저장될 수 있다. 이동 단말 내에 포함될 수 있는 메모리는 본 발명의 실시 예들을 구현하는 지시들을 포함하는 프로그램 또는 프로그램들을 저장하기에 적합한 기계로 읽을 수 있는 저장 매체의 한 예임을 알 수 있을 것이다. 본 저장 매체에 기록되는 프로그램 명령은 본 발명을 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어의 기술 분야에서 숙련된 기술자에게 공지되어 사용 가능한 것일 수도 있다.
상기한 실시예는 예시적인 것에 불과한 것으로, 당해 기술 분야의 통상의 지식을 가진 자라면 다양한 변형 및 균등한 타 실시예가 가능하다. 따라서, 본 발명의 진정한 기술적 보호범위는 하기의 특허청구범위에 기재된 발명의 기술적 사상에 의해 정해져야 할 것이다.
100 : 디스플레이장치
110 : 통신부
120 : 표시부
130 : 입력부
140 : 저장부
150 : 처리부
151 : 시스템 버스
153 : CPU
155 : RAM
157 : GPU
300 : 웹 플랫폼
310 : 운영체제
320 : 윈도우 관리자
330 : 웹 엔진
331 : 렌더링 엔진
333 : JS 엔진
350 : API
351 : OpenGL
353 : WebGL

Claims (17)

  1. 디스플레이장치에 있어서,
    복수의 오브젝트를 포함하는 웹 기반 컨텐츠를 수신하는 통신부와;
    영상을 표시하는 표시부와;
    상기 표시부에 표시되는 상기 영상의 데이터가 로딩되도록 마련된 메모리와;
    상기 웹 기반 컨텐츠의 상기 복수의 오브젝트 중에서 제1오브젝트의 영역이 하나 이상의 제2오브젝트의 영역을 커버하도록 표시되는 것에 대응하여, 상기 제1오브젝트의 데이터가 기 설정된 API(application programming interface)를 호출하여 처리되는 것이 아니면 상기 제1오브젝트의 데이터 및 상기 제2오브젝트의 데이터를 상기 메모리에 로딩되게 처리하고, 상기 제1오브젝트의 데이터가 상기 기설정된 API를 호출하여 처리되는 것이면 상기 메모리에 로딩되게 처리하고, 상기 제2오브젝트의 데이터는 상기 메모리에 로딩되지 않게 처리하는 적어도 하나의 프로세서를 포함하는 것을 특징으로 하는 디스플레이장치.
  2. 제1항에 있어서,
    상기 적어도 하나의 프로세서는, 상기 제1오브젝트의 영역이 상기 하나 이상의 제2오브젝트의 영역을 커버하도록 하는 지시에 응답하여 상기 제1오브젝트에 3차원 그래픽 처리가 수행되는지 여부를 판단하고, 상기 제1오브젝트에 3차원 그래픽 처리가 수행되는 것으로 판단하면 상기 지시에 따라서 상기 제1오브젝트의 크기가 조정되어 표시되게 처리하는 것을 특징으로 하는 디스플레이장치.
  3. 제2항에 있어서,
    상기 적어도 하나의 프로세서는, 상기 제1오브젝트가 상기 메모리에 로딩될 때에 상기 기 설정된 API(application programming interface)를 호출하여 처리되는 것이면 상기 제1오브젝트가 3차원 그래픽 처리가 수행되는 것으로 판단하는 것을 특징으로 하는 디스플레이장치.
  4. 제3항에 있어서,
    상기 기 설정된 API는 WebGL을 포함하는 것을 특징으로 하는 디스플레이장치.
  5. 제2항에 있어서,
    상기 적어도 하나의 프로세서는,
    상기 웹 기반 컨텐츠로부터 상기 복수의 오브젝트를 추출하는 CPU와;
    상기 CPU에 의해 추출된 상기 복수의 오브젝트 중에서 3차원 그래픽 처리 대상인 오브젝트를 처리하는 GPU를 포함하는 것을 특징으로 하는 디스플레이장치.
  6. 제5항에 있어서,
    상기 CPU는 상기 지시에 응답하여, 상기 추출한 복수의 오브젝트 중에서 상기 하나 이상의 제2오브젝트를 제외하고 상기 제1오브젝트만을 상기 GPU에 전달하는 것을 특징으로 하는 디스플레이장치.
  7. 제6항에 있어서,
    상기 GPU는 상기 CPU로부터 전달받은 하나 이상의 상기 오브젝트를 렌더링한 텍스처를 상기 메모리에 로딩하며, 상기 메모리에 로딩된 상기 텍스처가 복수이면 상기 복수의 텍스처를 조합하고, 상기 메모리에 로딩된 상기 텍스처가 하나이면 상기 조합 없이 상기 하나의 텍스처를 상기 영상으로 표시되게 처리하는 것을 특징으로 하는 디스플레이장치.
  8. 제1항에 있어서,
    상기 적어도 하나의 프로세서는, 상기 웹 기반 컨텐츠의 상기 영상을 표시하도록 하는 지시를 수신하면, 상기 복수의 오브젝트를 포함하는 상기 영상이 표시되도록 상기 복수의 오브젝트를 상기 메모리에 로딩하는 것을 특징으로 하는 디스플레이장치.
  9. 제1항에 있어서,
    상기 제1오브젝트의 영역이 상기 하나 이상의 제2오브젝트의 영역을 커버하도록 표시되는 것은, 상기 제1오브젝트가 상기 표시부에서 상기 웹 기반 컨텐츠의 상기 영상이 표시되도록 기 설정된 표시영역의 전체에 표시되는 동작을 포함하는 것을 특징으로 하는 디스플레이장치.
  10. 제1항에 있어서,
    상기 복수의 오브젝트가 렌더링 시에 각기 로딩되도록 마련된 복수의 버퍼를 더 포함하며,
    상기 적어도 하나의 프로세서는, 상기 복수의 버퍼 중에서 WebGL을 사용하게 마련된 상기 버퍼에 로딩되는 상기 오브젝트만을 렌더링하게 처리하는 것을 특징으로 하는 디스플레이장치.
  11. 디스플레이장치에 있어서,
    복수의 그래픽 레이어를 포함하는 웹 컨텐츠를 수신하는 통신부와;
    영상을 표시하는 표시부와;
    상기 웹 컨텐츠의 영상이 상기 표시부에 표시되도록 상기 그래픽 레이어가 로딩되게 마련된 메모리와;
    상기 통신부에 수신되는 상기 웹 컨텐츠로부터 상기 복수의 그래픽 레이어를 추출하고, 상기 표시부에 상기 웹 기반 컨텐츠의 영상이 표시되도록 상기 추출한 그래픽 레이어가 상기 메모리에 로딩되게 처리하는 적어도 하나의 프로세서를 포함하며,
    상기 적어도 하나의 프로세서는, 상기 웹 컨텐츠의 상기 복수의 그래픽 레이어 중에서 일 레이어의 크기를 조정하는 지시의 수신에 응답하여 상기 레이어의 크기를 조정하고, 상기 크기가 조정된 레이어가 GPU에의해 처리되는 것이 아니면 복수의 그래픽 레이어를 상기 메모리에 로딩되게 처리하고, 상기 크기가 조정된 레이어가 GPU에의해 처리되면 상기 복수의 그래픽 레이어 중에서 상기 크기가 조정된 레이어에 중첩되는 하나 이상의 레이어가 상기 메모리에 로딩되지 않게 차단하는 것을 특징으로 하는 디스플레이장치.
  12. 제11항에 있어서,
    상기 적어도 하나의 프로세서는, 상기 복수의 그래픽 레이어 중에서 상기 크기가 조정된 레이어에 의해 기 설정된 면적 이상 커버되는 하나 이상의 레이어를 선택하고, 상기 선택된 레이어가 상기 메모리에 로딩되지 않게 차단하는 것을 특징으로 하는 디스플레이장치.
  13. 디스플레이장치의 제어방법에 있어서,
    복수의 오브젝트를 포함하는 웹 기반 컨텐츠를 수신하는 단계와;
    메모리에 영상의 데이터를 로딩하는 단계와;
    상기 메모리에 로딩된 상기 데이터에 기초하여 상기 영상을 표시하는 단계를 포함하며,
    상기 데이터를 로딩하는 단계는,
    웹 기반 컨텐츠의 상기 복수의 오브젝트 중에서 제1오브젝트의 영역이 하나 이상의 제2오브젝트의 영역을 커버하도록 표시되는 것에 대응하여, 상기 제1오브젝트의 데이터가 기 설정된 API를 호출하여 처리되는 것이 아니면 상기 제1오브젝트의 데이터 및 상기 제2오브젝트의 데이터를 상기 메모리에 로딩되게 처리하고, 상기 제1오브젝트의 데이터가 상기 기 설정된 API를 호출하여 처리되는 것이면 상기 메모리에 로딩하고, 상기 제2오브젝트의 데이터는 상기 메모리에 로딩하지 않게 처리하는 단계를 포함하는 것을 특징으로 하는 디스플레이장치의 제어방법.
  14. 제13항에 있어서,
    상기 데이터를 로딩하는 단계는,
    상기 제1오브젝트의 영역이 상기 하나 이상의 제2오브젝트의 영역을 커버하도록 하는 지시에 응답하여 상기 제1오브젝트에 3차원 그래픽 처리가 수행되는지 여부를 판단하는 단계와;
    상기 제1오브젝트에 3차원 그래픽 처리가 수행되는 것으로 판단하면 상기 지시에 따라서 상기 제1오브젝트의 크기가 조정되어 표시되게 처리하는 단계를 포함하는 것을 특징으로 하는 디스플레이장치의 제어방법.
  15. 제14항에 있어서,
    상기 제1오브젝트가 상기 메모리에 로딩될 때에 상기 기 설정된 API를 호출하여 처리되는 것이면 상기 제1오브젝트가 3차원 그래픽 처리가 수행되는 것으로 판단되는 것을 특징으로 하는 디스플레이장치의 제어방법.
  16. 제15항에 있어서,
    상기 기 설정된 API는 WebGL을 포함하는 것을 특징으로 하는 디스플레이장치의 제어방법.
  17. 제13항에 있어서,
    상기 제1오브젝트의 영역이 상기 하나 이상의 제2오브젝트의 영역을 커버하도록 표시되는 것은, 상기 제1오브젝트가 상기 디스플레이장치의 표시부에서 상기 웹 기반 컨텐츠의 상기 영상이 표시되도록 기 설정된 표시영역의 전체에 표시되는 동작을 포함하는 것을 특징으로 하는 디스플레이장치의 제어방법.
KR1020150049240A 2015-04-07 2015-04-07 디스플레이장치 및 그 제어방법 KR102292789B1 (ko)

Priority Applications (2)

Application Number Priority Date Filing Date Title
KR1020150049240A KR102292789B1 (ko) 2015-04-07 2015-04-07 디스플레이장치 및 그 제어방법
US15/091,636 US10133711B2 (en) 2015-04-07 2016-04-06 Display apparatus and control method thereof

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020150049240A KR102292789B1 (ko) 2015-04-07 2015-04-07 디스플레이장치 및 그 제어방법

Publications (2)

Publication Number Publication Date
KR20160120128A KR20160120128A (ko) 2016-10-17
KR102292789B1 true KR102292789B1 (ko) 2021-08-25

Family

ID=57112340

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020150049240A KR102292789B1 (ko) 2015-04-07 2015-04-07 디스플레이장치 및 그 제어방법

Country Status (2)

Country Link
US (1) US10133711B2 (ko)
KR (1) KR102292789B1 (ko)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2013081600A1 (en) * 2011-11-30 2013-06-06 Intel Corporation Reducing power for 3d workloads
CN107463398B (zh) 2017-07-21 2018-08-17 腾讯科技（深圳）有限公司 游戏渲染方法、装置、存储设备及终端
CN108595177A (zh) * 2018-04-28 2018-09-28 广东电网有限责任公司 界面开发方法及装置
WO2020220287A1 (zh) * 2019-04-30 2020-11-05 华为技术有限公司 一种视频处理的方法和装置
CN111798379A (zh) * 2020-07-20 2020-10-20 广州炫视智能科技有限公司 实现图形高速预览的方法及系统

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2013122667A (ja) * 2011-12-09 2013-06-20 Sony Computer Entertainment Inc 画像処理装置および画像処理方法

Family Cites Families (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6268859B1 (en) * 1995-06-06 2001-07-31 Apple Computer, Inc. Method and system for rendering overlapping opaque graphical objects in graphic imaging systems
JP2002328818A (ja) * 2001-02-27 2002-11-15 Sony Computer Entertainment Inc 情報処理装置、統合型情報処理装置、実行負荷計測方法、コンピュータプログラム
WO2006055048A1 (en) * 2004-11-19 2006-05-26 Actuality Systems, Inc System and method for generating rendering data associated with a 3-d image
US8134566B1 (en) * 2006-07-28 2012-03-13 Nvidia Corporation Unified assembly instruction set for graphics processing
US8234392B2 (en) * 2006-11-17 2012-07-31 Apple Inc. Methods and apparatuses for providing a hardware accelerated web engine
US8022958B2 (en) * 2007-04-04 2011-09-20 Qualcomm Incorporated Indexes of graphics processing objects in graphics processing unit commands
GB0810205D0 (en) * 2008-06-04 2008-07-09 Advanced Risc Mach Ltd Graphics processing systems
US9239674B2 (en) * 2010-12-17 2016-01-19 Nokia Technologies Oy Method and apparatus for providing different user interface effects for different implementation characteristics of a touch event
US9472018B2 (en) * 2011-05-19 2016-10-18 Arm Limited Graphics processing systems
US8411113B1 (en) * 2011-10-12 2013-04-02 Google Inc. Layered digital image data reordering and related digital image rendering engine
US9348676B2 (en) 2012-01-05 2016-05-24 Google Technology Holdings LLC System and method of processing buffers in an OpenCL environment
US9116680B2 (en) * 2012-09-26 2015-08-25 International Business Machines Corporation Dynamically building locale objects or subsections of locale objects based on historical data
US9159170B2 (en) * 2013-02-26 2015-10-13 Ngrain (Canada) Corporation System and method for optimal geometry configuration based on parts exclusion
US20160225122A1 (en) * 2013-12-02 2016-08-04 Joshua Boelter Optimizing the visual quality of media content based on user perception of the media content

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2013122667A (ja) * 2011-12-09 2013-06-20 Sony Computer Entertainment Inc 画像処理装置および画像処理方法

Also Published As

Publication number Publication date
US10133711B2 (en) 2018-11-20
KR20160120128A (ko) 2016-10-17
US20160300381A1 (en) 2016-10-13

Similar Documents

Publication Publication Date Title
CN107832108B (zh) 3D canvas网页元素的渲染方法、装置及电子设备
KR102292789B1 (ko) 디스플레이장치 및 그 제어방법
US10387549B2 (en) Procedurally expressing graphic objects for web pages
KR100962920B1 (ko) 비주얼 및 장면 그래프 인터페이스
US9373308B2 (en) Multi-viewport display of multi-resolution hierarchical image
KR100996738B1 (ko) 벡터 그래픽을 위한 마크업 언어 및 오브젝트 모델
KR100666450B1 (ko) 그래픽 객체 디스플레이
KR20200027004A (ko) 게임 렌더링 방법, 및 게임 자원 파일 생성 방법, 장치, 및 기기
US9830308B2 (en) Rendering apparatus and method for operating a web-platform
CN103034729B (zh) 网页绘制系统和方法
US10789770B1 (en) Displaying rich text on 3D models
CN111193876A (zh) 视频中添加特效的方法及装置
US20110285727A1 (en) Animation transition engine
CN107707965B (zh) 一种弹幕的生成方法和装置
CN104995622A (zh) 用于图形函数的合成器支持
EP2463762B1 (en) Information processing device, information processing method, and data structure for content files
Grahn The animate package
EP1528512A2 (en) Graphic decoder, image reproduction apparatus and method for graphic display acceleration based on commands
CN112700519A (zh) 动画展示方法、装置、电子设备及计算机可读存储介质
US20050021552A1 (en) Video playback image processing
Cecco Supercharged JavaScript Graphics: with HTML5 canvas, jQuery, and More
CN115391692A (zh) 视频处理方法和装置
Van der Spuy Learn Pixi. js
CN100435096C (zh) 基于c语言微型操作系统的图形处理方法
US10579713B2 (en) Application Markup language

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant