# WEBGL and background images

**URL:** <https://discourse.processing.org/t/webgl-and-background-images/30416>\
**Category:** Coding Questions\
**Created:** [June 1, 2021, 1:54pm UTC](https://discourse.processing.org/t/webgl-and-background-images/30416 "2021-06-01T13:54:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![geor1812](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/geor1812/32/13456_2.png) [@geor1812](https://discourse.processing.org/u/geor1812)\
**Post date:** [June 1, 2021, 1:54pm UTC](https://discourse.processing.org/t/webgl-and-background-images/30416/1 "2021-06-01T13:54:40Z")

</div>

Hello!  
I am doing a project using WEBGL, and I am trying to set the background to an image which I can’t seem to figure out. The project itself is a bit complex, with a server and an input of type file where users can select the background image from their computer, but I am 100% sure this is not where the problem lies.

I have tried simply loading the image in the preload function:

```auto
let image;
function preload() {
  image = loadImage("/uploads/pink.jpg");
}

```

And then using `background(image);` in draw.  
I get the following error: “[object Arguments]is not a valid color representation”.  
What am I missing? Is it possible to set the background to an image like this?  
Also, I am using EasyCam so I can’t just draw an image first and then my 3D object, it has to be set as the background otherwise the result is undesirable.

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [June 1, 2021, 7:47pm UTC](https://discourse.processing.org/t/webgl-and-background-images/30416/2 "2021-06-01T19:47:11Z")

</div>

It sounds like the `background` function may not work properly with images in WEBGL mode. Instead you will need to use the `image` function. However, note that when you draw an image in WEBGL there’s a `z` component to it in 3d space (basically you can think of it as a textured plane). So you need to account for this when drawing the foreground less some of the foreground be clipped by the background image. Here’s a stack overflow answer I wrote on this topic: [https://stackoverflow.com/a/67665969/229247](https://stackoverflow.com/a/67665969/229247)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 1, 2021, 7:54pm UTC](https://discourse.processing.org/t/webgl-and-background-images/30416/3 "2021-06-01T19:54:03Z")

</div>

or we can use a sky sphere?

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [June 1, 2021, 8:11pm UTC](https://discourse.processing.org/t/webgl-and-background-images/30416/4 "2021-06-01T20:11:36Z")

</div>

You certainly can use a sky sphere/cylinder/box. However, some things to keep in mind: you’ll need to generate an appropriately distorted image to make it looked correct when mapped to the type of geometry you are using. For example the top and bottom edges of your texture will be significantly warped in the case of a sphere. Additionally if you have a moving camera (such as using `orbitControl` you will want to draw your skybox relative to `eyeX, eyeY, eyeZ` so it always feels like the viewer is in the dead center of the skybox. I’ve done some experimentation with procedurally generating skyboxes:

> **[Sky Box Experiments 2 - OpenProcessing](https://openprocessing.org/sketch/1195978)**

> **[Sky Box Experiments 2 - Debug Sphere Coords - OpenProcessing](https://openprocessing.org/sketch/1198314)**

> **[Sky Box Experiments 3 - OpenProcessing](https://openprocessing.org/sketch/1201804)**

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 1, 2021, 8:12pm UTC](https://discourse.processing.org/t/webgl-and-background-images/30416/5 "2021-06-01T20:12:24Z")

</div>

thank you for this

Chrisir