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:
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!
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
or we can use a sky sphere?
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:
1 Like