We Keep Coding

How to write text or put image on top of 3D cube in OpenGL java in android (Object is used in Augmenting Purpose)

I'm developing an Augmented Reality based application using EasyAR SDK in android. It rendering cube on the top of image target by default. I want to print something on the top of that cube. So what should I do? I'm new to OpenGL, please help.
If I can put an image on top of that cube then it's also fine! I just want to display "Loading" on that cube, whether it is image or text, that doesn't really matter!
This is the current situation:
And I need something like this:
Here is my code that renders box on top of image target.
import android.opengl.GLES20;
import java.nio.ByteBuffer;
import java.nio.FloatBuffer;
import java.nio.ShortBuffer;
import cn.easyar.Vec2F;
import cn.easyar.Matrix44F;
public class BoxRenderer {
private int program_box;
private int pos_coord_box;
private int pos_color_box;
private int pos_trans_box;
private int pos_proj_box;
private int vbo_coord_box;
private int vbo_color_box;
private int vbo_color_box_2;
private int vbo_faces_box;
private String box_vert = "uniform mat4 trans;\n"
+ "uniform mat4 proj;\n"
+ "attribute vec4 coord;\n"
+ "attribute vec4 color;\n"
+ "varying vec4 vcolor;\n"
+ "\n"
+ "void main(void)\n"
+ "{\n"
+ " vcolor = color;\n"
+ " gl_Position = proj*trans*coord;\n"
+ "}\n"
+ "\n";
private String box_frag = "#ifdef GL_ES\n"
+ "precision highp float;\n"
+ "#endif\n"
+ "varying vec4 vcolor;\n"
+ "\n"
+ "void main(void)\n"
+ "{\n"
+ " gl_FragColor = vcolor;\n"
+ "}\n"
+ "\n";
private float[] flatten(float[][] a) {
int size = 0;
for (int k = 0; k < a.length; k += 1) {
size += a[k].length;
}
float[] l = new float[size];
int offset = 0;
for (int k = 0; k < a.length; k += 1) {
System.arraycopy(a[k], 0, l, offset, a[k].length);
offset += a[k].length;
}
return l;
}
private int[] flatten(int[][] a) {
int size = 0;
for (int k = 0; k < a.length; k += 1) {
size += a[k].length;
}
int[] l = new int[size];
int offset = 0;
for (int k = 0; k < a.length; k += 1) {
System.arraycopy(a[k], 0, l, offset, a[k].length);
offset += a[k].length;
}
return l;
}
private short[] flatten(short[][] a) {
int size = 0;
for (int k = 0; k < a.length; k += 1) {
size += a[k].length;
}
short[] l = new short[size];
int offset = 0;
for (int k = 0; k < a.length; k += 1) {
System.arraycopy(a[k], 0, l, offset, a[k].length);
offset += a[k].length;
}
return l;
}
private byte[] flatten(byte[][] a) {
int size = 0;
for (int k = 0; k < a.length; k += 1) {
size += a[k].length;
}
byte[] l = new byte[size];
int offset = 0;
for (int k = 0; k < a.length; k += 1) {
System.arraycopy(a[k], 0, l, offset, a[k].length);
offset += a[k].length;
}
return l;
}
private byte[] byteArrayFromIntArray(int[] a) {
byte[] l = new byte[a.length];
for (int k = 0; k < a.length; k += 1) {
l[k] = (byte) (a[k] & 0xFF);
}
return l;
}
private int generateOneBuffer() {
int[] buffer = {0};
GLES20.glGenBuffers(1, buffer, 0);
return buffer[0];
}
public void init() {
program_box = GLES20.glCreateProgram();
int vertShader = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER);
GLES20.glShaderSource(vertShader, box_vert);
GLES20.glCompileShader(vertShader);
int fragShader = GLES20.glCreateShader(GLES20.GL_FRAGMENT_SHADER);
GLES20.glShaderSource(fragShader, box_frag);
GLES20.glCompileShader(fragShader);
GLES20.glAttachShader(program_box, vertShader);
GLES20.glAttachShader(program_box, fragShader);
GLES20.glLinkProgram(program_box);
GLES20.glUseProgram(program_box);
pos_coord_box = GLES20.glGetAttribLocation(program_box, "coord");
pos_color_box = GLES20.glGetAttribLocation(program_box, "color");
pos_trans_box = GLES20.glGetUniformLocation(program_box, "trans");
pos_proj_box = GLES20.glGetUniformLocation(program_box, "proj");
vbo_coord_box = generateOneBuffer();
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vbo_coord_box);
float cube_vertices[][] = {
/* +z */{1.0f / 2, 1.0f / 2, 0.01f / 2}, {1.0f / 2, -1.0f / 2, 0.01f / 2}, {-1.0f / 2, -1.0f / 2, 0.01f / 2}, {-1.0f / 2, 1.0f / 2, 0.01f / 2},
/* -z */{1.0f / 2, 1.0f / 2, -0.01f / 2}, {1.0f / 2, -1.0f / 2, -0.01f / 2}, {-1.0f / 2, -1.0f / 2, -0.01f / 2}, {-1.0f / 2, 1.0f / 2, -0.01f / 2}
};
FloatBuffer cube_vertices_buffer = FloatBuffer.wrap(flatten(cube_vertices));
GLES20.glBufferData(GLES20.GL_ARRAY_BUFFER, cube_vertices_buffer.limit() * 4, cube_vertices_buffer, GLES20.GL_DYNAMIC_DRAW);
vbo_color_box = generateOneBuffer();
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vbo_color_box);
int cube_vertex_colors[][] = {
{255, 0, 0, 128}, {0, 255, 0, 128}, {0, 0, 255, 128}, {0, 0, 0, 128},
{0, 255, 255, 128}, {255, 0, 255, 128}, {255, 255, 0, 128}, {255, 255, 255, 128}};
ByteBuffer cube_vertex_colors_buffer = ByteBuffer.wrap(byteArrayFromIntArray(flatten(cube_vertex_colors)));
GLES20.glBufferData(GLES20.GL_ARRAY_BUFFER, cube_vertex_colors_buffer.limit(), cube_vertex_colors_buffer, GLES20.GL_STATIC_DRAW);
vbo_color_box_2 = generateOneBuffer();
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vbo_color_box_2);
int cube_vertex_colors_2[][] = {
{255, 0, 0, 255}, {255, 255, 0, 255}, {0, 255, 0, 255}, {255, 0, 255, 255},
{255, 0, 255, 255}, {255, 255, 255, 255}, {0, 255, 255, 255}, {255, 0, 255, 255}};
ByteBuffer cube_vertex_colors_2_buffer = ByteBuffer.wrap(byteArrayFromIntArray(flatten(cube_vertex_colors_2)));
GLES20.glBufferData(GLES20.GL_ARRAY_BUFFER, cube_vertex_colors_2_buffer.limit(), cube_vertex_colors_2_buffer, GLES20.GL_STATIC_DRAW);
vbo_faces_box = generateOneBuffer();
GLES20.glBindBuffer(GLES20.GL_ELEMENT_ARRAY_BUFFER, vbo_faces_box);
short cube_faces[][] = {
/* +z */{3, 2, 1, 0}, /* -y */{2, 3, 7, 6}, /* +y */{0, 1, 5, 4},
/* -x */{3, 0, 4, 7}, /* +x */{1, 2, 6, 5}, /* -z */{4, 5, 6, 7}};
ShortBuffer cube_faces_buffer = ShortBuffer.wrap(flatten(cube_faces));
GLES20.glBufferData(GLES20.GL_ELEMENT_ARRAY_BUFFER, cube_faces_buffer.limit() * 2, cube_faces_buffer, GLES20.GL_STATIC_DRAW);
}
public void render(Matrix44F projectionMatrix, Matrix44F cameraview, Vec2F size) {
float size0 = size.data[0];
float size1 = size.data[1];
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vbo_coord_box);
float height = size0 / 1000;
float cube_vertices[][] = {
/* +z */{size0 / 2, size1 / 2, height / 2}, {size0 / 2, -size1 / 2, height / 2}, {-size0 / 2, -size1 / 2, height / 2}, {-size0 / 2, size1 / 2, height / 2},
/* -z */{size0 / 2, size1 / 2, 0}, {size0 / 2, -size1 / 2, 0}, {-size0 / 2, -size1 / 2, 0}, {-size0 / 2, size1 / 2, 0}};
FloatBuffer cube_vertices_buffer = FloatBuffer.wrap(flatten(cube_vertices));
GLES20.glBufferData(GLES20.GL_ARRAY_BUFFER, cube_vertices_buffer.limit() * 4, cube_vertices_buffer, GLES20.GL_DYNAMIC_DRAW);
GLES20.glEnable(GLES20.GL_BLEND);
GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA);
GLES20.glEnable(GLES20.GL_DEPTH_TEST);
GLES20.glUseProgram(program_box);
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vbo_coord_box);
GLES20.glEnableVertexAttribArray(pos_coord_box);
GLES20.glVertexAttribPointer(pos_coord_box, 3, GLES20.GL_FLOAT, false, 0, 0);
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vbo_color_box);
GLES20.glEnableVertexAttribArray(pos_color_box);
GLES20.glVertexAttribPointer(pos_color_box, 4, GLES20.GL_UNSIGNED_BYTE, true, 0, 0);
GLES20.glUniformMatrix4fv(pos_trans_box, 1, false, cameraview.data, 0);
GLES20.glUniformMatrix4fv(pos_proj_box, 1, false, projectionMatrix.data, 0);
GLES20.glBindBuffer(GLES20.GL_ELEMENT_ARRAY_BUFFER, vbo_faces_box);
for (int i = 0; i < 6; i++) {
GLES20.glDrawElements(GLES20.GL_TRIANGLE_FAN, 4, GLES20.GL_UNSIGNED_SHORT, i * 4 * 2);
}
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vbo_coord_box);
float cube_vertices_2[][] = {
/* +z */{size0 / 4, size1 / 4, size0 / 4}, {size0 / 4, -size1 / 4, size0 / 4}, {-size0 / 4, -size1 / 4, size0 / 4}, {-size0 / 4, size1 / 4, size0 / 4},
/* -z */{size0 / 4, size1 / 4, 0}, {size0 / 4, -size1 / 4, 0}, {-size0 / 4, -size1 / 4, 0}, {-size0 / 4, size1 / 4, 0}};
FloatBuffer cube_vertices_2_buffer = FloatBuffer.wrap(flatten(cube_vertices_2));
GLES20.glBufferData(GLES20.GL_ARRAY_BUFFER, cube_vertices_2_buffer.limit() * 4, cube_vertices_2_buffer, GLES20.GL_DYNAMIC_DRAW);
GLES20.glEnableVertexAttribArray(pos_coord_box);
GLES20.glVertexAttribPointer(pos_coord_box, 3, GLES20.GL_FLOAT, false, 0, 0);
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vbo_color_box_2);
GLES20.glEnableVertexAttribArray(pos_color_box);
GLES20.glVertexAttribPointer(pos_color_box, 4, GLES20.GL_UNSIGNED_BYTE, true, 0, 0);
for (int i = 0; i < 6; i++) {
GLES20.glDrawElements(GLES20.GL_TRIANGLE_FAN, 4, GLES20.GL_UNSIGNED_SHORT, i * 4 * 2);
}
}
}

This one might be a bit much but it is rather simple and flexible because you can pretty much use any kind of text or font or even background.
Basically we draw text on a bitmap and render this bitmap on a 2D plane. The background of the bitmap won't be rendered (using discard in the fragment shader) as long as it is a predefined color.
So first we need to setup one additional vertex attribute for texture coordinates. Here is the complete setup including vertices and texture coordinates for a simple 2D-plane:
//the geometry with texture coordinates
public int vbs[] = new int[2];
public void initSprite(){
float vertices[] = {
1.0f, -1.0f, 0.0f, //triangle 1
-1.0f, -1.0f, 0.0f,
-1.0f, 1.0f, 0.0f,
-1.0f, 1.0f, 0.0f, //triangle 2
1.0f, 1.0f, 0.0f,
1.0f, -1.0f, 0.0f
};
float texcoords[] = {
1.0f, 1.0f, 0.0f, //triangle 1
0.0f, 1.0f, 0.0f,
0.0f, 0.0f, 0.0f,
0.0f, 0.0f, 0.0f, //triangle 2
1.0f, 0.0f, 0.0f,
1.0f, 1.0f, 0.0f
};
int triangle_count = 2;
FloatBuffer vertex_pos_buffer;
FloatBuffer tex_coord_buffer;
int bytes_per_float = 4;
//generate buffers on gpu
GLES20.glGenBuffers(2, vbs,0);
// Allocate a direct block of memory on the native heap,
// size in bytes is equal to vertices.length * BYTES_PER_FLOAT.
// BYTES_PER_FLOAT is equal to 4, since a float is 32-bits, or 4 bytes.
vertex_pos_buffer = ByteBuffer.allocateDirect(vertices.length * bytes_per_float)
// Floats can be in big-endian or little-endian order.
// We want the same as the native platform.
.order(ByteOrder.nativeOrder())
// Give us a floating-point view on this byte buffer.
.asFloatBuffer();
//Transferring data from the Java heap to the native heap is then a matter of a couple calls:
// Copy data from the Java heap to the native heap.
vertex_pos_buffer.put(vertices)
// Reset the buffer position to the beginning of the buffer.
.position(0);
//Bind the vertices buffer and give OpenGL the data
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vbs[0]);
GLES20.glBufferData(GLES20.GL_ARRAY_BUFFER, triangle_count * 3* 3 * bytes_per_float, vertex_pos_buffer, GLES20.GL_STATIC_DRAW);
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0);
tex_coord_buffer = ByteBuffer.allocateDirect(texcoords.length * bytes_per_float)
.order(ByteOrder.nativeOrder())
.asFloatBuffer();
tex_coord_buffer.put(texcoords).position(0);
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vbs[1]);
GLES20.glBufferData(GLES20.GL_ARRAY_BUFFER, triangle_count * 3* 3 * bytes_per_float, tex_coord_buffer, GLES20.GL_STATIC_DRAW);
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0);
}
Next we need our Texture. We load a background image and draw our desired text ontop of it. size is the font size we want to use and should be a bit smaller than the background bitmap height. r g b are the color values of the font:
//the texture we gonna use during rendering
int tex = 0;
public void initTextTexture(String backgroundBitmapPath, String text, float size, int r, int g, int b){
//load the bitmap
Bitmap background = loadBitmapRGBA(backgroundBitmapPath);
//check if image could load
if(background == null){
return;
}
android.graphics.Bitmap.Config bitmapConfig = background.getConfig();
// set default bitmap config if none
if(bitmapConfig == null) {
bitmapConfig = android.graphics.Bitmap.Config.ARGB_8888;
}
// resource bitmaps are imutable,
// so we need to convert it to mutable one
background = background.copy(bitmapConfig, true);
Canvas canvas = new Canvas(background);
// new antialised Paint
Paint paint = new Paint();
paint.setColor(Color.rgb(r, g, b));
// text size in pixels
paint.setTextSize(size);
// draw text to the Canvas center
Rect bounds = new Rect();
paint.getTextBounds(text, 0, text.length(), bounds);
//left
int x = 1;
//center
int y = (background.getHeight() + bounds.height())/2;
canvas.drawText(text, x, y, paint);
//create a texture with the bitmap we just created
//try to allocate texture on GPU
int gl_map[] = new int[1];
GLES20.glGenTextures(1, gl_map, 0);
tex = gl_map[0];
//bind texture
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, tex);
//move the bitmap to the openGL texture
GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, background, 0);
//set nearest filter
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST);
}
private Bitmap loadBitmapRGBA(String path){
if(path == null){
return null;
}
//replace this with your application/activity context
AssetManager assetManager = GlobalContext.getAppContext().getAssets();
InputStream istr = null;
try {
istr = assetManager.open(path);
} catch (IOException e) {
e.printStackTrace();
}
Rect outPadding = new Rect();
final BitmapFactory.Options options = new BitmapFactory.Options();
options.inScaled = false;
Bitmap image = BitmapFactory.decodeStream(istr, outPadding, options);
return image;
}
Next we need draw our geometry with the texture we created, notice the glBindTexture :
public void drawTextSprite(){
//program is the shader programm we gonna use to draw the 2d plane
GLES20.glUseProgram(program);
int locPosition = GLES20.glGetAttribLocation(program, "a_Position");
int locTexcoord = GLES20.glGetAttribLocation(program, "a_TexCoord");
int locTexture = GLES20.glGetUniformLocation(program, "tex_sampler");
int locMVPMatrix = GLES20.glGetUniformLocation(program, "u_MVPMatrix");
//bind the vertex data
GLES20.glEnableVertexAttribArray(locPosition);
GLES20.glEnableVertexAttribArray(locTexcoord);
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vbs[0]);
GLES20.glVertexAttribPointer(locPosition, 3, GLES20.GL_FLOAT, false, 0, 0);
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vbs[1]);
GLES20.glVertexAttribPointer(locTexcoord, 3, GLES20.GL_FLOAT, false, 0, 0);
//bind texture
GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, tex);
// Tell the texture uniform sampler to use this texture in the shader by binding to texture unit 0.
GLES20.glUniform1i(locTexture, 0);
//set up the mvp matrix
float mvp[] = {
1.0f, 0.0f, 0.0f, 0.0f,
0.0f, 1.0f, 0.0f, 0.0f,
0.0f, 0.0f, 1.0f, 0.0f,
0.0f, 0.0f, 0.0f, 1.0f
};
GLES20.glUniformMatrix4fv(locMVPMatrix, 1, false, mvp, 0);
//draw 2 triangles
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 2*3);
}
Now we just need our shader:
//vertex shader
uniform lowp mat4 u_MVPMatrix;
attribute lowp vec4 a_Position;
attribute lowp vec3 a_TexCoord;
varying lowp vec3 texc;
void main()
{
texc = a_TexCoord;
gl_Position = u_MVPMatrix * a_Position;
}
//fragment shader
uniform lowp sampler2D tex_sampler;
varying lowp vec3 texc;
void main()
{
lowp vec3 color = texture2D(tex_sampler, texc.st).rgb;
//test for the background color
if(color.r == 1.0 && color.g == 0.0 && color.b == 1.0){
discard; //get rid of the background
}
gl_FragColor = vec4(color.r, color.g, color.b, 1.0);
}
And to set everything up we call the following two lines:
initSprite();
initTextTexture("img/FF00FF_TEXT_BG.png","Loading...", 20.0f, 255, 255, 255);
FF00FF_TEXT_BG is stored under assets/img/ and looks like this.
If we call drawTextSprite(); during the renderloop we should get something like this:
Of course the output is a bit stretched, this is because i used the identity matrix to draw it. You just need to make sure you draw this over your box by providing the proper matrix.
Also make sure not to draw the plane directly at the same position as the box's side but slightly further way, otherwise you wont see the text or artefacts if you use depthtest.
If you don't need to generate strings during runtime you can ofcourse just load bitmaps with prerendered text.
Hope that helps.

LWJGL3 and Antons OpengGL Tutorials, simple triangle is not displayed

I have started learning OpenGL with LWJGL3 and some tutorials. Finally I have found the Anton's one on github and I started with most basic one:
Hello Triangle
My problem is kinda similar to this one: Triangle not showing up
This is my problem. I create window with black background but triangle doesn't appear. I would be grateful for any info about my mistakes. Here's my code:
public class HelloWorld
{
public static void main(String[] args)
{
long window = NULL;
int vao, vbo;
final float[] points =
{
0.0f, 0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
-0.5f, -0.5f, 0.0f
};
final String vertex_shader =
"#version 410\n" +
"in vec3 vp;" +
"void main () {" +
" gl_Position = vec4 (vp, 1.0);" +
"}";
final String fragment_shader =
"#version 410\n" +
"out vec4 frag_colour;" +
"void main () {" +
" frag_colour = vec4 (0.5, 0.0, 0.5, 1.0);" +
"}";
int vs, fs, shader_programme;
if( glfwInit() == GL_FALSE )
{
System.err.println("Can't initialize glfw!");
return;
}
window = glfwCreateWindow (640, 480, "Hello Triangle", NULL, NULL);
if (window == 0) {
glfwTerminate();
return;
}
glfwMakeContextCurrent (window);
GL.createCapabilities();
glEnable (GL_DEPTH_TEST);
glDepthFunc (GL_LESS);
vbo = glGenBuffers();
glBindBuffer (GL_ARRAY_BUFFER, vbo);
glBufferData (GL_ARRAY_BUFFER, FloatBuffer.wrap(points),
GL_STATIC_DRAW);
vao = glGenVertexArrays();
glBindVertexArray (vao);
glEnableVertexAttribArray (0);
glBindBuffer (GL_ARRAY_BUFFER, vbo);
glVertexAttribPointer (0, 3, GL_FLOAT, false, 0, 0);
vs = glCreateShader (GL_VERTEX_SHADER);
glShaderSource (vs, vertex_shader);
glCompileShader (vs);
fs = glCreateShader (GL_FRAGMENT_SHADER);
glShaderSource (fs, fragment_shader);
glCompileShader (fs);
shader_programme = glCreateProgram ();
glAttachShader (shader_programme, fs);
glAttachShader (shader_programme, vs);
glLinkProgram (shader_programme);
while ( glfwWindowShouldClose(window) == GL_FALSE ) {
glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glUseProgram (shader_programme);
glBindVertexArray (vao);
glDrawArrays (GL_TRIANGLES, 0, 3);
glfwPollEvents ();
glfwSwapBuffers (window);
}
glfwTerminate();
return;
}
}

So the solution of my problem was using
FloatBuffer buffer = BufferUtils.createFloatBuffer(points.length);
buffer.put(points);
buffer.rewind();
glBufferData(GL_ARRAY_BUFFER, buffer, GL_STATIC_DRAW);
instead of
glBufferData(GL_ARRAY_BUFFER, FloatBuffer.wrap(points),GL_STATIC_DRAW);
It works even without suggested change to shader (layout = 0). Thank you for all answers. I obtained solution posting the question on the LWJGL forum.

It is glEnable(GL_DEPTH_TEST); you are drawing a 2d shape and the depth test is removing your shape. Get rid of that and it should work.

GLSL Matrix Translation Leaves Blank Screen?

I have a matrix4f that I'm passing from my ShaderProgram class into my vertex shader class using uniform variables. This matrix is supposed to act as a translation for the vertices. The following is what the matrix looks like
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
When I multiply that variable (Called "test") by the vertex points (Called gl_Vertex) nothing is visible, it just leaves a blank screen. This only happens when I multiply it by the uniform variable "test", if I multiply it by a new matrix4f with the same values, it works normally. If I use vector uniform variables instead of matrices it works as expected.
Am I passing the variable into the GLSL vertex shader class correctly? And if so, why is my quad not showing up on the screen?
Here is my vertex shader
#version 400 core
uniform vec4 translation;
uniform vec4 size;
uniform vec4 rotation;
uniform mat4 test;
in vec2 textureCoords;
in vec3 position;
out vec2 pass_textureCoords;
void main(void){
//pass texture cords
pass_textureCoords = textureCoords;
//This works by multiplying by identity matrix
//gl_Position = mat4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) * gl_Vertex;
//This works by passing vec4's not matrix4
/*gl_Position = vec4(((gl_Vertex.x + translation.x)*size.x),
((gl_Vertex.y + translation.y)*size.y),
((gl_Vertex.z + translation.z)*size.z),
((gl_Vertex.w + translation.w)*size.w)
);*/
//this leaves a blank window
gl_Position = test * gl_Vertex;
}
This is how I declare the uniform variable locations:
translationLocation = GL20.glGetUniformLocation(programID, "translation");
sizeLocation = GL20.glGetUniformLocation(programID, "size");
rotationLocation = GL20.glGetUniformLocation(programID, "rotation");
textureLocation = GL20.glGetUniformLocation(programID, "textureSampler");
testMat = GL20.glGetUniformLocation(programID, "test");
This is how I render the uniform variables
public void start(){
GL20.glUseProgram(programID);
Vector4f translation = offset.getTranslation();
Vector4f size = offset.getSize();
Vector4f rotation = offset.getRotation();
GL20.glUniform4f(translationLocation, translation.x, translation.y, translation.z, translation.w);
GL20.glUniform4f(sizeLocation, size.x, size.y, size.z, size.w);
GL20.glUniform4f(rotationLocation, rotation.x, rotation.y, rotation.z, rotation.w);
FloatBuffer buff = BufferUtils.createFloatBuffer(16);
offset.getTestTranslation().storeTranspose(buff);
GL20.glUniformMatrix4(testMat, false, buff);
GL20.glUniform1i(textureLocation, 0);
}
And this is how I declare my variables before passing it into GLSL
Vector4f translation;
Vector4f size;
Vector4f rotation;
Matrix4f testTranslation;
public Offset(){
translation = new Vector4f(0, 0, 0, 0);
size = new Vector4f(1, 1, 1, 1);
rotation = new Vector4f(0, 0 , 0, 0);
testTranslation = new Matrix4f();
testTranslation.translate(new Vector3f(0,0,0));
}

Well, it turns out that I was using the following method to convert the matrix4f into a floatBuffer
matrix4f.storeTranspose(buff)
When apparently that doesn't properly store the matrix into a float buffer. I'm now using this method to send the matrix to the vertex shader while rendering the shader program
public void setMatrixArray(boolean transposed, Matrix4f[] matrices){
FloatBuffer matrixBuffer = BufferUtils.createFloatBuffer(16*matrices.length);
for(int i = 0; i<matrices.length; i++) {
matrices[i].store(matrixBuffer);
}
matrixBuffer.flip();
GL20.glUniformMatrix4(testMat,transposed,matrixBuffer);
}

Android OpenGL ES 2.0: Cube model is not only distorted (perspective is wrong?), but also the faces are loaded incorrectly (vertices not correct?)

I have come across some problems I'm not able to explain very well without you guys trying it out.
I'm unable to get a cube to load correctly. I was able to make it rotate nicely on all axes, though. (plural of "axis" is "axes"?)
I haven't ventured on with lighting and textures, so I'm sorry if you can't seem to make out the model yet.
This is what it looks like right now (snapshot of a freely-spinning model):
This is the expected outcome:
This is the code for my GLSurfaceView.Renderer:
package dd.ww;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
import android.content.Context;
import android.opengl.GLES20;
import android.opengl.GLSurfaceView.Renderer;
import android.opengl.Matrix;
public class Render implements Renderer {
private Context context;
private Cube cube;
private float[] modelViewProjectionMatrix = new float[16];
private float[] projectionMatrix = new float[16];
private float[] viewMatrix = new float[16];
private float[] rotationMatrix = new float[16];
private float angle = 0f;
public Render(Context context) {
this.context = context;
}
#Override
public void onSurfaceCreated(GL10 unused, EGLConfig config) {
GLES20.glClearColor(1f, 1f, 1f, 1f);
cube = new Cube(context);
}
#Override
public void onSurfaceChanged(GL10 unused, int width, int height) {
GLES20.glViewport(0, 0, width, height);
float ratio = (float) width / (float) height;
Matrix.frustumM(projectionMatrix, 0, -3f, 3f, -3f, 3f, 1f, 10f);
}
#Override
public void onDrawFrame(GL10 unused) {
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
//Camera position
Matrix.setLookAtM(viewMatrix, 0, 0f, 0f, -4f, 0f, 0f, 0f, 0f, 1f, 0f);
// projection x view = modelView
Matrix.multiplyMM(modelViewProjectionMatrix, 0, projectionMatrix, 0, viewMatrix, 0);
//Creating rotation matrix
Matrix.setRotateM(rotationMatrix, 0, angle, 0f, 0f, -1f);
//rotation x camera = modelView
Matrix.multiplyMM(modelViewProjectionMatrix, 0, rotationMatrix, 0, modelViewProjectionMatrix, 0);
Matrix.setRotateM(rotationMatrix, 0, angle, 0f, -1f, 0f);
Matrix.multiplyMM(modelViewProjectionMatrix, 0, rotationMatrix, 0, modelViewProjectionMatrix, 0);
Matrix.setRotateM(rotationMatrix, 0, angle, -1f, 0f, 0f);
Matrix.multiplyMM(modelViewProjectionMatrix, 0, rotationMatrix, 0, modelViewProjectionMatrix, 0);
cube.draw(modelViewProjectionMatrix);
angle += 0.7f;
if (angle > 360f)
angle = 0f;
}
}
This is the code for the Cube class, along with its OBJ loader. The OBJ Loader is used for loading the OBJ model that was exported from Blender (which is the expected outcome of the Cube, shown in Blender.):
package dd.ww;
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import java.nio.ShortBuffer;
import java.util.ArrayList;
import android.content.Context;
import android.content.res.AssetManager;
import android.opengl.GLES20;
import android.util.Log;
public class Cube {
private Context context;
private FloatBuffer vertexBuffer;
private ShortBuffer indexBuffer;
private int shaderProgram;
//TODO: Go to Google Code, find OpenGL ES 2.0 Programming Guide source code, Android,
//check in the ESShapes.java, and study the FloatBuffers...
public Cube(Context c) {
context = c;
loadCube("cube/cube.obj");
}
private void loadCube(String filename) {
ArrayList<Float> tempVertices = new ArrayList<Float>();
//ArrayList<Float> tempNormals = new ArrayList<Float>();
ArrayList<Short> vertexIndices = new ArrayList<Short>();
//ArrayList<Short> normalIndices = new ArrayList<Short>();
try {
AssetManager manager = context.getAssets();
BufferedReader reader = new BufferedReader(new InputStreamReader(manager.open(filename)));
String line;
while ((line = reader.readLine()) != null) {
if (line.startsWith("v")) {
tempVertices.add(Float.valueOf(line.split(" ")[1])); //vx
tempVertices.add(Float.valueOf(line.split(" ")[2])); //vy
tempVertices.add(Float.valueOf(line.split(" ")[3])); //vz
}
// else if (line.startsWith("vn")) {
// tempNormals.add(Float.valueOf(line.split(" ")[1])); //nx
// tempNormals.add(Float.valueOf(line.split(" ")[2])); //ny
// tempNormals.add(Float.valueOf(line.split(" ")[3])); //nz
// }
else if (line.startsWith("f")) {
/*
vertexIndices.add(Short.valueOf(tokens[1].split("/")[0])); //first point of a face
vertexIndices.add(Short.valueOf(tokens[2].split("/")[0])); //second point
vertexIndices.add(Short.valueOf(tokens[3].split("/")[0])); //third point
normalIndices.add(Short.valueOf(tokens[1].split("/")[2])); //first normal
normalIndices.add(Short.valueOf(tokens[2].split("/")[2])); //second normal
normalIndices.add(Short.valueOf(tokens[3].split("/")[2])); //third
*/
// for (int i = 1; i <= 3; i++) {
// //String[] s = tokens[i].split("/");
// vertexIndices.add(Short.valueOf());
// //normalIndices.add(Short.valueOf(s[2]));
// }
vertexIndices.add(Short.valueOf(line.split(" ")[1]));
vertexIndices.add(Short.valueOf(line.split(" ")[2]));
vertexIndices.add(Short.valueOf(line.split(" ")[3]));
}
}
float[] vertices = new float[tempVertices.size()];
for (int i = 0; i < tempVertices.size(); i++) {
Float f = tempVertices.get(i);
vertices[i] = (f != null ? f : Float.NaN);
}
short[] indices = new short[vertexIndices.size()];
for (int i = 0; i < vertexIndices.size(); i++) {
Short s = vertexIndices.get(i);
indices[i] = (s != null ? s : 1);
}
vertexBuffer = ByteBuffer.allocateDirect(vertices.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
vertexBuffer.put(vertices).position(0);
indexBuffer = ByteBuffer.allocateDirect(indices.length * 2).order(ByteOrder.nativeOrder()).asShortBuffer();
indexBuffer.put(indices).position(0);
int vertexShader = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER);
GLES20.glShaderSource(vertexShader, vertexCode);
GLES20.glCompileShader(vertexShader);
int fragmentShader = GLES20.glCreateShader(GLES20.GL_FRAGMENT_SHADER);
GLES20.glShaderSource(fragmentShader, fragmentCode);
GLES20.glCompileShader(fragmentShader);
shaderProgram = GLES20.glCreateProgram();
GLES20.glAttachShader(shaderProgram, vertexShader);
GLES20.glAttachShader(shaderProgram, fragmentShader);
GLES20.glLinkProgram(shaderProgram);
int[] linked = new int[1];
GLES20.glGetProgramiv(shaderProgram, GLES20.GL_LINK_STATUS, linked, 0);
if (linked[0] == 0){
Log.d("DEBUG", "Shader code error.");
Log.d("DEBUG", GLES20.glGetProgramInfoLog(shaderProgram));
GLES20.glDeleteProgram(shaderProgram);
return;
}
GLES20.glDeleteShader(vertexShader);
GLES20.glDeleteShader(fragmentShader);
}
catch (Exception e) {
Log.d("DEBUG", "Error.", e);
}
}
private String vertexCode = "" +
"attribute vec4 a_position; \n" +
"uniform mat4 mvpMatrix; \n" +
"void main() { \n" +
" gl_Position = a_position * mvpMatrix;\n" +
"} \n";
private String fragmentCode = "" +
"precision mediump float; \n" +
"void main() { \n" +
" gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);\n" +
"} \n";
private int attribute_Position;
private int uniform_mvpMatrix;
public void draw(float[] mvpMatrix){
GLES20.glUseProgram(shaderProgram);
attribute_Position = GLES20.glGetAttribLocation(shaderProgram, "a_position");
GLES20.glVertexAttribPointer(attribute_Position, 3, GLES20.GL_FLOAT, false, 3 * 4, vertexBuffer);
GLES20.glEnableVertexAttribArray(attribute_Position);
uniform_mvpMatrix = GLES20.glGetUniformLocation(shaderProgram, "mvpMatrix");
GLES20.glUniformMatrix4fv(uniform_mvpMatrix, 1, false, mvpMatrix, 0);
GLES20.glDrawElements(GLES20.GL_TRIANGLES, indexBuffer.capacity(), GLES20.GL_UNSIGNED_SHORT, indexBuffer);
GLES20.glDisableVertexAttribArray(attribute_Position);
}
}
And finally, here's the APK attachment (Uploaded to Mediafire, should not get removed. It's non-licensed freeware). The attached APK file is signed, exported straight from my project, and can only be run on Gingerbread or above. (This is what OpenGL ES 2.0 is for...):
Mediafire download link to the APK file.
If anyone is willing to help me realize what I'm doing wrong, I'll be glad for the rest of my life. This question here is the closest that I find when searching on SO that has a 40% chance my problem is related to. Unfortunately, he still has his model distorted. All the rest of the questions I found seems to be about textures not rendering correctly, translating the model around, etc. But I will try my best to find questions with similar problems as mine.

Holy Cow...
I finally got it to work.
The problem is how OpenGL ES 2.0 matrices work.
Quote from SO user, Tim:
I believe it should be mvpMatrix * mRotationMatrix, but you're not supposed to use the same matrix as the input and output to that function, you need to use a temporary matrix. Android.opengl.Matrix " The same float array may be passed for result, lhs, and/or rhs. However, the result element values are undefined if the result elements overlap either the lhs or rhs elements." If that doesn't help then post your entire code.
The bolded text means that if you do this:
//Creating rotation matrix
Matrix.setRotateM(rotationMatrix, 0, angle, 0f, 0f, -1f);
//rotation x camera = modelView
Matrix.multiplyMM(modelViewProjectionMatrix, 0, modelViewProjectionMatrix, 0, rotationMatrix, 0);
Matrix.setRotateM(rotationMatrix, 0, angle, 0f, -1f, 0f);
Matrix.multiplyMM(modelViewProjectionMatrix, 0, modelViewProjectionMatrix, 0, rotationMatrix, 0);
Matrix.setRotateM(rotationMatrix, 0, angle, -1f, 0f, 0f);
Matrix.multiplyMM(modelViewProjectionMatrix, 0, modelViewProjectionMatrix, 0, rotationMatrix, 0);
cube.draw(modelViewProjectionMatrix);
Which seems like normal, the cube will look skewed. Reason is, lhs and rhs shouldn't be the same as your resulting matrix.
But, if you do this:
//Creating rotation matrix
Matrix.setRotateM(rotationMatrix, 0, angle, 0f, 0f, -1f);
//rotation x camera = modelView
float[] duplicateMatrix = Arrays.copyOf(modelViewProjectionMatrix, 16);
Matrix.multiplyMM(modelViewProjectionMatrix, 0, duplicateMatrix, 0, rotationMatrix, 0);
Matrix.setRotateM(rotationMatrix, 0, angle, 0f, -1f, 0f);
duplicateMatrix = Arrays.copyOf(modelViewProjectionMatrix, 16);
Matrix.multiplyMM(modelViewProjectionMatrix, 0, duplicateMatrix, 0, rotationMatrix, 0);
Matrix.setRotateM(rotationMatrix, 0, angle, -1f, 0f, 0f);
duplicateMatrix = Arrays.copyOf(modelViewProjectionMatrix, 16);
Matrix.multiplyMM(modelViewProjectionMatrix, 0, duplicateMatrix, 0, rotationMatrix, 0);
cube.draw(modelViewProjectionMatrix);
It will display correctly.
Where I found the helpful hint from.
And this is where I realized why 3 people voted to close this question off. They must've known the answer to this question in the first place, and wanted me to find the solution by myself. Hats off to them...
I swear to God, this is a hard problem I have finally conquered. There goes 2 years of wasted life down the drain...

OpenGL ES tutorial for android doesn't seem to work

I've been following the tutorial at http://developer.android.com/resources/tutorials/opengl/opengl-es20.html for OpenGL ES on android. I've gotten to the, "Apply Projection and Camera View" section however I always seem to get a blank screen with no triangle, the previous section worked perfectly fine. I also tried just copy pasting the entire tutorial into my code but got the same result. Changing the line:
gl_Position = uMVPMatrix * vPosition;
to:
gl_Position = vPosition;
puts the application back to the first section (triangle stretches depending on screen orientation). Any idea what the problem is? Here's the code I have so far just in case I missed something:
public class GLTest20Renderer implements Renderer {
private final String vertexShaderCode =
// This matrix member variable provides a hook to manipulate
// the coordinates of the objects that use this vertex shader
"uniform mat4 uMVPMatrix; \n" +
"attribute vec4 vPosition; \n" +
"void main(){ \n" +
// the matrix must be included as a modifier of gl_Position
" gl_Position = uMVPMatrix * vPosition; \n" +
"} \n";
private final String fragmentShaderCode =
"precision mediump float; \n" +
"void main(){ \n" +
" gl_FragColor = vec4 (0.63671875, 0.76953125, 0.22265625, 1.0); \n" +
"} \n";
private FloatBuffer triangleVB;
private int mProgram;
private int maPositionHandle;
private int muMVPMatrixHandle;
private float[] mMVPMatrix = new float[16];
private float[] mMMatrix = new float[16];
private float[] mVMatrix = new float[16];
private float[] mProjMatrix = new float[16];
public void onSurfaceCreated(GL10 unused, EGLConfig config) {
GLES20.glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
initShapes();
int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);
mProgram = GLES20.glCreateProgram(); // create empty OpenGL Program
GLES20.glAttachShader(mProgram, vertexShader); // add the vertex shader to program
GLES20.glAttachShader(mProgram, fragmentShader); // add the fragment shader to program
GLES20.glLinkProgram(mProgram); // creates OpenGL program executables
// get handle to the vertex shader's vPosition member
maPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
}
public void onDrawFrame(GL10 unused) {
GLES20.glClear( GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT );
// Add program to OpenGL environment
GLES20.glUseProgram(mProgram);
// Prepare the triangle data
GLES20.glVertexAttribPointer(maPositionHandle, 3, GLES20.GL_FLOAT, false, 12, triangleVB);
GLES20.glEnableVertexAttribArray(maPositionHandle);
// Apply a ModelView Projection transformation
Matrix.multiplyMM(mMVPMatrix, 0, mProjMatrix, 0, mVMatrix, 0);
GLES20.glUniformMatrix4fv(muMVPMatrixHandle, 1, false, mMVPMatrix, 0);
// Draw the triangle
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);
}
public void onSurfaceChanged(GL10 unused, int width, int height) {
GLES20.glViewport(0, 0, width, height);
float ratio = (float) width / height;
Matrix.frustumM(mProjMatrix, 0, -ratio, ratio, -1, 1, 3, 7);
muMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix");
Matrix.setLookAtM(mVMatrix, 0, 0, 0, -3, 0f, 0f, 0f, 0f, 1.0f, 0.0f);
}
private void initShapes() {
float triangleCoords[] = {
// X, Y, Z
-0.5f, -0.25f, 0,
0.5f, -0.25f, 0,
0.0f, 0.559016994f, 0
};
// initialize vertex Buffer for triangle
ByteBuffer vbb = ByteBuffer.allocateDirect(
// (# of coordinate values * 4 bytes per float)
triangleCoords.length * 4);
vbb.order(ByteOrder.nativeOrder());// use the device hardware's native byte order
triangleVB = vbb.asFloatBuffer(); // create a floating point buffer from the ByteBuffer
triangleVB.put(triangleCoords); // add the coordinates to the FloatBuffer
triangleVB.position(0); // set the buffer to read the first coordinate
}
private int loadShader(int type, String shaderCode) {
// create a vertex shader type (GLES20.GL_VERTEX_SHADER)
// or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
int shader = GLES20.glCreateShader(type);
// add the source code to the shader and compile it
GLES20.glShaderSource(shader, shaderCode);
GLES20.glCompileShader(shader);
return shader;
}
}
I'm running all this on a Samsung Galaxy S2.

Fixed, just changed the near point in the lookat to be under 3:
Matrix.frustumM(mProjMatrix, 0, -ratio, ratio, -1, 1, 2, 7);