原文:http://wiki.lwjgl.org/wiki/The_Quad_interleaved
Introduction 介绍
我们之前把顶点数据分别存在不同的VBO之内。其实也可以交叉或混合保存数值,将所有的数据保存在同一个VBO中。按之前的教程,你可能会想,那样是不是我们只需要用一个属性列表了。不,在属性列表的部分,仍然需要把它们分开,只是用同一个VBO来保存数据。教程开始。
Splitting VBO’s 分割VBO
作为前情回顾,仍然做些重复的工作,但是这次要把VBO分割开。建两个FloatBuffer,一个给颜色一个给位置,颜色定义为4组件,位置是3组件。
float[] positions = new float[] {1, 1, 1};
float[] colors = new float[] {1, 1, 1, 1};
// Put our data in the proper format: byte buffers
FloatBuffer positionBuffer = BufferUtils.createFloatBuffer(positions.length);
positionBuffer.put(positions); positionBuffer.flip();
FloatBuffer colorBuffer = BufferUtils.createFloatBuffer(colors.length);
colorBuffer.put(colors); colorBuffer.flip();
// Create a new VAO
int vaoID = GL30.glGenVertexArrays();
GL30.glBindVertexArray(vaoID);
// Create a new VBO for our positions and link it to attribute list 0
int posVboID = GL15.glGenBuffers();
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, posVboID);
GL15.glBufferData(GL15.GL_ARRAY_BUFFER, positionBuffer, GL15.GL_STATIC_DRAW);
GL20.glVertexAttribPointer(0, 3, GL11.GL_FLOAT, false, 0, 0);
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, 0);
// Create a new VBO for our colors and link it to attribute list 1
int colVboID = GL15.glGenBuffers();
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, colVboID);
GL15.glBufferData(GL15.GL_ARRAY_BUFFER, positionBuffer, GL15.GL_STATIC_DRAW);
GL20.glVertexAttribPointer(1, 4, GL11.GL_FLOAT, false, 0, 0);
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, 0);
GL30.glBindVertexArray(0);
对那些已经看过之前教程的朋友提问:当我用glDrawElements的时候,我忘了什么东西?
Interleaving VBO’s 交叉保存VBO
现在把颜色和位置VBO组合成一个VBO。仍然按上面的例子走,进一步实际应用的例子稍后再讲。
float[] positions = new float[] {1, 1, 1};
float[] colors = new float[] {1, 1, 1, 1};
// Interleave the data in the proper format: byte buffer
FloatBuffer interleavedBuffer = BufferUtils.createFloatBuffer(positions.length +
colors.length);
interleavedBuffer.put(positions); // Buffer contents: X, Y, Z
interleavedBuffer.put(colors); // Buffer contents: X, Y, Z, R, G, B, A
interleavedBuffer.flip();
// Create a new VAO
int vaoID = GL30.glGenVertexArrays();
GL30.glBindVertexArray(vaoID);
// Create a new VBO for our interleaved data
int interVboID = GL15.glGenBuffers();
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, interVboID);
GL15.glBufferData(GL15.GL_ARRAY_BUFFER, interleavedBuffer, GL15.GL_STATIC_DRAW);
// -- We'll need to know some numbers beforehand, I'm using variables for these
// -- so it's easier to see where they come from
// There are 4 bytes in a float
int floatByteSize = 4;
// We use 3 floats for our position
int positionFloatCount = 3;
// We use 4 floats for our color
int colorFloatCount = 4;
// So the total amount of floats used is ...
int floatsPerVertex = positionFloatCount + colorFloatCount;
// So the total amount of bytes per vertex used is (this is the 'stride') ...
int vertexFloatSizeInBytes = floatByteSize * floatsPerVertex;
// -- Now we can split our interleaved data over 2 attribute lists
// First up is our positional information in list 0
GL20.glVertexAttribPointer(0, positionFloatCount, GL11.GL_FLOAT, false,
vertexFloatSizeInBytes, 0);
// Second is our color information in list 1, for this we also need the offset
int byteOffset = floatByteSize * positionFloatCount;
GL20.glVertexAttribPointer(1, colorFloatCount, GL11.GL_FLOAT, false,
vertexFloatSizeInBytes, byteOffset);
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, 0);
GL30.glBindVertexArray(0);
我们要做的就是把所有的信息放在一个大数组内,然后告诉OpenGL每个顶点的信息是几个字节跨度的,还要再告诉它一个顶点所有的字节也可以分割,0号属性列表只需要看前X个字节即可,而1号属性列表只看X字节之后的Y字节。我们通过设置stride和offset来实现。
- stride,步进,告诉OpenGL多少字节算是一组。实际上就是将我们的缓冲给分割成几个小缓冲区,小缓冲区的长度就是步进的值。
- offset,偏移值,当被分割成许多个列表(如上面提到的位置列表、颜色列表)时,还需要告诉OpenGL在其内部偏移值是多少。偏移值也是以字节为单位的,所以如果前一个列表有三个元素,并且每个元素占4个字节,那么到下一列表的偏移值应是12字节。
图例如下:
整个缓冲区被分割成数个小区域,它们的大小就是步进。小区域可以再被分割为不同的字节组,不同组代表顶点的不同属性。上面的图片就是之前例子里用的缓冲区,位置属性存三个浮点数(一个浮点数占4个字节),颜色属性存四个浮点数。
Practical management of vertices 实际的顶点管理
当把不同的属性加到一个顶点上时,我们很快就能得到许多不同的浮点数组和其他变量。为了避免必须一个个地管理所有的缓冲区和数组,最好以面向对象的形式处理它,毕竟我们用的是Java嘛。因此首先的改进方案,我们创建一个顶点类,它将保存我们不同的属性,即位置和颜色属性。这样比较明确简便,当设置属性列表时也更加方便。
public class Vertex {
// Vertex data
private float[] xyzw = new float[] {0f, 0f, 0f, 1f};
private float[] rgba = new float[] {1f, 1f, 1f, 1f};
// The amount of elements that a vertex has
public static final int elementCount = 8;
// The amount of bytes an element has
public static final int elementBytes = 4;
// The size of a vertex in bytes, like in C/C++: sizeof(Vertex)
public static final int sizeInBytes = elementBytes * elementCount;
// Setters
public void setXYZ(float x, float y, float z) {
this.setXYZW(x, y, z, 1f);
}
public void setRGB(float r, float g, float b) {
this.setRGBA(r, g, b, 1f);
}
public void setXYZW(float x, float y, float z, float w) {
this.xyzw = new float[] {x, y, z, w};
}
public void setRGBA(float r, float g, float b, float a) {
this.rgba = new float[] {r, g, b, 1f};
}
// Getters
public float[] getXYZW() {
return new float[] {this.xyzw[0], this.xyzw[1], this.xyzw[2], this.xyzw[3]};
}
public float[] getRGBA() {
return new float[] {this.rgba[0], this.rgba[1], this.rgba[2], this.rgba[3]};
}
}
现在已经有了一个Vertex类了,分配颜色和位置更加容易,现在看看怎样用它创建方形。
// We'll define our quad using 4 vertices of the custom 'Vertex' class
Vertex v0 = new Vertex(); v0.setXYZ(-0.5f, 0.5f, 0f); v0.setRGB(1, 0, 0);
Vertex v1 = new Vertex(); v1.setXYZ(-0.5f, -0.5f, 0f); v1.setRGB(0, 1, 0);
Vertex v2 = new Vertex(); v2.setXYZ(0.5f, -0.5f, 0f); v2.setRGB(0, 0, 1);
Vertex v3 = new Vertex(); v3.setXYZ(0.5f, 0.5f, 0f); v3.setRGB(1, 1, 1);
现在只需创建一个新的FloatBuffer,将每个Vertex的数据放入其中。
Vertex[] vertices = new Vertex[] {v0, v1, v2, v3};
// Put each 'Vertex' in one FloatBuffer
FloatBuffer verticesBuffer = BufferUtils.createFloatBuffer(vertices.length *
Vertex.elementCount);
for (int i = 0; i < vertices.length; i++) {
verticesBuffer.put(vertices[i].getXYZW());
verticesBuffer.put(vertices[i].getRGBA());
}
verticesBuffer.flip();
还记得之前我的提问吧,答案就是在用glDrawElements之前,我们琮必须创建一个新的VBO把序号放进去。这部分跟交叉数据什么的没关系,所以跟之前一样。
// OpenGL expects to draw vertices in counter clockwise order by default
byte[] indices = {
0, 1, 2,
2, 3, 0
};
现在该做VAO和VBO的工作了。
// Create a new Vertex Array Object in memory and select it (bind)
vaoId = GL30.glGenVertexArrays();
GL30.glBindVertexArray(vaoId);
// Create a new Vertex Buffer Object in memory and select it (bind)
vboId = GL15.glGenBuffers();
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, vboId);
GL15.glBufferData(GL15.GL_ARRAY_BUFFER, verticesBuffer, GL15.GL_STATIC_DRAW);
// Put the positions in attribute list 0
GL20.glVertexAttribPointer(0, 4, GL11.GL_FLOAT, false, Vertex.sizeInBytes, 0);
// Put the colors in attribute list 1
GL20.glVertexAttribPointer(1, 4, GL11.GL_FLOAT, false, Vertex.sizeInBytes,
Vertex.elementBytes * 4);
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, 0);
// Deselect (bind to 0) the VAO
GL30.glBindVertexArray(0);
不需要再改别的东西了,仍然要用两个属性列表,只是这两个属性列表将只对应一个VBO。
The result 结果
看起来一样。
Complete source code 完整代码
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.FloatBuffer;
import org.lwjgl.BufferUtils;
import org.lwjgl.LWJGLException;
import org.lwjgl.opengl.ContextAttribs;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.DisplayMode;
import org.lwjgl.opengl.GL11;
import org.lwjgl.opengl.GL15;
import org.lwjgl.opengl.GL20;
import org.lwjgl.opengl.GL30;
import org.lwjgl.opengl.PixelFormat;
import org.lwjgl.util.glu.GLU;
public class TheQuadExampleInterleaved {
// Entry point for the application
public static void main(String[] args) {
new TheQuadExampleInterleaved();
}
// Setup variables
private final String WINDOW_TITLE = "The Quad: Interleaved";
private final int WIDTH = 320;
private final int HEIGHT = 240;
// Quad variables
private int vaoId = 0;
private int vboId = 0;
private int vboiId = 0;
private int indicesCount = 0;
// Shader variables
private int vsId = 0;
private int fsId = 0;
private int pId = 0;
public TheQuadExampleInterleaved() {
// Initialize OpenGL (Display)
this.setupOpenGL();
this.setupQuad();
this.setupShaders();
while (!Display.isCloseRequested()) {
// Do a single loop (logic/render)
this.loopCycle();
// Force a maximum FPS of about 60
Display.sync(60);
// Let the CPU synchronize with the GPU if GPU is tagging behind
Display.update();
}
// Destroy OpenGL (Display)
this.destroyOpenGL();
}
public void setupOpenGL() {
// Setup an OpenGL context with API version 3.2
try {
PixelFormat pixelFormat = new PixelFormat();
ContextAttribs contextAtrributes = new ContextAttribs(3, 2)
.withForwardCompatible(true)
.withProfileCore(true);
Display.setDisplayMode(new DisplayMode(WIDTH, HEIGHT));
Display.setTitle(WINDOW_TITLE);
Display.create(pixelFormat, contextAtrributes);
GL11.glViewport(0, 0, WIDTH, HEIGHT);
} catch (LWJGLException e) {
e.printStackTrace();
System.exit(-1);
}
// Setup an XNA like background color
GL11.glClearColor(0.4f, 0.6f, 0.9f, 0f);
// Map the internal OpenGL coordinate system to the entire screen
GL11.glViewport(0, 0, WIDTH, HEIGHT);
}
public void setupQuad() {
// We'll define our quad using 4 vertices of the custom 'Vertex' class
Vertex v0 = new Vertex(); v0.setXYZ(-0.5f, 0.5f, 0f); v0.setRGB(1, 0, 0);
Vertex v1 = new Vertex(); v1.setXYZ(-0.5f, -0.5f, 0f); v1.setRGB(0, 1, 0);
Vertex v2 = new Vertex(); v2.setXYZ(0.5f, -0.5f, 0f); v2.setRGB(0, 0, 1);
Vertex v3 = new Vertex(); v3.setXYZ(0.5f, 0.5f, 0f); v3.setRGB(1, 1, 1);
Vertex[] vertices = new Vertex[] {v0, v1, v2, v3};
// Put each 'Vertex' in one FloatBuffer
FloatBuffer verticesBuffer = BufferUtils.createFloatBuffer(vertices.length *
Vertex.elementCount);
for (int i = 0; i < vertices.length; i++) {
verticesBuffer.put(vertices[i].getXYZW());
verticesBuffer.put(vertices[i].getRGBA());
}
verticesBuffer.flip();
// OpenGL expects to draw vertices in counter clockwise order by default
byte[] indices = {
0, 1, 2,
2, 3, 0
};
indicesCount = indices.length;
ByteBuffer indicesBuffer = BufferUtils.createByteBuffer(indicesCount);
indicesBuffer.put(indices);
indicesBuffer.flip();
// Create a new Vertex Array Object in memory and select it (bind)
vaoId = GL30.glGenVertexArrays();
GL30.glBindVertexArray(vaoId);
// Create a new Vertex Buffer Object in memory and select it (bind)
vboId = GL15.glGenBuffers();
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, vboId);
GL15.glBufferData(GL15.GL_ARRAY_BUFFER, verticesBuffer, GL15.GL_STATIC_DRAW);
// Put the positions in attribute list 0
GL20.glVertexAttribPointer(0, 4, GL11.GL_FLOAT, false, Vertex.sizeInBytes, 0);
// Put the colors in attribute list 1
GL20.glVertexAttribPointer(1, 4, GL11.GL_FLOAT, false, Vertex.sizeInBytes,
Vertex.elementBytes * 4);
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, 0);
// Deselect (bind to 0) the VAO
GL30.glBindVertexArray(0);
// Create a new VBO for the indices and select it (bind) - INDICES
vboiId = GL15.glGenBuffers();
GL15.glBindBuffer(GL15.GL_ELEMENT_ARRAY_BUFFER, vboiId);
GL15.glBufferData(GL15.GL_ELEMENT_ARRAY_BUFFER, indicesBuffer, GL15.GL_STATIC_DRAW);
GL15.glBindBuffer(GL15.GL_ELEMENT_ARRAY_BUFFER, 0);
}
private void setupShaders() {
int errorCheckValue = GL11.glGetError();
// Load the vertex shader
vsId = this.loadShader("src/thequad/vertex.glsl", GL20.GL_VERTEX_SHADER);
// Load the fragment shader
fsId = this.loadShader("src/thequad/fragment.glsl", GL20.GL_FRAGMENT_SHADER);
// Create a new shader program that links both shaders
pId = GL20.glCreateProgram();
GL20.glAttachShader(pId, vsId);
GL20.glAttachShader(pId, fsId);
// Position information will be attribute 0
GL20.glBindAttribLocation(pId, 0, "in_Position");
// Color information will be attribute 1
GL20.glBindAttribLocation(pId, 1, "in_Color");
GL20.glLinkProgram(pId);
GL20.glValidateProgram(pId);
errorCheckValue = GL11.glGetError();
if (errorCheckValue != GL11.GL_NO_ERROR) {
System.out.println("ERROR - Could not create the shaders:" + GLU.gluErrorString(errorCheckValue));
System.exit(-1);
}
}
public void loopCycle() {
GL11.glClear(GL11.GL_COLOR_BUFFER_BIT);
GL20.glUseProgram(pId);
// Bind to the VAO that has all the information about the vertices
GL30.glBindVertexArray(vaoId);
GL20.glEnableVertexAttribArray(0);
GL20.glEnableVertexAttribArray(1);
// Bind to the index VBO that has all the information about the order of the vertices
GL15.glBindBuffer(GL15.GL_ELEMENT_ARRAY_BUFFER, vboiId);
// Draw the vertices
GL11.glDrawElements(GL11.GL_TRIANGLES, indicesCount, GL11.GL_UNSIGNED_BYTE, 0);
// Put everything back to default (deselect)
GL15.glBindBuffer(GL15.GL_ELEMENT_ARRAY_BUFFER, 0);
GL20.glDisableVertexAttribArray(0);
GL20.glDisableVertexAttribArray(1);
GL30.glBindVertexArray(0);
GL20.glUseProgram(0);
}
public void destroyOpenGL() {
// Delete the shaders
GL20.glUseProgram(0);
GL20.glDetachShader(pId, vsId);
GL20.glDetachShader(pId, fsId);
GL20.glDeleteShader(vsId);
GL20.glDeleteShader(fsId);
GL20.glDeleteProgram(pId);
// Select the VAO
GL30.glBindVertexArray(vaoId);
// Disable the VBO index from the VAO attributes list
GL20.glDisableVertexAttribArray(0);
GL20.glDisableVertexAttribArray(1);
// Delete the vertex VBO
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, 0);
GL15.glDeleteBuffers(vboId);
// Delete the index VBO
GL15.glBindBuffer(GL15.GL_ELEMENT_ARRAY_BUFFER, 0);
GL15.glDeleteBuffers(vboiId);
// Delete the VAO
GL30.glBindVertexArray(0);
GL30.glDeleteVertexArrays(vaoId);
Display.destroy();
}
public int loadShader(String filename, int type) {
StringBuilder shaderSource = new StringBuilder();
int shaderID = 0;
try {
BufferedReader reader = new BufferedReader(new FileReader(filename));
String line;
while ((line = reader.readLine()) != null) {
shaderSource.append(line).append("\n");
}
reader.close();
} catch (IOException e) {
System.err.println("Could not read file.");
e.printStackTrace();
System.exit(-1);
}
shaderID = GL20.glCreateShader(type);
GL20.glShaderSource(shaderID, shaderSource);
GL20.glCompileShader(shaderID);
if (GL20.glGetShader(shaderID, GL20.GL_COMPILE_STATUS) == GL11.GL_FALSE) {
System.err.println("Could not compile shader.");
System.exit(-1);
}
return shaderID;
}
}