Texture3D usable in Fragment Shader

Hello all,

I’m fairly new on openframework / opengl world and I’m looking for some guidance on a problem I’m facing.

I would like to build a tool that, with some pictures / video of a timelapse, could perform some operations to render an image or a video like this :

What I was thinking is basically, get all images as a 3DTexture, use some fragment shader (and like that it could not only do simple stripe but more complex transformation, even maybe having a “bonzomatic” style editor ? ) and then just show the fragment shader result … that’s it :smiley:

I currently understand how to load a image as a texture, pass it to my fragment shader and perfom some operation on it.

void ofApp::setup(){
	ofLoadImage(texture[0], "01.JPG"); // ofTexture texture[3];
	ofLoadImage(texture[1], "02.JPG");
	ofLoadImage(texture[2], "03.JPG");
	shader.load("shader.vert", "shader.frag");
}

void ofApp::update(){
	float iTime = ofGetElapsedTimef();
	shader.begin();
	shader.setUniform1f("iTime", iTime);
	shader.setUniformTexture("tex", texture[0], 0);
	shader.end();
}
/// shader.frag
#version 150

out vec4 outputColor;
uniform float iTime;
uniform sampler2DRect tex;

void main() {
    float windowWidth = 1024.0;
    float windowHeight = 768.0;
    float x = gl_FragCoord.x / windowWidth;
    float y =  gl_FragCoord.y / windowHeight;
    vec3 t = texture(tex,vec2(gl_FragCoord.x,windowHeight-gl_FragCoord.y)*5.).rgb;
    t *=sin(iTime)*.5+.5;
    outputColor = vec4(t,1.);
}

But now, I would like to understand how to use the GL_TEXTURE_3D / sampler3D and more exactly how to generate this 3D texture and pass it to the fragment shader. I had some look around the internet and books, but couldn’t find something that help me.

Thanks a lot !

Hi, try out ofxVolumetrics. OF does not support 3D textures by default, so a lot of tweaing needs to be done that it is already done in ofxVolumetircs.
Although I did not write ofxVolumetrics it seems like my fork is one of the most updated


you can try this other fork as well

hope it helps

Thanks a lot I’ll try with ofxVolumetrics :slight_smile:

Just for curiosity, do you have any resource also to advise about using this GL_TEXTURE_3D in OpenGL in general (Blog / Code to study) ?

Hi. Not really, sorry. But let me know if you have doubts or need help.

So thanks @roymacdonald for the link, I could have some lookup. (I had to checkout your change as I was quite lost with the templating part, so I’m using the “official” version )

I took the ofxVolumetrics addon and read the code to understand. I’ve seen that the ofxVolumetrics internally use ofxTexture3D and somehow manage to inject it within a madeup shader fragment.

I tried to mimic what is written in the ofxVolumetrics.cpp and good news is I got go one step forward, but bad news is it’s not exactly what I’m expecting.

So I try to display the first image ( 1 out of 3 ) via the fragment shader but looks like it doesn’t really see the RGBA as one pixel, giving this interlace weird effect.

I try to look some GL_* option or instruction, but couldn’t find a proper solution.

Here is my code, maybe I’m missing something that someone could spot :slight_smile:

Thanks a lot !

Hi,

I dont even remember why I templated it :stuck_out_tongue:

did you try just using ofxVolumetrics example?

That kind of visual artifact usually happens when you are using the incorrect stride -how many bytes each pixel uses-. There’s not much to do about it in the shader so I would guess that it has to do with how you are allocating the memory in the texture.

Oh my friend thanks for the hint, that helped a lot !

I actually saw that there was multiple way to load the data on a texture3d, and one takes ofPixels& and determine automatically the format to apply.

So by changing the loop to loadData to :

	for (int z = 0; z < volDepth; z++) {
		imageSequence.loadFrame(z);
		tex3d.loadData(imageSequence.getPixels(),1,0,0,z);
	
	}
// We don't event need the intermediate volumeData array

It actually load correctly the images as a texture3d and then it can be passed to the fragment shader and correctly interpreted !

Quick view : https://video.twimg.com/ext_tw_video/1270100564114845698/pu/vid/1280x720/FpdHClxJNZOzV32c.mp4

Thanks a lot ! I owe you a beer :stuck_out_tongue:

1 Like

Superb. Yes, that addon is quite nice.
The video perfectly japanese duality (which I love) where you have very peaceful things(as the images) and absolutely crazy ones (the music). :smiley:

No worries.

1 Like