イントロダクション
この数日、連敗が続いている状態です。
- Eclipse アプリ作成 Lv5〜惨敗：CubeにTextureを貼る〜
- Java 3DGame LWJGL Retry Lv3 Texture〜動かして理解する3〜「負け越し」
- Java 3DGame LWJGL Retry Lv4 デバック〜動かして理解する4〜「黒星」
こんな感じで３連敗です。。。
元々は、OpenGLで作成したCubeにテクスチャを貼り付けようとしていました。
ここで、初心に戻り動くものを弄って遊んでみようとなりました。突破口になるかもしれません。
サンプルコード：「Chapter7-2のマイクラの様なブロックを回転させる」
＜起動結果＞
写経しただけど、第二弾。マイクラみたいなCube #PGボックスhttps://t.co/IGbZqtEhE2 pic.twitter.com/1pSiQPbEIx
— たくのじ (@java_takunoji) October 30, 2018
遊んでみる
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」に変更。
頂点の一部がかき消された様になっています。下のコードをみてみると頂点が被っていて、実際は３点のみになっています。
// 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の座標を変更したので下のイメージの半分より下の部分がテクスチャとして認識されていると思われます。
テクスチャのイメージファイルを変更してみます。
<実行結果>
うーんパズルの様な感じになりました。ちょいと調節すると。。。
一面のみうまく表示されています。この状態のコードは以下です。
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,
};
頂点を定義した後に、面を定義する様に座標点を設定していきます。
中途半端だけど。。。
テクスチャとの戦いは引き分けかな？ #PGボックス pic.twitter.com/MwoCaRUZ8s
— たくのじ (@java_takunoji) November 8, 2018
コードはこちらにアップロードしてあります。2018/11/08
