'WebGL'에 해당되는 글 5건

Next WEB/HTML5
HTML5로 어떤 것들을 할수 있을까요? HTML5 기술을 이용해서 게임도 가능할까요? 
아직까지는 화려하고 고성능의 3D 게임은 불가능합니다만, 간단한 게임(?, 3D게임도 가능하긴 합니다.)은 HTML5 기술로도 충분히 가능합니다. 

아래에 있는 데모들이 대표적인데요, 간단한 팩맨 게임부터 WebGL(OpenGL기반)을 이용한 게임까지 정말 다양합니다. 


Classic Bricks
누구나가 다 아는 벽돌깨기 게임입니다. 단순하지만 중독성이 강하죠.  디자인이나 아이디어를 좀더 보완하면 더 재미날 듯 하네요.
http://code.google.com/p/quake2-gwt-port/



HTML5 Pacman

URL :http://arandomurl.com/2010/07/25/html5-pacman.html
Source: http://github.com/daleharvey/pacman


3D Tetris CubeOut
3차원 테트리스 게임입니다.
http://code.google.com/p/quake2-gwt-port/

 

akihabara의 게임들
거의다 우리에게도 친숙한 게임들이네요. 이름을 도쿄의 아키하바라로 지었네요.
URL : http://www.kesiev.com/akihabara/


quake2

3D 게임인 quake2도 가능합니다만, 이 게임이 WebGL기술을 이용하고 있어서 W3C HTML5범주에 포함되지는 않지만, html5test에서도 WebGL을 html5의 한 요소로 테스트하고 있고, 크로노스그룹에서 w3c에 WebGL을 표준으로 넣으려고 하고 있고, Webkit 기반 브라우저, 모질라 등에서 지원을 하거나 할 계획이어서 포함시켰습니다.
WebGL에 대해서는 제 이전 포스팅(2009/11/04 - [Browser] - 웹 브라우저에서 3D게임을 하는 시대가 오는가?)을 참고하시길 바랍니다.

URL: http://code.google.com/p/quake2-gwt-port/

다른 HTML 5 기반의 게임들
보다 많은 게임들은 아래 URL을 참고하시길 바랍니다.

http://www.canvasdemos.com/type/games/도 참고하시길 바랍니다. 
훨씬 더 다양하고 재미난 게임들이 많이 있습니다. 

어떠신가요?
HTML5기반의 게임엔진들도 속속 나오고 있어서 
HTML 5로도 게임을 좀더 쉽게 만들 수 있는 시대입니다.  WebGL 기술이 대중화되면 더 다양한 형태의 게임들이 등장할 것입니다. 굳이 웹에서 플래시 기반의 게임을 만들지 않아도 되는 시대가 오고 있습니다. 저는 웹 개발자는 아니지만, 웹 개발자 분들에게 좋은 세상이 열리겠네요.

저작자 표시 비영리 변경 금지
신고

'Next WEB > HTML5' 카테고리의 다른 글

이젠 HTML5로 게임을 개발하는 시대.  (0) 2010.11.09
HTML5 기반의 게임들  (0) 2010.10.09
구글 HTML5Rocks 슬라이드의 세미나(동영상)  (0) 2010.07.26
뜨거운 열기...HTML5 오픈 컨퍼런스  (0) 2010.07.05
HTML5 Demos  (3) 2010.06.25
HTML5 오픈 컨퍼런스 개최  (0) 2010.06.23
0 0
Next WEB/HTML5
HTML5는 현재 여러 브라우저들에서 일부 적용이 되어 있습니다. 따라서 이를 이용한 여러 데모들이 많이 나오고 있는데 '와~~' 할만한 데모들도 꽤 있습니다. 물론 Flash를 이용하면 쉽게 가능한 내용들일지 모르겠지만 플러그인 이용없이 오로지 HTML5와 JS, CSS를 써서 개발했다고 생각한다면 "와~" 할만합니다.

HTML5 참고 문서: 2010/06/15 - [Next WEB/HTML5] - HTML5 내맘대로 초간단 정리

아래는 제가 찾아본 여러 Demo들입니다. 링크를 클릭하면서 직접 확인해보시길 바랍니다. HTML5를 통해서 이런것들이 가능합니다. ^^

l  HTML5Rocks

n  http://www.html5rocks.com/

l  HTML5Demo 

n  http://html5demos.com/ 

l  HTML5 Showcase 48 Potential Flash-KillingDemos 

n  http://www.hongkiat.com/blog/48-excellent-html5-demos/

l  15 Useful HTML5 Tutorials and CheatSheets 

n  http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets? 

l  Apple Showcase 

n  http://www.apple.com/html5/

l  canvas 3D 

n  http://www.kevs3d.co.uk/dev/index.html

l  3D 테트리스예제 cubeOut 

n  http://alteredqualia.com/cubeout/


l  SkechPad 

n  http://mugtug.com/sketchpad/ 

l  Photo Editor 

n  http://mugtug.com/darkroom/ 

l  Dynamic Content Injection Demo 

n  http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml 

l  Mozilla : Dynamic Content InjectionDemo 

n  http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml? 

l  TweetDecks HTML5(video)

n  http://techcrunch.com/2010/05/19/tweetdecks-html5-browser/



canvas

l  http://www.robodesign.ro/coding/canvas-primer/20081208/example-rects.html

l  http://www.robodesign.ro/coding/canvas-primer/20081208/example-paths.html

l  http://www.robodesign.ro/coding/canvas-primer/20081208/example-drawimage.html

l  http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html

l  Interpolation Polynomial

n  http://www.benjoffe.com/code/demos/interpolate/

l  Canvascape - "3D Walker"

n  http://www.benjoffe.com/code/demos/canvascape/


Video 

l  Sublime Video Player

n  http://jilion.com/sublime/video

l  Click video to blow it up(webkit based browsers)

n http://www.craftymind.com/factory/html5video/CanvasVideo.html

l  Scripting your own HTML5 video controls

n  http://people.opera.com/patrickl/articles/introduction-html5-video/scripted-controls/

l  HTML5 Video with JavaScripted synchronisedcaptions

n  http://people.opera.com/brucel/demo/video/accessible-html5-video-captions.html

l  HTML5 video, with CSS transitions on hoverand focus

n  http://people.opera.com/brucel/demo/video/turkish-transition.html

l  video + canvas

n  http://people.opera.com/patrickl/articles/introduction-html5-video/video-canvas/

l  Mozilla : HTML5 Video Player Demo

n  http://people.mozilla.com/~prouget/demos/mashup/video.xhtml

l  Try out the Open Standard Media Player byMediaFront Demo

n  http://www.mediafront.org/project/osmplayer

WebGL
WebGL

l  Simple Demo

n  https://developer.mozilla.org/samples/webgl/sample1/index.html

l  Quake2

n  http://www.youtube.com/watch?v=fyfu4OwjUEI&feature=player_embedded#

n  http://code.google.com/p/quake2-gwt-port/


CSS3


l  Photo gallery1

n  http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php 

l  Photo gallery2

n  http://people.opera.com/andreasb/temp_toshiba/stack/

l  An example showing the various kinds oftransition-timing-functions

n  http://people.opera.com/dstorey/transitions/transition-timing-example.html

l  CSS3 Transitions

n  http://people.opera.com/patrickl/experiments/css3/transitions/

l  Webfonts

n  http://devfiles.myopera.com/articles/751/newspaper.html

l  Webfonts and Text animation using SVG

n  http://devfiles.myopera.com/articles/751/junction-type-specimen-animated.svgz

l  CSS 3D Meninas

n  http://www.romancortes.com/blog/css-3d-meninas/

l  47 Amazing CSS3 Animation Demos

n  http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/




저작자 표시 비영리 변경 금지
신고

'Next WEB > HTML5' 카테고리의 다른 글

HTML5 기반의 게임들  (0) 2010.10.09
구글 HTML5Rocks 슬라이드의 세미나(동영상)  (0) 2010.07.26
뜨거운 열기...HTML5 오픈 컨퍼런스  (0) 2010.07.05
HTML5 Demos  (3) 2010.06.25
HTML5 오픈 컨퍼런스 개최  (0) 2010.06.23
HTML5 내맘대로 초간단 정리  (0) 2010.06.15
3 0
SmartTech
2009년에는 아이폰 국내 출시, 트위터 강세, IPTV, 3D TV등의 TV시장의 변화, 스마트폰 강세, 클라우드 컴퓨팅등 IT업계에는 많은 변화가 있었던 한해였던 것 같습니다.

2010년에는 어떤 변화들이 있을까요? 제 나름대로 정리해 봤습니다.

1. 실시간 웹
 1. 실시간 웹

말 그대로 실시간 웹은 실시간으로 웹을 한다는 의미겠죠. 무선인터넷이 활성화되고 스마트폰이 대중화되면서 실시간 웹이 이슈가 되고 있는데, 트위터 같은 것을  실시간웹이라고 할수 있을 것 같습니다. SNS, LBS, News, RSS, shopping(바코드나 RFID를 이용한 실시간 쇼핑 검색),실시간 검색등 여러 분야로 확장될 수 있으며 거의가 기술적으로도 현재 실행 가능한 것들입니다. 올해는 실시간 웹으로 인해 보다 빠르고 정확한 정보를 얻을수 있게 되어 우리 생활에 변화가 생길것으로 보입니다.

참고
광파리의 글로벌 IT 이야기 : http://blog.hankyung.com/kim215/t%EC%8B%A4%EC%8B%9C%EA%B0%84+%EC%9B%B9

 
 2. 다양한 종류의 디바이스 등장

 애플이 1월 27일(?)에 애플 타블렛을 출시한다는 루머가 나돌고 있는데요. 이젠 루머가 아닐 정도로 상세한 내용들이 계속 나오고 있습니다.
구글에서도 크롬OS를 탑재한 타블렛이 HTC가 제조하여 출시한다는 루머가 나돌고 있습니다. 어떤 이들은 타블레서의 출시는 기존 3Screen(Mobile, PC, TV)에 타블렛을 추가해서 4screen으로 될 것이라는 예측까지 할 정도로 타블렛에 대해서 긍정적으로 평가하기도 합니다.
기존과는 다른 스마트폰, e-book, 넷북, smart TV등 정말 다양한 디바이스들이 출시될 예정입니다. 스마트폰과 일반폰(feature phone)과의 경계가 조금씩 무너지게 되고, 폰 어플리케이션이 다양한 디바이스에서도 구동이 되고, 타블렛이 PC와 TV역할을 하게 될수도 있습니다. 다양한 디바이스로 인해 우리의 선택은 더 커지게 되겠네요.

http://www.asiafasthosts.com/blog/wp-content/uploads/2009/08/apple-tablet.png

참고
2009/12/14 - [Mobile/Google Android] - 구글이 직접 그들만의 휴대폰을 만들다!
2009/12/22 - [Mobile/Others] - TechCrunch에 모습을 드러낸 구글 Nexus One의 실제 사진과 동영상.



 3. SNS/LBS 강세
 이젠 SNS가 새롭지 않을 정도로 우리 생활 깊숙히 파고 들고 있습니다. 현재도 트위터, 페이스북등이 LBS등 여러 서비스들과 결합되어 서비스되고 있습니다. 무선인터넷과 스마트폰의 대중화로 인해서 SNS나 LBS와 같은 서비스들이 폭발적으로 성장할 것으로 보입니다. LBS와 SNS가 기본적으로 결합되고 이와 더불어 부가적으로 다른 서비스들과 결합된다면 정말 다양한 서비스들이 우리를 사로잡을 것입니다. 올해 어떤 서비스들이 나올까요? 게임도 나오겠죠?

참고
2009/11/18 - [New Media TV] - 이젠 TV로 트윗한다.


 4. HTML5
RIA(Rich Internet Application)의 플래시와 실버라이트의 대항마로 얘기되고 있는 HTML5는 많은 것들을 담고 있습니다. 2D drawing을 위한 Canvas, Video/Audio, Local Storage(예전에 구글에서 추진했던 구글 gears프로젝트는 HTML5의 Local Storage로 인해 개발을 중단했습니다.)지원등 기존에는 지원하지 않았던 기능들을 많이 담고 있습니다. 스펙이 완료되는 시점이 2012년이지만, 벌써 많은 브라우저 벤더들이 지원을 하기 시작했고, MS도 IE9에서 이를 지원하기로 했습니다. 더많은 특징들이 있지만, 대표적인 기능들로 인해 RIA를 대신할 수 있다고 하는데, 중요한건 개발자들이 HTML5를 많이 이용하는가겠지요.
 

참고
http://html5gallery.com/
2009/09/08 - [Browser] - 브라우저 시장의 핵심 키워드는 ...


 5. 모바일 플랫폼간의 전쟁
Google의 Android, Palm의 WebOS, Apple의 iPhone OS, Nokia의 Maemo, Symbian, Linux진영의 Limo, RIM의 블랙베리, MS의 Windows Mobile(이제는 WindowsPhone OS라고 해야 하나요?), 삼성의 Bada, 각 이통사마다 다른 Mobile 플랫폼(SKT는 SKAF, 차이나모바일은 OMS등)들, 그리고 RIA 진영의 Adobe flash(AIR), MS의 실버라이트, 자바의 JavaFX등 정말 많은 모바일 플랫폼이 있습니다. 모두 모바일 시장을 선점하려고 노력중이고, 각각의 특색이 있습니다.
MS의 WindowsMobile은 올해 2년 넘게 준비해온 Windows Mobile 7을 출시하여 정면 승부를 할 것으로, Google은 자신들이 직접 판매하는 Nexus One을 통해서 통신 시장을 변혁하려 할 것이며, Palm은 자신들만의 장점인 WebOS를 통해서 시장을 확고히 할것입니다. 물론 애플도 가만히 있지는 않겠지요. ^^
또한 RIA 진영도 공격적으로 시장을 공략중입니다. 그들도 시장이 PC에서 다른 디바이스로 옮겨가고 있는 것을 알고 있겠죠. 모바일 플랫폼 뿐만 아니라 TV와 같은 가전 시장에도 손길을 뻗치고 있습니다.
올해 모바일 플랫폼 시장은 꽤나 시끄러울 것 같습니다.

참고
2009/01/12 - [Mobile/Palm pre] - [2009년 스마트폰] Palm Pre
2009/11/11 - [Mobile/Others] - 삼성전자도 개방형 모바일 플랫폼 "바다(bada)" 공개.... 확대되고 있는 모바일 플랫폼 시장
2009/11/13 - [Mobile/Others] - 삼성전자가 모바일 플랫폼때문에 바빠지고 있다. 이번엔 LiMo!!!2008/09/01 - [Mobile/Others] - 혼란스러운 Open platform 시장에서의 OMTP의 BONDI
2008/09/01 - [Mobile/Others] - Mobile에서의 Open market이 대세인가?



 6. Google!!! Android, Google chrome OS...........
요즘 구글이 너무 많은 것들을 벌이고 있습니다. 그래서 애플과 더불어 이슈의 핵심에 있는 것 같습니다.
Android기반의 구글만의 Nexus One 발표 예정, Googel chrome OS 출시 예정, 말이 많은 Ad Mob인수, Google voice, Goggles를 통한 검색 서비스의 진화, 기존 서비스들의 강화등.. 너무 많은 것들을 한꺼번에 내놓고 있습니다. 검색엔진으로 시작해서 이젠 MS와 비교해도 될 만큼 정말 많은 것들을 가지고 있습니다. 물론 질적으로 따지면 아직 모자랄수 있습니다만, 여기서 끝은 아니겠죠. 제 생각엔 구글은 보다 큰 비젼을 가지고 있는 것 같습니다. 이제 어디서나 구글을 보게 되는 세상이 되겠네요. 좋은 걸까요?

참고
2009/11/20 - [SmartTech] - 드디어 크롬 OS가 베일을 벗었다.


 7. 3D의 Reset
예전에도 3D와 관련된 이슈들은 항상 있었습니다. 3D TV도 어제, 오늘 얘기가 아니죠. 예전부터 있었던 기술이지만, 제조사들이 올해부터 본격적으로 시장을 만들어 가려고 하고 있습니다. 사실 3D에 대해서는 약간 회의적이었는데, 얼마전 본 "아바타"를 통해서 생각이 확 바뀌었습니다. 정말 다르더군요. 제 생각에는 사실 3D TV기술이 중요한 게 아니라 컨텐츠에 있다고 생각합니다. 아무리 좋은 3D기술을 가진 TV라도 컨텐츠가 별로면 시장에서 성공하기 힘들겠죠. 아직은 3D TV는 시작입니다. 기술도 컨텐츠도 .. Bluray에서도 3D표준을 포함시켰고,LG,삼성등과 같은 가전도 3D TV를 출시한다고 하니, 올해는 3D TV및 컨텐츠들의 도입기가 될 것 같습니다. 컨텐츠가 중요한데...
웹 진영에서도 3D 기술을 시도하고 있습니다. 제 블로그에서 소개한 WebGL이라는 것인데, 벌써 IE를 제외한 브라우저 벤더들은 WebGL을 일부 적용하고 있습니다. 조만간 모바일에서 볼 수 있을 겁니다.
이제 게임 뿐만 아니라, TV, 브라우저등 다른 분야에서 3D 기술을 이용하려고 노력중입니다. 이런 노력들로 인해 올해는 하나둘씩 성과가 보일 것으로 보입니다.


참고
2009/11/04 - [Browser] - 웹 브라우저에서 3D게임을 하는 시대가 오는가?
http://learningwebgl.com/blog/


 8. 증강현실(Augmented Reality)
 저는 Sekai camera를 통해서 증강현실이라는 것을 알았습니다. 처음 봤을때는 정말 신기하고 신선하더군요.
지금도 여전히 신선하고 재밌고 유용한 기술이라고 생각합니다. 증강현실이 아직 실생활에서는 많이 쓰이고 있지는 않지만, iPhone 어플리케이션인 Layer를 통해서도 일반인들에게 많이 알려졌습니다.
마켓팅 응용, A/S, SNS, LBS등 증강현실의 확장성은 정말 넓습니다. 작년부터 조금씩 대중에게 알려졌던 증강현실이 올해는 사용자들에게 여러 종류의 서비스로 시도될 것 같습니다. 아직 증강현실의 뚜렷한 모델이 없기 때문에 올해는 여러 실험을 통해서 기술이 성숙되어 갈것으로 보입니다. 이에 대해서는 따로 포스팅할 계획입니다.

참고
하이컨셉 & 하이터치 : http://health20.kr/category/%EC%A6%9D%EA%B0%95%ED%98%84%EC%8B%A4%EA%B3%BC%20LBS
2008/10/23 - [SmartTech] - 당신이 원했던 그 기술이 곧 현실이 됩니다. Sekai camera의 동영상을 보세요...


저작자 표시
신고
0 0
SmartTech
Chrome OS

구글이 19일 캘리포니아 마운틴뷰 본사에서 "Chrome OS" 설명회를 가지고 내년 말에 PC에 탑재하여 발표한다고 합니다. 이번 행사에서 베타버전도 내놓지 않았지만, 개발자들이 소스 코드에 접근할 수 있도록 했으며, 리눅스 기반의 오픈소스 OS를 표방하고 있습니다.


크롬OS에서 동작하는 애플리케이션은 웹기반의 애플리케이션이며, 이를 통해서 시스템에 애플리케이션 설치를 하지 않고도 이용할 수 있으며, 속도와 보안성을 향상시키는 데 도움을 줄것이라고 구글 제품 부사장이 얘기했습니다.

작년부터 시작된 넷북 시장을 겨냥한 OS같네요. 크롬OS 기반의 넷북은 SSD만 이용할 수 있으며, 이는 7초에 PC를 부팅할 수 있도록 하기 위한 것이라고 합니다. SSD 이용과 병렬 프로세싱을 통해서 처리속도를 높여 부팅속도를 단축했다고 합니다.  또한 지원하는 칩은 ARM, x86계열을 모두 지원한다고 합니다.

 예상했었지만, 조금 빨리 진행되는 느낌입니다. 구글이 그동안 준비해왔던 웹기반의 서비스들(calendar, docs, gmail등등)과 [각주:1]크롬 브라우저의 발표, 그리고 요즘 인기를 끌고 있는 안드로이드까지.. 그들은 정말 차근차근 그들의 제국을 만들어가고 있는 모습입니다. 이제 크롬 OS까지 나왔으니, 거의 모든 것을 가지게 되겠네요.

구글이 내세우고 있는 웹으로 모든것을 하려는 시도는 정말 공감이 가는 내용입니다. 그리고 어느 정도는 시장에서 환영받을 수도 있습니다. 다만 고도의 그래픽 성능을 요구하는 game처럼 웹기반으로 모든 application을 동작시킨다는 것은 아직 현실적으로 어려워 보입니다.  그래서 구글이 [각주:2]O3D나 WebGL등도 열심히 하고 있는 것이겠지요. 언제 이런 기술들을 이용할지는 아직 미지수입니다만 우리가 부족하다고 생각하는 분야도 구글은 준비중입니다. 그래서 구글이 무서워집니다. 물론 아직은 MS나 리눅스 같은 OS와 어깨를 견줄만큼은 아니고, 넘어야 할 산 또한 많습니다만, 넷북을 첫 타겟으로 했다는 점은 의미가 있어보입니다.

거의 모든 서비스와 애플리케이션, 플랫폼을 가지고 있는 구글.
이젠 정말 구글의 시대가 오는 것일까요? 

자세한 내용은 아래 동영상들을 참고하시거나, 참고 사이트를 참고하시길 바랍니다.

크롬OS 동영상 (What is Google Chrome OS?)


크롬OS 동영상 (Chromium OS Security)


크롬OS 동영상 (Chromium OS & Open Source)


크롬OS 동영상 (Chromium OS Fast Boot)


크롬OS 동영상


크롬OS 동영상


참고
The Chromium Project : http://www.chromium.org/

  1. 구글 크롬은 Webkit 렌더링 엔진을 이용하고 있으며, Webkit은 safari 및 모바일 디바이스의 브라우저로도 이용되고 있습니다. [본문으로]
  2. WebGL에 대해서는 <A href="http://myideom.cafe24.com/tc/103" target=_blank>http://myideom.cafe24.com/tc/103</A>을 참고해주시길 바랍니다. [본문으로]
신고
0 0
Browser
이제 머지않아 웹브라우저에서도 3D게임을 할 수 있을지도 모르겠습니다.

WebGL

얼마전에 OpenGL을 담당하고 있는 Khronos consortium에서 WebGL이라는 기술을 발표했습니다.
WebGL 은 HTML5의 canvas element의 3D context에 OpegnGL ES 2.0을 자바스크립트에서 이용할 수 있도록 바인딩했기 때문에 브라우저에서 플러그인 형태로 접근하지 않아도 하드웨어 가속이 되는 3D그래픽을 이용할 수 있습니다. 

현재 Google, Mozilla, NVIDIA, Opera, AMD, Ericsson등과 같은 굵직한 회사들이 참여하고 있습니다.

http://ext3d.com/news/images/webgl.jpg

웹기술과 3D를 결합하려고 한 시도들은 예전에도 많이 있었습니다. 그중 대표적인 기술이 VRML이라는 것이었죠. 2000년대 초반에는 상당히 인기가 많았으나 여러 문제로 사라지고 말았습니다.
그리고 얼마 전에 구글이 내놓은 O3D라는 것이 있습니다. (현재 구글은 둘다 진행하고 있는데, 언젠가는 통합되겠죠.)

자바스크립트와 OpenGL ES의 결합이라...  다소 생소할 수도 있을텐데요. 아래와 같은 형태로 개발할 수 있습니다. 참고로 큐브 예제입니다.




<!DOCTYPE html>
<html>
<head>
<title>Spinning Box</title>
<script src="resources/CanvasMatrix.js"> </script>
<script src="resources/utils3d.js"> </script>
<script id="vshader" type="x-shader/x-vertex">
uniform mat4 pMatrix;
uniform mat4 mvMatrix;
uniform vec3 lightDir;

attribute vec3 vNormal;
attribute vec4 vColor;
attribute vec4 vPosition;

varying float v_Dot;

void main()
{
gl_FrontColor = vColor;
vec4 transNormal = mvMatrix * vec4(vNormal,1);
v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
gl_Position = pMatrix * mvMatrix * vPosition;
}
</script>
    <script id="fshader" type="x-shader/x-fragment">
varying float v_Dot;

void main()
{
gl_FragColor = vec4(gl_Color.xyz * v_Dot, gl_Color.a);
}
</script>

<script>
function init()
{
var gl = initWebGL("example", "vshader", "fshader",
[ "vNormal", "vColor", "vPosition"],
[ 0, 0, 0, 1 ], 10000);

gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);

gl.box = makeBox(gl);

// color array
var colors = new CanvasUnsignedByteArray(
[ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, // v0-v1-v2-v3 front
1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, // v0-v3-v4-v5 right
0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, // v0-v5-v6-v1 top
1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, // v1-v6-v7-v2 left
1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, // v7-v4-v3-v2 bottom
0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1 ] // v4-v7-v6-v5 back
);

gl.box.colorObject = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

return gl;
}

width = -1;
height = -1;

function reshape(gl)
{
var canvas = document.getElementById('example');
if (canvas.clientWidth == width && canvas.clientHeight == height)
return;

width = canvas.clientWidth;
height = canvas.clientHeight;

gl.viewport(0, 0, width, height);
var pMatrix = new CanvasMatrix4();
pMatrix.lookat(0,0,10, 0, 0, 0, 0, 1, 0);
pMatrix.perspective(30, width/height, 1, 10000);
gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "pMatrix"), false, pMatrix.
getAsCanvasFloatArray());
}

function drawPicture(gl)
{
reshape(gl);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

var mvMatrix = new CanvasMatrix4();
mvMatrix.rotate(currentAngle, 0,1,0);
mvMatrix.rotate(20, 1,0,0);
gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "mvMatrix"), false, mvMatrix.
getAsCanvasFloatArray());

gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
gl.enableVertexAttribArray(2);

gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.vertexObject);
gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.normalObject);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.box.indexObject);
gl.drawElements(gl.TRIANGLES, gl.box.numIndices, gl.UNSIGNED_BYTE, 0);

gl.flush();

framerate.snapshot();

currentAngle += incAngle;
if (currentAngle > 360)
currentAngle -= 360;
}

function start()
{
var gl = init();
currentAngle = 0;
incAngle = 0.5;
framerate = new Framerate("framerate");
setInterval(function() { drawPicture(gl) }, 10);
}
</script>
<style type="text/css">
canvas {
border: 2px solid black;
width:90%;
height:90%;
}
.text {
position:absolute;
top:100px;
left:20px;
font-size:2em;
color: blue;
}
</style>
</head>
<body onload="start()">
<canvas id="example">
There is supposed to be an example drawing here, but it's not important.
</canvas>
    <div class="text">This is some text under the canvas</div>
<div id="framerate"></div>
</body>
</html>

향후 전망은??

제 짧은 생각으로는 일단 넘어야 할 산은 많아 보입니다.

1. 하드웨어 가속을 쓰더라도 자바스크립트 자체와 바인딩에서 속도문제가 있을 수 있습니다.
현재도 자바스크립트 엔진들은 많이 발전하였으나, OpenGL과의 바인딩에 대해서는 아직 많은 것들을 최적화해야 할것으로 보입니다.
또한 방대한 양의 3D데이타들을 어떻게 처리할지는... 많은 것들이 있겠네요.

2. 또한 3D 개발에 관련된 문제로 제가 잘은 모르지만, low level API인 OpenGL만으로 개발한다는 것을 상당히 힘든 내용으로 알고 있습니다.
그래서 여러 엔진과 툴들이 나와 있는데, WebGL을 지원하는 편리한 툴이 없다면 개발자들에게 외면당해 성공하기 힘들수도 있습니다.
웹 개발자가 3D까지 알기에는 힘들수도 있죠. 따라서 전문 개발자들이 많아지거나 상당히 편리한 툴이 개발되어야 승산이 있을 것 같습니다.
즉 기존의 웹개발자들과 3D관련 개발자들을 모두 수용할 수 있는 환경이 필요하다고 생각합니다.

3. 플래시, 실버라이트와 같은 RIA진영에서의 반격도 지켜봐야 할 것 같습니다.
아무리 좋은 기술이라도 시장에서 성공한다는 것은 많은 것들을 필요로 하죠.
요즘 공격적으로 플래시를 확대시키고 있는 Adobe는 mobile 시장뿐만 아니라 스크린이 있는 시장이라면 어디든 공략할 태세입니다.
MS는 아직까지는 크게 성공시킨것 같지는 않지만, 조용히 시장을 넓혀가고 있는 것은 사실입니다.
이와 같이 너무나도 커진 RIA진영에서는 WebGL에 적극적으로 대응한다면 조용히 사라질수도 있습니다.

하지만, 이런 문제들에도 불구하고, 브라우저 진영에서도 가만히 있지는 않겠죠.
우선 Webkit에서 WebGL을 지원하는 버전이 나왔습니다. 아쉽게도 현재는 Mac에서만 동작하네요. - -
Webkit r49073(October 4, 2009)에서 동작하며 자세한 내용은 http://webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/를 참고하시길 바랍니다.

Webkit을 기반으로 하는 Google chrome, Safari등의 브라우저에서도 조만간 볼수 있겠네요.
오페라에서는 아직 소식은 없으나, 조만간에 모습을 선보일것 같습니다.
또한 Mozilla 재단에서 Firefox 3.7 개발 버전에서 WebGL을 지원한다고 합니다.

위와 같이 브라우저 진영에서도 HTML5등과 같이 발빠르게 대응하고 있습니다.

앞으로 넘어야 할 산도 많지만, 브라우저가 궁극적으로 가야할 산인것 같습니다.

시행착오는 있겠지만 꼭 WebGL이 성공해서 어디서나 와우, 리니지와 같은 게임도 할 수 있고, 플러그인 없이도 보다 편리하고 화려한 UI를 제공받을 수 있는 시대가 되었으면 하는 바램입니다.

참고

[Wikipedia] http://en.wikipedia.org/wiki/WebGL
[khronos] http://www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet
[O3D] http://code.google.com/intl/ko-KR/apis/o3d/
http://www.khronos.org/developers/library/2009_siggraph_bof_opengl/OpenGL-BOF-WebGL-Siggraph-Aug09.pdf
http://webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/


신고
0 0
1
블로그 이미지

TV, Platform, Browser, Coffee.... twitter :@myideom

smartech

티스토리 툴바