티스토리 뷰

WebGL

1. 웹지엘 시작하기

path7inder 2015. 2. 9. 05:10

2007년에 세르비아계 미국인 소프트웨 엔지니어인 블라드미르 버키세빅은 캔버스 3D
라고 명명된, HTML <canvas> 요소를 위한 오픈지엘 프로토타입 작업을 시작했다. 
그리고 2011년 3월에는 오픈 지엘을 기반으로 한 크로노스 그룹의 
리더가 되어 웹지엘을 만들었다.


0.서론

웹지엘은 기본적으로 아이폰, 아이패드 같은 디바이스용 오픈지엘 표준 버전인 OpenGL ES 2.0(ES는 Embedded System을 의미)에 기반을 둔다.

파이어폭스 4.0 이상

구글 크롬 11 이상    

사파리(OSX  10.6 이상), 웹지엘은 기본 옵션으로 선택되어 있진 않다. 하지만 개발자 메뉴를 통해 웹지엘 옵션을 선택할 수 있다.

오페라 12이상


1. 웹지엘이 제공하는 렌더링

렌더링 : 컴퓨터 프로그래밍 분야에 서 모델로부터 이미지를 생성하는 처리 과정


소프트웨어 렌더링 : 3D 렌더링을 수행하기 위해 컴퓨터의 메인 프로세서를 이용한다.

하드웨어 렌더링 : 그래픽 프로세싱 유닛을 통해 3D 렌더링을 실시간으로 수행한다.


서버 기반 렌더링 : 렌더링이 복잡할 경우 원격으로 서버에서 렌더링한다.

클라이언트 기반 렌더링 : 로컬에서 렌더링을 하는 경우


2. 웹지엘의 장점

자바스크립트 프로그래밍 

자바스크립트는 웹 개발자와 웹 브라우저 양쪽 모두에게 편리한 언어다. 개발 언어로 자바스크립트를 채택하면 돔에 쉽게 접근할 수 있으며 애플릿 방식보다 쉽게 모든 요소에 접근할 수 있다. 그렇기 때문에 웹지엘을 개발할 때 제이쿼리 같은 제3의 자바스크립트 라이브러리 나 여타 HTML5 기술을 이용할 수 있다.

자동 메모리 관리

사촌격인 오픈지엘이나 여타 기술은 개발자가 직접 메뢰 할당/해제를 해야 하지만 웹지엘은 그렇지 않다. 자바스크립트의 변수 할당 규칙에 따라 메모리는 더 이상 필요하지 않을 때 자동으로 해제된다. 이런 단순한 프로그래밍 규칙은 좀 더 명확하고 쉽게 이해할 수 있도록 코드를 줄일 수 있다.

자원의 풍부함

기술이 발전함에 따라 자바스크립트 구동이 가능한 웹브라우저를 스마트폰과 태블릿에서 사용할 수 있게 됐다. 이 책을 쓰는 현재 모질라 재단은 모토로라와 삼성 폰에서 웹지엘을 테스트하고 있다. 또한 안드로이드 플랫폼에서 웹지엘을 구현하고 있다.

성능

웹지엘은 로컬 그래픽 하드웨어 덕분에 다른 독립된 애플리케이션에 비해 성능이 떨어지지 않는다. 지금까지는 많은 3D 웹 렌더링 기술이 소프트웨어 방식 렌더링에 의존했다.

제로 컴파일

웹지엘은 자바스크립트로 개발되기 때문에 컴파일이 필요 없다. 이는 3D 애플리케이션을 만드는 데 있어 장점이 될 수 잇다. 그러나 셰이더 프로그램을 설명할 때는 컴파일이 필요하다는 사실을 알 수 있다. 하지만 이런 것도 브라우저 안에서 일어나는 일이 아니라 로컬 그래픽 하드웨어에서 일어나는 일이다.


3. 웹지엘 애플리케이션 구조

캔버스

3D 씬이 렌더링되는 부분이다. 캔버스는 HTML5 표준 요소이며 자바스크립트로 돔에 접근할수이다.

오브젝트

3D 씬을 구성하는 개체다. 이 씬은 삼각형 구조로 되어 있다. 또한 폴리곤 데이터를 저장하기 위해 웹지엘 버퍼를 사용하는데, 3D 씬 안에서 오브젝트를 렌더링하기 위한 버퍼 사용 방법을 설명한다.

광원

3D 세계에서는 광원이 필수사항이다. 씬 안에서 광원을 이용한 모델을 만들기위해 셰이더를 사용한다. 그리고 3D 물체에서 빛의 반사, 흡수를 물리 법칙을 이용해 설명 할 수있다.

카메라

3D 세계에서 캔버스는 뷰포트처럼 여겨진다. 따라서 우리는 3D 씬을 캔버스를 이용한다. '카메라'에서는 시각관점을 만들기; 위해 또 다른 행렬을 설명한다.


댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함