How to I use a material for scene.background rather then color or texture?

The docs state a color or texture can be used for scene.background. I would like to use a ShaderMaterial with my own custom shaders. How can I do this?

Specifically, I want to paint a color ramp behind the foreground elements. Here is the fragment shader:

uniform vec2 uXYPixel;
void main() {
    vec2 xy = vec2(gl_FragCoord.x/uXYPixel.x, gl_FragCoord.y/uXYPixel.y);
    gl_FragColor.rgb = vec3(xy.x, xy.y, 0);
    gl_FragColor.a = 1.0;

uXYPixel is a uniform vec2 with the values window.innerWidth, window.innerHeight


That’s currently not supported.

In the meantime, you can create a background geometry like this example does:

1 Like

Thanks. I looked at the code and I notice when a background texture is used a planeGeometry and associated BackgroundShader - with associated texture - is created. As a hack, It seems all I have to do is swap that shader out and swap in in my own shader that maps uv to rgb and I’m good. Yes?

You’d have to modify WebGLBackground.js for that though.

Take a look at this, it could help.


I am actually going a route along similar lines. I will use a technique I’ve implemented before in an iOS I wrote. I position a quad - planeGeometry - at the camera “far” distance and keep it oriented orthogonal to the camera by tracking the view transform and re-orienting the plane as required. This allows me total flexibility. With this approach I can even place a translucent quad at the “near” distance for interesting overlay looks. I’ll post the code here when I get it ported to three.js.