Working Dof example shared

edited May 2018 in GLSL / Shaders


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

I hope you enjoy this



  • Awesome, thanks for sharing! ;)

  • thanks :)

  • Does dof mean depth of field?


  • 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?


  • A version without the Proscene dependency would be great :)

  • Hi

    thanks for the replys,

    yes is Depth of Field based on this ofx library

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

  • Can you post a screenshot?

  • thanks for your answer!


  • I couldn't make it work with proscene, so I shared a version of your code without proscene at :)

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

    Thanks again for sharing it!

  • Nice improvements!

    I hope to grow the examples


  • edited November 2014

    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.

  • @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...

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

  • Here is an image from the one hamoid have setted on github: Screen Shot 2014-12-12 at 6.21.03 AM

    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?

  • edited February 2015


    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!

  • Does it work with lines now?

  • 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]);
      depthShader = loadShader("depth.glsl");
      depthShader.set("maxDepth", scene.radius()*2);
      depthPGraphics = createGraphics(width, height, P3D);
      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);
    void draw() {
      //same as: PGraphics 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]);
      // 2. Draw into depth buffer
      // 3. Draw destination buffer
      dofShader.set("focus", map(mouseX, 0, width, -0.5f, 1.5f));
      dofShader.set("tDepth", depthPGraphics);    
      dofPGraphics.image(pg, 0, 0);
      // display one of the 3 buffers
      if (mode==0)
        image(pg, 0, 0);
      else if (mode==1)
        image(depthPGraphics, 0, 0);
        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;
  • 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?

Sign In or Register to comment.