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

Questions
,
1

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

Thanks,
Doug

2

That’s currently not supported.

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

https://threejs.org/examples/#webgl_lights_hemisphere

2 Likes
3

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?

4

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

5

Take a look at this, it could help.

6

Neat.

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.

1 Like