How do I create a sky box with OpenGL ES 2.0?

Question

Can you give me hint to any good sky box example in OpenGL ES 2.0? I have found only OpenGL and does not work for me. I am doing it this way: Initialization:

glUseProgram(m_programSkyBox.Program);
glGenBuffers(1, &skyBoxVertexBuffer);
glBindBuffer(GL_ARRAY_BUFFER, skyBoxVertexBuffer);


float vertices[24] = {  
    -1.0, -1.0,  1.0,
    1.0, -1.0,  1.0,
    -1.0,  1.0,  1.0,
    1.0,  1.0,  1.0,
    -1.0, -1.0, -1.0,
    1.0, -1.0, -1.0,
    -1.0,  1.0, -1.0,
    1.0,  1.0, -1.0,
};

glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

glGenBuffers(1, &skyBoxIndexBuffer);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, skyBoxIndexBuffer);


GLubyte indices[14] = {0, 1, 2, 3, 7, 1, 5, 4, 7, 6, 2, 4, 0, 1};
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

Drawing the skybox:

glClearColor(0.5f, 0.5f, 0.5f, 1);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glUseProgram(m_programSkyBox.Program);

glDisable(GL_DEPTH_TEST);   // skybox should be drawn behind anything else
glBindTexture(GL_TEXTURE_CUBE_MAP, m_textures.Cubemap);


glBindBuffer(GL_ARRAY_BUFFER, skyBoxVertexBuffer);
glVertexAttribPointer(m_programSkyBox.Attributes.Position, 3, GL_FLOAT, GL_FALSE, 0, (void*)0);
glEnableVertexAttribArray(m_programSkyBox.Attributes.Position);
glBindBuffer(GL_ARRAY_BUFFER, 0);

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, skyBoxIndexBuffer);
glDrawElements(GL_TRIANGLE_STRIP, 14, GL_UNSIGNED_BYTE, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
glEnable(GL_DEPTH_TEST);

Texture loading is working. Shader is correctly compiled and looks like this: Vertex shader:

attribute vec4 position;
varying mediump vec3 texCoord;
void main() {
   texCoord.xyz = position.xyz;
}

Fragment shader:

uniform samplerCube Sampler;

varying mediump vec3 texCoord;

 void main() {
     mediump vec3 cube = vec3(textureCube(Sampler, texCoord.xyz));
     gl_FragColor = vec4(cube, 1.0);
 }

But I can't get the cube visible. Am I doing anything wrong?

Answer 1

You propably want to send View matrix (which defines camera position), because why to have skybox if you can't look around? And propably also world matrix to add some scale. Personally i like using vertex position as texture coordinate if you know what you are doing. This is how it should look:

uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
attribute vec4 position;
varying mediump vec4 texCoord;
void main() {
   texCoord = position; 
   gl_Position = modelViewMatrix * projectionMatrix * position; 
}

gl_Position should contain 3D position converted to the 2D screen space. Thats what modelViewProjection does. And texCoord should be texture position on a vertex, which usualy does not changes with vertex's position on a screen, so no multiplication with any matrices. (Maybe there are some cases when it has sense to multiply texture coord with projection matrix, but sky box is definitevely not one of them).

Answer 2

My fault, I have found the problem. I have not "create" vertex in vertex shader. It should looks this way:

uniform mat4 projectionMatrix;
attribute vec4 position;
varying mediump vec4 texCoord;
void main() {
   texCoord = projectionMatrix * position;
    gl_Position = texCoord;
}

I have added line:

gl_Position = texCoord;