Cube Map + GLGraphics

Contributed Library Questions

Florian S..

in Contributed Library Questions • 1 year ago

Can someone explain me how to generate a cubemap using 6 images for passing it to a shader and use it as a samplerCube?

Replies(13)

tfguy44

Re: Cube Map

1 year ago

http://www.openprocessing.org/visuals/?visualID=30536

Florian S..

Re: Cube Map + GLGraphics

1 year ago

(I edited the thread to make clear what I’m looking for)

This sketch shows how to make a cube and texture each face. I need to have the texture as a cube map to pass it to a shader as a samplerCube. Should have mentioned that above :) Thanks anyway!

andres

Re: Cube Map + GLGraphics

1 year ago

Hello, the problem is that the GLTexture class doesn't implement support for cube maps. But you could probably use direct OpenGL calls. For example, to create your cube map texture:

int cubemapID[] = {0};
IntBuffer pixPX, pixNX, pixPY, pixPY, pixNY, pixPZ, pixNZ;
// Load image data into buffers...
gl.glGenTextures(1, cubemapID, 0);
gl.glBindTexture(GL.GL_TEXTURE_CUBE_MAP, cubemapID[0]);
gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP, 0, GL.GL_RGBA, w, h, 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, pixPX);
gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP, 0, GL.GL_RGBA, w, h, 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, pixNX);
gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP, 0, GL.GL_RGBA, w, h, 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, pixPY);
gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP, 0, GL.GL_RGBA, w, h, 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, pixNY);
gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP, 0, GL.GL_RGBA, w, h, 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, pixPZ);
gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP, 0, GL.GL_RGBA, w, h, 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, pixNZ);
...

Another tricky thing would be to apply the cube map to a GLModel object, since in principle you can texture a GLModel only with GLTextures. One possible solution (and here I'm just speculating, I never tried this) would be to texture the GLModel with a regular image (containing a base color for example) contained in a GLTexture, and then create a cube map texture "manually" with the above code and binding right before rendering the model, again using direct OpenGL calls. Something like this:

int cubemapID[] = {0};
GLModel model;
GLTexture base;
GLSLShader shader;
void setup() {
...
model.initTextures(1);
model.setTexture(0, base);
}
void draw() {
GLGraphics renderer = (GLGraphics)g;
renderer.beginGL();
GL gl = renderer.gl;
shader.start();
gl.glEnable(GL.GL_TEXTURE_CUBE_MAP);
gl.glActiveTexture(GL.GL_TEXTURE1);
gl.glBindTexture(GL.GL_TEXTURE_CUBE_MAP, cubemapID[0]);
int loc = shader.getUniformLocation("cubemap"); // The argument should be the name of the cubeSampler uniform in the fragment shader.
gl.glUniform1iARB(loc, 1);
renderer.model(model);
shader.stop();
renderer.endGL();
}

This is a nasty mixture of GLGraphics and OpenGL calls, which I'm not even sure if it would work. In any case, the GLSL code in this page might become handy (and note that the links for cube and spherical maps are outdated, use these instead: spheremaps, cubemaps).

Florian S..

Re: Cube Map + GLGraphics

1 year ago

Thanks. The main problem I had was getting the pixels of the texture into that Buffer format. Just to confirm, I did not try it yet:

GLTexture tex = new GLTexture(this, "texture.jpg");
…
byteBuffer = ByteBuffer.allocate(tex.pixels.length * 16);
IntBuffer intBuffer = byteBuffer.asIntBuffer();
intBuffer.put(tex.pixels);
…
gl.glTexImage2D(gl.GL_TEXTURE_2D, 0, 3, tex.width, tex.height, 0, gl.GL_RGB, gl.GL_UNSIGNED_INT, byteBuffer);

Florian S..

Re: Cube Map + GLGraphics

1 year ago

Okay it is working somehow but I get a nice RGB cube without my image. Better than nothing :D I guess I need to link the cubemap to the shader via parameter?

import codeanticode.glgraphics.*;
import processing.opengl.*;
import javax.media.opengl.*;
import java.nio.IntBuffer;
import java.nio.ByteBuffer;
GL gl;
GLSLShader shader;
PGraphicsOpenGL pgl;
ByteBuffer byteBuffer;
IntBuffer intBuffer;
int[] envMapTextureID = {0};
GLTexture tex;
void setup () {
size(800, 800, GLConstants.GLGRAPHICS);
hint(ENABLE_OPENGL_4X_SMOOTH);
pgl = (PGraphicsOpenGL) g;
gl = pgl.gl;
shader = new GLSLShader(this, "fluxus.vert", "fluxus.frag");
tex = new GLTexture(this, "x.jpg");
byteBuffer = ByteBuffer.allocate(tex.pixels.length * 16);
intBuffer = byteBuffer.asIntBuffer();
intBuffer.put(tex.pixels);
// init cubemap textures
gl.glGenTextures(1, envMapTextureID, 0);
gl.glBindTexture(GL.GL_TEXTURE_CUBE_MAP, envMapTextureID[0]);
gl.glTexParameteri(GL.GL_TEXTURE_CUBE_MAP, GL.GL_TEXTURE_WRAP_S, GL.GL_CLAMP_TO_EDGE);
gl.glTexParameteri(GL.GL_TEXTURE_CUBE_MAP, GL.GL_TEXTURE_WRAP_T, GL.GL_CLAMP_TO_EDGE);
gl.glTexParameteri(GL.GL_TEXTURE_CUBE_MAP, GL.GL_TEXTURE_WRAP_R, GL.GL_CLAMP_TO_EDGE);
gl.glTexParameteri(GL.GL_TEXTURE_CUBE_MAP, GL.GL_TEXTURE_MIN_FILTER, GL.GL_NEAREST);
gl.glTexParameteri(GL.GL_TEXTURE_CUBE_MAP, GL.GL_TEXTURE_MAG_FILTER, GL.GL_NEAREST);
for (int i = 0; i < 6; i++) {
gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, gl.GL_RGB8, tex.width, tex.height, 0, gl.GL_RGB, gl.GL_UNSIGNED_BYTE, byteBuffer);
}
}
void draw () {
background(255);
fill(255);
lights();
translate(mouseX, mouseY, 0);
shader.start();
box(100);
shader.stop();
image(tex, 0, 0);
println(shader.getUniformLocation("Texture")); // prints 5
}

Florian S..

Re: Cube Map + GLGraphics

1 year ago

Okay I got it. Just some wrong pixel interpretations. I’m trying to fix it. Thought I found it but did not :D

gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, GL.GL_RGBA, tex.width, tex.height, 0, GL.GL_RGBA, GL.GL_UNSIGNED_BYTE, byteBuffer);

results in a red tinted cubemap texture

andres

Re: Cube Map + GLGraphics

1 year ago

Ok, is looking good. One thing that was wrong in the code I posted before is the initialization for the cubemap texture:

gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP_POSITIVE_X, 0, GL.GL_RGBA, w, h, 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, pixPX);
gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP_NEGATIVE_X, 0, GL.GL_RGBA, w, h, 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, pixNX);
gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP_POSITIVE_Y, 0, GL.GL_RGBA, w, h, 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, pixPY);
gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, GL.GL_RGBA, w, h, 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, pixNY);
gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP_POSITIVE_Z, 0, GL.GL_RGBA, w, h, 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, pixPZ);
gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, GL.GL_RGBA, w, h, 0, GL.GL_RGB, GL.GL_UNSIGNED_BYTE, pixNZ);

but it seems that you already got it.

Florian S..

Re: Cube Map + GLGraphics

1 year ago

Yep I did that using GL.GL_TEXTURE_CUBE_MAP_POSITIVE_X + i

I still did not solve the color shift. Code can be found here: https://gist.github.com/1068462 or as sketch here: http://dl.dropbox.com/u/974773/CubeMap.zip

andres

Re: Cube Map + GLGraphics

1 year ago

Hi, you should set all the uniform variables in your shader, not only RefractionIndex, otherwise they will probably have some default value (most likely 0):

shader.start();
shader.setFloatUniform("RefractionIndex", 0.5);
shader.setVecUniform("SpecularColour", 0.0, 1.0, 0.0);
shader.setFloatUniform("Roughness", 1.0);
shader.setFloatUniform("SpecularIntensity", 1.0);
sphere(100);
shader.stop();

Also, set the uniforms after you activate the shader with the start() call.

Florian S..

Re: Cube Map + GLGraphics

1 year ago

I tested the shader with OpenGL Shader Builder without setting any of the parameters (or yes maybe default 0) and it looked way better. I still have only red and yellow tones even if the image is pure blue so I thought it has to be a mistake in the pixel/color formats.

andres

Re: Cube Map + GLGraphics

1 year ago

Yes, you are right, the problem is that the pixels array from PImage is in the ARGB format used by Processing. But OpenGL stores pixels as RGBA. GLTexture has a getBuffer() method that allows you to get the pixel array directly in OpenGL format:

tex = new GLTexture(this, "fu.jpg");
int[] pix = new int[tex.width * tex.height];
tex.getBuffer(pix, ARGB, GLConstants.TEX_BYTE);
// init cubemap textures
gl.glGenTextures(1, envMapTextureID, 0);
gl.glBindTexture(GL.GL_TEXTURE_CUBE_MAP, envMapTextureID[0]);
gl.glTexParameteri(GL.GL_TEXTURE_CUBE_MAP, GL.GL_TEXTURE_WRAP_S, GL.GL_CLAMP_TO_EDGE);
gl.glTexParameteri(GL.GL_TEXTURE_CUBE_MAP, GL.GL_TEXTURE_WRAP_T, GL.GL_CLAMP_TO_EDGE);
gl.glTexParameteri(GL.GL_TEXTURE_CUBE_MAP, GL.GL_TEXTURE_WRAP_R, GL.GL_CLAMP_TO_EDGE);
gl.glTexParameteri(GL.GL_TEXTURE_CUBE_MAP, GL.GL_TEXTURE_MIN_FILTER, GL.GL_NEAREST);
gl.glTexParameteri(GL.GL_TEXTURE_CUBE_MAP, GL.GL_TEXTURE_MAG_FILTER, GL.GL_NEAREST);
for (int i = 0; i < 6; i++) {
gl.glTexImage2D(GL.GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, GL.GL_RGBA, tex.width, tex.height, 0, GL.GL_RGBA, GL.GL_UNSIGNED_BYTE, IntBuffer.wrap(pix));
}

Florian S..

Re: Cube Map + GLGraphics

1 year ago

Thank you very much!

For anyone looking for the same I uploaded the code and the source files.

I use the fresnel shader from http://code.google.com/p/glslang-library/

marzzzel

Re: Cube Map + GLGraphics

2 months ago

I've been trying to get this sketch to work in processing 2, but its a drag. i know that the GLGraphics library from andres has been included in processing, thus the same stuff should be possible with processing 2, but i dont know how. did anybody do this before in processing 2 and can give us a raw sketch here please.

Top Reply

Response title

Attachments

New to this Portal?