KR101580605B1 - HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법 - Google Patents

HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법 Download PDF

Info

Publication number
KR101580605B1
KR101580605B1 KR1020140080283A KR20140080283A KR101580605B1 KR 101580605 B1 KR101580605 B1 KR 101580605B1 KR 1020140080283 A KR1020140080283 A KR 1020140080283A KR 20140080283 A KR20140080283 A KR 20140080283A KR 101580605 B1 KR101580605 B1 KR 101580605B1
Authority
KR
South Korea
Prior art keywords
shader
renderer
glsl
polygon
text
Prior art date
Application number
KR1020140080283A
Other languages
English (en)
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 KR1020140080283A priority Critical patent/KR101580605B1/ko
Application granted granted Critical
Publication of KR101580605B1 publication Critical patent/KR101580605B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/30—Arrangements for executing machine instructions, e.g. instruction decode
    • G06F9/38—Concurrent instruction execution, e.g. pipeline or look ahead
    • 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/20—Perspective computation
    • G06T15/205—Image-based rendering

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Computing Systems (AREA)
  • Geometry (AREA)
  • Computer Graphics (AREA)
  • Image Generation (AREA)

Abstract

본 발명은 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법에 관한 것이다. 이와 같은 본 발명은 게임에서 실제 사용되는 게임 객체(100); 상기 게임객체(100)가 사용하는 리소스의 논리적 객체인 리소스 객체(110); 상기 리소스 객체(110)로부터의 논리적 객체를 출력하는 GL 래퍼인 렌더러(120); 상기 렌더러(120) 내에 존재하며 컨텐츠 로직에서 요청한 렌더링데이터를 쌓는 렌더러 큐(130); 상기 렌더러 큐(130)를 가공한 렌더링 데이터를 버퍼링하는 렌더 버퍼(140); 상기 렌더러(120)로부터 렌더링 데이터를 취출하여 스키닝 쉐이더(160), 폴리곤 쉐이더(170), 노멀 쉐이더(180) 및 텍스트 쉐이더(190)로 출력하는 GL 쉐이더 엔진인 GLSL(150); 상기 GLSL(150)로부터의 렌더링 데이터에 대하여 스프라이트를 1 드로우 콜 하기 위해 각 페이스의 변환 값을 주는 스키닝 쉐이더(160); 상기 GLSL(150)로부터 출력되는 렌더링 데이터의 폴리곤을 출력하는 폴리곤 쉐이더(170); 상기 GLSL(150)로부터 출력되는 렌더링 데이터의 일반 2D 단일 스프라이트 렌더링 하는 노멀 쉐이더(180); 및 상기 GLSL(150)로부터 출력되는 렌더링 데이터의 텍스트를 출력하는 텍스트 쉐이더(190);를 포함하여 구성됨을 특징으로 하는 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력을 위한 모바일 어플리케이션의 그래픽 모델 구조를 제공한다.

Description

HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법{Graphic model architecture with output method for fast output mobile application based HTML5 WebGL}
본 발명은 그래픽 모델 구조 및 출력방법에 관한 것으로, 더욱 상세하게는 HTML5 기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법에 관한 것이다.
플랫폼은 간단하게는 소프트웨어를 실행할 수 있는 기반을 말한다. 일반적으로 플랫폼은 운영체제, 런타임 라이브러리, 미들웨어, GUI, SDK 등을 포함한다고 위키에서 정의하고 있다.
운영체제는 커널을 중심으로 메모리관리, 멀티태스킹, 파일시스템 관리, 입출력 관리를 해주는 도구라고 정의할 수 있다.
여기에서는 플랫폼이 운영체제를 포괄하는 의미로 사용되고, 그런 측면에서 구글 안드로이드, 애플의 iOS, 삼성전자의 바다는 운영체제를 내장한 플랫폼이라고 볼 수 있다.
다양한 플랫폼의 존재가 해당 플랫폼을 사용하는 사용자에게는 큰 불편이 아닐 수도 있겠지만, 애플리케이션을 개발하는 기업이나 개발자에게는 모바일 플랫폼마다 앱 개발 기술이 상이하여 개별 플랫폼별로 개발을 해야하기 때문에 개발 비용과 기간이 증가하게 되는 단점이 있다.
웹표준을 이용하면 하나의 웹 기술로 다양한 플랫폼에 대응할 수 있기 때문에 이러한 문제를 해결할 수있을 것이라고 생각되지만 여러가지 문제로 인하여 아직까지는 완전한 해결책이라고 보기는 어렵다.
그래서 대두된 것이 크로스 플랫폼(Cross Platform) 개발환경이다.크로스 플랫폼은 2개 이상의 운영체제 또는 플랫폼에서 공통으로 사용되는 소프트웨어 또는 애플리케이션을 말한다.
가장 대표적인 사례가 자바(Java) 언어다. 여기서 다시 세분화하면 크로스 컴파일, 크로스 프로그래밍 언어, 크로스 API 등으로 나뉠 수 있다.
자바로 개발된 소스코드는 개별운영체제에서 다시 컴파일되어 목적코드가 생성되어야 비로소 해당 플랫폼에서 구동되는 애플리케이션이 된다.
자바는 하나의 문법과 API를 가지는 언어이며, 개별 플랫폼을 위한 크로스 컴파일도구를 포함하고 있다.
현재 콘텐츠 개발업체는 [표 1]에서 보는 바와 같이 다양한 모바일 플랫폼들은 모두 상이한 개발언어로 개발되어야 한다.
제조사 애플 구글 마이크로
소프트		 삼성전자 RIM HP
플랫폼 iOS 안드로이드 윈도폰7 바다 블랙베리 Palm
webOS
개발언어 Objective-c Java C# C++ Java JavaScript
특정 모바일 플랫폼의 시장 점유율이 압도적이라면 모르겠지만 현재와 같이 iOS와 안드로이드가 시장을 양분한 상태에서 마이크로소프트의 윈도폰7이 약진하고 삼성전자가 바다에 꾸준히 투자를 하게 된다면 모바일 앱 개발사의 경우 멀티 플랫폼을 위한 콘텐츠 개발에 중복투자를 할 수 밖에 없다.
이런 모바일 플랫폼 파편화를 통일하고자 하는 의지가 크로스 플랫폼 개발환경이고, 최근에 가장 각광받는 기술은 HTML5 기술을 활용한 모바일 웹 플랫폼이다.
특히 iOS와 안드로이드가 모두 웹킷(Webkit) 기반의 웹뷰(Webview)를 제공하고 있고, 애플과 구글이 모두 웹킷 오픈소스 프로젝트 참여사이기 때문에 어느정도 호환성이 검증되어 있는 상태라 많은 솔루션 업체들이 모바일 웹기반 크로스 플랫폼 개발도구를 연구 개발 하고 있다
그 외에도 최근에는 SKT, KT, AT&T, Verizon 등 전세계 24개 주요 통신사업자와 삼성전자, LG전자와 같은 디바이스 제조사들이 참여한 글로벌 통합 앱 스토어인 WAC(Wholesale Applications Community)에서 웹기반 크로스 프랫폼인 Waikiki API를 준비하고 있다.
어떤 형태로든 웹기반 모바일 크로스 플랫폼 제품들은 C, Java와 같은 프로그래밍 언어보다 쉽고 편하게 접근할 수 있는 웹 요소들(HTML,JavaScript, CSS)을 가지고 앱 같은 웹을 개발할 수 있게 해준다.
그러나 종래의 2D 렌더링 엔진에서는 단일 스프라이트를 그릴 때마다 Draw Call을 하는게 일반적인데, 그와 같은 경우 많은 수의 스프라이트를 래너링하는 경우 출력성능이 저하되는 문제가 있었다.
한편 도 1은 종래 기술에 따른 그래픽 파이프라인을 설명하기 위한 도면이다.
종래 기술에 따른 그래픽 파이프라인은 도 1에 나타낸 바와 같이 컴퓨팅 시스템은 호스트 CPU와 그래픽 하드웨어 사이에서 나누어진다. CPU는 그 사용을 요청하는 어플리케이션 및 서비스에 의한 그래픽 API로의 호출을 용이하게 한다. 종래, 어플리케이션 및 드라이버는 CPU측 상에 위치하고, 그들 소스로부터의 정보는 모니터 상에 디스플레이되도록 전송된다. 먼저, 정보는 API에 따라 CPU에 의해 패키지된 바와 같이 CPU로부터 GPU로 전송된다. 그 다음, 어플리케이션으로부터의 정보는 정점 셰이더에 의해 액세스될 때까지 메모리 내에서 대기한다. 정점 셰이더가 그 연산을 결정한 후, 정보는 정점 셰이더로부터의 출력으로서, 픽셀 셰이더에 의해 액세스될 때까지, 특정 데이터 경로를 통해 픽셀셰이더로 출력되고(비디오 메모리 내에 출력을 배치하는 것은 일반적으로 너무 느림), 정점 셰이더는 유휴 상태로 있거나 또는 더 많은 데이터를 계속 프로세싱한다. 픽셀 셰이더가 연산을 실행한 후, 정보는 디스플레이로 스캔 출력되기 위해 프레임 버퍼 내에 배치되거나, 또 다른 연산을 위해 다시 호스트로 전송된다.
현존하는 테셀레이터가 소수의 제어-포인트 정점에 기초하여 새로운 정점의 그리드를 생성하는 몇가지 기본적인 알고리즘을 구현하지만, 프로세스는 미리 고정된 알고리즘에 기초하고, 파이프라인의 전단에 제한되므로, 절차적 셰이더에 의한 프로세싱 후 파이프라인의 중간에 추가적인 임의의 지오메트리를 생성하기 위해 프로그램할 수는 없다.
게다가, 일단 정점들이 테셀레이터에 의해 생성되면, 파이프라인 이외에는 정점이 생성될 수 있는 곳이 없다.
즉, 오늘날의 정점 셰이더는 정점을 수신하고 프로세싱하며 출력할 수 있지만, 새로운 정점을 생성할 수는 없다. 그러므로, 명령어 카운트의 한계, 출력 형태의 한계 및 파이프라인내 데이터 공유 결핍으로 인한 현재의 그래픽 파이프라인 아키텍처, API 및 하드웨어와 관련된 현재의 프로그램가능성의 단점을 극복하는 시스템 및 방법이 필요하다고 할 것이다.
본 발명은 상기와 같은 종래 기술의 문제점을 해결하기 위한 것으로, 본 발명은 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법을 제공하는데 그 목적이 있다.
상기한 목적을 달성하기 위한 본 발명 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력을 위한 모바일 어플리케이션의 그래픽 모델 구조는, 게임에서 실제 사용되는 게임 객체; 상기 게임객체가 사용하는 리소스의 논리적 객체인 리소스 객체; 상기 리소스 객체로부터의 논리적 객체를 출력하는 GL 래퍼인 렌더러; 상기 렌더러 내에 존재하며 컨텐츠 로직에서 요청한 렌더링데이터를 쌓는 렌더러 큐; 상기 렌더러 큐를 가공한 GL에 직접 전달되는 렌더링 데이터를 버퍼링하는 렌더 버퍼; 상기 렌더러로부터 렌더링 데이터를 취출하여 스키닝 쉐이더, 폴리곤 쉐이더, 노멀 쉐이더 및 텍스트 쉐이더로 출력하는 GL 쉐이더 엔진인 GLSL; 상기 GLSL로부터의 렌더링 데이터에 대하여 스프라이트를 1 드로우 콜 하기 위해 각 페이스의 변환 값을 주는 스키닝 쉐이더; 상기 GLSL로부터 출력되는 렌더링 데이터의 폴리곤을 출력하는 폴리곤 쉐이더; 상기 GLSL로부터 출력되는 렌더링 데이터의 일반 2D 단일 스프라이트 렌더링 하는 노멀 쉐이더 상기 GLSL로부터 출력되는 렌더링 데이터의 텍스트를 출력하는 텍스트 쉐이더; 및 상기 스키닝 쉐이더, 폴리곤 쉐이더, 노멀 쉐이더 및 텍스트 쉐이더로부터 출력되는 데이터를 그래픽 처리하는 GPU(200);를 포함하여 구성됨을 특징으로 한다.
그리고 상기한 목적을 달성하기 위한 본 발명 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법은 게임에서 실제 사용되는 객체인 게임 객체가 사용하는 리소스의 논리적 객체인 리소스 객체로부터 렌더러가 논리적 객체를 출력하는 단계; 리소스의 논리적 객체를 출력하는 GL 래퍼인 렌더러내에 존재하는 렌더러 큐는 컨텐츠 로직에서부터 요청한 렌더링데이터를 쌓고, 렌더 버퍼는 상기 렌더러 큐를 렌더링 데이터를 버퍼링하는 단계; GLSL이 렌더러로부터 렌더링 데이터를 취출하여 스키닝 쉐이더, 폴리곤 쉐이더, 노멀 쉐이더 및 텍스트 쉐이더로 출력하는 단계; 상기 스키닝 쉐이더는 상기 GLSL로부터의 렌더링 데이터에 대하여 스프라이트를 1 드로우 콜 하기 위해 각 페이스의 변환 값을 주고, 상기 폴리곤 쉐이더는 상기 GLSL로부터 출력되는 렌더링 데이터의 폴리곤을 출력하며, 상기 노멀 쉐이더는 상기 GLSL로부터 출력되는 렌더링 데이터의 일반 2D 단일 스프라이트 렌더링을 하고, 상기 텍스트 쉐이더는 상기 GLSL로부터 출력되는 렌더링 데이터의 텍스트를 각각 GPU로 출력하는 단계; 및 GPU는 상기 스키닝 쉐이더, 폴리곤 쉐이더, 노멀 쉐이더 및 텍스트 쉐이더(190)로부터 출력되는 데이터를 취합하여 그래픽 처리하는 단계;를 포함하여 이루어지는 것을 특징으로 한다.
또한 본 발명은 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법을 구현하기 위한 프로그램을 기록한 기록매체를 제공하는 것을 특징으로 한다.
본 발명에 의하면 같은 렌더링 구조에서는 2D 스프라이트를 3D 모델 객체로 취급하여 스키닝 쉐이더를 통해 2D 변환 연산을 GPU가 알아서 하도록 만들어 텍스쳐를 사용하는 스프라이트에 한해서는 한번의 GL Call로 렌더링을 렌더링을 할 수 있으므로 많은 수의 스프라이트를 렌더링 해도 출력 성능이 2D에 비해 월등이 우수해지는 효과가 있다.
도 1은 종래 기술에 따른 그래픽 파이프라인을 설명하기 위한 도면이다.
도 2는 본 발명에 따른 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력을 위한 모바일 어플리케이션의 그래픽 모델 구조를 설명하기 위한 블록 구성도이다.
도 3은 본 발명에 따른 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법을 설명하기 위한 흐름도이다.
본 발명의 바람직한 실시 예를 첨부된 도면에 의하여 상세히 설명하면 다음과 같다.
아울러, 본 발명에서 사용되는 용어는 가능한 한 현재 널리 사용되는 일반적인 용어를 선택하였으나, 특정한 경우는 출원인이 임의로 선정한 용어도 있으며 이 경우는 해당되는 발명의 설명부분에서 상세히 그 의미를 기재하였으므로, 단순한 용어의 명칭이 아닌 용어가 가지는 의미로서 본 발명을 파악하여야 함을 밝혀두고자 한다. 또한 실시예를 설명함에 있어서 본 발명이 속하는 기술 분야에 익히 알려져 있고, 본 발명과 직접적으로 관련이 없는 기술 내용에 대해서는 설명을 생략한다. 이는 불필요한 설명을 생략함으로써 본 발명의 요지를 흐리지 않고 더욱 명확히 전달하기 위함이다.
도 2는 본 발명에 따른 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력을 위한 모바일 어플리케이션의 그래픽 모델 구조를 설명하기 위한 블록 구성도이다.
WebGL이란 OpenGL을 사용한 HTML5 의 새로 추가된 기능이다.
WebGL을 이용하여 웹 브라우져 화면상에 프레임을 이용한 렌더링을 지원함으로써 매초에 일정 장수만큼 지웠다 그렸다 하는 방식으로 기존의 RPG 게임을 제작하듯이 제작이 가능해진다.
본 발명에 따른 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력을 위한 모바일 어플리케이션의 그래픽 모델 구조는 도 2에 나타낸 바와 같이, 게임 객체(100)와, 리소스 객체(110), 렌더러(120), 렌더러 큐(130), 렌더 버퍼(140), GLSL(150), 스키닝 쉐이더(160), 폴리곤 쉐이더(170), 노멀 쉐이더(180), 텍스트 쉐이더(190) 및 GPU(200)로 구성된다.
여기서, 게임 객체(100)는 게임에서 실제 사용되는 객체이다.
리소스 객체(110)는 게임객체(100)가 사용하는 리소스의 논리적 객체이다.
렌더러(120)는 리소스의 논리적 객체(110)를 출력하는 GL 래퍼이다.
렌더러 큐(130)는 렌더러(120) 내에 존재하며 컨텐츠 로직에서부터 요청한 렌더링데이터를 쌓는다.
렌더 버퍼(140)는 렌더러 큐(130)를 가공한 GL에 직접 전달되는 렌더링 데이터를 버퍼링한다.
GLSL(150)는 렌더러(120)로부터 렌더링 데이터를 취출하여 스키닝 쉐이더(160), 폴리곤 쉐이더(170), 노멀 쉐이더(180) 및 텍스트 쉐이더(190)로 출력하는 GL 쉐이더 엔진이다.
스키닝 쉐이더(160)는 GLSL(150)로부터의 렌더링 데이터에 대하여 스프라이트를 1 드로우 콜 하기 위해 각 페이스의 변환 값을 준다.
폴리곤 쉐이더(170)는 GLSL(150)로부터 출력되는 렌더링 데이터의 폴리곤을 출력한다.
노멀 쉐이더(180)는 GLSL(150)로부터 출력되는 렌더링 데이터의 일반 2D 단일 스프라이트 렌더링을 한다.
텍스트 쉐이더(190)는 GLSL(150)로부터 출력되는 렌더링 데이터의 텍스트를 출력한다.
GPU(200)는 스키닝 쉐이더(160), 폴리곤 쉐이더(170), 노멀 쉐이더(180) 및 텍스트 쉐이더(190)로부터 출력되는 데이터를 그래픽 처리한다.
도 3은 본 발명에 따른 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법을 설명하기 위한 흐름도이다.
본 발명에 따른 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법은 도 3에 나타낸 바와 같이, 게임에서 실제 사용되는 객체인 게임 객체(100)가 사용하는 리소스의 논리적 객체인 리소스 객체(110)로부터 렌더러(120)가 논리적 객체를 출력한다(S100).
리소스의 논리적 객체(110)를 출력하는 GL 래퍼인 렌더러(120)내에 존재하는 렌더러 큐(130)는 컨텐츠 로직에서부터 요청한 렌더링데이터를 쌓는다 그리고 렌더 버퍼(140)는 렌더러 큐(130)를 가공한 GL에 직접 전달되는 렌더링 데이터를 버퍼링한다(S110).
그 다음 GLSL(150)는 렌더러(120)로부터 렌더링 데이터를 취출하여 스키닝 쉐이더(160), 폴리곤 쉐이더(170), 노멀 쉐이더(180) 및 텍스트 쉐이더(190)로 출력한다(S120).
그러렴 스키닝 쉐이더(160)는 GLSL(150)로부터의 렌더링 데이터에 대하여 스프라이트를 1 드로우 콜 하기 위해 각 페이스의 변환 값을 주고, 폴리곤 쉐이더(170)는 GLSL(150)로부터 출력되는 렌더링 데이터의 폴리곤을 출력하며, 노멀 쉐이더(180)는 GLSL(150)로부터 출력되는 렌더링 데이터의 일반 2D 단일 스프라이트 렌더링을 하고, 텍스트 쉐이더(190)는 GLSL(150)로부터 출력되는 렌더링 데이터의 텍스트를 각각 GPU(200)로 출력한다(S130).
GPU(200)는 스키닝 쉐이더(160), 폴리곤 쉐이더(170), 노멀 쉐이더(180) 및 텍스트 쉐이더(190)로부터 출력되는 데이터를 취합하여 그래픽 처리한다(S140).
본 발명을 첨부된 도면과 함께 설명하였으나, 이는 본 발명의 요지를 포함하는 다양한 실시 형태 중의 하나의 실시예에 불과하며, 당업계에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 하는 데에 그 목적이 있는 것으로, 본 발명은 상기 설명된 실시예에만 국한되는 것이 아님은 명확하다. 따라서, 본 발명의 보호범위는 하기의 청구범위에 의해 해석되어야 하며, 본 발명의 요지를 벗어나지 않는 범위 내에서의 변경, 치환, 대체 등에 의해 그와 동등한 범위 내에 있는 모든 기술 사상은 본 발명의 권리범위에 포함될 것이다. 또한, 도면의 일부 구성은 구성을 보다 명확하게 설명하기 위한 것으로 실제보다 과장되거나 축소되어 제공된 것임을 명확히 한다.
100 : 게임 객체 110 : 리소스 객체
120 : 렌더러 130 : 렌더러 큐
140 : 렌더 버퍼 150 : GSGL
160 : 스키닝 쉐이더 170 : 폴리곤 쉐이더
180 : 노멀 쉐이더 190 : 텍스트 쉐이더
200 : GPU

Claims (4)

  1. 게임에서 실제 사용되는 게임 객체(100);
    상기 게임객체(100)가 사용하는 리소스의 논리적 객체인 리소스 객체(110);
    상기 리소스 객체(110)로부터의 논리적 객체를 출력하는 GL 래퍼인 렌더러(120);
    상기 렌더러(120) 내에 존재하며 컨텐츠 로직에서 요청한 렌더링데이터를 쌓는 렌더러 큐(130);
    상기 렌더러 큐(130)를 가공한 렌더링 데이터를 버퍼링하는 렌더 버퍼(140);
    상기 렌더러(120)로부터 렌더링 데이터를 취출하여 스키닝 쉐이더(160), 폴리곤 쉐이더(170), 노멀 쉐이더(180) 및 텍스트 쉐이더(190)로 출력하는 GL 쉐이더 엔진인 GLSL(150);
    상기 GLSL(150)로부터의 렌더링 데이터에 대하여 스프라이트를 1 드로우 콜 하기 위해 각 페이스의 변환 값을 주는 스키닝 쉐이더(160);
    상기 GLSL(150)로부터 출력되는 렌더링 데이터의 폴리곤을 출력하는 폴리곤 쉐이더(170);
    상기 GLSL(150)로부터 출력되는 렌더링 데이터의 일반 2D 단일 스프라이트 렌더링 하는 노멀 쉐이더(180); 및
    상기 GLSL(150)로부터 출력되는 렌더링 데이터의 텍스트를 출력하는 텍스트 쉐이더(190);를 포함하여 구성됨을 특징으로 하는 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조를 갖는 장치.
  2. 제1항에 있어서,
    상기 그래픽 모델 구조는 상기 스키닝 쉐이더(160), 폴리곤 쉐이더(170), 노멀 쉐이더(180) 및 텍스트 쉐이더(190)로부터 출력되는 데이터를 그래픽 처리하는 GPU(200);를 더 포함하여 구성됨을 특징으로 하는 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조를 갖는 장치.
  3. 게임에서 실제 사용되는 객체인 게임 객체(100)가 사용하는 리소스의 논리적 객체인 리소스 객체(110)로부터 렌더러(120)가 논리적 객체를 출력하는 단계(S100);
    리소스의 논리적 객체(110)를 출력하는 GL 래퍼인 렌더러(120)내에 존재하는 렌더러 큐(130)는 컨텐츠 로직에서부터 요청한 렌더링데이터를 쌓고, 렌더 버퍼(140)는 상기 렌더러 큐(130)를 렌더링 데이터를 버퍼링하는 단계(S110);
    GLSL(150)이 렌더러(120)로부터 렌더링 데이터를 취출하여 스키닝 쉐이더(160), 폴리곤 쉐이더(170), 노멀 쉐이더(180) 및 텍스트 쉐이더(190)로 출력하는 단계(S120);
    상기 스키닝 쉐이더(160)는 상기 GLSL(150)로부터의 렌더링 데이터에 대하여 스프라이트를 1 드로우 콜 하기 위해 각 페이스의 변환 값을 주고, 상기 폴리곤 쉐이더(170)는 상기 GLSL(150)로부터 출력되는 렌더링 데이터의 폴리곤을 출력하며, 상기 노멀 쉐이더(180)는 상기 GLSL(150)로부터 출력되는 렌더링 데이터의 일반 2D 단일 스프라이트 렌더링을 하고, 상기 텍스트 쉐이더(190)는 상기 GLSL(150)로부터 출력되는 렌더링 데이터의 텍스트를 각각 GPU(200)로 출력하는 단계(S130); 및
    GPU(200)는 상기 스키닝 쉐이더(160), 폴리곤 쉐이더(170), 노멀 쉐이더(180) 및 텍스트 쉐이더(190)로부터 출력되는 데이터를 취합하여 그래픽 처리하는 단계(S140);를 포함하여 이루어지는 것을 특징으로 하는 HTML5 WebGL기반의 모바일 어플리케이션의 출력 방법.
  4. 게임에서 실제 사용되는 객체인 게임 객체(100)가 사용하는 리소스의 논리적 객체인 리소스 객체(110)로부터 렌더러(120)가 논리적 객체를 출력하는 단계(S100);
    리소스의 논리적 객체(110)를 출력하는 GL 래퍼인 렌더러(120)내에 존재하는 렌더러 큐(130)는 컨텐츠 로직에서부터 요청한 렌더링데이터를 쌓고, 렌더 버퍼(140)는 상기 렌더러 큐(130)를 렌더링 데이터를 버퍼링하는 단계(S110);
    GLSL(150)이 렌더러(120)로부터 렌더링 데이터를 취출하여 스키닝 쉐이더(160), 폴리곤 쉐이더(170), 노멀 쉐이더(180) 및 텍스트 쉐이더(190)로 출력하는 단계(S120);
    상기 스키닝 쉐이더(160)는 상기 GLSL(150)로부터의 렌더링 데이터에 대하여 스프라이트를 1 드로우 콜 하기 위해 각 페이스의 변환 값을 주고, 상기 폴리곤 쉐이더(170)는 상기 GLSL(150)로부터 출력되는 렌더링 데이터의 폴리곤을 출력하며, 상기 노멀 쉐이더(180)는 상기 GLSL(150)로부터 출력되는 렌더링 데이터의 일반 2D 단일 스프라이트 렌더링을 하고, 상기 텍스트 쉐이더(190)는 상기 GLSL(150)로부터 출력되는 렌더링 데이터의 텍스트를 각각 GPU(200)로 출력하는 단계(S130); 및
    GPU(200)는 상기 스키닝 쉐이더(160), 폴리곤 쉐이더(170), 노멀 쉐이더(180) 및 텍스트 쉐이더(190)로부터 출력되는 데이터를 취합하여 그래픽 처리하는 단계(S140);를 포함하여 이루어지는 것을 특징으로 하는 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법을 구현하기 위한 프로그램을 기록한 기록매체.
KR1020140080283A 2014-06-27 2014-06-27 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법 KR101580605B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020140080283A KR101580605B1 (ko) 2014-06-27 2014-06-27 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020140080283A KR101580605B1 (ko) 2014-06-27 2014-06-27 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법

Publications (1)

Publication Number Publication Date
KR101580605B1 true KR101580605B1 (ko) 2015-12-28

Family

ID=55085108

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020140080283A KR101580605B1 (ko) 2014-06-27 2014-06-27 HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법

Country Status (1)

Country Link
KR (1) KR101580605B1 (ko)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20160001550A (ko) * 2014-06-27 2016-01-06 주식회사 디지털프로그 반복순환 구조의 게임 장면 구현 및 동작 방법
CN106990961A (zh) * 2017-03-28 2017-07-28 易网数通(北京)科技有限公司 一种WebGL图形渲染引擎的建立方法
US11037356B2 (en) 2018-09-24 2021-06-15 Zignal Labs, Inc. System and method for executing non-graphical algorithms on a GPU (graphics processing unit)
CN113694523A (zh) * 2021-08-30 2021-11-26 上海哔哩哔哩科技有限公司 基于移动端app的h5游戏显示方法、装置及计算机设备

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2014052891A1 (en) * 2012-09-28 2014-04-03 Intel Corporation Device and method for modifying rendering based on viewer focus area from eye tracking
KR20140044437A (ko) * 2012-10-05 2014-04-15 (주)디지엔터테인먼트 3차원 그래픽 구현 기반의 ｃｐｕ 부하 최적화 방법 및 3차원 그래픽 구현 기반의 ｃｐｕ 부하 최적화 장치
KR20140073951A (ko) * 2012-12-07 2014-06-17 삼성전자주식회사 베이지어 커브를 렌더링하는 장치 및 방법

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2014052891A1 (en) * 2012-09-28 2014-04-03 Intel Corporation Device and method for modifying rendering based on viewer focus area from eye tracking
KR20140044437A (ko) * 2012-10-05 2014-04-15 (주)디지엔터테인먼트 3차원 그래픽 구현 기반의 ｃｐｕ 부하 최적화 방법 및 3차원 그래픽 구현 기반의 ｃｐｕ 부하 최적화 장치
KR20140073951A (ko) * 2012-12-07 2014-06-17 삼성전자주식회사 베이지어 커브를 렌더링하는 장치 및 방법

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20160001550A (ko) * 2014-06-27 2016-01-06 주식회사 디지털프로그 반복순환 구조의 게임 장면 구현 및 동작 방법
KR101586655B1 (ko) 2014-06-27 2016-01-19 주식회사 디지털프로그 반복순환 구조의 게임 장면 구현 및 동작 방법
CN106990961A (zh) * 2017-03-28 2017-07-28 易网数通(北京)科技有限公司 一种WebGL图形渲染引擎的建立方法
CN106990961B (zh) * 2017-03-28 2023-10-27 北京航天联智科技有限公司 一种WebGL图形渲染引擎的建立方法
US11037356B2 (en) 2018-09-24 2021-06-15 Zignal Labs, Inc. System and method for executing non-graphical algorithms on a GPU (graphics processing unit)
CN113694523A (zh) * 2021-08-30 2021-11-26 上海哔哩哔哩科技有限公司 基于移动端app的h5游戏显示方法、装置及计算机设备

Similar Documents

Publication Publication Date Title
CN105741228B (zh) 图形处理方法及装置
CN110544289B (zh) 在中排序架构中利用帧间相干性
WO2018050003A1 (zh) 3D canvas网页元素的渲染方法、装置及电子设备
US10134102B2 (en) Graphics processing hardware for using compute shaders as front end for vertex shaders
KR101580605B1 (ko) HTML5 WebGL기반의 모바일 어플리케이션의 빠른 출력을 위한 그래픽 모델 구조와 출력 방법
JP2016524242A (ja) 頂点シェーダのフロント・エンドとしてコンピュート・シェーダを使用すること
CN112529995B (zh) 图像渲染计算方法、装置、存储介质以及终端
US8988434B1 (en) Text rendering for browsers and mobile based applications
US20120147015A1 (en) Graphics Processing in a Multi-Processor Computing System
US10558496B2 (en) Techniques for accessing a graphical processing unit memory by an application
TWI596569B (zh) 促進針對在計算裝置上之部分被遮蔽圖形影像之動態且有效的預啓用裁剪之技術
WO2015183855A1 (en) Graphics pipeline state object and model
CN113379886B (zh) 地理信息系统的三维渲染方法、装置、设备及存储介质
US9741154B2 (en) Recording the results of visibility tests at the input geometry object granularity
US8854368B1 (en) Point sprite rendering in a cross platform environment
US8745173B1 (en) Client computing system for and method of receiving cross-platform remote access to 3D graphics applications
CN112423111A (zh) 图形引擎和适用于播放器的图形处理方法
US8872827B2 (en) Shadow softening graphics processing unit and method
EP3214599B1 (en) A graphics accelerator with direct memoryless interface to the display
US9959590B2 (en) System and method of caching for pixel synchronization-based graphics techniques
KR101586655B1 (ko) 반복순환 구조의 게임 장면 구현 및 동작 방법
KR20160001551A (ko) Html 기반의 웹페이지 동적 변환 시스템, 방법 및 컴퓨터 판독 가능한 기록매체
KR20230058460A (ko) 깊이 컬링을 지연호출하기 위한 셰이더 코어 명령
CN112416489A (zh) 工程图纸显示方法及相关装置
US9465212B2 (en) Flexible defocus blur for stochastic rasterization

Legal Events

Date Code Title Description
E701 Decision to grant or registration of patent right
GRNT Written decision to grant