WO2013162136A1 - 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법 - Google Patents

지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법 Download PDF

Info

Publication number
WO2013162136A1
WO2013162136A1 PCT/KR2012/009222 KR2012009222W WO2013162136A1 WO 2013162136 A1 WO2013162136 A1 WO 2013162136A1 KR 2012009222 W KR2012009222 W KR 2012009222W WO 2013162136 A1 WO2013162136 A1 WO 2013162136A1
Authority
WO
WIPO (PCT)
Prior art keywords
atlas
stencil
path
paths
vector graphics
Prior art date
Application number
PCT/KR2012/009222
Other languages
English (en)
French (fr)
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 US14/397,303 priority Critical patent/US20150371410A1/en
Publication of WO2013162136A1 publication Critical patent/WO2013162136A1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/001—Texturing; Colouring; Generation of texture or colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T1/00—General purpose image data processing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T1/00—General purpose image data processing
    • G06T1/0007—Image acquisition

Definitions

  • the present invention relates to a technique for improving the processing speed of a game program using a canvas of HTML5, and in particular, a game or advertisement made with HTML5 technology using two-dimensional vector graphics batch rendering using a GPU.
  • the present invention relates to a batch rendering method of a two-dimensional vector graphics path using a paper that can improve the program processing speed of the system.
  • GPU Graphic Processing Unit
  • Google accelerated the Gieupeu of the 2D vector graphics library (Skia), which is used in the Chrome browser and the Android operating system, through OpenGL (OpenGL), one of the GPU APIs (Application Program Interface).
  • OpenGL OpenGL
  • Google has also accelerated Quartz via OpenGL, a 2D vector graphics library used throughout the Cocoa framework.
  • Quartz is widely used since Apple's latest OS, OSX Lion. Qt, Nokia's 2D vector graphics library, also accelerates 2D via OpenGL.
  • Figure 1 shows a schematic of 2D vector graphics rendering according to the prior art.
  • Cocos2D a 2D game engine for the iPhone. Cocos2D is a 2D game engine, but the actual picture is drawn using the GPU, which actively uses batch processing. When drawing the screen, we draw the drawing we want to draw as Texture Atlas and save it in advance so that we can collect drawing calls effectively.
  • Texture Atlas is a term commonly used in graphics to refer to the collection of multiple pictures into a single texture.
  • the first reason that the 2D vector graphics GPU implementation is not effective in batch processing is that the GPU implementation technology of 2D vector graphics is not yet mature, and the second reason is that the object to be drawn is not fixed like a game engine. Because.
  • the problem to be solved by the present invention is to be able to improve the processing speed of a program, such as a game or advertisement made by HTML5 technology, in particular by using a two-dimensional vector graphics batch rendering using the GPU.
  • a method of batch rendering a two-dimensional vector graphics path using a paper comprising: gathering paths requested through an API to draw a path of 2D vector graphics without immediately drawing them; Drawing in the stencil atlas the paths collected through the collecting step; And drawing rectangles on the screen including stencil atlas shapes corresponding to the respective paths to draw the collected paths.
  • 1 is a schematic of 2D vector graphics rendering according to the prior art.
  • Figure 2 illustrates the principle of reducing the load on the CPU to a minimum by using a 2D vector graphics rendering method using a GPU in the present invention.
  • FIG. 3 is a process flowchart of a batch rendering method of a two-dimensional vector graphics path using a paper of the present invention.
  • 4 (a) and 4 (b) are explanatory diagrams showing that 2D vector graphics batch rendering is arranged according to the present invention.
  • FIG 5 illustrates another embodiment of the present invention for drawing shadows of 2D vector graphics passes.
  • 6 (a) to 6 (c) are explanatory views showing arrangement when shadow is present in 2D vector graphics batch rendering according to another embodiment of the present invention.
  • Figure 7 shows another embodiment of the present invention for drawing an image of 2D vector graphics with a path.
  • 8 (a) to 8 (c) are explanatory diagrams showing a path and an image arranged together in a 2D vector graphics batch rendering according to another embodiment of the present invention.
  • Figure 9 illustrates another embodiment of the present invention for drawing paths and text together in 2D vector graphics batch rendering.
  • 10 (a) to 10 (c) are explanatory views illustrating arranging paths and texts together in 2D vector graphics layout rendering according to another embodiment of the present invention.
  • the present invention draws as many vertices as possible in one drawing call when drawing various graphic shapes which are not determined using 2D vector graphics.
  • 2 illustrates a principle of minimizing CPU load by using a 2D vector graphics rendering method using a GPU.
  • the 2D vector graphics batch rendering method using the GPU is a technology that makes it possible to move an app-based game to a web-based platform, which is a common platform in mobile.
  • 2D game engines can do batch rendering easily because they contain the contents of the picture to be drawn in the TextureAtlas. For example, in a 2D game engine, if 10 objects are drawn in batch rendering, 10 drawing and texture information to be mapped to each rectangle area are executed by one drawing call. If there is no TextureAtlas as above, 10 drawing calls are required because binding 10 textures and drawing 10 times. However, if you have a TextureAtlas like this, you don't have to bind the texture every time, so you can bind the texture once and draw ten rectangles with one drawing call.
  • FIG. 3 shows a first embodiment of a batch rendering method of a 2D vector graphics path using a paper of the present invention.
  • information of paths to be drawn is collected (stored or stored) in a list.
  • a first step S31 of collecting information of paths to be drawn in a list the following operation is performed. Create graphics vertices so the GPU can draw paths. If the path has a curve, interpolate several straight lines to create graphic vertices. Store the vertices of the generated graphic in a list. In this case, the generated vertices are drawn as a triangle fan in the second step. Compute the size of the rectangle large enough to accommodate the vertices of all the graphics in the path. The square size we just calculated is assigned to the stencil atlas. The stencil atlas determines coordinates of a rectangle to which a rectangle of a size requested can be assigned by a two-dimensional tangled bin packing algorithm.
  • the vertices of the graphic for drawing a path are calculated, and the coordinates and the size of the rectangle are also calculated where to draw the path.
  • the stencil operation is set as an exclusive OR operation using the calculated information, and the graphic vertices are drawn as a triangle fan, which is one of methods of drawing the vertices of the GPU.
  • FIG. 4 (a) shows an example of creating paths by dividing sections into one texture to create a stencil atlas.
  • 600 circles are drawn at once in 600 square areas using path information.
  • the final third step (S33) is a step of drawing a picture of the stencil atlas on the screen and performs the following operations.
  • the coordinates and sizes of the paths to be drawn on the screen and the coordinates and sizes of the textures for texture mapping the stencil atlas are stored in the list.
  • the rectangles of all the paths are drawn on the screen in one drawing call using the information stored in the list.
  • FIG. 4 (b) shows an example of drawing a stencil atlas on the screen, where 600 squares are drawn, each of which is texture mapped with the stencil atlas, and finally 600 circles are drawn on the screen.
  • FIGS. 5 and 6 An embodiment of the present invention will be described with reference to FIGS. 5 and 6 as follows.
  • the shadow atlas step of storing the shape of the shadow is required, such as the stencil atlas that keeps the shape of the path.
  • a first step S51 information of paths to be drawn is collected in a list.
  • a stencil atlas that draws paths by dividing a region into one texture is created.
  • the shadow of each path is drawn on the shadow atlas using the shape stored by the stencil atlas.
  • the shapes of the stencil atlas and the shadow atlas are drawn on the screen.
  • FIG. 6 is a diagram schematically illustrating a case in which a shadow must be drawn together when drawing a certain path. That is, FIG. 6 (a) shows that 600 circles are drawn at once in 600 rectangular areas using path information as shown in FIG. 4 (a). FIG. 6 (b) shows that 600 shadows are drawn at once using 600 stencil adlas. 6 (c) shows 1200 squares, of which 600 squares are texture-mapped with the stencil atlas and the remaining 600 squares are texture-mapped with the shadow atlas, resulting in 600 circles and 600 shadows on the screen. Each is drawn.
  • 2D vector graphics are drawn with images and text as well as paths.
  • 3 and 5 show a processing procedure for how to arrange drawing a path. To get the most out of the GPU, you need to be able to place images and text when drawing with paths.
  • 2D game engines arrange and draw images.
  • the above-described texture atlas texture dividing a zone, drawing an image in the zone, and then storing the image
  • step S71 information of paths to be drawn is collected in a list, and images to be drawn are collected in a texture atlas.
  • 8A illustrates an example of storing an image by dividing a region into a texture atlas.
  • FIG. 8 (b) shows an exemplary stencil atlas as described above.
  • a picture of the stencil atlas and a picture of the texture atlas are drawn on the screen.
  • 8 (c) shows an example of drawing all the images at once with the images stored in the texture atlas.
  • the basic method of drawing text according to an embodiment of the present invention is similar to the conventional implementation method, but the following processing steps for placing text and paths together are newly added.
  • a first step S91 in addition to the first step S31 of FIG. 3, information of paths to be drawn is collected in a list, and text to be drawn (font requested through an API) is collected in a texture atlas.
  • FIG. 10A illustrates an example in which the font is stored in the texture atlas according to the first step S91. It can be seen that the font is stored by dividing the area into the texture atlas.
  • the texture atlas refers to a texture that divides a zone, draws an image in the zone, and stores it.
  • the paths and the fonts drawn in the texture atlas are collected in the stencil atlas.
  • the shape of the path is stored in the stencil atlas by drawing the vertices of the graphic to the stencil atlas as a stencil operation, and copying the texture atlas texture.
  • 10 (b) shows an example of the stencil atlas according to the second step (S92).
  • FIG. 10C illustrates an example of drawing a path and a font on a screen in a shape stored in a stencil atlas according to the third step S93.

Landscapes

  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Image Generation (AREA)

Abstract

본 발명은 지피유(GPU)를 이용한 2차원 벡터 그래픽스 배치 렌더링을 활용하여 HTML5 기술로 만들어진 게임이나 광고 등의 프로그램 처리속도를 향상시킬 수 있도록 한 기술에 관한 것이다. 이러한 본 발명은, 2D벡터 그래픽스의 패스를 그리기 위해 API를 통해 요청되는 패스들을 바로 그리지 않고 모으는 단계 모아두었던 패스들을 스텐실아틀라스에 그리는 단계 및 상기 모아두었던 패스들을 그리기 위해 각 패스에 해당하는 스텐실아틀라스 모양을 포함하는 사각형들을 화면에 그리는 단계를 포함한다.

Description

지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법
본 발명은 HTML5의 캔버스(Canvas)를 이용하여 게임 프로그램의 처리속도를 향상시키는 기술에 관한 것으로, 특히 지피유(GPU)를 이용한 2차원 벡터 그래픽스 배치 렌더링을 활용하여 HTML5 기술로 만들어진 게임이나 광고 등의 프로그램 처리속도를 향상시킬 수 있도록 한 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법에 관한 것이다.
근래 들어, 구글사, 애플사, 노키아사 등의 IT 대기업들은 2차원(2D:Two Dimension) 벡터 그래픽스(vector graphics)를 위한 지피유(GPU: Graphic Processing Unit) 개발에 많은 노력을 기울이고 있다.
구글사는 크롬브라우저와 안드로이드 운영체제에서 사용하는 2D벡터 그래픽스 라이브러리인 스키아(skia)를 GPU API(API: Application Program Interface)중 하나인 오픈지엘(OpenGL:Open Graphics Library)을 통해 지피유 가속을 하였으며, 최근 들어 크롬브라우저와 안드로이드 운영체제에서 그 기술을 사용하고 있다. 애플사 역시 코코아 프레임워크 전반에서 사용하는 2D벡터 그래픽스 라이브러리인 쿼츠(Quartz)를 OpenGL을 통해 가속하였다. Quartz를 OpenGL을 통해 지피유 가속을 하는 기술은 애플사의 최신 OS인 OSX Lion부터 전반적으로사용되고 있다. 노키아사의 2D벡터 그래픽스 라이브러리인 Qt역시 OpenGL을 통해 2D 가속을 하고 있다.
하지만, 상기 2D벡터 그래픽스 라이브러리(skia,Quartz 및 Qt)는 모두 중앙처리장치(CPU)를 불필요하게 많이 사용하고 GPU를 최대한 활용하지 못하고 있는데, 가장 큰 이유는 배치 렌더링(batch rendering)을 하지 않기 때문이다.
도 1은 종래 기술에 의한 2D벡터 그래픽스 렌더링을 도식화 한 것을 나타낸 것이다.
GPU 기술을 가장 잘 활용하는 분야 중 하나가 게임엔진 분야이다. 게임엔진이 산업계에서 연구된지는 15년 이상이 흘렀고 어떻게 하면 GPU를 효과적으로 사용할 수 있는지는 잘알려져 있다. 게임엔진에서 GPU 기술을 활용할 때 가장 중요한 것은 Dirext3D 혹은 OpenGL의 드로잉 API콜을 할때 버택스(vortex)를 최대한 모아서 한 번에 배치 처리하는 것이다.
3차원 게임 엔진인 언리얼 엔진(Unreal Engine), 블렌더(Blender Game Engine) 등의 대부분의 게임엔진은 드로잉 콜을 최대한 배치 처리하도록 설계되어있다. 게임엔진에서 배치 처리를 하는 것은 직관적이다. 왜냐하면 그려야 하는 오브젝트들이 게임이 구동되기 전에 모두 정해지기 때문이다. 게임엔진은 버택스 정보가 고정되어 있는 주인공 캐릭터, 적 캐릭터들, 그리고 맵을 최대한 배치 처리하여 그리도록 설계 된다.
최근 들어, 모바일 상에서 2D게임을 쉽게 만들 수 있는 2D 게임 엔진이 개발되고 있다. 가장 주목을 받는 것은 코코스2D(Cocos2D)로 아이폰용 2D 게임엔진이다. Cocos2D는 2D게임엔진이지만 실제 그림은 GPU를 사용하여 그리게 되며, 이때 배치 처리를 적극적으로 이용한다. 화면을 그릴때 그리고자 하는 그림을 Texture Atlas로 하나의 텍스쳐에 모아서 미리 저장하기 때문에 드로잉 콜을 효과적으로 모을 수 있다.
상기 Texture Atlas는 그래픽스에서 일반적으로 사용하는 용어로서 여러 그림을 하나의 텍스쳐에 모아 넣는 것을 뜻한다.
종래의 게임엔진 분야에서 GPU를 효과적으로 사용하기 위해 배치 처리를 적극적으로 사용하지만, 2D벡터 그래픽스의 GPU 구현 시 배치 처리를 효과적으로 수행하지 못하여 2D벡터 그래픽스를 쓰는 프로그램의 처리속도가 늦어지는 문제점이 있다.
상기 2D벡터 그래픽스의 GPU 구현 시 배치 처리를 효과적으로 수행하지 못하는 첫 번째 이유는 2D벡터 그래픽스의 GPU 구현 기술이 아직 성숙하지 않은 것 때문이고, 두 번째 이유는 그려야 할 대상이 게임엔진처럼 고정되어 있지 않기 때문이다.
본 발명이 해결하고자 하는 과제는 특히 지피유(GPU)를 이용한 2차원 벡터 그래픽스 배치 렌더링을 활용하여 HTML5 기술로 만들어진 게임이나 광고 등의 프로그램 처리속도를 향상시킬 수 있도록 하는데 있다.
상기 기술적 과제를 이루기 위한 본 발명의 실시예에 따른 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법은, 2D벡터 그래픽스의 패스를 그리기 위해 API를 통해 요청되는 패스들을 바로 그리지 않고 모으는 단계; 상기 모으는 단계를 통해 모아두었던 패스들을 스텐실아틀라스에 그리는 단계; 및 상기 모아두었던 패스들을 그리기 위해 각 패스에 해당하는 스텐실아틀라스 모양을 포함하는 사각형들을 화면에 그리는 단계;를 포함한다.
본 발명에 따른 GPU를 이용한 2D벡터 그래픽스 배치 렌더링을 활용하면 모바일에서 HTML5기술로 만들어진 게임, 광고 등의 인터렉티브한 에니메이션을 보다 편리하게 가속 할 수 있는 효과가 있다.
도 1은 종래 기술에 의한 2D벡터 그래픽스 렌더링을 도식화 한 것이다.
도 2는 본 발명에서 GPU를 이용한 2D 벡터 그래픽스 렌더링 방식을 이용하여 CPU의 부하를 최소로 줄이게 되는 원리를 나타낸 것이다.
도 3은 본 발명의 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법의 처리 흐름도이다.
도 4의 (a),(b)는 본 발명에 따라 2D벡터 그래픽스 배치 렌더링이 배치되는 것을 나타낸 설명도이다.
도 5는 2D벡터 그래픽스 패스의 쉐도우를 그리기 위한 본 발명의 다른 실시예를 나타낸 것이다.
도 6의 (a)-(c)는 본 발명의 다른 실시예에 의한 2D벡터 그래픽스 배치 렌더링에서 쉐도우가 있을 때 배치하는 것을 나타낸 설명도이다.
도 7은 2D벡터 그래픽스의 이미지를 패스와 함께 그리기 위한 본 발명의 다른 실시예를 나타낸 것이다.
도 8의 (a)-(c)는 본 발명의 다른 실시예에 의한 2D벡터 그래픽스 배치 렌더링에서 패스와 이미지를 같이 배치하는 것을 나타낸 설명도이다.
도 9는 2D벡터 그래픽스 배치 렌더링에서 패스와 텍스트를 함께 그리기 위한 본 발명의 다른 실시예를 나타낸 것이다.
도 10의 (a)-(c)는 본 발명의 다른 실시예에 의한 2D벡터 그래픽스 배치 렌더링에서 패스와 텍스트를 같이 배치하는 것을 나타낸 설명도이다.
이하, 첨부한 도면을 참조하여 본 발명의 바람직한 실시예를 상세히 설명하면 다음과 같다.
본 발명에 따라 GPU를 이용하여 2D벡터 그래픽스 배치 렌더링을 구현하는 것이 종래에 GPU를 이용하여 2D벡터 그래픽스를 구현하는 것보다 성능이 좋은 결정적인 이유는 본 발명에 따른 배치 처리를 하기 때문이다. 본 발명은 GPU를 이용하여 2D벡터 그래픽스를 구현할 때 어떻게 하면 효과적으로 배치 처리를 할 수 있는가에 대한 해법을 제시한다.
게임엔진에서 GPU 기술을 활용함에 있어서, 가장 중요한 것은 Dirext3D 혹은 OpenGL의 드로잉 API콜을 할때 버택스(vortex)를 최대한 모아서 한 번에 배치 처리하는 것이다.
게임엔진에서 GPU를 사용하여 배치 처리를 하는 것은 이 분야에서 잘 알려져 있다. 예를 들어, 적어도 150개 이상의 그래픽의 정점을 한번의 드로잉 콜(Drawing Call)로 GPU에 요청해야 한다고 알려져 있다.
이와 같이 하지 않으면 그래픽 렌더링의 병목은 GPU가 아니라 CPU에 생기게 된다. 그렇게 되는 가장 큰 이유는 GPU에 드로잉 콜을 하였을 때 GPU 드라이버는 그래픽의 정점의 수와 상관없이 고정적인 작업을 해야 하기 때문이다.
GPU를 이용한 2차원 벡터 그래픽스의 배치 렌더링 시 GPU의 컨택스트 정보를 취합하여 그 결과를 GPU에 매번 알려주게 되는데 이와 같은 반복작업은 CPU 자원을 불필요하게 많이 소모한다. 예를 들어, 100개의 그래픽 정점을 10번 그리는 것이 1000개의 그래픽 정점을 한번 그리는 것보다 약 10배의 시간을 소모하게 된다.
본 발명은 2D벡터 그래픽스를 이용하여 정해지지 않은 다양한 그래픽 모양들을 그릴 때 최대한 정점을 많이 모아 한번의 드로잉 콜로 그리게 한다. 도 2는 GPU를 이용한 2D 벡터 그래픽스 렌더링 방식을 이용하여 CPU의 부하를 최소로 줄이게 되는 원리를 나타낸 것이다. 여기서, GPU를 이용한 2D벡터 그래픽스 배치 렌더링 방식은 모바일에서 앱기반의 게임을 공통 플렛폼인 웹기반으로 옮겨가는 것을 가능하게 하는 기술이다.
2D 게임엔진이 쉽게 배치 렌더링을 할 수 있는 이유는 TextureAtlas에 그려야 할 그림의 내용이 보관되어 있기 때문이다. 예를 들어, 2D 게임엔진에서 10개의 오브젝트를 배치 랜더링(batch rendering) 방식로 그린다면 10개의 사각형과 각 사각형 영역에 맵핑되어야 할 텍스쳐의 정보를 하나의 드로잉 콜로 수행하게 된다. 상기와 같은 TextureAtlas가 없다면 10개의 이미지에 해당하는 텍스쳐를 바인딩하고 그림을 그리는 작업을 10번 수행해야 하므로, 드로잉 콜이 10번 필요하다. 하지만, 상기와 같은 TextureAtlas가 있다면 텍스쳐를 매번 바인딩 할 필요가 없으므로 텍스쳐를 한번 바인딩하고 열개의 사각형을 한번의 드로잉 콜로 그릴 수 있다.
이와 비슷한 방법을 GPU를 이용한 2D벡터 그래픽스의 패스 렌더링에 적용할 수 있다. 이와 같은 경우, 2D게임 엔진이 그려야 할 그림을 TextureAtlas에 보관하는 것과 같이 2D벡터 그래픽스에서 그려야 할 패스의 모양이 보관되는 무엇(예:스텐실아틀라스)이 필요하다.
도 3은 본 발명의 지피유를 이용한 2차원 벡터 그래픽스 패스(path)의 배치 렌더링 방법의 제1실시예를 나타낸 것으로, 이에 도시한 바와 같이 그려져야 할 패스들의 정보를 리스트에 모으는(보관 또는 저장하는) 제1단계(S31); 하나의 텍스쳐에 구역을 나누어 패스들을 그리는 스텐실아틀라스를 만드는 제2단계(S32); 및 스텐실아틀라스의 그림을 화면에 그리는 제3단계(S33);를 포함한다.
그려져야 할 패스들의 정보를 리스트에 모으는 제1단계(S31)에서는 다음과 같은 작업을 수행한다. GPU가 패스를 그릴 수 있도록 그래픽의 정점들을 생성한다. 패스에 곡선이 있는 경우 여러개의 직선을 보간하여 그래픽의 정점을 생성한다. 상기 생성된 그래픽의 정점을 리스트에 보관한다. 이때, 생성된 정점들은 제2단계에서 트라이앵글 팬(Triangle fan)으로 그려지게 된다. 패스의 모든 그래픽의 정점이 들어갈 만한 충분히 큰 사각형 크기를 계산한다. 방금 계산한 사각형 크기를 스텐실아틀라스에서 할당받는다. 상기 스텐실아틀라스는 2차원 렉탱글 빈 패킹(Two-Dimensional Rectangle Bin Packing) 알고리즘으로 요청된 크기의 사각형이 할당될 수 있는 사각형의 좌표를 정하게 된다. 마지막으로, 차후의 제3단계어서 화면에 패스를 그릴때 스텐실아틀라스의 모양을 텍스쳐맵핑하여 사각형을 화면에 그리게 되는데, 이를 위해 화면에 그려져야 하는 사각형의 좌표와 크기, 텍스쳐맵핑에 필요한 텍스쳐 좌표와 크기를 리스트에 저장한다.
하나의 텍스쳐에 구역을 나누어 패스들을 그리는 과정을 통해 스텐실아틀라스를 만드는 제2단계(S32)에서는 다음과 같은 작업을 수행한다.
상기 설명에서와 같이 제1단계에서는 패스를 그릴 수 있는 그래픽의 정점들을 계산하였고 그것을 어디에 그리면 되는지 사각형의 좌표와 크기도 계산하였다. 제2단계에서는 상기 계산된 정보들을 이용하여 스텐실 오퍼레이션을 배타적 오아 연산(XOR)으로 설정한 후 그래픽 정점들을 GPU의 정점을 그리는 방법 중 하나인 트라이앵글 팬(Triangle fan)으로 그린다.
상기와 같이 그래픽 정점들을 그리면 2D백터 그래픽스의 이븐오드(EvenOdd) 채움방법을 만족하도록 그림이 그려진다. 오목한 패스와 볼록한 패스 모두 EvenOdd 채움방법을 만족하게 된다. 만약 넌제로(NonZero) 채움방법으로 패스를 그리고 싶다면 스텐실 오퍼레이션의 설정을 바꾸면 된다. 시계방향의 폴리곤은 증가함수 Incr, 시계반대방향의 폴리곤은 감소함수 Decr로 스텐실 오퍼레이션을 설정하면 NonZero 채움방법을 만족하도록 패스를 그리게 된다.
도 4의 (a)는 하나의 텍스쳐에 구역을 나누어 패스들을 그려 스텐실아틀라스를 만드는 것을 예시적으로 나타낸 것으로, 여기에서는 패스 정보를 이용하여 600개의 사각형 영역에 600개의 원을 한번에 그린 것을 나타내었다.
마지막 제3단계(S33)는 스텐실아틀라스의 그림을 화면에 그리는 단계로서 다음과 같은 작업을 수행한다.
상기 설명에서와 같이 제1단계에서는 화면에 그려져야할 패스들의 사각형 좌표와 크기, 스텐실아틀라스를 텍스쳐맵핑하기 위한 텍스쳐의 좌표와 크기를 리스트에 저장하였다. 제3단계에서는 상기 리스트에 저장된 정보를 사용하여 모든 패스의 사각형을 한번의 드로잉 콜로 화면에 그린다.
도 4의 (b)는 스텐실아틀라스의 그림을 화면에 그리는 것을 예시적으로 나타낸 것으로, 여기서는 600개의 사각형을 그리는데 각 사각형은 스텐실아틀라스와 텍스처 맵핑되어 최종으로 600개의 원이 화면에 그려진다.
그런데, 2D벡터 그래픽스에는 보통 그림자(Shadow)를 그리는 API가 존재한다. 만약 어떤 패스를 그릴때 그림자(shadow)도 같이 그려야 하는 경우 상기 제2단계(S32)에 다음과 같은 작업을 추가하여 배치를 성취할 수 있다.
이에 대한 본발명의 실시예를 도 5 및 도 6을 참조하여 설명하면 다음과 같다.
이때, 패스의 모양을 보관하는 스텐실아틀라스처럼 쉐도우의 모양을 보관하는 쉐도우아틀라스 단계가 필요하다.
제1단계(S51)에서는 그려져야 할 패스들의 정보를 리스트에 모은다. 제2단계(S52)에서는 하나의 텍스쳐에 구역을 나누어 패스들을 그리는 스텐실아틀라스를 만든다. 제3단계(S53)에서는 스텐실아틀라스가 보관하는 모양을 이용하여 각 패스의 쉐도우를 쉐도우아틀라스에 그린다. 제4단계(S54)에서는 스텐실아틀라스와 쉐도우아틀라스의 모양을 화면에 그린다.
도 6은 상기 어떤 패스를 그릴때 그림자도 같이 그려야 하는 경우를 도식화하여 예시적으로 나타낸 것이다. 즉, 도 6의 (a)는 상기 도 4의 (a)와 같이 패스 정보를 이용하여 600개의 사각형 영역에 600개의 원을 한번에 그린 것을 나타내었다. 도 6의 (b)는 스텐실아들라스를 이용하여 600개의 사각형 영역에 600개의 그림자를 한번에 그린 것을 나타내었다. 도 6의 (c)는 여기서는 1200개의 사각형을 그리는데, 그 중에서 600개의 사각형은 스텐실아들라스와 텍스처 맵핑되고 나머지 600개의 사각형은 쉐도우아틀라스와 텍스처 맵핑되어 최종적으로 600개의 원과 600개의 그림자가 화면에 각각 그려진다.
2D벡터 그래픽스는 패스뿐만 아니라 이미지와 텍스트로 그린다. 상기 도 3 및 도 5에서는 패스를 그리는 것을 어떻게 배치하는 지에 대한 처리순서를 나타낸 것이다. GPU를 최대한 이용하기 위해서는 이미지와 텍스트를 패스와 함께 그릴때도 배치를 할 수 있어야 한다.
2D 게임엔진들은 이미지들을 배치하여 그린다. 상기에서 설명한 텍스쳐아틀라스(구역을 나누고 해당 구역에 이미지를 그린 다음 보관하는 텍스쳐)를 이용하면 이미지를 배치하여 그릴 수 있다. 지금까지 설명으로 패스만을 배치할 수도 있고 이미지 만을 배치할 수도 있다. 하지만, 패스와 이미지를 함께 섞어서 그릴 때도 배치를 할 수 있어야 한다.
본 발명의 실시예에 따라 패스와 이미지를 유기적으로 배치할 수 있게 되는데, 이를 도 7 및 도 8을 참조하여 설명하면 다음과 같다.
제1단계(S71)에서는 그려져야 할 패스들의 정보를 리스트에 모으고, 그려져야 할 이미지는 텍스쳐아틀라스에 모은다. 도 8의 (a)는 텍스처아틀라스에 구역을 나누어 이미지를 저장한 것을 예시적으로 나타낸 것이다.
제2단계(S72)에서는 하나의 텍스쳐에 구역을 나누어 패스들을 그리는 스텐실아틀라스를 만든다. 도 8의(b)는 상기와 같은 스텐실아틀라스를 예시적으로나타낸 것이다.
제3단계(S73)에서는 스텐실아틀라스의 그림과 텍스쳐아틀라스의 그림을 화면에 그린다. 도 8의 (c)는 상기 텍스쳐아틀라스에 보관된 이미지로 모든 이미지를 한번에그린 것을 예시적으로 나타낸 것이다.
이하, 본 발명의 실시예에 따라, 패스와 텍스트를 함께 그릴 때 배치를 하는 것에 대하여 도 9 및도 10을 참조하여 설명하면 다음과 같다.
일반적으로, GPU를 이용한 2D벡터 그래픽스 구현 시 패스와 이미지는 배치를 하지 않지만 텍스트를 그릴때는 배치를 한다. 예를 들어, 구글의 skia, 애플의 Quart2D, 노키아의 Qt 모두 비슷한 방식으로 텍스트를 배치한다.
본 발명의 실시예에 따라 텍스트를 그리는 기본적인 방법은 종래의 구현방법과 유사하지만, 텍스트와 패스를 함께 배치하기 위한 다음과 같은 처리단계가 새롭게 추가되었다.
제1단계(S91)에서는 상기 도 3의 제1단계(S31)에 부가하여, 그려져야 할 패스들의 정보를 리스트에 모으고, 그려져야 할 텍스트(API를 통해 요청되는 글꼴)를 텍스쳐아틀라스에 모은다. 도 10의 (a)는 상기 제1단계(S91)에 따라 텍스쳐아틀라스에 글꼴을 보관한 예를 나타낸 것으로, 텍스쳐아틀라스에 구역을 나누어 글꼴이 저장된 것을 알 수 있다. 여기서, 텍스쳐아틀라스는 구역을 나누고 해당 구역에 이미지를 그린 다음 보관하는 텍스쳐를 의미한다.
제2단계(S92)에서는 그동안 모아두었던 패스들과 텍스쳐아틀라스에 그려진 글꼴들을 스텐실아틀라스에 저장한다. 이때, 패스의 모양은 그래픽의 정점들을 스텐실 오퍼레이션으로 스텐실아틀라스에 그리고, 텍스쳐아틀라스의 그림을 텍스쳐 복사하여 텍스트의 모양을 스텐실아틀라스에 저장한다. 도 10의 (b)는 상기 제2단계(S92)에 따른 스텐실아틀라스를 예시적으로 나타낸 것이다.
제3단계(S93)에서는 상기 스텐실아틀라스에 저장된 패스와 글꼴의 그림을 화면에 그린다. 도 10의(c)는 상기 제3단계(S93)에 따라 스텐실아틀라스에 보관된 모양으로 패스와 글꼴을 화면에 그린 것을 예시적으로 나타낸 것이다.
상기와 같은 일련의 단계(S91-S93)를 통해 패스와 텍스트를 유기적으로 조합할 수 있다.
이상에서 본 발명의 바람직한 실시예에 대하여 상세히 설명하였지만, 본 발명의 권리범위가 이에 한정되는 것이 아니라 다음의 청구범위에서 정의하는 본 발명의 기본 개념을 바탕으로 보다 다양한 실시예로 구현될 수 있으며, 이러한 실시예들 또한 본 발명의 권리범위에 속하는 것이다.

Claims (7)

  1. (a) 2D벡터 그래픽스의 패스를 그리기 위해 API(API: Application Program Interface)를 통해 요청되는 패스들을 바로 그리지 않고 모으는 단계;
    (b) 상기 모으는 단계를 통해 모아두었던 패스들을 스텐실아틀라스에 그리는 단계; 및
    (c) 상기 모아두었던 패스들을 그리기 위해 각 패스에 해당하는 스텐실아틀라스 모양을 포함하는 사각형들을 화면에 그리는 단계;를 포함하는 것을 특징으로 하는 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법.
  2. 제1항에 있어서, 상기 스텐실아틀라스는 2차원 렉탱글 빈 패킹(Two-Dimensional Rectangle Bin Packing) 알고리즘으로 각 패스가 포함될 수 있는 사각형 영역을 할당하고 그 사각형 영역에 패스를 스텐실오퍼레이션으로 그려서 보관되는 공간인 것을 특징으로 하는 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법.
  3. 제1항에 있어서, 상기 (b) 단계 이후에,
    스텐실아틀라스가 보관하고 있는 모양을 이용하여 각 패스의 쉐도우를 쉐도우아틀라스에 그리는 단계 및 모아두었던 패스와 쉐도우들을 그리기 위해 각 패스에 해당하는 스텐실아틀라스 모양과 쉐도우아틀라스 모양을 포함하는 사각형들을 화면에 그리는 단계를 더 포함하여, 2D 벡터 그래픽스의 패스를 그릴때 그림자(shadow)도 같이 그리는 것을 특징으로 하는 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법.
  4. 제3항에 있어서, 상기 쉐도우아틀라스는 구역을 나누고 해당 구역에 그려진 패스의 그림자를 보관하는 텍스쳐인 것을 특징으로 하는 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법.
  5. 제1항에 있어서, 상기 (a) 단계는 상기 API를 통해 요청되는 이미지를 텍스쳐아틀라스에 그리는 단계를 더 포함하고, 상기 (c) 단계는 상기 스텐실아틀라스 모양을 포함하는 사각형들 외에, 각 이미지에 해당하는 텍스쳐아틀라스 모양을 포함하는 사각형들을추가로 화면에 그리는 단계를 더 포함하여, 2D 벡터 그래픽스의 이미지를 패스와 함께 그리는 것을 특징으로 하는 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법.
  6. 제5항에 있어서, 상기 텍스쳐아틀라스는 구역을 나누고 해당 구역에 그려진 이미지를 보관하는 텍스쳐인 것을 특징으로 하는 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법.
  7. 제1항에 있어서, 상기 (a) 단계는 상기 API를 통해 요청되는 글꼴을 텍스쳐아틀라스에 그리는 단계를 더 포함하고, 상기 (b) 단계는 모아두었던 패스들 외에 상기 텍스쳐아틀라스에 그려진 글꼴들을 스텐실아틀라스에 그리는 단계를 더 포함하고, 상기 (c) 단계는 상기 모아두었던 패스들을 그리기 위해 각 패스에 해당하는 스텐실아틀라스 모양을 포함하는 사각형들 외에 텍스트에 해당하는 스텐실 아틀라스 모양을 포함하는 사각형들을 화면에 그리는 단계를 더 포함하여, 2D 벡터 그래픽스의 텍스트를 패스와 함께 그리는 것을 특징으로 하는 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법.
PCT/KR2012/009222 2012-04-27 2012-11-05 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법 WO2013162136A1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US14/397,303 US20150371410A1 (en) 2012-04-27 2012-11-05 Batch rendering method for 2d vector graphics path using gpu

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
KR1020120044404A KR101338370B1 (ko) 2012-04-27 2012-04-27 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법
KR10-2012-0044404 2012-04-27

Publications (1)

Publication Number Publication Date
WO2013162136A1 true WO2013162136A1 (ko) 2013-10-31

Family

ID=49483398

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/KR2012/009222 WO2013162136A1 (ko) 2012-04-27 2012-11-05 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법

Country Status (3)

Country Link
US (1) US20150371410A1 (ko)
KR (1) KR101338370B1 (ko)
WO (1) WO2013162136A1 (ko)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20160073147A (ko) 2014-12-16 2016-06-24 삼성전자주식회사 Gpu 기반 벡터 그래픽을 위한 메쉬 생성 장치, 방법 및 컴퓨터 프로그램
KR20160086622A (ko) 2015-01-12 2016-07-20 삼성전자주식회사 스트로크 기반의 이미지 렌더링 장치, 방법 및 컴퓨터 프로그램
KR20160090539A (ko) 2015-01-22 2016-08-01 삼성전자주식회사 Gpu 기반 벡터 그래픽을 위한 이미지 렌더링 장치, 방법 및 컴퓨터 프로그램

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR200481408Y1 (ko) 2014-06-13 2016-09-27 박종원 변환탁자
CN107045437A (zh) * 2016-02-05 2017-08-15 阿里巴巴集团控股有限公司 一种实现批渲染的方法、装置和设备
US10269166B2 (en) * 2016-02-16 2019-04-23 Nvidia Corporation Method and a production renderer for accelerating image rendering
CN108780583A (zh) * 2016-03-15 2018-11-09 三菱电机株式会社 纹理映射装置和纹理映射程序
CN107818069B (zh) 2016-09-12 2021-10-01 阿里巴巴集团控股有限公司 数据处理方法及系统
CN110766599B (zh) * 2018-07-26 2023-03-28 武汉斗鱼网络科技有限公司 一种利用Qt Quick绘制图像时防止出现白屏的方法及系统
US11315321B2 (en) * 2018-09-07 2022-04-26 Intel Corporation View dependent 3D reconstruction mechanism

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20090111135A (ko) * 2008-04-21 2009-10-26 주식회사 코아로직 하드웨어 방식의 벡터 그래픽 가속기, 그 가속기를 포함한어플리케이션 프로세서 및 단말기, 및 그 프로세서에서그래픽 가속방법
KR20090111134A (ko) * 2008-04-21 2009-10-26 주식회사 코아로직 2ｄ 및 3ｄ 통합 그래픽 가속기, 그 가속기를 포함한어플리케이션 프로세서 및 그 어플리케이션 프로세서에서의그래픽 가속방법
KR20100044874A (ko) * 2007-08-02 2010-04-30 에이티아이 테크놀로지스 유엘씨 2ｄ 벡터 이미지의 멀티-샘플 렌더링
KR20100052850A (ko) * 2008-11-11 2010-05-20 엠진 (주) 2차원 벡터 그래픽 처리를 위한 라스터라이저 및 그 방법
KR20110057055A (ko) * 2009-11-23 2011-05-31 인스티튜트 포 인포메이션 인더스트리 2차원 벡터 그래픽스 삼각형화 시스템 및 그 방법

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6995765B2 (en) * 2001-07-13 2006-02-07 Vicarious Visions, Inc. System, method, and computer program product for optimization of a scene graph
US6903741B2 (en) * 2001-12-13 2005-06-07 Crytek Gmbh Method, computer program product and system for rendering soft shadows in a frame representing a 3D-scene
US7970237B2 (en) * 2007-08-01 2011-06-28 Adobe Systems Incorporated Spatially-varying convolutions for rendering glossy reflection effects
US9349214B2 (en) * 2008-08-20 2016-05-24 Take-Two Interactive Software, Inc. Systems and methods for reproduction of shadows from multiple incident light sources
US20110285718A1 (en) * 2010-05-21 2011-11-24 Kilgard Mark J Point containment for quadratic bèzier strokes

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20100044874A (ko) * 2007-08-02 2010-04-30 에이티아이 테크놀로지스 유엘씨 2ｄ 벡터 이미지의 멀티-샘플 렌더링
KR20090111135A (ko) * 2008-04-21 2009-10-26 주식회사 코아로직 하드웨어 방식의 벡터 그래픽 가속기, 그 가속기를 포함한어플리케이션 프로세서 및 단말기, 및 그 프로세서에서그래픽 가속방법
KR20090111134A (ko) * 2008-04-21 2009-10-26 주식회사 코아로직 2ｄ 및 3ｄ 통합 그래픽 가속기, 그 가속기를 포함한어플리케이션 프로세서 및 그 어플리케이션 프로세서에서의그래픽 가속방법
KR20100052850A (ko) * 2008-11-11 2010-05-20 엠진 (주) 2차원 벡터 그래픽 처리를 위한 라스터라이저 및 그 방법
KR20110057055A (ko) * 2009-11-23 2011-05-31 인스티튜트 포 인포메이션 인더스트리 2차원 벡터 그래픽스 삼각형화 시스템 및 그 방법

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20160073147A (ko) 2014-12-16 2016-06-24 삼성전자주식회사 Gpu 기반 벡터 그래픽을 위한 메쉬 생성 장치, 방법 및 컴퓨터 프로그램
KR101646945B1 (ko) 2014-12-16 2016-08-10 삼성전자주식회사 Gpu 기반 벡터 그래픽을 위한 메쉬 생성 장치, 방법 및 컴퓨터 프로그램
KR20160086622A (ko) 2015-01-12 2016-07-20 삼성전자주식회사 스트로크 기반의 이미지 렌더링 장치, 방법 및 컴퓨터 프로그램
KR20160090539A (ko) 2015-01-22 2016-08-01 삼성전자주식회사 Gpu 기반 벡터 그래픽을 위한 이미지 렌더링 장치, 방법 및 컴퓨터 프로그램

Also Published As

Publication number Publication date
KR101338370B1 (ko) 2013-12-10
KR20130121315A (ko) 2013-11-06
US20150371410A1 (en) 2015-12-24

Similar Documents

Publication Publication Date Title
WO2013162136A1 (ko) 지피유를 이용한 2차원 벡터 그래픽스 패스의 배치 렌더링 방법
CN1321369C (zh) 计算器系统中压缩及解压缩指令的方法与装置
CN110084875B (zh) 使用计算着色器作为顶点着色器的前端
JP5336067B2 (ja) グラフィックスを処理する方法および装置
CN105283900B (zh) 用于压缩顶点着色器输出参数的方案
CN105556565B (zh) 片段着色器执行顶点着色器计算
CN109260708A (zh) 地图渲染方法、装置以及计算机设备
Potmesil et al. The pixel machine: a parallel image computer
US9495722B2 (en) Developer controlled layout
JP4810605B2 (ja) マルチプロセッサ環境のためのテクスチャユニット
US20110285742A1 (en) System and method for path rendering with multiple stencil samples per color sample
JP2008097583A (ja) グラフィックスパイプラインにおけるタイルベース精度のラスタライズ
WO2012111864A1 (ko) 레이 트레이싱 코어 및 레이 트레이싱 처리 방법
KR20120034293A (ko) 정점 처리 방법 및 장치
DE102020121814A1 (de) Vorrichtung und Verfahren zum Verwenden von Dreieckspaaren und gemeinsam genutzten Transformationsschaltungen zum Verbessern der Strahlverfolgungsleistung
US20140125686A1 (en) Image rendering method and system
CN110223216A (zh) 一种基于并行plb的数据处理方法、装置及计算机存储介质
JPH10111858A (ja) グラフィクス・パイプラインを並列化する方法及び装置
ITMI20080999A1 (it) Modulo di renderizzazione per grafica a due dimensioni
US9013494B2 (en) Heads-up-display software development tool
US20210295584A1 (en) Graphics processing
CN112614210A (zh) 工程图纸显示方法、系统及相关装置
Nishimura et al. VC-1: A scalable graphics computer with virtual local frame buffers
Slater et al. Liberation from rectangles: a tiling method for dynamic modification of objects on raster displays
EP2141594A2 (en) Vectorized parallel collision detection pipeline

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 12874997

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

WWE Wipo information: entry into national phase

Ref document number: 14397303

Country of ref document: US

122 Ep: pct application non-entry in european phase

Ref document number: 12874997

Country of ref document: EP

Kind code of ref document: A1

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 26.02.2015)