Cubemapping in GLSL

[joshuajnoble]

I’m having trouble figuring out how to create and access a cubemap in my ofShader. I’ve done this in cinder, but can’t get it going in OF for some reason

The core of what we’re doing is here:

  
  
  
void ofxCubeMap::loadFromOfImages( ofImage pos_x, ofImage pos_y, ofImage pos_z, ofImage neg_x,ofImage neg_y,ofImage neg_z)  
{	  
  
	//create a texture object  
	glGenTextures(1, &textureObject);  
	glBindTexture(GL_TEXTURE_CUBE_MAP_ARB, textureObject);  
	//assign the images to positions  
	glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X_ARB, 0, pos_x.getTextureReference().getTextureData().glTypeInternal,   
				 (GLint)pos_x.getTextureReference().getTextureData().tex_w, (GLint)pos_x.getTextureReference().getTextureData().tex_h, 0,   
				 pos_x.getTextureReference().getTextureData().glType, pos_x.getTextureReference().getTextureData().pixelType,   
				 pos_x.getPixels());  
  
	glTexImage2D(GL_TEXTURE_CUBE_MAP_NEGATIVE_X_ARB, 0, neg_x.getTextureReference().getTextureData().glTypeInternal,   
				 (GLint)neg_x.getTextureReference().getTextureData().tex_w, (GLint)neg_x.getTextureReference().getTextureData().tex_h, 0,   
				 neg_x.getTextureReference().getTextureData().glType, neg_x.getTextureReference().getTextureData().pixelType,   
				 neg_x.getPixels());  
  
	glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_Y_ARB, 0, pos_y.getTextureReference().getTextureData().glTypeInternal,   
				 (GLint)pos_y.getTextureReference().getTextureData().tex_w, (GLint)pos_y.getTextureReference().getTextureData().tex_h, 0,   
				 pos_y.getTextureReference().getTextureData().glType, pos_y.getTextureReference().getTextureData().pixelType,   
				 pos_y.getPixels());  
  
	glTexImage2D(GL_TEXTURE_CUBE_MAP_NEGATIVE_Y_ARB, 0, neg_y.getTextureReference().getTextureData().glTypeInternal,   
				 (GLint)neg_y.getTextureReference().getTextureData().tex_w, (GLint)neg_y.getTextureReference().getTextureData().tex_h, 0,   
				 neg_y.getTextureReference().getTextureData().glType, neg_y.getTextureReference().getTextureData().pixelType,   
				 neg_y.getPixels());  
  
	glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_Z_ARB, 0, pos_z.getTextureReference().getTextureData().glTypeInternal,   
				 (GLint)pos_z.getTextureReference().getTextureData().tex_w, (GLint)pos_z.getTextureReference().getTextureData().tex_h, 0,   
				 pos_z.getTextureReference().getTextureData().glType, pos_z.getTextureReference().getTextureData().pixelType,   
				 pos_z.getPixels());  
  
	glTexImage2D(GL_TEXTURE_CUBE_MAP_NEGATIVE_Z_ARB, 0, neg_z.getTextureReference().getTextureData().glTypeInternal,   
				 (GLint)neg_z.getTextureReference().getTextureData().tex_w, (GLint)neg_z.getTextureReference().getTextureData().tex_h, 0,   
				 neg_z.getTextureReference().getTextureData().glType, neg_z.getTextureReference().getTextureData().pixelType,   
				 neg_z.getPixels());  
	//set filtering modes for scaling up and down  
	glTexParameteri(GL_TEXTURE_CUBE_MAP_ARB, GL_TEXTURE_MAG_FILTER, GL_LINEAR);  
	glTexParameteri(GL_TEXTURE_CUBE_MAP_ARB, GL_TEXTURE_MIN_FILTER, GL_LINEAR);  
  
}  
  
  

then I just pass the texture reference to:

  
  
bubbleShader.setUniform1i("EnvMap", cubeMap.textureObject);  
  

I’m not sure if there’s anything wrong in there, or if there’s a better approach. Anyone done this or see something simple that I’m doing wrong?

[joshuajnoble]

Ok, so for the curious, here’s the solution. No image files provided, but screenshot is attached.


cube_map.zip

[joshuajnoble]

To anyone who happened the grab the file, there was a bug in it. Fixed now.

[brunoimbrizi]

@joshuajnoble The .zip is no longer available. Could you upload it again?

I am trying to apply environment reflection to a 3D model. Ideally combined with a specular value, so that the model would reflect both the environment and the lights in the scene.
Something like this:http://threejs.org/examples/#webgl_materials_cubemap

I found ofxCubeMap which solves the cube map part, but it’s not clear to me how I could use it as a reflection. And it doesn’t work with ofGLProgrammableRenderer (OpenGL 3).

Also found this nice post Cube Maps: Sky Boxes and Environment Mapping which seems to have all the answers, except that all the GLSL code provided is using #version 400 (OpenGL 4). According to the shaders tutorial, I understood that openFrameworks works with GL2, GL3 and GL ES2, so the shader would have to be adapted / ported - I still need to learn a lot more about GL before I can do that.

Any other hints or sources to help me with Reflective Environment Mapping in openFrameworks?

[brunoimbrizi]

It took me a while, but I found a solution. Posting here for future reference.

The solution uses ofxCubeMap and a simple custom shader. I say simple because the shader is only reflecting the environment map and nothing else. To take into account material and light properties it would become considerably more complex - and I am working on that, but I’ll keep things simple on this post.

Here is the result:

And the code (omitted the default stuff):
oF version 0.8.4

ofApp.h

ofxCubeMap cubeMap;
ofShader shader;

ofApp.cpp

//--------------------------------------------------------------
void ofApp::setup(){
    ofEnableDepthTest();

    shader.load("shaders/reflection");

    cubeMap.loadImages("textures/xpos.jpg",
                       "textures/xneg.jpg",
                       "textures/ypos.jpg",
                       "textures/yneg.jpg",
                       "textures/zpos.jpg",
                       "textures/zneg.jpg");
}

//--------------------------------------------------------------
void ofApp::draw(){
    cubeMap.bind();
    shader.begin();

    shader.setUniform1i("envMap", 0);
    shader.setUniform1f("reflectivity", 0.8);

    ofPushMatrix();
    ofTranslate(ofGetWidth() * 0.5, ofGetHeight() * 0.5, 0);
    ofSphere(120);
    ofPopMatrix();

    shader.end();
    cubeMap.unbind();
}

/shaders/reflection.vert

#version 120

varying vec3 reflectVec;

void main() 
{
	vec3 V = vec3(gl_ModelViewMatrix * gl_Vertex);
	vec3 N = normalize(gl_NormalMatrix * gl_Normal);
	
	reflectVec = reflect(V, N);
	
	gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
}

/shaders/reflection.frag

#version 120

uniform samplerCube envMap;
uniform float reflectivity;

varying vec3 reflectVec;

void main()
{
	vec4 cubeColor = textureCube(envMap, vec3(reflectVec.x, -reflectVec.y, reflectVec.z));

	gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);
	gl_FragColor.xyz = mix( gl_FragColor.xyz, cubeColor.xyz, reflectivity );
}

[stephanschulz]

@brunoimbrizi

do you think you can post a full example project. i tried to put it together from your post here but get shader load errors and my sphere looks wrong.

thx,
s.