We are still rendering the cube the same way we left it in Example25. Let's change it to draw every cube face in a different solid color. We can define a different color per vertex, but as vertices are shared between faces, their colors will be interpolated.
We'd have to replicate some vertices so we can have different unique colors for each single face:
private float quadCoords[] = {
-1.f, -1.f, -1.0f, // 0
-1.f, 1.f, -1.0f, // 1
1.f, 1.f, -1.0f, // 2
1.f, -1.f, -1.0f, // 3
-1.f, -1.f, 1.0f, // 4
-1.f, 1.f, 1.0f, // 5
1.f, 1.f, 1.0f, // 6
1.f, -1.f, 1.0f, // 7
-1.f, -1.f, -1.0f, // 8 - 0
-1.f, -1.f, 1.0f, // 9 - 4
1.f, -1.f, 1.0f, // 10 - 7
1.f, -1.f, -1.0f, // 11 - 3
-1.f, 1.f, -1.0f, // 12 - 1
-1.f, 1.f, 1.0f, // 13 - 5
1.f, 1.f, 1.0f, // 14 - 6
1.f, 1.f, -1.0f, // 15 - 2
-1.f, -1.f, -1.0f, // 16 - 0
-1.f, -1.f, 1.0f, // 17 - 4
-1.f, 1.f, 1.0f, // 18 - 5
-1.f, 1.f, -1.0f, // 19 - 1
1.f, -1.f, -1.0f, // 20 - 3
1.f, -1.f, 1.0f, // 21 - 7
1.f, 1.f, 1.0f, // 22 - 6
1.f, 1.f, -1.0f // 23 - 2
};
private short[] index = {
0, 1, 2, // front
0, 2, 3, // front
4, 5, 6, // back
4, 6, 7, // back
8, 9,10, // top
8,11,10, // top
12,13,14, // bottom
12,15,14, // bottom
16,17,18, // left
16,19,18, // left
20,21,22, // right
20,23,22 // right
};
We have updated the index as well, to map to the new faces. On the duplicated vertex, we have added a comment with the new index and the old index.
Now, we can define some colors:
float colors[] = {
0.0f, 1.0f, 0.0f, 1.0f,
0.0f, 1.0f, 0.0f, 1.0f,
0.0f, 1.0f, 0.0f, 1.0f,
0.0f, 1.0f, 0.0f, 1.0f,
0.0f, 0.0f, 1.0f, 1.0f,
0.0f, 0.0f, 1.0f, 1.0f,
0.0f, 0.0f, 1.0f, 1.0f,
0.0f, 0.0f, 1.0f, 1.0f,
0.0f, 0.0f, 0.0f, 1.0f,
0.0f, 0.0f, 0.0f, 1.0f,
0.0f, 0.0f, 0.0f, 1.0f,
0.0f, 0.0f, 0.0f, 1.0f,
1.0f, 1.0f, 1.0f, 1.0f,
1.0f, 1.0f, 1.0f, 1.0f,
1.0f, 1.0f, 1.0f, 1.0f,
1.0f, 1.0f, 1.0f, 1.0f,
1.0f, 1.0f, 0.0f, 1.0f,
1.0f, 1.0f, 0.0f, 1.0f,
1.0f, 1.0f, 0.0f, 1.0f,
1.0f, 1.0f, 0.0f, 1.0f,
1.0f, 0.0f, 1.0f, 1.0f,
1.0f, 0.0f, 1.0f, 1.0f,
1.0f, 0.0f, 1.0f, 1.0f,
1.0f, 0.0f, 1.0f, 1.0f
};
Let's also change the texture initialization on the initBuffer methods to create a color Buffer, like we did in Example24-GLDrawing:
ByteBuffer cbb = ByteBuffer.allocateDirect(colors.length * (Float.SIZE / 8)); cbb.order(ByteOrder.nativeOrder()); colorBuffer = cbb.asFloatBuffer(); colorBuffer.put(colors); colorBuffer.position(0);
Update the pixel and vertex Shaders:
private final String vertexShaderCode =
"uniform mat4 uMVPMatrix;" +
"attribute vec4 vPosition;" +
"attribute vec4 aColor;" +
"varying vec4 vColor;" +
"void main() {" +
" gl_Position = uMVPMatrix * vPosition;" +
" vColor = aColor;" +
"}";
private final String fragmentShaderCode =
"precision mediump float;" +
"varying vec4 vColor;" +
"void main() {" +
" gl_FragColor = vColor;" +
"}";
To make it more configurable, let's create a public setColors() method on GLDrawer to change the colors:
public void setColors(int[] faceColors) {
glRenderer.setColors(faceColors);
}
The implementation on the Renderer is as follows:
private void setColors(int[] faceColors) {
colors = new float[4 * 4 * faceColors.length];
int wOffset = 0;
for (int faceColor : faceColors) {
float[] color = hexToRGBA(faceColor);
for(int j = 0; j < 4; j++) {
colors[wOffset++] = color[0];
colors[wOffset++] = color[1];
colors[wOffset++] = color[2];
colors[wOffset++] = color[3];
}
}
ByteBuffer cbb = ByteBuffer.allocateDirect(colors.length *
(Float.SIZE /8));
cbb.order(ByteOrder.nativeOrder());
colorBuffer = cbb.asFloatBuffer();
colorBuffer.put(colors);
colorBuffer.position(0);
}
For simplicity, we will pass the colors as an integer, instead of a float array, so we can use colors in hexadecimal encoding, for example. To convert an integer color to a float array we can use a simple helper method:
private float[] hexToRGBA(int color) {
float[] out = new float[4];
int a = (color >> 24) & 0xff;
int r = (color >> 16) & 0xff;
int g = (color >> 8) & 0xff;
int b = (color ) & 0xff;
out[0] = ((float) r) / 255.f;
out[1] = ((float) g) / 255.f;
out[2] = ((float) b) / 255.f;
out[3] = ((float) a) / 255.f;
return out;
}
To update the example, let's set some colors using the method we have just added:
glDrawer.setColors(new int[] {
0xff4a90e2,
0xff161616,
0xff594236,
0xffff5964,
0xff8aea92,
0xffffe74c
});
If we run the example, we will get something like the following screenshot:
Check the full source code of this example in the Example36-Menu3D folder in the GitHub repository.