Fast cropping of a GLTexture

Core Library Questions

Sergio

in Core Library Questions • 2 years ago

Hi all,

Using GLGraphics, I want to crop a GLTexture (src) and create another GLTexture (dest) as a result. One way of doing this is:

GLTexture dest = new GLTexture (this, dx, dy);

src.updateTexture();

dest.putPixelsIntoTexture (src, ox, oy, dx, dy);

Although this method works, the updateTexture() method is necessary and this method copies the texture data to the pixels property, trasferring data from GPU memory to CPU memory, which is a slow operation. All GLTexture cropping solutions I know are slow.

The copy() method in the GLTexture class doesn't allow to crop.

Is there any (fast) way of cropping a GLTexture without GPU-CPU memory transfer? Maybe this can be done with a GLSL shader but, being a complete dummy regarding GLSL programming, I can't figure out how to do it. Maybe a shader isn't necessary at all... any ideas?

Thank you very much in advance!!!!

Replies(6)

andres

Re: Fast cropping of a GLTexture

2 years ago

You can use a GLTextureOffScreen surface to render only the cropped area of the source texture:

import processing.opengl.*;
import codeanticode.glgraphics.*;
GLTexture src;
GLTexture dest;
GLGraphicsOffScreen offscreen;
void setup() {
size(400, 400, GLConstants.GLGRAPHICS);
src = new GLTexture(this, "image.jpg");
offscreen = new GLGraphicsOffScreen(this, 400, 400);
}
void draw() {
crop(50, 50, 100, 100);
image(dest, 0, 0, width, height);
}
void crop(int x, int y, int w, int h) {
offscreen.beginDraw();
offscreen.beginShape(QUADS);
offscreen.texture(src);
offscreen.vertex(0, 0, x, y);
offscreen.vertex(width, 0, x + w, y);
offscreen.vertex(width, height, x + w, y + h);
offscreen.vertex(0, height, x, y + h);
offscreen.endShape();
offscreen.endDraw();
dest = offscreen.getTexture();
}

andres

Re: Fast cropping of a GLTexture

2 years ago

An equivalent sketch, but using a GLTextureFilter for cropping could be this one

import processing.opengl.*;
import codeanticode.glgraphics.*;
GLTexture src;
GLTexture dest;
GLTextureFilter crop;
void setup() {
size(400, 400, GLConstants.GLGRAPHICS);
src = new GLTexture(this, "beach.jpg");
dest = new GLTexture(this, 400, 400);
crop = new GLTextureFilter(this, "Crop.xml");
}
void draw() {
crop.setParameterValue("tlCorner", new float[] {50, 50});
crop.setParameterValue("brCorner", new float[] {150, 150});
crop.apply(src, dest);
image(dest, 0, 0, width, height);
}

which requires these additional files defining the texture filter:

Crop.xml:

<filter name="Crop">
<description>Crops the input texture</description>
<vertex>Vertex.glsl</vertex>
<fragment>Crop.glsl</fragment>
<textures input="1" output="1">
<intexture type="sampler2d" name="source" offset="offset" label="Source image">0</intexture>
</textures>
<parameters>
<parameter type="vec2" name="tlCorner" label="Top left corner">0 0</parameter>
<parameter type="vec2" name="brCorner" label="Bottom right corner">256 256</parameter>
</parameters>
</filter>

Crop.glsl:

uniform sampler2D source;
uniform vec2 offset;
uniform vec2 tlCorner;
uniform vec2 brCorner;
void main(void) {
// The s coordinate of the incoming pixel. We map to the
// range of the cropped region.
float s = gl_TexCoord[0].s;
float srange = (brCorner.x - tlCorner.x) * offset.s;
float s0 = tlCorner.x * offset.s;
float sc = srange * s + s0;
// Same for the t coordinate.
float t = gl_TexCoord[0].t;
float trange = (brCorner.y - tlCorner.y) * offset.t;
float t0 = tlCorner.y * offset.t;
float tc = trange * t + t0;
// We sample the source texture with texture coordinates
// contained int the crop area.
gl_FragColor = texture2D(source, vec2(sc, tc));
}

Vertex.glsl:

// Minimal vertex shader for texture operations
void main() {
gl_TexCoord[0] = gl_MultiTexCoord0;
gl_Position = ftransform();
}

Sergio

Re: Fast cropping of a GLTexture

2 years ago

Andres, Thank you very much for your comprehensive answer!

I didn't think about using the effect of mapping to crop a GLTexture! Neat! And the GLSL solution works like a charm, too.

As written in your answers, both examples produce the same result over a source image (I've used your "beach.jpg" in the GLGraphics examples to test them).

For a reason I don't understand, the two methods do not produce the same result if the destination object has the same dimensions as the cropping dimensions, that is:

- In the first method, changing the creation in setup to: offscreen = new GLGraphicsOffScreen(this, 100, 100);

- In the second method, changing the creation in setup to: dest = new GLTexture(this, 100, 100);

The second method works as expected, but the first one makes the cropped area bigger than expected. I can use the second method, but I wonder the reason of the behaviour of the first method. Shouldn't them produce the same result?

On the other hand, Is it safe to assume that both methods should have the same aprox. execution speed?

Thank you again Andres, for your answers and your super useful libs!

andres

Re: Fast cropping of a GLTexture

2 years ago

Hi, the dimensions of the offscreen surface should be the same as the crop rectangle:

import processing.opengl.*;
import codeanticode.glgraphics.*;
GLTexture src;
GLTexture dest;
GLGraphicsOffScreen offscreen;
void setup() {
size(400, 400, GLConstants.GLGRAPHICS);
src = new GLTexture(this, "beach.jpg");
offscreen = new GLGraphicsOffScreen(this, 100, 100);
}
void draw() {
crop(50, 50, 100, 100);
image(dest, 0, 0, width, height);
}
void crop(int x, int y, int w, int h) {
offscreen.beginDraw();
offscreen.noStroke();
offscreen.beginShape(QUADS);
offscreen.texture(src);
offscreen.vertex(0, 0, x, y);
offscreen.vertex(offscreen.width, 0, x + w, y);
offscreen.vertex(offscreen.width, offscreen.height, x + w, y + h);
offscreen.vertex(0, offscreen.height, x, y + h);
offscreen.endShape();
offscreen.endDraw();
dest = offscreen.getTexture();
}

andres

Re: Fast cropping of a GLTexture

2 years ago

The performance of both methods should be roughly the same, unless the crop region is very small compared to the source texture, in which case I think the second method becomes wasteful, because the crop filter samples the entire source texture even though it only draws a small portion of it.

In any case, I was planning to clean up the interface of the GLTextureFilter class, and during the process I added a crop method to it that can be used for any kind of filter. Check the CroppedFilter example available in this test package of the lib.

Sergio

Re: Fast cropping of a GLTexture

2 years ago

Now I see !... I didn't realize the impact of the dimension relationship in the vertex definition... thanks Andres to make my understanding more solid.

And the added functionality in the GLGraphics is going to be very useful !

Thank you for your ongoing work on the libs and your help !

Top Reply