Advanced OpenGL Example, Peasycam, ControlP5

Hi all!

I'm not quite sure how to frame this question- I'm a processing noob, but as usual, I've jumped in at the deep end, so I'm not sure whether the issue is something basic I'm failing to understand (quite likely).

I created a class to implement a VBO-based grid, taking the Advanced OpenGL example as a starting-point.

Now, I want to render the geometry in the main draw thread. I want to use Peasy Cam to be able to rotate/move the grid, and I want to be able to overlay ControlP5 items on top.

The issue is that the geometry created by an instance of my new class appears on top of the controls. Also, it rotates when I change the camera. I want it to always appear in front of the 3D geometry, and to not move when the camera is moved.

I'm attaching a zip of the work as it stands. I'd be really really grateful if someone could take a look at it, and if possible, give me some tips on where I'm going wrong. I'm sure it's something pretty simple.

Here's the file on Dropbox.




  • I think the issue is to do with rendering my VBO into the right context, but I'm not sure how to do that.


  • edited May 2017

    Im out of time for debug:

    Just a note: i'm on windows, and you scetch looks like this:

    alt text


  • Hi @ nabr!

    Yeah, I have to work on the initial positions of stuff, but you can see even there that the 3D geometry is appearing ontop of the control, and that it's part of the same 3D world, whereas I want to controls to be a 2D overlay on top of everything else.


  • edited May 2017



    new ControlP5(this) means the Applet it self, you should draw the controls on an other Layer

    test wise, to show what Control(this) means:

     cp5 = new ControlP5(new VBO_Test(){
          PApplet a (){
            this.main(new String[]{"VBO_Test"});
              return this; 
          }.a()); /*1000 windows here we go*/

    look at text("ABC",200,200) this is done correctly.

  • Or do yoo want the controls in 3D ?

  • Great, thank you once again!

    I don't want the controls in 3D. It looks kind of cool, and I can imagine other scenarios where having the controls in 3D might be good, mind you.


  • edited May 2017

    For creating HUD controls in a peasycam sketch you can also use peasycam's beginHUD() endHUD(). For compositing any number of 2D fixed layers with 3D (without peasycam) embed different PGraphics in a 2D sketch.

    For examples, see:

  • I had to use that also in my own library. Here is the code you need if you don't want to use PeasyCam as library (the code is based on the implementation of peasycam):

    In setup() you have to store the current projection matrix:

    // for HUD restore
    PMatrix3D originalMatrix;
    void setup()
      size(500, 500, P3D);
      // set matrix for HUD restore
      if (g.is3D())
        originalMatrix = getMatrix((PMatrix3D) null);
        originalMatrix = new PMatrix3D();

    And these are the two HUD methods:

    void beginHUD()
      // Load the identity matrix.
      // Apply the original Processing transformation matrix.
    void endHUD()

    I have uploaded you an example sketch with the code:

  • Very nice, @cansik. Pushing the original Processing default sketch matrix into the top of the stack and then popping back out into the cam matrix is so much easier than trying to back out of the stack and then rebuild it.

  • @cansik

    So I see one could use your code independently from peasycam. I have a question. Why do you do the checks on setup? I was looking at getMatrix(null) and this will return null, so originalMatrix is null in setup?

    Also, could you explain why to have the conditional g.is3D(), line 9 in your code?



  • edited June 2017

    @kfrajer what i found the fastes method to get the Matrix to Identity is to use .reset() and the just stack the function calls. And do all the Matrix math on the GPU. basically you only need a float[] array. Don't know feels like a nice hack.

    SELFLESS PROMOTION of my github repro

    What you need to do now after you have rotation working - get 3 additional Matrices View, Model, Projection and then you have your own Peasycam :)

    Easy right? Make a pull.

  • @kfrajer

    The original matrix should not be null. It is null if we are not in a P3D context. That's also the reason why I do the check. Here are the values of my matrix:

     001.0000  000.0000  000.0000 -250.0000
     000.0000  001.0000  000.0000 -250.0000
     000.0000  000.0000  001.0000 -433.0127
     000.0000  000.0000  000.0000  001.0000

    I do the check because the could should work independent from the current context. So if you are sure to just use P3D in this sketch, you can skip this step.

    You are looking at the file called But the implementation for the 3D part should be in the

Sign In or Register to comment.