BLOG ARTICLE Processing | 1 ARTICLE FOUND

  1. 2011.05.09 processing.js 로 webGL 구현하기


크롬이나 파폭에서 슬슬 webGL 을 지원하기 시작했다. 웹에서 다른 플러그인 없이 바로 3D를 구현한다는 것이 나름 매력적이긴 한데. 아직 워낙에 초창기다보니, 그렇게 파워풀한 그림을 만들어내진 못하는 것 같다.

그래도 google body browser 나 cycleblob.com 같은 델 가보면, 교육이나 게임에 써먹기엔 당장 이 정도도 충분하지 않은가 하는 생각이 들었다.

그렇다면 본인이 webGL 을 아웃풋으로 하는 무언가를 만들어낼 수 있는가??? 라는 궁금증에 구글링을 하다보니, processing 으로도 webGL 을 구현할 수가 있더라는 것.

webGL 을 구현하는 방도는 많은데, 그 중의 하나가 processing 이라는 얘기다. 다른 많은 방법으로 webGL 을 구현할 수 있으니, 자세한건 위키피디아에게 물으시길.


의외로 간단했다. 


이 파일 하나만 있으면 된다. 이걸 서버에 올리고, 같은 서버에 html 파일 하나만 만들면 끝!
물론 미리 processing 으로 3D 관련 샘플을 하나쯤 만들어야 한다.


이건, 내가 그냥 샘플로 만든 3D 나오는 프로세싱 작업물. 얘도 같은 서버에 올려준다.

그러면, 이제 서버에 아래와 같은 html 파일 하나만 만들면 끝!

<html>

<head>
<script src="processing-1.1.0.js"></script>
</head>
<body>
<canvas datasrc="_3d_random_box_export.pde" ></canvas>
</body>
</html> 

블로그에서 바로 작동하게 해볼랬더니, js 파일이랑 html 이 동시에 같은 서버에 있어야 뭔가 제대로 되는 거 같다.

실제 작동되는 모습 확인
(크롬최신버전, 파폭4 이상에서 그것도 webGL 옵션이 잘 켜져있어야 보임)



AND