LibGDX 0.9.9 - Apply cubemap in environment

Question

I am using LibGDX 0.9.9. I am trying to render cubemap and fog. So my code snippet below:

public void show() {
    modelBatch = new ModelBatch();
    environ         


        

Answer 1

After spending some time, I implemented cube map in LibGDX. Perhaps, it's not ideal solution, but there is nothing more (At least I couldn't find anything). So, I used native OpenGL ES functions and LibGDX. My class is below:

public class EnvironmentCubemap implements Disposable{

protected final Pixmap[] data = new Pixmap[6];  
protected ShaderProgram shader;

protected int u_worldTrans;
protected Mesh quad;
private Matrix4 worldTrans;
private Quaternion q;

protected String vertexShader = " attribute vec3 a_position; \n"+
        " attribute vec3 a_normal; \n"+
        " attribute vec2 a_texCoord0; \n"+          
        " uniform mat4 u_worldTrans; \n"+                   
        " varying vec2 v_texCoord0; \n"+
        " varying vec3 v_cubeMapUV; \n"+            
        " void main() { \n"+
        "     v_texCoord0 = a_texCoord0;     \n"+
        "     vec4 g_position = u_worldTrans * vec4(a_position, 1.0); \n"+
        "     v_cubeMapUV = normalize(g_position.xyz); \n"+
        "     gl_Position = vec4(a_position, 1.0); \n"+
        " } \n";

protected String fragmentShader = "#ifdef GL_ES \n"+
        " precision mediump float; \n"+
        " #endif \n"+           
        " uniform samplerCube u_environmentCubemap; \n"+            
        " varying vec2 v_texCoord0; \n"+
        " varying vec3 v_cubeMapUV; \n"+            
        " void main() {      \n"+
        "   gl_FragColor = vec4(textureCube(u_environmentCubemap, v_cubeMapUV).rgb, 1.0);   \n"+
        " } \n";

public String getDefaultVertexShader(){
    return vertexShader;
}

public String getDefaultFragmentShader(){
    return fragmentShader;
}

public EnvironmentCubemap (Pixmap positiveX, Pixmap negativeX, Pixmap positiveY, Pixmap negativeY, Pixmap positiveZ, Pixmap negativeZ) {
    data[0]=positiveX;
    data[1]=negativeX;

    data[2]=positiveY;
    data[3]=negativeY;

    data[4]=positiveZ;
    data[5]=negativeZ;

    init();   
}

public EnvironmentCubemap (FileHandle positiveX, FileHandle negativeX, FileHandle positiveY, FileHandle negativeY, FileHandle positiveZ, FileHandle negativeZ) {
    this(new Pixmap(positiveX), new Pixmap(negativeX), new Pixmap(positiveY), new Pixmap(negativeY), new Pixmap(positiveZ), new Pixmap(negativeZ));
}

//IF ALL SIX SIDES ARE REPRESENTED IN ONE IMAGE
public EnvironmentCubemap (Pixmap cubemap) {        
    int w = cubemap.getWidth();
    int h = cubemap.getHeight();
    for(int i=0; i<6; i++) data[i] = new Pixmap(w/4, h/3, Format.RGB888);
    for(int x=0; x<w; x++)
        for(int y=0; y<h; y++){
            //-X
            if(x>=0 && x<=w/4 && y>=h/3 && y<=h*2/3) data[1].drawPixel(x, y-h/3, cubemap.getPixel(x, y));
            //+Y
            if(x>=w/4 && x<=w/2 && y>=0 && y<=h/3) data[2].drawPixel(x-w/4, y, cubemap.getPixel(x, y));
            //+Z
            if(x>=w/4 && x<=w/2 && y>=h/3 && y<=h*2/3) data[4].drawPixel(x-w/4, y-h/3, cubemap.getPixel(x, y));
            //-Y
            if(x>=w/4 && x<=w/2 && y>=h*2/3 && y<=h) data[3].drawPixel(x-w/4, y-h*2/3, cubemap.getPixel(x, y));
            //+X
            if(x>=w/2 && x<=w*3/4 && y>=h/3 && y<=h*2/3) data[0].drawPixel(x-w/2, y-h/3, cubemap.getPixel(x, y));
            //-Z
            if(x>=w*3/4 && x<=w && y>=h/3 && y<=h*2/3) data[5].drawPixel(x-w*3/4, y-h/3, cubemap.getPixel(x, y));
        }
    cubemap.dispose();
    cubemap=null;
    init();     
}

private void init(){        
     shader = new ShaderProgram(vertexShader, fragmentShader);
        if (!shader.isCompiled())
            throw new GdxRuntimeException(shader.getLog());

     u_worldTrans = shader.getUniformLocation("u_worldTrans");

     quad = createQuad();      
     worldTrans = new Matrix4();         
     q = new Quaternion();

     initCubemap();
} 

private void initCubemap(){
    //bind cubemap
    Gdx.gl20.glBindTexture(GL20.GL_TEXTURE_CUBE_MAP, 0);
    Gdx.gl20.glTexImage2D(GL20.GL_TEXTURE_CUBE_MAP_POSITIVE_X, 0, GL20.GL_RGB, data[0].getWidth(), data[0].getHeight(), 0, GL20.GL_RGB, GL20.GL_UNSIGNED_BYTE, data[0].getPixels());
    Gdx.gl20.glTexImage2D(GL20.GL_TEXTURE_CUBE_MAP_NEGATIVE_X, 0, GL20.GL_RGB, data[1].getWidth(), data[1].getHeight(), 0, GL20.GL_RGB, GL20.GL_UNSIGNED_BYTE, data[1].getPixels());

    Gdx.gl20.glTexImage2D(GL20.GL_TEXTURE_CUBE_MAP_POSITIVE_Y, 0, GL20.GL_RGB, data[2].getWidth(), data[2].getHeight(), 0, GL20.GL_RGB, GL20.GL_UNSIGNED_BYTE, data[2].getPixels());
    Gdx.gl20.glTexImage2D(GL20.GL_TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, GL20.GL_RGB, data[3].getWidth(), data[3].getHeight(), 0, GL20.GL_RGB, GL20.GL_UNSIGNED_BYTE, data[3].getPixels());

    Gdx.gl20.glTexImage2D(GL20.GL_TEXTURE_CUBE_MAP_POSITIVE_Z, 0, GL20.GL_RGB, data[4].getWidth(), data[4].getHeight(), 0, GL20.GL_RGB, GL20.GL_UNSIGNED_BYTE, data[4].getPixels());
    Gdx.gl20.glTexImage2D(GL20.GL_TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, GL20.GL_RGB, data[5].getWidth(), data[5].getHeight(), 0, GL20.GL_RGB, GL20.GL_UNSIGNED_BYTE, data[5].getPixels());

    //Gdx.gl20.glGenerateMipmap(GL20.GL_TEXTURE_CUBE_MAP);
    //Gdx.gl20.glTexParameteri(GL20.GL_TEXTURE_CUBE_MAP, GL20.GL_TEXTURE_MIN_FILTER, GL20.GL_LINEAR);

    Gdx.gl20.glTexParameteri ( GL20.GL_TEXTURE_CUBE_MAP, GL20.GL_TEXTURE_MIN_FILTER,GL20.GL_LINEAR_MIPMAP_LINEAR );     
    Gdx.gl20.glTexParameteri ( GL20.GL_TEXTURE_CUBE_MAP, GL20.GL_TEXTURE_MAG_FILTER,GL20.GL_LINEAR );
    Gdx.gl20.glTexParameteri ( GL20.GL_TEXTURE_CUBE_MAP, GL20.GL_TEXTURE_WRAP_S, GL20.GL_CLAMP_TO_EDGE );
    Gdx.gl20.glTexParameteri ( GL20.GL_TEXTURE_CUBE_MAP, GL20.GL_TEXTURE_WRAP_T, GL20.GL_CLAMP_TO_EDGE );   

    Gdx.gl20.glGenerateMipmap(GL20.GL_TEXTURE_CUBE_MAP);
}



public void render(Camera camera){

    //SPECIAL THANKS TO Jos van Egmond 
    camera.view.getRotation( q, true );
    q.conjugate();
    ///////////////////////////////////    
    worldTrans.idt();
    worldTrans.rotate(quaternion);

    shader.begin();     
    shader.setUniformMatrix(u_worldTrans, worldTrans.translate(0, 0, -1));

    quad.render(shader, GL20.GL_TRIANGLES);
    shader.end();
}

public Mesh createQuad(){
    Mesh mesh = new Mesh(true, 4, 6, VertexAttribute.Position(), VertexAttribute.  ColorUnpacked(), VertexAttribute.TexCoords(0));
        mesh.setVertices(new float[] 
        {-1f, -1f, 0, 1, 1, 1, 1, 0, 1,
        1f, -1f, 0, 1, 1, 1, 1, 1, 1,
        1f, 1f, 0, 1, 1, 1, 1, 1, 0,
        -1f, 1f, 0, 1, 1, 1, 1, 0, 0});
        mesh.setIndices(new short[] {0, 1, 2, 2, 3, 0});
        return mesh;
}

@Override
public void dispose() {
    shader.dispose();
    quad.dispose();
    for(int i=0; i<6; i++) 
        data[i].dispose();
}

}

How to use it? Just create instance of it:

EnvironmentCubemap envCubemap = new EnvironmentCubemap(Gdx.files.internal("cubemap/pos-x.png"), Gdx.files.internal("cubemap/neg-x.png"), 
            Gdx.files.internal("cubemap/pos-y.jpg"), Gdx.files.internal("cubemap/neg-y.jpg"), 
            Gdx.files.internal("cubemap/pos-z.png"), Gdx.files.internal("cubemap/neg-z.png"));

or

EnvironmentCubemap envCubemap = new EnvironmentCubemap(new Pixmap(Gdx.files.internal("cubemap/all_in_one.jpg")));

and then use its render method:

envCubemap.render(camera);

I hope it helps someone else!

Answer 2

I played around the cubemap and created a class which doesn't use native textureCube. Instead of it I created 6 planes and located them around the camera. So, my camera is fixed inside these "walls". This implementation is a bit faster and easier than using cubemap described above.

public class SkyBox implements Disposable{  

Matrix4 tranformation;
ShaderProgram program;  
int u_projTrans;
int u_worldTrans;
int u_tex;

Texture[] textures;

Mesh quad;  
boolean invert = false;

protected String vertexShader =             
        " attribute vec4 a_position; "+
        " attribute vec2 a_texCoord0; "+            
        " varying vec2 v_texCoord; "+           
        " uniform mat4 u_worldTrans; "+
        " uniform mat4 u_projTrans; "+          
        " void main() "+
        " {  "+
        "   gl_Position = u_projTrans * u_worldTrans * vec4(a_position);     "+
        "   v_texCoord = a_texCoord0;    "+
        " } ";

protected String fragmentShader = 
        " #ifdef GL_ES \n"+
        " precision mediump float; \n"+
        " #endif \n"+           
        " uniform sampler2D s_diffuse; "+
        " varying vec2 v_texCoord; "+           
        " void main() "+
        " { "+
        "   gl_FragColor = texture2D( s_diffuse, v_texCoord );   "+
        " } ";

public String getDefaultVertexShader(){
    return vertexShader;
}

public String getDefaultFragmentShader(){
    return fragmentShader;
}


public SkyBox (Pixmap positiveX, Pixmap negativeX, Pixmap positiveY, Pixmap negativeY, Pixmap positiveZ, Pixmap negativeZ) {

    textures = new Texture[6];

    textures[3] = new Texture(positiveX);
    textures[2] = new Texture(negativeX);

    textures[4] = new Texture(positiveY);
    textures[5] = new Texture(negativeY);

    textures[0] = new Texture(positiveZ);
    textures[1] = new Texture(negativeZ);

    positiveX.dispose();
    positiveX=null;

    negativeX.dispose();
    negativeX=null;

    positiveY.dispose();
    positiveY=null;

    negativeY.dispose();
    negativeY=null;

    positiveZ.dispose();
    positiveZ=null;

    negativeZ.dispose();
    negativeZ=null;

    init();
}

public SkyBox (FileHandle positiveX, FileHandle negativeX, FileHandle positiveY, FileHandle negativeY, FileHandle positiveZ, FileHandle negativeZ) {
    this(new Pixmap(positiveX), new Pixmap(negativeX), new Pixmap(positiveY), new Pixmap(negativeY), new Pixmap(positiveZ), new Pixmap(negativeZ));     
}

public SkyBox (Pixmap cubemap) {        
    int w = cubemap.getWidth();
    int h = cubemap.getHeight();

    Pixmap[] data = new Pixmap[6];
    for(int i=0; i<6; i++) data[i] = new Pixmap(w/4, h/3, Format.RGB888);
    for(int x=0; x<w; x++)
        for(int y=0; y<h; y++){
            //-X
            if(x>=0 && x<=w/4 && y>=h/3 && y<=h*2/3) data[1].drawPixel(x, y-h/3, cubemap.getPixel(x, y));
            //+Y
            if(x>=w/4 && x<=w/2+1 && y>=0 && y<=h/3) data[2].drawPixel(x-w/4, y, cubemap.getPixel(x, y));
            //+Z
            if(x>=w/4 && x<=w/2 && y>=h/3 && y<=h*2/3) data[4].drawPixel(x-w/4, y-h/3, cubemap.getPixel(x, y));
            //-Y
            if(x>=w/4 && x<=w/2 && y>=h*2/3 && y<=h) data[3].drawPixel(x-w/4, y-h*2/3, cubemap.getPixel(x, y));
            //+X
            if(x>=w/2 && x<=w*3/4 && y>=h/3 && y<=h*2/3) data[0].drawPixel(x-w/2, y-h/3, cubemap.getPixel(x, y));
            //-Z
            if(x>=w*3/4 && x<=w && y>=h/3 && y<=h*2/3) data[5].drawPixel(x-w*3/4, y-h/3, cubemap.getPixel(x, y));
        }

    textures = new Texture[6];

    textures[0] = new Texture(data[4]);
    textures[1] = new Texture(data[5]);

    textures[2] = new Texture(data[1]);
    textures[3] = new Texture(data[0]);

    textures[4] = new Texture(data[2]);
    textures[5] = new Texture(data[3]);

    for(int i=0; i<6; i++) {
        data[i].dispose();
        data[i] = null;
    }
    cubemap.dispose();
    cubemap=null;

    init();
}

public SkyBox (FileHandle cubemap){
    this(new Pixmap(cubemap));
}

public Mesh createTexturedQuad(){
    Mesh quad = new Mesh(true, 4, 6, VertexAttribute.Position(), new VertexAttribute(Usage.TextureCoordinates, 2, "a_texCoord0"));
    quad.setVertices(new float[] 
        {-1f, -1f, 0, 0, 1,
        1f, -1f, 0, 1, 1,
        1f, 1f, 0, 1, 0,
        -1f, 1f, 0, 0, 0});
    quad.setIndices(new short[] {0, 1, 2, 2, 3, 0});
    return quad;
}

public void setInvert(boolean enable){
    invert = enable;
}

public void init() {        
    program = new ShaderProgram(vertexShader, fragmentShader);
    if (!program.isCompiled())
        throw new GdxRuntimeException(program.getLog());
    else Gdx.app.log("shader", "shader compiled successfully!");
    u_projTrans = program.getUniformLocation("u_projTrans");
    u_worldTrans = program.getUniformLocation("u_worldTrans");
    u_tex = program.getUniformLocation("s_diffuse");   

    tranformation = new Matrix4();      
    quad = createTexturedQuad();

}


public void render(Camera camera){      

    Gdx.graphics.getGL20().glCullFace(GL20.GL_BACK);

    program.begin();    
    program.setUniformMatrix(u_projTrans, camera.combined);

    //front
    tranformation.idt();    
    tranformation.translate(camera.position.x, camera.position.y, camera.position.z);           
    tranformation.translate(0, 0, -1);
    if(invert) tranformation.rotate(Vector3.Y, 180);
    program.setUniformMatrix(u_worldTrans, tranformation);      
    textures[0].bind(0);
    program.setUniformi("s_diffuse", 0);        
    quad.render(program, GL20.GL_TRIANGLES);

    //left  
    tranformation.idt();
    tranformation.translate(camera.position.x, camera.position.y, camera.position.z);       
    tranformation.rotate(Vector3.Y, 90);    
    tranformation.translate(0, 0, -1);
    if(invert) tranformation.rotate(Vector3.Y, 180);
    program.setUniformMatrix(u_worldTrans, tranformation);      
    textures[ invert ? 3 : 2].bind(0);
    program.setUniformi("s_diffuse", 0);        
    quad.render(program, GL20.GL_TRIANGLES);

    //right
    tranformation.idt();
    tranformation.translate(camera.position.x, camera.position.y, camera.position.z);       
    tranformation.rotate(Vector3.Y, -90);   
    tranformation.translate(0, 0, -1);
    if(invert) tranformation.rotate(Vector3.Y, 180);
    program.setUniformMatrix(u_worldTrans, tranformation);      
    textures[invert ? 2 : 3].bind(0);
    program.setUniformi("s_diffuse", 0);        
    quad.render(program, GL20.GL_TRIANGLES);

    //bottom
    tranformation.idt();
    tranformation.translate(camera.position.x, camera.position.y, camera.position.z);       
    tranformation.rotate(Vector3.X, -90);   
    tranformation.translate(0, 0, -1);
    if(invert) tranformation.rotate(Vector3.Y, 180);
    program.setUniformMatrix(u_worldTrans, tranformation);      
    textures[5].bind(0);
    program.setUniformi("s_diffuse", 0);        
    quad.render(program, GL20.GL_TRIANGLES);

    //top
    tranformation.idt();
    tranformation.translate(camera.position.x, camera.position.y, camera.position.z);       
    tranformation.rotate(Vector3.X, 90);    
    tranformation.translate(0, 0, -1);
    if(invert) tranformation.rotate(Vector3.Y, 180);
    program.setUniformMatrix(u_worldTrans, tranformation);      
    textures[4].bind(0);
    program.setUniformi("s_diffuse", 0);        
    quad.render(program, GL20.GL_TRIANGLES);

    //back
    tranformation.idt();
    tranformation.translate(camera.position.x, camera.position.y, camera.position.z);           
    tranformation.rotate(Vector3.Y, 180);   
    tranformation.translate(0, 0, -1);
    if(invert) tranformation.rotate(Vector3.Y, 180);
    program.setUniformMatrix(u_worldTrans, tranformation);      
    textures[1].bind(0);
    program.setUniformi("s_diffuse", 0);        
    quad.render(program, GL20.GL_TRIANGLES);

    program.end();  
}

@Override
public void dispose() {
    program.dispose();
    quad.dispose(); 
    for(int i=0; i<6; i++){
        textures[i].dispose();
        textures[i]=null;
    }
}
}

Using of this class is the same as previous one. Happy coding!

Answer 3

The default shader (the glsl files) currently don't support a cubemap. You'll have to provide your own glsl files to use a cubemap. The DefaultShader (the CPU part of the shader that is used by default) will bind the cubemap to the uniform called: u_environmentCubemap. Also, the macro environmentCubemapFlag will be defined by the DefaultShader if the material contains an environment cubemap attribute. Use the following snippet in your shader to use the cubemap:

#ifdef environmentCubemapFlag
uniform samplerCube u_environmentCubemap;
#endif

Here's a relevant example snippet to use cubemap (and normal map): https://github.com/libgdx/libgdx/blob/master/tests/gdx-tests-android/assets/data/g3d/shaders/reflect.glsl Here's a more advanced example snippet: https://github.com/libgdx/libgdx/blob/master/tests/gdx-tests-android/assets/data/g3d/shaders/test.glsl

You can specify your custom shader like this:

modelBatch = new ModelBatch(Gdx.files.internal("data/vertex.glsl"), Gdx.files.internal("data/fragment.glsl"));

More info about using a custom shader: http://blog.xoppa.com/creating-a-shader-with-libgdx/

Answer 4

In addition to Nolesh' solution, the skybox can be rotated correctly in respect to the camera rotation like so:

Quaternion q = new Quaternion();
camera.view.getRotation( q, true );
q.conjugate();

envCubemap.render( q );