# Show Image in P3D space?

**URL:** <https://discourse.processing.org/t/show-image-in-p3d-space/2419>\
**Category:** Coding Questions\
**Created:** [August 6, 2018, 5:38pm UTC](https://discourse.processing.org/t/show-image-in-p3d-space/2419 "2018-08-06T17:38:50Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mandelbrot](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@Mandelbrot](https://discourse.processing.org/u/Mandelbrot)\
**Post date:** [August 6, 2018, 5:38pm UTC](https://discourse.processing.org/t/show-image-in-p3d-space/2419/1 "2018-08-06T17:38:50Z")

</div>

I have a P3D window in full screen mode: `fullScreen(P3D)`. I am rotating a 3d model around, and would like to overlay an image over the screen, so that it is always on top of all elements. How can I do this?

I’ve tried just `image`, and it doesn’t work for me.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 6, 2018, 5:45pm UTC](https://discourse.processing.org/t/show-image-in-p3d-space/2419/2 "2018-08-06T17:45:58Z")

</div>

Have a look at this: [https://processing.org/reference/texture\_.html](https://processing.org/reference/texture_.html) Remember that you are in 3D, so you need to control the depth of the placement of this image if you dont want to obstruct the view of your previous laid out elements.

Kf

---

<div class="post-metadata">

**Author:** ![Mandelbrot](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@Mandelbrot](https://discourse.processing.org/u/Mandelbrot)\
**Post date:** [August 6, 2018, 5:53pm UTC](https://discourse.processing.org/t/show-image-in-p3d-space/2419/3 "2018-08-06T17:53:39Z")

</div>

I don’t see anything. There’s no error message, it just doesn’t show. Here’s my code:

```auto
  noStroke();
  beginShape();
  texture(shuttleSpecs);
  vertex(0, 0, 10, 0);
  vertex(500, 0, 10, 0);
  vertex(500, 500, 10, 100);
  vertex(0, 500, 10, 100);
  endShape();

```

I’ve tried changing the z to 10, just in case the background image occupies 0. It had no effect.

shuttleSpecs is defined correctly. Thanks for the help.

---

<div class="post-metadata">

**Author:** ![behreajj](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@behreajj](https://discourse.processing.org/u/behreajj)\
**Post date:** [August 6, 2018, 6:33pm UTC](https://discourse.processing.org/t/show-image-in-p3d-space/2419/4 "2018-08-06T18:33:32Z")

</div>

Hi Mandelbrot,

I don’t see where you load the image into your sketch, so I’m assuming you’ve tested that and everything’s all good there. Vertex winding looks ok to me, too – clockwise from top-left, to top-right, to bottom-right, to bottom-left. I noticed that you’ve applied the same texture coordinates, (10, 0) to the first two `vertex` calls and again, with (10, 100), to the second two. All four should be different, but then again I imagine you’d be seeing streaks, rather than nothing.

I find it helps to set [textureMode](https://processing.org/reference/textureMode_.html) and [textureWrap](https://processing.org/reference/textureWrap_.html) when applying textures to shapes in `P3D`. When `textureMode` is `NORMAL` you can use UV coordinates in the range [0, 1] without worrying about the texture image’s `width` and `height` as measured in pixels. Setting it to the default `IMAGE` allows you to work with pixel units. `textureWrap` set to `CLAMP` will leave streaks when the UV coordinates are out of bounds, while `REPEAT` speaks for itself. I supply `int` constants to `beginShape` and `endShape` just to be explicit, but I don’t see why it would matter here.

Here’s a sample setup:

![001](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1b4f564022855cb9774c5f2ef173c3de5a4798c9.jpg)

```auto
float cx, cy, hw, hh, txscale = 2.0;
PImage texture;

size(500, 500, P3D);
textureMode(NORMAL);
textureWrap(REPEAT);
hw = width * 0.25;
hh = height * 0.25;
cx = width * 0.5;
cy = height * 0.5;
texture = loadImage("https://upload.wikimedia.org/" + 
  "wikipedia/commons/thumb/d/d6/" +
  "STS120LaunchHiRes-edit1.jpg/93px-STS120" +
  "LaunchHiRes-edit1.jpg");

beginShape(QUADS);
noStroke();
texture(texture);
vertex(cx - hw, cy - hh, 0.0, 0.0);
vertex(cx + hw, cy - hh, txscale, 0.0);
vertex(cx + hw, cy + hh, txscale, txscale);
vertex(cx - hw, cy + hh, 0.0, txscale);
endShape(CLOSE);

```

Hope that helps. Best,

---

<div class="post-metadata">

**Author:** ![Mandelbrot](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@Mandelbrot](https://discourse.processing.org/u/Mandelbrot)\
**Post date:** [August 6, 2018, 6:44pm UTC](https://discourse.processing.org/t/show-image-in-p3d-space/2419/5 "2018-08-06T18:44:56Z")

</div>

Thanks. I didn’t `translate` the text so it ended up rotating with the model. After adding:

`translate(0, 0, 10)`, the image rotates with the model I have rotating around the screen. Why would that happen?

Thanks for the help!

---

<div class="post-metadata">

**Author:** ![behreajj](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@behreajj](https://discourse.processing.org/u/behreajj)\
**Post date:** [August 6, 2018, 7:08pm UTC](https://discourse.processing.org/t/show-image-in-p3d-space/2419/6 "2018-08-06T19:08:09Z")

</div>

Hi Mandelbrot,

Without seeing some code, or a screen capture, it’s hard to picture what you’re going for against what your current results are. To isolate transformations (translations, rotations and scales), you can wrap them in [pushMatrix](https://processing.org/reference/pushMatrix_.html) and [popMatrix](https://processing.org/reference/popMatrix_.html). This works a little differently with models loaded into a [PShape](https://processing.org/reference/PShape.html) object. Reviewing the [P3D](https://processing.org/tutorials/p3d/) and/or [2D transformations](https://processing.org/tutorials/transform2d/) tutorials may be helpful.

This is the previous example, updated so two elements are translated and rotated independently of one another.

![001%20(2)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/27b00d2fe5b4b6d723481d59386846ae6fdc7d11.jpg)

```auto
float cx, cy, hw, hh, txscale = 2.0;
PImage texture;
void setup() {
  size(500, 500, P3D);
  textureMode(NORMAL);
  textureWrap(REPEAT);
  textAlign(CENTER, CENTER);
  textMode(SHAPE);
  textSize(20.0);
  hw = width * 0.25;
  hh = height * 0.25;
  cx = width * 0.5;
  cy = height * 0.5;
  texture = loadImage("https://upload.wikimedia.org/" + 
    "wikipedia/commons/thumb/d/d6/" +
    "STS120LaunchHiRes-edit1.jpg/93px-STS120" +
    "LaunchHiRes-edit1.jpg");
}

void draw() {
  background(255.0);
  
  pushMatrix();
  translate(cx, cy);
  rotate(frameCount * 0.01);
  beginShape();
  noStroke();
  texture(texture);
  vertex(- hw, - hh, 0.0, 0.0, 0.0);
  vertex(+ hw, - hh, 0.0, txscale, 0.0);
  vertex(+ hw, + hh, 0.0, txscale, txscale);
  vertex(- hw, + hh, 0.0, 0.0, txscale);
  endShape();
  popMatrix();
  
  pushMatrix();
  fill(0.0);
  translate(mouseX, mouseY);
  rotate(frameCount * -0.05);
  text("Lorem ipsum", 0, 0);
  popMatrix();
}

```

Cheers!

---

<div class="post-metadata">

**Author:** ![Mandelbrot](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@Mandelbrot](https://discourse.processing.org/u/Mandelbrot)\
**Post date:** [August 6, 2018, 7:41pm UTC](https://discourse.processing.org/t/show-image-in-p3d-space/2419/7 "2018-08-06T19:41:48Z")

</div>

Here’s a pastebin with all of my code: [https://pastebin.com/HX9vKKYW](https://pastebin.com/HX9vKKYW)

Essentially, the rotated shuttlecraft drags the text along with it.

---

<div class="post-metadata">

**Author:** ![behreajj](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@behreajj](https://discourse.processing.org/u/behreajj)\
**Post date:** [August 7, 2018, 11:32am UTC](https://discourse.processing.org/t/show-image-in-p3d-space/2419/9 "2018-08-07T11:32:19Z")

</div>

Hi Mandelbrot,

Hmm, I wonder if creating a second graphics renderer with [createGraphics](https://processing.org/reference/createGraphics_.html) would simplify things? This second `P3D` renderer could deal with the 3D elements in the sketch like the shuttle. The main renderer could then sandwich it between background and foreground elements (title menus, GUI/HUD). The technique is explained in more depth in the tutorial “[Render Techniques](https://processing.org/tutorials/rendering/).”

I tried to keep the following sample simple while respecting the complexity of your code. There was an error on line 38 because `bg(0);` was called without the function `bg` being defined, so I can’t say I got the full effect.

![753](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f72dd957fd766f9be25268d4d12687435ab65548.png)

The teapot.obj file I used is from this [Github gist](https://gist.github.com/behreajj/46a38057521ba259fc4aa102f1e990f1).

```auto
PGraphics3D scene3d;
PShape teapot;

void setup() {
  size(512, 256, P3D);
  textAlign(CENTER, CENTER);
  textSize(20.0);
  scene3d = (PGraphics3D)createGraphics(width, height, P3D);
  teapot = loadShape("teapot.obj").getTessellation();
  float s = min(width, height) * 0.2;
  teapot.scale(s, -s, s); /* Flip model upside-down*/
}

void draw() {

  // Background elements.
  background(0.0, 0.0, 127.0);
  fill(255.0);
  text("BACKGROUND", width * 0.175, height * 0.5);

  draw3DScene();

  // After updating the 3d render, it can be displayed in
  // the main renderer with image or texture.
  image(scene3d, 0.0, 0.0, width, height);

  // Foreground elements.
  fill(127.0, 0.0, 0.0);
  ellipse(width * 0.75, height * 0.75, 150.0, 150.0);
  fill(255.0);
  text("FOREGROUND", width * 0.75, height * 0.75);
}

void draw3DScene() {
  float t = frameCount * 0.01;

  scene3d.beginDraw();
  scene3d.clear();
  scene3d.camera(
    0.0, 0.0, scene3d.height * 0.86602, 
    0.0, 0.0, 0.0, 
    0.0, 1.0, 0.0);
  scene3d.directionalLight(
    255.0, 255.0, 255.0, 
    0.0, -0.8, 0.6);

  // Translate and rotate both text label and teapot.
  scene3d.pushMatrix();
  scene3d.translate(cos(t) * 100.0, 0.0);
  scene3d.rotateY(t);
  scene3d.shape(teapot);

  // Turn lights off for text.
  scene3d.noLights();
  scene3d.fill(255.0);
  scene3d.text("LABEL", -teapot.getWidth(), 0.0);
  scene3d.popMatrix();

  scene3d.endDraw();
  scene3d.flush();
}

```

I just used ellipses, solid colors and text - but the idea should work with textures.

---

<div class="post-metadata">

**Author:** ![Mandelbrot](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@Mandelbrot](https://discourse.processing.org/u/Mandelbrot)\
**Post date:** [August 7, 2018, 4:50pm UTC](https://discourse.processing.org/t/show-image-in-p3d-space/2419/10 "2018-08-07T16:50:41Z")

</div>

Thanks! I ultimately decided to use `PeasyCam`’s convenient `camera.beginHUD();`, and it’s working so far.