Rev. 2.73

BananaBread는 얼마전 MDN(Mozilla Developer Network) 데모에 제출된 WebGL을 이용하여 구현한 FPS 게임입니다. C++과 OpenGL로 작성된 Cube 2: Sauerbraten 엔진을 Emscripten을 이용하여 자바스크립트와 WebGL로 컴파일하여 모던 브라우저에서 별도의 플러그인 설치없이 즐길 수 있도록 했습니다.

EmscriptenLLVM(C/C++)을 자바스크립트로 컴파일하는 프로젝트입니다. C++로 짜여진 Bullet 물리 엔진, TTS(Text-to-Speech) eSpeak 등의 놀라운 컴파일 데모들이 있습니다.

이 프로젝트의 주요 목표는 첫째로, 브라우저의 3D 성능 프로파일링 하는 것이고, 둘째로, 많은 사람들이 회의적으로 생각하는 자바스크립트와 WebGL을 이용한 게임 구축에 대한 증명하는 것이며, 마지막으로, 이 프로젝트에 사용된 모든 소스 코드(미술 자산 포함)를 공개하여 다른 사람들이 게임을 만드는 데 사용할 수 있게 하는 것입니다.

멋진 양반들이군요! 저는 맥용 크롬에서 테스트했는데 chrome://flags에서 기본으로 비활성화 되어 있는 "포인터 잠금" 항목을 활성화하고 브라우저를 재시작하여 성공적으로 실행할 수 있었습니다.

Comments

210938218g.jpg

HTML5 게임 프로그래밍은 Jacob Seidelin씨가 작성하고 webgenie(장현희)님이 현지화한 개발 서적으로, HTML5를 이용하여 완성도 높은 보석 퍼즐(비주얼드와 유사한) 게임을 만드는 과정을 소개하고 있습니다. 데스크탑/모바일용 브라우저를 지원하도록 하는 화면배치 및 이벤트 처리방법을 다루고 고급 CSS3 처리 기법과 HTML5 Audio, WebGL, Canvas, LocalStorage, WebSocket, WebWorker 등의 명세가 실제 게임을 제작하는 과정에 포함하고 있어 재미있게 학습할 수 있도록 구성된 것이 특징입니다. 그래서 자바스크립트를 어느정도 다룰 줄 안다는 전제하에 HTML5 명세를 이해하는 것이 아니라 사용하는 것에 초점이 맞추어져 있습니다.

선물로 득템하여 짬짬히 내용을 살피는 요 며칠동안 마치 게임을 직접 만드는 듯한 설렘을 느낄 수 있었습니다. HTML5의 모든 명세를 사용하기에는 역시 게임만한 것이 없는 것 같네요.

Comments

Sprite3D.jsCSS 3D Transforms 속성을 이용하여 3D를 구현하는 작은 자바스크립트 3D 엔진 라이브러리입니다. 체이닝 형식의 섹시한 구문을 사용하여 HTML 요소(<div>)를 간단하게 3D 객체로 래핑할 수 있습니다. CSS 3D Transforms 속성은 태생부터가 하드웨어-엑셀레이션(hardware-acceleration)을 염두에 두어 만들어졌기 때문에 WebGL에 버금가는 성능을 보여줍니다.

다음과 같은 문법으로 3D 객체를 생성합니다.:

new Sprite3D()
	.setPosition(x,y,z)
	.setRotation(rx,ry,rz)
	.setClassName('class')
	.update();

정말 간단한 3D 메소드들:

	setPosition(x,y,z) setX(x) setY(y) setZ(z) 
	move(x,y,z) moveX(x) moveY(y) moveZ(z) 
	setRotation(x,y,z) setRotationX(x) setRotationY(y) setRotationZ(z)
	rotate(x,y,z) rotateX(x) rotateY(y) rotateZ(z)
	setScale(x,y,z) setScaleX(x) setScaleY(y) setScaleZ(z)

WebGL(OpenGL ES 2.0의 자바스크립트 바인딩) 스팩이 오징어로 보이네요 :)

재미있는 점은 모바일 브라우저에서도 하드웨어 가속이 되는 3D를 구현할 수 있게 된다는 사실입니다.(아직 모바일 브라우저에서는 WebGL이 지원되지 않고 있습니다.) WebGL이 활성화된 <canvas>요소를 필요로하지 않는다는 얘기죠. 또한, HTML 요소를 그대로 이용하기 때문에 시멘티컬한 웹 페이지를 제공할 수 있게 된다는 것입니다. 검색도 되면서 CSS로 스타일링 할 수 있는 3D 컨텐츠는 좀 매력적이지 않나요? 아래는 Sprite3D.js로 작성된 예제인 Carton Box입니다.

Sprite3D.js는 특정 자바스크립트 라이브러리에 종속적이지 않습니다. 따라서 어떠한 환경에서든지 사용할 수 있으며 MIT Licence이고 WebKit 계열(Chrome, Safari, iOS, Android 4, BlackBerry), Firefox 10 그리고 Internet Explorer 10에서 정상적으로 사용할 수 있습니다.

Comments