3D技術研究所Wiki > Java > GWT > GwtGL開発を始めよう!

GwtGLを始めるためのプロジェクトの作成や実行方法をまとめています。
GwtGLを使えばJavaからWebGL+JavaScript+HTML5へ変換することができます。
このページはGwtGL開発入門者向けの内容になります。

情報

このページの解説はGWTのセットアップを完了していることを前提としています。
まだの場合はGWTをセットアップする方法を先にお読みください。
GWTの扱いに自信のない方はGWT開発を始めよう!も合わせてご覧ください。

目次


GwtGLのダウンロード

GwtGL関連のファイルをダウンロードします。

1. https://code.google.com/p/gwtgl/downloads/list で最新版のgwtgl-0.9.1-dist.zipをクリックします

gwtgl_gettingstarted1.png


2. 赤線部分のgwtgl-0.9.1-dist.zipをクリックするとダウンロードが始まります

gwtgl_gettingstarted2.png


3. gwtgl-0.9.1-dist.zipがダウンロードできたら解凍して中身を確認してください

gwtgl_gettingstarted3.png


以上でGwtGLのダウンロードが終了になります。
続いてGwtGLプロジェクトの作成をご覧ください。

GwtGLプロジェクトの作成

EclipseでGwtGLプロジェクトの作成と設定を行います。

1. Eclipseのメニューから File > New > Project... を選択します

gwtgl_gettingstarted4.png


2. Google > Web Application Projectを選択してNextボタンをクリックします

gwtgl_gettingstarted5.png


3. Project namePackage名を入力してFinishボタンをクリックします

GWT開発に慣れないうちはGenerate project sample codeにチェックを入れてサンプルコードを自動生成すると便利です。
gwtgl_gettingstarted6.png


4. プロジェクト名を右クリックしてPropertiesを選択します

gwtgl_gettingstarted7.png


5. Java Build PathLibrariesタブを選択してAdd External JARs...をクリックします

gwtgl_gettingstarted8.png


6. gwtgl-0.9.1.jargwtgl-0.9.1-sources.jarを選択して開く(O)ボタンをクリックします

gwtgl_gettingstarted9.png


7. gwtgl-0.9.1.jargwtgl-0.9.1-sources.jarが追加されていることを確認してOKボタンをクリックします

gwtgl_gettingstarted10.png


8. プロジェクト名.gwt.xmlを開いてSourceタブを開き<inherits name='com.googlecode.gwtgl.binding'/>を追加します

gwtgl_gettingstarted11.png


以上でGwtGLプロジェクトの作成が終了になります。
続いてGwtGLプロジェクトのソースコード編集をご覧ください。

GwtGLプロジェクトのソースコード編集

GwtGLプロジェクトの設定が終わったので実際にソースコードを編集していきましょう。

1. clientパッケージのプロジェクト名.javaを開くと自動生成されたコードがあるのできれいに削除しましょう

gwtgl_gettingstarted12.png


2. onModuleLoadメソッドがGWTアプリケーションのエントリーポイント(プログラム開始地点)になります

gwtgl_gettingstarted13.png


3. プログラムを実装します

まず始めに400x400サイズのキャンバス(com.google.gwt.canvas.client.Canvas)を作ります。
キャンバスはcom.google.gwt.user.client.ui.FocusWidget(Widget)を継承しているのでWidgetのメソッドの呼び出しもできます。

1
2
3
final Canvas canvas = Canvas.createIfSupported();
canvas.setCoordinateSpaceWidth(400);
canvas.setCoordinateSpaceHeight(400);

続いてWebGLコンテキスト(com.googlecode.gwtgl.binding.WebGLRenderingContext)を作成します。

1
WebGLRenderingContext gl = (WebGLRenderingContext)canvas.getContext("experimental-webgl");

キャンバスをルートレイアウトパネルへ追加します。
ルートレイアウトパネルにキャンバスを追加することでブラウザ上に表示キャンバスを表示できるようになります。

1
RootLayoutPanel.get().add(canvas);

最後にWebGLでキャンバスを青でクリアします。

1
2
gl.clearColor(0, 0, 1, 1); // RGBA
gl.clear(COLOR_BUFFER_BIT);

全体のソースコードは以下のようになります。

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
32
33
34
35
36
37
package com.example.myproject.client;

import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.googlecode.gwtgl.binding.WebGLRenderingContext;

import static com.googlecode.gwtgl.binding.WebGLRenderingContext.*;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class HelloGwtGLApp implements EntryPoint {
    
    public void onModuleLoad() {
    
        final Canvas canvas = Canvas.createIfSupported();
        canvas.setCoordinateSpaceWidth(400);
        canvas.setCoordinateSpaceHeight(400);
        
        gl = (WebGLRenderingContext)canvas.getContext("experimental-webgl");
        
        if(gl == null) {
            // TODO エラー処理
        }
        
        RootLayoutPanel.get().add(canvas);
        
        gl.viewport(0, 0, 400, 400);
        gl.clearColor(0, 0, 1, 1); // RGBA
        gl.clear(COLOR_BUFFER_BIT);
    
    }

    private WebGLRenderingContext gl;
    
}

以上でGwtGLプロジェクトのソースコード編集が終了になります。
続いてGwtGLプロジェクトのデバッグ実行をご覧ください。

GwtGLプロジェクトのデバッグ実行

GwtGLプロジェクトをデバッグ実行します。

1. プロジェクトを選択してデバッグアイコン(虫マーク)をクリックします

gwtgl_gettingstarted14.png


2. Development ModeにURLアドレスが表示されるのでダブルクリックします

gwtgl_gettingstarted15.png


3. 400x400の青いWebGLキャンバスが表示されれば成功です

自動生成したサンプルプロジェクトの上にキャンバスが表示されていて変な見た目になってしまいました。
次の章で改善しましょう。
gwtgl_gettingstarted16.png


以上でGwtGLプロジェクトのデバッグ実行が終了になります。
続いてGwtGLプロジェクトの改善をご覧ください。

GwtGLプロジェクトの改善

作成したGwtGLプロジェクトの見た目を少し改善しましょう。
具体的にはタイトルを変更してサンプルプロジェクトの残りカスを削除します。
その後、キャンバスがブラウザの左上にあるとバランスが悪いのでブラウザの中央に配置します。

1. warフォルダのプロジェクト名.htmlをダブルクリックしてタイトルタグ部分を編集します

gwtgl_gettingstarted17.png


2. 続いて同ファイルの47行目から60行目あたりを削除します

gwtgl_gettingstarted18.png


3. ブラウザを再読み込みしてタイトル部分の変更とサンプルプロジェクトの残りカスが消えていることを確認してください

gwtgl_gettingstarted19.png


4. warフォルダのプロジェクト名.cssを開いてMyCanvasの定義をします。

中央に配置するためにmarginをautoにして幅(width)と高さ(height)を400ピクセルに設定します。 gwtgl_gettingstarted20.png


5. canvas.setStyleName("MyCanvas")でCSSに書き加えたMyCanvasをキャンバスに設定します

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
32
33
34
35
36
37
38
package com.example.myproject.client;

import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.googlecode.gwtgl.binding.WebGLRenderingContext;

import static com.googlecode.gwtgl.binding.WebGLRenderingContext.*;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class HelloGwtGLApp implements EntryPoint {
    
    public void onModuleLoad() {
    
        final Canvas canvas = Canvas.createIfSupported();
        canvas.setCoordinateSpaceWidth(400);
        canvas.setCoordinateSpaceHeight(400);
        canvas.setStyleName("MyCanvas");
        
        gl = (WebGLRenderingContext)canvas.getContext("experimental-webgl");
        
        if(gl == null) {
            // TODO エラー処理
        }
        
        RootLayoutPanel.get().add(canvas);
        
        gl.viewport(0, 0, 400, 400);
        gl.clearColor(0, 0, 1, 1); // RGBA
        gl.clear(COLOR_BUFFER_BIT);
    
    }

    private WebGLRenderingContext gl;
    
}




6. ブラウザを再読み込みしてキャンバスが上下左右ちょうど真ん中に表示されていることを確認してください

gwtgl_gettingstarted21.png


以上でGwtGLプロジェクトの改善が終了になります。


関連ページ


スポンサードリンク


添付ファイル: filegwtgl_gettingstarted17.png 304件 [詳細] filegwtgl_gettingstarted12.png 301件 [詳細] filegwtgl_gettingstarted11.png 317件 [詳細] filegwtgl_gettingstarted4.png 325件 [詳細] filegwtgl_gettingstarted2.png 301件 [詳細] filegwtgl_gettingstarted1.png 307件 [詳細] filegwtgl_gettingstarted21.png 296件 [詳細] filegwtgl_gettingstarted20.png 288件 [詳細] filegwtgl_gettingstarted19.png 310件 [詳細] filegwtgl_gettingstarted18.png 301件 [詳細] filegwtgl_gettingstarted16.png 311件 [詳細] filegwtgl_gettingstarted15.png 311件 [詳細] filegwtgl_gettingstarted14.png 304件 [詳細] filegwtgl_gettingstarted13.png 285件 [詳細] filegwtgl_gettingstarted10.png 317件 [詳細] filegwtgl_gettingstarted9.png 309件 [詳細] filegwtgl_gettingstarted8.png 313件 [詳細] filegwtgl_gettingstarted7.png 295件 [詳細] filegwtgl_gettingstarted6.png 319件 [詳細] filegwtgl_gettingstarted5.png 316件 [詳細] filegwtgl_gettingstarted3.png 314件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS