イントロダクション
LWJGL GitBookのChapterを写経しながら理解していきます。Git(ソース)はこちら。。。
前回は、Chapter5-1をやりました。
Introduction
LWJGL We will understand GitBook ‘s chapter while shooting. Git (source) is here. . . Last time I did Chapter 5so We will do Chapter 5 this time. Let’s get sarted!.
https://ahbejarano.gitbook.io/lwjglgamedev/chapter5
コードを読む(Read Code)
今までに見て来た部分は割愛します。
- Chapter1[外枠の表示のみ]
- Chapter2-1〜クラスの構成〜
- Chapter2-2〜インターフェースの使い方と詳細〜
- Chapter2-3〜GameEngineクラス(サンプルクラス)〜/li>
- Chapter2-4〜Windowクラス(サンプルクラス)〜
- Chapter3〜描画処理を読む〜
- Chapter4〜シェーダについて〜
- Chapter5-1〜レンダリングについて〜
今回のポイント
Renderer#render()
public void render(Window window, Mesh mesh) {
clear();
if (window.isResized()) {
glViewport(0, 0, window.getWidth(), window.getHeight());
window.setResized(false);
}
shaderProgram.bind();
// Draw the mesh
glBindVertexArray(mesh.getVaoId());
glEnableVertexAttribArray(0);
glDrawElements(GL_TRIANGLES, mesh.getVertexCount(), GL_UNSIGNED_INT, 0);
// Restore state
glDisableVertexAttribArray(0);
glBindVertexArray(0);
shaderProgram.unbind();
}
LWJGL(OpenGL)での廟は3角形をベースに描いている様だ。
上のコードで赤字にしている部分は参考にしたドキュメントで「重要です」と記載している部分です。説明内容からして以下の部分で指定しているのは3角形を描くための点を指定している様です。→だから4つ(3個で1セット)指定しているんですね〜
float[] positions = new float[]{ -0.5f, 0.5f, 0.0f, /* V1 */ -0.5f, -0.5f, 0.0f,/* V2 */ 0.5f, -0.5f, 0.0f, /* V3 */ 0.5f, 0.5f, 0.0f,};// V4 int[] indices = new int[]{ 0, 1, 3, 3, 1, 2,}; mesh = new Mesh(positions, indices);
上の画像を使って考えて見ます。下の表はindicesに設定した値とV1〜V4の関係を示します。
V1 |
V2 |
V3 |
V4 |
0 |
1 |
2 |
3 |
そして、下の表はindicesの意味を示します。左半分が上の図はオレンンジ色の三角形にあたり緑色が右半分の三角形です。
0 |
1 |
3 |
3 |
1 |
2 |
V1 |
V2 |
V4 |
V4 |
V2 |
V3 |
自分で描いていて、複雑ですがなるほどなぁ〜と思いますね。
そしてGitBookにはここで色を変更する手段について来さしています。
Meshクラスのコンストラクタの内容に以下の処理を追記します。3つのファイルを修正します。
- Meshクラス
- vertex,vs
- fragment.fs
Meshクラスのコンストラクタ
public Mesh(float[] positions, int[] indices, float[] colors) { FloatBuffer posBuffer = null; IntBuffer indicesBuffer = null; try { vertexCount = indices.length; vaoId = glGenVertexArrays(); glBindVertexArray(vaoId); // Position VBO posVboId = glGenBuffers(); posBuffer = MemoryUtil.memAllocFloat(positions.length); posBuffer.put(positions).flip(); glBindBuffer(GL_ARRAY_BUFFER, posVboId); glBufferData(GL_ARRAY_BUFFER, posBuffer, GL_STATIC_DRAW); glVertexAttribPointer(0, 3, GL_FLOAT, false, 0, 0); // Index VBO idxVboId = glGenBuffers(); indicesBuffer = MemoryUtil.memAllocInt(indices.length); indicesBuffer.put(indices).flip(); glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, idxVboId); glBufferData(GL_ELEMENT_ARRAY_BUFFER, indicesBuffer, GL_STATIC_DRAW); // Color VBO この部分を追記する 2018/10/27 final int colourVboId = glGenBuffers(); FloatBuffer colourBuffer = MemoryUtil.memAllocFloat(positions.length); colourBuffer.put(colors).flip(); glBindBuffer(GL_ARRAY_BUFFER, colourVboId); glBufferData(GL_ARRAY_BUFFER, colourBuffer, GL_STATIC_DRAW); MemoryUtil.memFree(colourBuffer); glVertexAttribPointer(1, 3, GL_FLOAT, false, 0, 0); // 追記部分ここまで glBindBuffer(GL_ARRAY_BUFFER, 0); glBindVertexArray(0); } finally { if (posBuffer != null) { MemoryUtil.memFree(posBuffer); } if (indicesBuffer != null) { MemoryUtil.memFree(indicesBuffer); } }
vertex.vs
#version 330 layout (location =0) in vec3 position; // 追記 2018/10/27 layout(location=1) in vec3 inColour; out vec3 exColour; void main() { gl_Position = vec4(position, 1.0); // 追記 2018/10/27 exColour = inColour; }
fragment.fs
#version 330 // 追記 2018/10/27 in vec3 exColour; out vec4 fragColor; void main() { fragColor = vec4(exColour, 1.0); }
つまづいたところ
下のコードを追記する部分よりも上に記述していたため、バインドを解放した後にcolourBufferを作成したりしても四角(クアッド)には関連図かない(反映されない)事に気がつかず。。。まぁ数時間(笑)
glBindBuffer(GL_ARRAY_BUFFER, 0); glBindVertexArray(0);
まとめ
描画するときに与える頂点座標は3角形をベースにする(3個1セット)、そして三角形をくっつけている様なとき(四角形など)の時は重複する点ができるのでそれをindices配列で順序付けをする。
VAOとVBOのバインド、アンバインドに注意する必要がある。。。
ガッテン! x 3