My solution was  GLGraphicsOffScreen, now I have two layers with alpha

You can implement a basic UI using proscene directly, please refer to the CameraInterpolation and MouseGrabbers examples, where some simple "buttons" were implemented. However, I played a bit with your source example and make the following work with proscene (main differences are commented):

2. /**
3.  * ControlP5 with Proscene support
4.  */
5.  
6. import remixlab.proscene.*;
7. import controlP5.*;
8. import processing.opengl.*;
9. 
   
10. Scene scene;
11. ControlP5 controlP5;
12. PMatrix3D currCameraMatrix;
13. PGraphics3D g3; 
14. 
    
15. int buttonValue = 1;
16. 
    
17. void setup() {
18.   size(400,400,OPENGL);
19.   scene = new Scene(this);
20.   g3 = (PGraphics3D)g;
21.   controlP5 = new ControlP5(this);
22.   controlP5.addButton("button",10,100,60,80,20).setId(1);
23.   controlP5.addButton("buttonValue",4,100,90,80,20).setId(2);
24.   controlP5.setAutoDraw(false);
25. }
26. void draw() {
27.   background(0);
28.   fill(255,0,0);
29.   box(30);
30.   pushMatrix();
31.   translate(0,0,20);
32.   fill(0,0,255);
33.   box(5);
34.   popMatrix();
35.   
36.   gui();
37. }
38. 
    
39. void gui() {
40.   // Disable depth test to draw 2d on top
41.   hint(DISABLE_DEPTH_TEST);
42.   currCameraMatrix = new PMatrix3D(g3.modelview);
43.    // Since proscene handles the projection in a slightly different manner
44.   // we set the camera to Processing default values before calling camera():
45.   float cameraZ = ((height/2.0) / tan(PI*60.0/360.0));
46.   perspective(PI/3.0, scene.camera().aspectRatio(), cameraZ/10.0, cameraZ*10.0);
47.   camera();
48.   controlP5.draw();
49.   g3.camera = currCameraMatrix;
50.   // Re-enble depth test
51.   hint(ENABLE_DEPTH_TEST);
52. }
53. 
    
54. void controlEvent(ControlEvent theEvent) {
55.   println(theEvent.controller().id());
56. }
57. 
    
58. void button(float theValue) {
59.   println("a button event. "+theValue);
60. }

Since this 2d drawing technique doesn't seem to produce flickering I will study it for inclusion in a future proscene release and solve this issue. Actually, this could also avoid the need to handle the background in proscene (line 28 in the code above). Thanks for posting it 

Cheers,

Jean Pierre

Jean Pierre

scene.beginScreenDrawing();

translate(scene.xCoord(x), scene.yCoord(y), scene.zCoord());

// bla bla..

makes my stuff drawn in 2D move far/near with camera... 

is that correct or am I doing something wrong?

I was following ScreenDrawing example.

already read http://code.google.com/p/proscene/issues/detail?id=1. has to do with that?

thx JP !

dx

   

hello All,

as far as I can see (perhaps I'm not getting this right) the solution provided by Jean Pierre does not work when you tring to use interactive frames and drag objects around. The camera works but the interactive frames goes back to the "originalMatrix" (basically at time 0) detaching from the objects.

In fact if you try to select the boxes it won't to anything but if you over in the left corner (original position of the boxes) the frames will display in green (not really easy to see)

I attach there the code although which is literally indentical to the one given by Jean Pierre apart from the fact that there is a box class to draw multiple boxes (taken from the examples)

1. /**
2.  * ControlP5 with Proscene support
3.  */
4. import remixlab.proscene.*;
5. import controlP5.*;
6. import processing.opengl.*;
7. Scene scene;
8. ControlP5 controlP5;
9. PMatrix3D currCameraMatrix;
10. PGraphics buffer;
11. PGraphics3D g3;
12. int buttonValue = 1;
13. Box [] boxes;
14. public PMatrix3D originalMatrix;
15. void setup()
16. {
17.   size(800, 800, OPENGL);
18.   smooth();
19.   stroke(0);
20.   strokeWeight(2);
21.   scene = new Scene(this);
22.   scene.setRadius(150);
23.   scene.showAll();
24.   scene.setGridIsDrawn(false);
25.   scene.setAxisIsDrawn(false);
26.   scene.setShortcut('f', Scene.KeyboardAction.DRAW_FRAME_SELECTION_HINT);
27.   g3 = (PGraphics3D)g;
28.   boxes = new Box[5];
29.   for (int i = 0; i < boxes.length; i++)
30.   {
31.     boxes[i] = new Box(i);
32.   }
33.   controlP5 = new ControlP5(this);
34.   controlP5.addButton("button", 10, 100, 60, 80, 20).setId(1);
35.   controlP5.addButton("buttonValue", 4, 100, 90, 80, 20).setId(2);
36.   controlP5.setAutoDraw(false);
37.   //originalMatrix = getMatrix((PMatrix3D)null);
38. }
39. void draw()
40. {
41.   background(255);
42.   stroke(0);
43.   strokeWeight(2);
44.  
45.   for (int i = 0; i < boxes.length; i++)
46.   {
47.     boxes[i].draw();
48.   }
49.   gui();
50. }
51. void gui()
52. {
53.   //currCameraMatrix=scene.renderer().camera;
54.   //currCameraMatrix=scene.getModelViewMatrix(currCameraMatrix);
55.   currCameraMatrix = new PMatrix3D(g3.camera);
56.   //Disable depth test to draw 2d on top
57.   hint(DISABLE_DEPTH_TEST);
58.   //Since proscene handles the projection in a slightly different manner
59.   //we set the camera to Processing default values before calling camera():
60.   float cameraZ = ((height/2.0) / tan(PI*60.0/360.0));
61.   perspective(PI/3.0, scene.camera().aspectRatio(), cameraZ/10.0, cameraZ*10.0);
62.   camera();
63.   controlP5.draw();
64.   //Re-enble depth test
65.   hint(ENABLE_DEPTH_TEST);
66.   g3.camera = currCameraMatrix;
67.   //g3.applyMatrix(currCameraMatrix);
68. }
69. void controlEvent(ControlEvent theEvent) {
70.   println(theEvent.controller().id());
71. }
72. void button(float theValue) {
73.   println("a button event. "+theValue);
74. }
75. public class Box {
76.   InteractiveFrame iFrame;
77.   float w, h, d;
78.   int c;
79.   int ID;
80.   Box(int ID)
81.   {
82.     iFrame = new InteractiveFrame(scene);
83.     setSize();
84.     setColor();
85.      this.ID=ID;
86.     setPosition();
87.   
88.   }
89.  
90.   // don't draw local axis
91.   public void draw() {
92.     draw(false);
93.   }
94.   public void draw(boolean drawAxis)
95.   {
96.     //setPosition();
97.     pushMatrix();
98.     pushStyle();
99.     // Multiply matrix to get in the frame coordinate system.
100.     // scene.parent.applyMatrix(iFrame.matrix()) is handy but inefficient
101.     iFrame.applyTransformation(); //optimum
102.     if(drawAxis) scene.drawAxis(max(w,h,d)*1.3f);
103.     //noStroke();
104.     if (iFrame.grabsMouse())
105.       fill(255, 0, 0);
106.     else
107.       fill(getColor());
108.     //Draw a box
109.     box(w,h,d);
110.     popStyle();
111.     popMatrix();
112.   }
113.  
114.   // sets size randomly
115.   public void setSize() {
116.     w = random(10, 40);
117.     h = random(10, 40);
118.     d = random(10, 40);
119.   }
120.  
121.   public void setSize(float myW, float myH, float myD) {
122.     w=myW; h=myH; d=myD;
123.   }
124.  
125.   public int getColor() {
126.     return c;
127.   }
128.  
129.   // sets color randomly
130.   public void setColor() {
131.     c = color(random(0, 255), random(0, 255), random(0, 255));
132.   }
133.  
134.   public void setColor(int myC) {
135.     c = myC;
136.   }
137.  
138.   public PVector getPosition() {
139.     return iFrame.position();
140.   }
141.  
142.   // sets position randomly
143.   public void setPosition()
144.   {
145.     float low = -100;
146.     float high = 100;
147.     iFrame.setPosition(new PVector(random(low, high), random(low, high), random(low, high)));
148.     //iFrame.setPosition(new PVector(50*ID, 0, 0));
149.   }
150.  
151.   public void setPosition(PVector pos) {
152.     iFrame.setPosition(pos);
153.   }
154. }

any idea on this ? I'd appreciate your help

Thanks.

In the meantime, and if working with controlP5, you can try the following hack:

Thanks again!