High Resolution Export P3D

sephm

Hi guys! Has anyone successfully exported a high resolution transparent png image from a sketch using a P3D render mode? This is possible before using P5 v1.5.1, but it seems there are some errors working it in P5 v2.

Any help will be greatly appreciated. Thanks!

sephm

Anyone?

sephm

Has anyone managed to do this already?

PhiLho

Note that P3D mode in 1.5.1 was a Java 2D mode with "simulated" 3D, so transparency and off-line graphics buffers worked the same.

In v.2, P3D (and even P2D) are OpenGL mode, so the way to handle transparency and off-line images changes a lot. I am not an OpenGL export, so I leave somebody else to give hints.

Perhaps you can show a very simple sketch illustrating your issue, so somebody can show how to do it properly?

sephm

Hi PhiLho! Actually, it's just the same code as the last time here: http://forum.processing.org/two/discussion/3155/opengl-error-1282-at-top-enddraw-invalid-operation . I thought that since nobody answered my last post about the OpenGL error, I might as well asked if someone managed to export a high resolution png image in P3D using P5 v2.1.1, which was the original reason actually why I managed to arrived at that problem.

But here's my initial code in exporting a high res png image using P3D:

boolean record = false; int scalePG = 3;

void setup()
{
  size(600, 600, P3D);
  smooth();
}
void draw()
{
  if (!record)
  {
    background(255);
  }
  translate(width/2, height/2);
  fill(#ff0000);
  rotateX(60);
  rotateZ(60);
  box(100);
}
void keyPressed() {
  if (keyCode == ENTER) {
    PGraphics PGpx = createGraphics(width * scalePG, height * scalePG, P3D);
    record = true;
    beginRecord(PGpx);
    PGpx.scale(scalePG);
    draw();
    endRecord();
    record = false;
    PGpx.save("myImage.jpg");
  }
}

sephm

Up!

sephm

Up!

sephm

Up! For the last time.

Also, can anyone please test the code below in your current setup, and please tell me if it work or not? Thank you very much!

void setup()
{
  size(600, 600, P3D);
  smooth();
}
void draw()
{
  if (!record)
  {
    background(255);
  }
  translate(width/2, height/2);
  fill(#ff0000);
  rotateX(60);
  rotateZ(60);
  box(100);
}
void keyPressed() {
  if (keyCode == ENTER) {
    PGraphics PGpx = createGraphics(width * scalePG, height * scalePG, P3D);
    record = true;
    beginRecord(PGpx);
    PGpx.scale(scalePG);
    draw();
    endRecord();
    record = false;
    PGpx.save("myImage.jpg");
  }
}

GoToLoop

64-bit Lubuntu 13.04, Linux 3.8.0-35, Processing 2.0.2, 64-bit OpenJDK 7.51, Intel Q6600, GeForce 9800GT, VDPAU 331.20 driver.

After declaring some variables, your code above run & saved successfully!
I've also tweaked a simplified version:

// forum.processing.org/two/discussion/3227/high-resolution-export-p3d

size(600, 600, P3D);
noLoop();

final PGraphics pg = createGraphics(width, height, P3D);
beginRecord(pg);

smooth(8);
background(-1);

fill(#FF0000);
stroke(0);
strokeWeight(2);

translate(width>>1, height>>1);
rotateX(60);
rotateZ(60);

box(width>>2);

endRecord();
pg.save(dataPath("myImage.jpg"));
pg.save(dataPath("myImage.png"));

Poersch

Please don't bump your thread multiple times a day.

• You have to save the image before endRecord() (endRecord() will dispose the canvas).
• You have to clear the canvas (make it transparent) right after beginRecord(), otherwise you'll get a grey background.
• You have to save the canvas as PNG, as JPGs can't have alpha channels.

I corrected your code and commented the changes:

boolean record;
int scalePG = 2;

void setup() {
    size(600, 600, P3D);
    smooth();
}

void draw() {
    if(!record)
        background(#ffffff);
    translate(width/2, height/2);
    fill(#ff0000);
    rotateX(60);
    rotateZ(60);
    box(100);
}
void keyPressed() {
    if(keyCode == ENTER) {
        PGraphics PGpx = createGraphics(width * scalePG, height * scalePG, P3D);
        record = true;
        beginRecord(PGpx);
        PGpx.background(#ffffff, 0); // Clear the offscreen canvas (make it transparent)
        PGpx.scale(scalePG);
        draw();
        PGpx.save("myImage.png"); // Save image as PNG (JPGs can't have an alpha channel) and save it before endRecord()
        endRecord();
        record = false;
    }
}

Oh, and please include variable definitions (the first two lines), otherwise your code isn't even compileable.

sephm

@Poersch First of all, my apologies for bumping my thread up several times back. It seems at first nobody knows how to fix the issue.

Before in 1.5.1, I used to think that PGraphics.save should be, and will always be place after endRecord(). I mean just like any other general recording methodology, stop or an end is needed before we can save anything. :) But thank you very much for the solution. It was definitely the answer I was looking for. And yeah, I forgot to copy and paste some of the variables in my code above. Sleepy I guess. :)

@GoToLoop Thank you also for testing out the code. Appreciate it.

GoToLoop

... be placed after endRecord(). I mean just like any other general recording methodology,...

Funny in my version w/ P 2.0.2, I was able to place save("") after endRecord() w/ no problems at all! @-)

sephm

@GoToLoop Sorry. What I'm trying to imply is that before, I thought that save() comes after endRecord(). I was just basing it on the same basic process of recording, in general. Like recording an audio or video using a camera or recorder, that before you could save it, you have to stop or end the recording first. :)

Poersch

@GoToLoop, @sephm: They seem to have changed the endRecord() code - maybe to reduce the chance of memory leaks?

sephm

@Poersch Maybe it has something to do with P3D being handled with OpenGL? Just an idea.

GoToLoop

P2D & P3D are OpenGL in Processing 2+ versions. While in Processing 1+, they weren't!

Poersch

@sephm: P2D and P3D are based on OpenGL since Processing 2.0, but as GoToLoop stated, saving the record-canvas after calling endRecord() works in 2.0.2, so OpenGL alone can't be the reason.

Raffish

Hello!

I have implemented the same method in my code. The resolution works fine, but my drawing appears in the bottom left corner and it is really small. Any clue about that?

cheers, R

chrisb78

Same issue as @Raffish here. Only now saw this thread - posted about the problem in the following link (including pictures): https://forum.processing.org/two/discussion/17162/high-resolution-output-for-p3d