Working Dof example shared

edumo_net

HI

I shared a DOF working demo made with shaders for depth and blur.

I hope you enjoy this

https://github.com/edumo/P5PostProcessing

edumo.net

amnon

Awesome, thanks for sharing! ;)

mschi

thanks :)

Chrisir

Does dof mean depth of field?

Chrisir

hamoid

Hi! Thanks for sharing but... is there a library missing?

I deleted all the imports and PDE X suggested to import remixlab.proscene.Scene; I did and now it complains That the constructor Scene(Dof, PGraphics) does not exist.

For which version of Processing / Proscene is the code meant?

Cheers

hamoid

A version without the Proscene dependency would be great :)

edumo_net

Hi

thanks for the replys,

yes is Depth of Field based on this ofx library https://github.com/neilmendoza/ofxPostProcessing

I'm a proscene fan :), the DofManager doesn't have any dependency, if have any question integrating this effect maybe we can help.

clankill3r

Can you post a screenshot?

Chrisir

thanks for your answer!

Chrisir

hamoid

I couldn't make it work with proscene, so I shared a version of your code without proscene at https://github.com/hamoid/P5PostProcessing :)

Also, by reusing a PShape sphere I get a much higher framerate than by calling sphere each time.

Thanks again for sharing it!

edumo_net

Nice improvements!

I hope to grow the examples

thanks!

mschi

thanks hamoid and edumo for sharing.

@hamoid i tried using your version as i do not need proscene. but i have a hard time controlling the focus. in the demo there doesn't seem to be a focus point at all. and i didn't manage to define one with the focus attribute.

in edumos version controlling the focus works perfectly.

hamoid

@mschi Do you mean aiming the camera? or the changing the focus depth? Moving the mouse horizontally should set the focus depth. I guess the camera can be aimed using the standard Processing camera functions...

mschi

forget what i wrote. it was my bad. i used it the wrong way. now everything is nice. sorry :)

clankill3r

Here is an image from the one hamoid have setted on github:

Instead of the shape I used: pg.line((i7763)%width, (i777)%height, (i7763)%height, (i777)%width);

But for some reason the lines really flicker, why is that?

nakednous

Hi,

we have ported this example into the upcoming proscene-3 version. The example is already packaged in the proscene-3.alpha2 pre-release. Don't forget to check also the new post-effects example which is nicer, and more powerful and general :)

Enjoy! and please don't forget that your feedback is more than welcome!

clankill3r

Does it work with lines now?

nakednous

I didn't know it didn't. However, I tested it without any flickering issues by using return createShape(LINE,0,0,60,60,60,60); instead of return createShape(BOX, 60);. The scene axes lines didn't flicker either (they're drawn by the Scene with pg().beginShape(PApplet.LINES);). Here's the modified code:

import remixlab.proscene.*;

PShader depthShader, dofShader;
PGraphics srcPGraphics, depthPGraphics, dofPGraphics;
Scene scene;
color cols[];
float posns[];
InteractiveModelFrame[] models;
int mode = 2;

void setup() {
  size(350, 350, P3D);
  colorMode(HSB, 255);
  cols = new color[100];
  posns = new float[300];
  for (int i = 0; i<100; i++) {
    posns[3*i]=random(-1000, 1000);
    posns[3*i+1]=random(-1000, 1000);
    posns[3*i+2]=random(-1000, 1000);
    cols[i]= color(random(255), random(255), random(255));
  }

  srcPGraphics = createGraphics(width, height, P3D);
  scene = new Scene(this, srcPGraphics);
  models = new InteractiveModelFrame[100];

  for (int i = 0; i < models.length; i++) {
    models[i] = new InteractiveModelFrame(scene, boxShape());
    models[i].translate(posns[3*i], posns[3*i+1], posns[3*i+2]);
    //models[i].shape().setFill(cols[i]);
  }

  scene.setRadius(1000);
  scene.showAll();

  depthShader = loadShader("depth.glsl");
  depthShader.set("maxDepth", scene.radius()*2);
  depthPGraphics = createGraphics(width, height, P3D);
  depthPGraphics.shader(depthShader);

  dofShader = loadShader("dof.glsl");
  dofShader.set("aspect", width / (float) height);
  dofShader.set("maxBlur", 0.015);  
  dofShader.set("aperture", 0.02);
  dofPGraphics = createGraphics(width, height, P3D);
  dofPGraphics.shader(dofShader);

  frameRate(1000);
}

void draw() {
  //same as: PGraphics pg = scene.pg();
  PGraphics pg = srcPGraphics;

  // 1. Draw into main buffer
  //for (int i = 0; i < models.length; i++)
     //models[i].shape().setFill(models[i].grabsInput(scene.motionAgent()) ? color(0,255,255) : cols[i]);
  pg.beginDraw();
  scene.beginDraw();
  pg.background(125);
  scene.drawModels();
  scene.endDraw();
  pg.endDraw();

  // 2. Draw into depth buffer
  depthPGraphics.beginDraw();
  depthPGraphics.background(0);
  scene.drawModels(depthPGraphics);
  depthPGraphics.endDraw();

  // 3. Draw destination buffer
  dofPGraphics.beginDraw();
  //dofPGraphics.background(0);
  dofShader.set("focus", map(mouseX, 0, width, -0.5f, 1.5f));
  dofShader.set("tDepth", depthPGraphics);    
  dofPGraphics.image(pg, 0, 0);
  dofPGraphics.endDraw();

  // display one of the 3 buffers
  if (mode==0)
    image(pg, 0, 0);
  else if (mode==1)
    image(depthPGraphics, 0, 0);
  else
    image(dofPGraphics, 0, 0);
}

PShape boxShape() {
  //return createShape(BOX, 60);
  return createShape(LINE,0,0,60,60,60,60);
}

void keyPressed() {
  if ( key=='0') mode = 0;
  if ( key=='1') mode = 1;
  if ( key=='2') mode = 2;
}

cpbotha

Thanks for the great example!

It would have been great if it had been possible to get both the color and the depth buffer after one render (as is usually the case with an FBO) -- here one has to render the same scene twice, once to get the depth, and once to get the colour.

Does anyone know if Processing will ever support multiple render targets, specifically for getting both colour and depth from a single render?