Create transparent png from P3D render

General Discussion Other

cannibalf..

Create transparent png from P3D render

in General Discussion • Other • 1 year ago

Hi all,

I've set up a 3D model and now I would like to export images from the model in transparent png form (that is the background to be transparent). I have read many blogs and posts here and there but I can't figure out how to make this work.

I've tried Amnon's approach ( http://amnonp5.wordpress.com/2012/01/28/25-life-saving-tips-for-processing/) but it apparently doesn't work for P3D. I get an error saying “isRecording(), or this particular variation of it, is not available with this renderer.” This would have been perfect as it wouldn't mess with the code in draw.

Now I am trying to figure out how to create the PGraphics object and draw to it (I think this is what I'm supposed to do) in the draw loop which still keeping everything working with PeasyCam. I'm just not sure how I need to do this.

I have posted my entire sketch plus two data files you need to work with it here. There is a ".dat" file which you are asked to load first. And then there is a ".out" file that you need to load after.

Any help is appreciated.

Regards,
Ali

Replies(7)

amnon.owed

Re: Create transparent png from P3D render

1 year ago

You always get that message, it's a warning, but the technique still works, even with P3D.

The problem with your sketch is that the hires PGraphics doesn't have the same cameraMatrix as the main sketch, because peasyCam only affects the main sketch. So you are not seeing the model in the saved screenshot. The solution is to apply the same matrix operations.

Use the following save function instead:

void saveHiRes(int scaleFactor, String fileName) {
PGraphics hires = createGraphics(width, height, P3D);
beginRecord(hires);
hires.setMatrix(g.getMatrix()); // setMatrix from main PGraphics
hires.scale(-1, 1, 1); // apply same transformations to hires (scale)
hires.rotateZ(radians(180)); // apply same transformations to hires (rotate)
saveHires = true; // toggle save boolean ON
draw();
saveHires = false; // toggle save boolean OFF
endRecord();
hires.save(fileName);
}

And also add a global boolean plus change the first background line of draw() to the following:

boolean saveHires; // boolean to toggle background
void draw() {
if (!saveHires) { background(255, 255, 255); } // turn background off for hires save
// rest of draw()
}

Of course this is all a bit hacky, but it works and it's faster than rewriting your code for proper use of PGraphics. Also note that controlP5 does not play nicely with the P3D renderer, but this is a separate problem. For the hires P3D save you might wanna toggle those (aka the controlP5 draw) off as well.

Oh, and finally. Make sure to use a filename that ends with .png to ensure it's saved with transparency.

cannibalf..

Re: Re: Create transparent png from P3D render

1 year ago

Thanks Amnon. Works great. As you've seen with my current sketch, it is itself very hacky so one more "hacky bit" won't hurt it that much. I'll have to really spend time with Java and Processing since I think you can do some powerful things with it given what I've been able to accomplish without much background (of course having a forum to ask people and have them solve your problems for you

has probably something to do with this as well).

Thanks again for your help. I'm sure I'll have more questions soon!

Regards,
Ali

cannibalf..

Re: Create transparent png from P3D render

1 year ago

Hi Amnon,

I have a related question. I was trying to also enable plotting to PDF in this system. I followed the example on the website and placed the following code at the top of my draw() code:

if (savePDF) {
String savePath = selectOutput();
if (savePath == null) {
savePDF = false;
} else {
beginRaw(PDF, savePath);
}
}

and this at the end (actually before I draw the cp5 controller):

if (savePDF) {
endRaw();
savePDF = false;
}

and I enabled the saving operation by pressing button 'p' like this:

} else if (key == 'p') {
savePDF = true;
}

Now everything works okay in that I get a pdf file that has the plot in it. However, the plot shows up without the surface fills, like the image I'll post after this message (I can't post everything together).

What am I doing wrong? It is curious since the lines and the cap elements seem to plot fine. It is only the triangulated surfaces which seem to disappear. Any thoughts?

I really appreciate your help.
Ali

cannibalf..

Re: Create transparent png from P3D render

1 year ago

Here is how the PDF plot looks like:

amnon.owed

Re: Create transparent png from P3D render

1 year ago

Seems like a depth/order problem. When you look at a 3D scene you see the closest stuff, while the stuff in the back is perhaps blocked by the stuff in the front. However when you write shapes to a PDF the location of the shape in 3D space is no longer relevant (at least not to the PDF), but the order in which they are drawn becomes relevant. So the things in the back should be drawn first and the things in the front should be drawn last. At least that's my theory.

Writing to PDF is a hassle, for example soon you'll be noticing the white lines and opening PDF's with thousands of triangles will cripple your computer. In my opinion, just rendering to a high resolution image is in most cases the easier solution.

One thing you could try is the following (although I doubt it will work with the PDF renderer)...

hint(ENABLE_DEPTH_SORT)

It's better to start a new thread for new questions. That way information will be easier to find for others later.

cannibalf..

Re: Re: Create transparent png from P3D render

1 year ago

I think I understand the issue. I tried your suggestion but the output was just outline of the model. I was hoping maybe SVG could be used for this but it seems that will not work with 3D scenes. I wanted to have vector files so that I could do some manipulation in illustrator. But if it doesn't work then I'll have to work with the saved PNGs.

I understand your point about the threads. Should I move this part of a the question to a new thread now or just leave it?

amnon.owed

Re: Re: Create transparent png from P3D render

1 year ago

You can leave this one, but for other questions, feel free to open a new thread.

Top Reply