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

**URL:** <https://discourse.threejs.org/t/how-to-i-use-a-material-for-scene-background-rather-then-color-or-texture/6477>\
**Category:** Questions\
**Tags:** scene, materials\
**Created:** [March 10, 2019, 3:05pm UTC](https://discourse.threejs.org/t/how-to-i-use-a-material-for-scene-background-rather-then-color-or-texture/6477 "2019-03-10T15:05:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dugla](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dugla/32/4044_2.png) [@dugla](https://discourse.threejs.org/u/dugla)\
**Post date:** [March 10, 2019, 3:05pm UTC](https://discourse.threejs.org/t/how-to-i-use-a-material-for-scene-background-rather-then-color-or-texture/6477/1 "2019-03-10T15:05:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [March 10, 2019, 4:34pm UTC](https://discourse.threejs.org/t/how-to-i-use-a-material-for-scene-background-rather-then-color-or-texture/6477/2 "2019-03-10T16:34:06Z")

</div>

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](https://threejs.org/examples/#webgl_lights_hemisphere)

---

<div class="post-metadata">

**Author:** ![dugla](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dugla/32/4044_2.png) [@dugla](https://discourse.threejs.org/u/dugla)\
**Post date:** [March 10, 2019, 8:38pm UTC](https://discourse.threejs.org/t/how-to-i-use-a-material-for-scene-background-rather-then-color-or-texture/6477/3 "2019-03-10T20:38:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [March 11, 2019, 5:34pm UTC](https://discourse.threejs.org/t/how-to-i-use-a-material-for-scene-background-rather-then-color-or-texture/6477/4 "2019-03-11T17:34:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [March 11, 2019, 9:46pm UTC](https://discourse.threejs.org/t/how-to-i-use-a-material-for-scene-background-rather-then-color-or-texture/6477/5 "2019-03-11T21:46:13Z")

</div>

Take a look at this, it could help.

> **[three-screen-quad](https://www.npmjs.com/package/three-screen-quad)**
>
> a screen aligned quad for three.js

---

<div class="post-metadata">

**Author:** ![dugla](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dugla/32/4044_2.png) [@dugla](https://discourse.threejs.org/u/dugla)\
**Post date:** [March 12, 2019, 9:21pm UTC](https://discourse.threejs.org/t/how-to-i-use-a-material-for-scene-background-rather-then-color-or-texture/6477/6 "2019-03-12T21:21:01Z")

</div>

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.