# Creating 2D overlay with orbitControl

**URL:** <https://discourse.processing.org/t/creating-2d-overlay-with-orbitcontrol/45761>\
**Category:** Coding Questions\
**Created:** [February 14, 2025, 5:35pm UTC](https://discourse.processing.org/t/creating-2d-overlay-with-orbitcontrol/45761 "2025-02-14T17:35:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [February 14, 2025, 5:35pm UTC](https://discourse.processing.org/t/creating-2d-overlay-with-orbitcontrol/45761/1 "2025-02-14T17:35:18Z")

</div>

I have created a sketch to display the [Utah Teapot](https://en.wikipedia.org/wiki/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.

```auto
        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?

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [February 14, 2025, 7:04pm UTC](https://discourse.processing.org/t/creating-2d-overlay-with-orbitcontrol/45761/2 "2025-02-14T19:04:34Z")

</div>

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

```auto
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.)

```auto
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 );
}

```

---

<div class="post-metadata">

**Author:** ![davepagurek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davepagurek/32/17535_2.png) [@davepagurek](https://discourse.processing.org/u/davepagurek)\
**Post date:** [February 14, 2025, 11:02pm UTC](https://discourse.processing.org/t/creating-2d-overlay-with-orbitcontrol/45761/3 "2025-02-14T23:02:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [February 15, 2025, 12:27pm UTC](https://discourse.processing.org/t/creating-2d-overlay-with-orbitcontrol/45761/4 "2025-02-15T12:27:40Z")

</div>

The frame-buffer code provided by @scudly solved my problem. 👍 😀

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](https://github.com/processing/p5.js/issues/5941) at the time and have just updated it.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [February 15, 2025, 4:07pm UTC](https://discourse.processing.org/t/creating-2d-overlay-with-orbitcontrol/45761/5 "2025-02-15T16:07:59Z")

</div>

> [@quark](#):
>
> I believe this is a mistake and the creation and use of cameras should be separate function calls.

It appears that this will be resolved and `createCamera()` will no longer change the current camera being used. See the [issue](https://github.com/processing/p5.js/pull/7102)

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [February 15, 2025, 5:00pm UTC](https://discourse.processing.org/t/creating-2d-overlay-with-orbitcontrol/45761/6 "2025-02-15T17:00:39Z")

</div>

I find your statements about the two camera solution curious. My second code example above, also at [https://editor.p5js.org/scudly/sketches/KNZu7PfsY](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.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [February 15, 2025, 5:18pm UTC](https://discourse.processing.org/t/creating-2d-overlay-with-orbitcontrol/45761/7 "2025-02-15T17:18:40Z")

</div>

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. 😄

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.