Creating 2D overlay with orbitControl

p5.js Coding Questions
1

I have created a sketch to display the Utah Teapot and I am using orbitControl() to view it from any angle. My problem is that I am trying to create a static 2D overlay.

As a demo I have simplified one of the p5js examples and surrounded with push() and pop()statements but it prevents the orbit control from functioning as expected. If I comment out the push and pop from this sketch then it works as expected.

        let options = {
            disableTouchActions: false,
            freeRotation: false
        };

        function setup() {
            createCanvas(400, 400, WEBGL);
        }

        function draw() {
            background(200);
            push();
            orbitControl(1, 1, 1, options);
            normalMaterial();
            box(30, 50);
            pop();
            // Want to display 2D overlay here
        }

Any ideas on how to overcome this?

1 Like
2

One idea is to render the 3D scene to a framebuffer, image it to the display, and draw your overlay on top of that.

let fb;

function setup() {
  createCanvas(400, 400, WEBGL);
  fb = createFramebuffer();
}

function draw() {
  fb.begin();
  background(220);
  orbitControl();
  box( 100, 100, 100);
  fb.end();
  image( fb, -width/2, -height/2 );
  // overlay
  circle( -100, -100, 20);
}

This also avoids any problems with the 3D scene getting too close the camera and overlapping the overlay in Z.

A second idea is to have two cameras. And, you can call clearDepth() between them to avoid the Z interference. (Comment out the clearDepth() to see the box overlapping with the circle.)

let camDefault, cam3D;

function setup() {
  createCanvas(400, 400, WEBGL);
  camDefault = createCamera();
  cam3D = createCamera();
}

function draw() {
  setCamera( cam3D );
  background(220);
  orbitControl();
  box( 200 );
  // overlay
  clearDepth();
  setCamera( camDefault );
  circle( -100, -100, 20 );
}
3

One other idea: if I recall correctly, orbitControl affects the active camera. so you could create two cameras, and then in your draw function, set your first camera, turn on orbit control, draw your scene, and then set the second camera and draw your overlay. Not sure if there are other complications you’ll run into – you may also need to call clearDepth() before drawing your overlay if you always want it visually on top of the scene.

4

The frame-buffer code provided by @scudly solved my problem. :+1: :grinning:

The two camera solution did not work because p5js did not recognise the method clearDepth() and threw an exception. Looking at the reference it appears this only applies to frame-buffers. Also the setCamera( camDefault ); in draw resets the display back when the mouse is released.

My main issue is with the createCamera() method in that it not only creates a camera but also sets it as the current camera.

Even though this is made clear in the documentation I believe this is a mistake and the creation and use of cameras should be separate function calls.

If you are interested I did raise an issue at the time and have just updated it.

2 Likes
5

It appears that this will be resolved and createCamera() will no longer change the current camera being used. See the issue

2 Likes
6

I find your statements about the two camera solution curious. My second code example above, also at https://editor.p5js.org/scudly/sketches/KNZu7PfsY, runs just fine for me on both my computer and my phone and the orbitControl holds the orientation when I release the mouse or touch.

When you tried clearDepth(), was your canvas WEBGL?

I’m finding a lot of subtle webgl incompatibilities between devices and between browsers on the same device, so I’d like to hear about devices where certain features cause problems. For instance, testing this just now on Firefox, I see that smooth() is not the default there even though it seems to be on Chrome.

7

I went and had a look at your skecth and it worked as promised. So I checked my webpage and it ws using an earlier version 1.8 of p5js when I changed it to 1.11.1 your examples worked for me. :smile:

I went back and tried the original code I posted but still no joy, orbitControl doesn’t seem to work with push and pop. Will do more experiments later. Your frame buffer example worked just fine and I used it in the Utah Teapot sketch successfully.

Sorry about any inconvenience.

1 Like