PGraphics rendering with texture & rendering with image().

Programming Questions

stphnmnslw

PGraphics rendering with texture & rendering with image().

in Programming Questions • 2 months ago

Hi I would like to render an offscreen texture with PGraphics on some vertex's:

PGraphics off;
void setup()
{
size( 640, 480 , P3D);
off = createGraphics( 500, 500, P3D );
}
void draw()
{
background( 0 );
off.beginDraw();
off.background( 0 );
off.fill( 255 );
off.rect( 0, 0, off.width, off.height );
off.endDraw();
PImage offCopy = off.get();
// rendering using beginShape gives a black screen
beginShape();
texture( offCopy );
vertex( 0, 0 );
vertex( width, 0 );
vertex( width, height );
vertex( 0, height );
endShape( CLOSE );
// rendering with image() gives white screen
// uncomment out this line to see the white rect
// image( off, 0,0, width, height );
}

I would expect the beginShape to render a white screen as the rect should be covering the entire area. It is only rendering the black background and I can't get anything to render inside the visible area. If I render using image()

I get a white screen as you would expect.

I thought image would be doing something similar to the beginSHape/ endSHape block? I really don't know where I am going wrong and would love some insight.

Stephen

Replies(3)

amnon.owed

Re: PGraphics rendering with texture & rendering with image().

2 months ago

Classic mistake. You want to use a texture but you don't supply texture coordinates.

You can solve this problem by looking at either:

The reference: http://processing.org/reference/texture_.html
The examples that come with Processing: Topics > Textures

Then you will see yourself that there is a solution to your problem: texture coordinates.

I think at some point I will file a GitHub issue/pull request with Processing to add a warning to the program and Processing-Web to make the reference more explicit with regard to this topic. Since this gets asked too much.

On another note, PGraphics extends PImage so your line 21 is unneeded. You can just use a PGraphics wherever you can use a PImage.

stphnmnslw

Re: PGraphics rendering with texture & rendering with image().

2 months ago

My bad!! , i have tried the same thing out with the Texture Quad example and it works perfectly thanks amnon!

BTW I really love your GLSL tutorial from creative applications it was a massive help to me. I really want to tale advantage of Processing's new architecture and there is a lack of good GLSL documentation in relation to processing ( in terms of examples ) andreas's tutorial is really great. I managed to get a kaliedascope shader working.

/**
* Texture Quad.
*
* Load an image and draw it onto a quad. The texture() function sets
* the texture image. The vertex() function maps the image to the geometry.
*/
// The next line is needed if running in JavaScript Mode with Processing.js
/* @pjs preload="berlin-1.jpg"; */
PImage img;
PGraphics off;
void setup() {
size(640, 360, P3D);
img = loadImage("berlin-1.jpg");
noStroke();
off = createGraphics( 500, 500, P3D );
}
void draw() {
background(0);
off.beginDraw();
off.background( 0 );
off.fill( 255 );
off.rect( random( off.width ), random( off.height ), off.width, off.height );
off.endDraw();
translate(width / 2, height / 2);
rotateY(map(mouseX, 0, width, -PI, PI));
rotateZ(PI/6);
beginShape();
texture( off );
vertex(-100, -100, 0, 0, 0);
vertex(100, -100, 0, img.width, 0);
vertex(100, 100, 0, img.width, img.height);
vertex(-100, 100, 0, 0, img.height);
endShape();
}

notice how in this example the rect is set up using negative values:

vertex( -100 , -100 )

is this why I couldn't seem to draw anything in the right area even when I updated the UV co-ordinates from my previous example ( i did suspect UV was the issue but adding them didn't make a difference ).

Cheers again

amnon.owed

Re: PGraphics rendering with texture & rendering with image().

2 months ago

The negative values are positions. It is often done like this, so the object is centered at the drawing position (otherwise the drawing position would be the top left). Positions are completely separate from texture coordinates. The problem you are experiencing is probably because you are using off as the texture but are using texture coordinates based on the img dimensions. That's why I state in my tutorial that I prefer working with NORMAL texture coordinates, because then you will never have this problem when you change to (differently sized) textures. Good to hear the tutorial was useful.

Top Reply