Java 3DGame LWJGL Retry Lv5 遊んでみる〜動かして理解する5〜

イントロダクション

この数日、連敗が続いている状態です。

  1. Eclipse アプリ作成 Lv5〜惨敗:CubeにTextureを貼る〜
  2. Java 3DGame LWJGL Retry Lv3 Texture〜動かして理解する3〜「負け越し」
  3. Java 3DGame LWJGL Retry Lv4 デバック〜動かして理解する4〜「黒星」

こんな感じで3連敗です。。。

元々は、OpenGLで作成したCubeにテクスチャを貼り付けようとしていました。

ここで、初心に戻り動くものを弄って遊んでみようとなりました。突破口になるかもしれません。

サンプルコード:「Chapter7-2のマイクラの様なブロックを回転させる

<起動結果>


遊んでみる

First Attack: テクスチャを弄ってみる

<DummyGame#init()>元々のコード

        float[] textCoords = new float[]{
            0.0f, 0.0f,// TRY2
            0.0f, 0.5f,// TRY3
            0.5f, 0.5f,
            0.5f, 0.0f,
            
            0.0f, 0.0f,
            0.5f, 0.0f,
            0.0f, 0.5f,
            0.5f, 0.5f,
            
            // For text coords in top face
            0.0f, 0.5f,// TRY1
            0.5f, 0.5f,
            0.0f, 1.0f,
            0.5f, 1.0f,

            // For text coords in right face
            0.0f, 0.0f,
            0.0f, 0.5f,

            // For text coords in left face
            0.5f, 0.0f,
            0.5f, 0.5f,

            // For text coords in bottom face
            0.5f, 0.0f,
            1.0f, 0.0f,
            0.5f, 0.5f,
            1.0f, 0.5f,
        };

テクスチャの座標を指定している部分です。こいつを弄って遊んでみようとなりました。

TRY1-①: 「0.0f, 0.5f」→「0.0f, 0.2f」に変更。

回転しているので座標がわかりづらい。。。

ちょっとハゲができました。

TRY1-②: 「0.0f, 0.5f」→「0.5f, 0.5f」に変更。

頂点の一部がかき消された様になっています。下のコードをみてみると頂点が被っていて、実際は3点のみになっています。

            // For text coords in top face
            0.5f, 0.5f,// 同じ
            0.5f, 0.5f,// 同じ
            0.0f, 1.0f,
            0.5f, 1.0f,

なるほど、テクスチャの頂点を指定している様です。

ここからが本題

元々のコード、緑色の部分に関しては未だになんなのかわかっていませんのでこいつを弄ってみます。

「TRY2」の部分を「0.0f, 0.0f」→「0.5f, 0.5f」に変更

おそらく、V0の座標を変更したので下のイメージの半分より下の部分がテクスチャとして認識されていると思われます。

Texture coordinates front face

テクスチャのイメージファイルを変更してみます。

<実行結果>

うーんパズルの様な感じになりました。ちょいと調節すると。。。

一面のみうまく表示されています。この状態のコードは以下です。

        float[] textCoords = new float[]{
            0.0f, 0.0f,
            1.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 1.0f,
            
            0.0f, 0.0f,
            0.5f, 0.0f,
            0.0f, 0.5f,
            0.5f, 0.5f,
            
            // For text coords in top face
            0.0f, 0.0f,
            1.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 1.0f,

            // For text coords in right face
            0.0f, 0.0f,
            0.0f, 0.5f,

            // For text coords in left face
            0.5f, 0.0f,
            0.5f, 0.5f,

            // For text coords in bottom face
            0.5f, 0.0f,
            1.0f, 0.0f,
            0.5f, 0.5f,
            1.0f, 0.5f,
        };

次のコードです。

        float[] textCoords = new float[]{
        	// Imageの取得する座標
            0.0f, 0.0f,
            1.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 1.0f,
            // この部分がわからない
            0.0f, 0.0f,
            1.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 1.0f,
            
            // For text coords in top face
            0.0f, 0.0f,
            1.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 1.0f,

            // For text coords in right face
            0.0f, 0.0f,
            0.0f, 1.0f,

            // For text coords in left face
            1.0f, 0.0f,
            1.0f, 1.0f,

            // For text coords in bottom face
            0.0f, 0.0f,
            1.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 1.0f,
        };

一面以外はうまくいっている様です。(多分底面がうまくいっていない)

ですが、なんとなく処理の流れ(座標の取り方)がわかってきました(そんな気がする。。。)、まだ仮説状態です。

まずは頂点定義の配列を眺めます

 
        float[] positions = new float[] {
            /* ①メッシュの使用する頂点を定義 */
            // V0
            -0.5f, 0.5f, 0.5f,
            // V1
            -0.5f, -0.5f, 0.5f,
            // V2
            0.5f, -0.5f, 0.5f,
            // V3
            0.5f, 0.5f, 0.5f,
            // V4
            -0.5f, 0.5f, -0.5f,
            // V5
            0.5f, 0.5f, -0.5f,
            // V6
            -0.5f, -0.5f, -0.5f,
            // V7
            0.5f, -0.5f, -0.5f,
            /* ②テクスチャで貼り付ける面を指定する */
            // For text coords in top face
            // V8: V4 repeated
            -0.5f, 0.5f, -0.5f,
            // V9: V5 repeated
            0.5f, 0.5f, -0.5f,
            // V10: V0 repeated
            -0.5f, 0.5f, 0.5f,
            // V11: V3 repeated
            0.5f, 0.5f, 0.5f,
            /* ③横のたて(1本分)を定義する */
            // For text coords in right face
            // V12: V3 repeated
            0.5f, 0.5f, 0.5f,
            // V13: V2 repeated
            0.5f, -0.5f, 0.5f,
            /* ④横のたて(1本分)を定義する */
            // For text coords in left face
            // V14: V0 repeated
            -0.5f, 0.5f, 0.5f,
            // V15: V1 repeated
            -0.5f, -0.5f, 0.5f,
            /* ⑤面を定義する */
            // For text coords in bottom face
            // V16: V6 repeated
            -0.5f, -0.5f, -0.5f,
            // V17: V7 repeated
            0.5f, -0.5f, -0.5f,
            // V18: V1 repeated
            -0.5f, -0.5f, 0.5f,
            // V19: V2 repeated
            0.5f, -0.5f, 0.5f,
        };

 

Cube coords

頂点を定義した後に、面を定義する様に座標点を設定していきます。

Texture coordinates front face

中途半端だけど。。。

コードはこちらにアップロードしてあります。2018/11/08


 

関連ページ一覧

<今回のやっていること>

  1. Eclipse アプリ作成 Lv1〜家計簿を作る準備〜
  2. Eclipse アプリ作成 Lv2〜家計簿を作る土台作り〜
  3. Eclipse アプリ作成 Lv3〜3Dグラフ用Cube作り〜
  4. Eclipse アプリ作成 Lv4〜3Dグラフ用Cubeに高さを与える〜
  5. Eclipse アプリ作成 Lv5〜惨敗:CubeにTextureを貼る〜
  6. Eclipse アプリ作成 Lv7〜Cubeを日付順に並べる〜

<Java Basic>

  1. Java Basic for文 〜Step1_3_1〜
  2. Java Basic Level8 〜How to use for statement〜
  3. Java Basic Level 9〜Training of for statement〜
  4. Java 3DGame LWJGL GitBook chapter7-1〜Cube作成〜「動画あり」