WebGL-013: GwtGL with Eclipse

GWTGL을 Eclipse에서 사용하기 위해서는 아래의 환경이 반드시 준비되어 있어야 한다.

JDK
Eclipse
Google Plugin for Eclipse
Google Web Toolkit

위의 환경이 갖추어져 있으면 지금부터 http://code.google.com/p/gwtgl/에서 최신 라이브러리를 다운 받으면 된다.

gwtgl-eclipse-01

현재의 최신 버전은 GwtGL Releaes 0.3이다. 다운 받고 압축을 푼다.

gwtgl-eclipse-02

위와 같은 몇 개의 파일이 존재 하는데, gwtgl-0.3.jar은 gwtgl-0.3-source.jar을 컴파일하여 생성된 class 파일들의 묶음이다. 현재의 버전에서는 deprecated된 몇몇 함수들을 사용하기 때문에 런타임 오류를 일으킨다. 우선 수정하지 않고 그냥 사용해 보도록 하겠다.

GwtGL 수정 전 테스트

Eclipse를 실행 시키고 File > New > Web Application Project를 실행시키고 아래의 대화상자를 연다. Project name과 Package에 적당한 이름을 입력하고, Use Google App Engine에 체크 해제 한다(그냥 두어도 무방함).
생성된 기본 샘플 프로젝트에서 아래와 같이 필요 없는 부분을 삭제한다.

war/ 폴더를 열면 아래와 같이 “프로젝트이름.html”파일이 존재할 것이다. 파일을 열고 필요 없는 부분을 지우고 WebGL을 렌더링할 div를 추가한다.

gwtgl-eclipse-before-03

        
      
 <html>
 <head>
 <link type="text/css" rel="stylesheet" href="GWTGL_Prac02_ClearColor.css">
 <script type="text/javascript" language="javascript" src="gwtgl_prac02_clearcolor/gwtgl_prac02_clearcolor.nocache.js">
 </script>
 </head>
 <body>
     <div id="gwtGL"></div>
 </body>
 </html>

프로젝트이름.java파일을 연다.

파일 내용을 모두 지우고 아래와 같이 가장 기본적인 코드만 작성한다.

gwtgl-eclipse-before-04

        
      
 package jrr.gwtgl.client;
 import com.google.gwt.core.client.EntryPoint;

 public class GWTGL_Prac02_ClearColorimplements EntryPoint{
     @Override
     public void onModuleLoad() {
         System.out.println("Hello GWT");
     }
 }

지금 까지 내용을 실행하면 웹 브라우저에는 빈 내용만 출력된다. Eclipse의 Console 창에는 아래와 같이 Hello GWT가 출력이 될 것이다.
이제 WebGL에서 OpenGL의 기능 중 가장 단순하다고 생각되는 glClear을 수행해 보도록 하겠다. 우선, gwtGL관련된 두 개의 라이브러리를 현재의 프로젝트에 추가해 주어야 한다. 현재의 프로젝트에서 우클릭하여 Properties > Java Build Path > Libraries 로 이동한다.

add External JARs버튼을 클릭하여, 조금 전에 다운 받아서 압축을 풀었던 gwtGL관련 JAR을 추가해 준다. 추가된 결과는 아래와 같다.
Eclipse의 Package Explorer에서 자신이 방금 작성한 package의 루트로 이동하면, “프로젝트이름.gwt.xml”이 존재하는 것을 확인 할 수 있다.

이 파일을 열고 아래의 엔트리를 추가해 준다.
1 <inherits name='com.googlecode.gwtgl.binding'/>

이제 gwtGL을 java로 코딩할 준비가 되었다.

프로젝트이름.java파일을 열고 아래와 같이 작성한다.

        
      
 package jrr.gwtgl.client;

 import com.google.gwt.core.client.EntryPoint;
 import com.google.gwt.user.client.ui.RootPanel;
 import com.googlecode.gwtgl.binding.WebGLCanvas;
 import com.googlecode.gwtgl.binding.WebGLRenderingContext;

 public class GWTGL_Prac02_ClearColorimplements EntryPoint{
     private WebGLRenderingContext glContext;

     @Override
     public void onModuleLoad() {
         System.out.println("Hello GWT");

         final WebGLCanvas canvas=    new WebGLCanvas("256px", "256px");

         glContext=    canvas.getGlContext();
         RootPanel.get("gwtGL").add(canvas);

         glContext.clearColor(1.0f, 0.0f, 0.0f, 1.0f);
     glContext.clear(WebGLRenderingContext.COLOR_BUFFER_BIT);
     }
 }

프로젝트를 실행 시키면 아래와 같은 Runtime Exception이 발생할 것이다. WebGL을 지원하지 않는 브라우저에서는 발생하지 않을 수 있다. 녹색으로 밑줄이 되어 있는 부분이 문제를 발생시킨 부분이다(다른 부분에서 생길 수도 있으나 아래와 같이 진행 하도록함).

이유를 알아보기 위해 https://www.khronos.org 를 방문하여 WebGL 1.0 Specification페이지를 연다. 문제를 일으킨 ACTIVE_UNIFORM_MAX_LENGTH(다를 수도 있다) 를 찾아 보면 Section 6.19 String Length Queries 부분에 아래와 같은 내용을 확인할 수 있다. In the WebGL API, the enumerants INFO_LOG_LENGTH, SHADER_SOURCE_LENGTH, ACTIVE_UNIFORM_MAX_LENGTH, and ACTIVE_ATTRIB_MAX_LENGTH have been removed. gwtgl라이브러리에서 문제가 되는 부분을 수정하고 재 컴파일 해 주어야 한다.

GwtGL 수정 후 테스트

다운 받은 gwtgl-0.3-sources.jar파일을 압축 풀고 위 부분에서 문제를 일으킨 부분을 수정한다. 아래의 항목을 찾아 삭제하고 재컴파일 한 후 다시 패키징한다.
- INFO_LOG_LENGTH
- SHADER_SOURCE_LENGTH
- ACTIVE_UNIFORM_MAX_LENGTH
- ACTIVE_ATTRIB_MAX_LENGTH
수정된 파일은 아래에서 다운 가능하다.
- gwtgl-0.3-Modified.jar
- gwtgl-0.3-sources-Modified.jar
이제 6번에서 추가하였던 2개의 기존라이브러리를 제거하고 재 컴파일한 두 개의 라이브러리를 추가한다. 기존 파일명에 –Modified 라는 문자열을 추가 하였다.
이제 다시 컴파일하고 실행하면 아래와 같은 결과를 볼 수 있다. glContext.clearColor(1.0f, 0.0f, 0.0f 1.0f)로 지정하였으므로 붉은색으로clear된 WebGL의 결과를 확인할 수 있다.
본 결과를 Google App Engine을 통해 Deploy하는 방법은 다음에 알아 보도록 하겠다.

WebGL-013: GwtGL with Eclipse

GwtGL 수정 전 테스트

GwtGL 수정 후 테스트

WebGL-001: About WebGL

WebGL-002: Environment Setting

WebGL-003: ClearColor