How do I use my own custom shader as a scene background?

Questions
, ,
1

The Scene object supports any of Color, Texture, or CubeTexture as a background. I have a shader - a simple color based on the u or v value for now - that I would like to use as a background. Presumably the Scene object creates a quad at some point to paint the background on (ignoring cube texture). How do I access this and use my shader/material?

1 Like
2

You can render your shader on a quad (depthWrite disabled in your material) in a scene by disabling autoClear on the renderer, then your render your actual scene so you don’t need an extra frame buffer. If you only want your shader to appear you can also just render the quad like: https://codepen.io/Fyrestar/pen/abOEOda

3

I like the idea, however for my app I have a live camera - OrbitControl - your description and codepen example assume a fixed camera. How does the Scene object maintain the background texture orthogonal to the camera? I am assuming it creates its own quad as support for the texture mapping. Or am I missing something?

4

Like i said, this is the background scene, by disabling autoClear you can render your actual scene into it as you disabled depthWrite for the quad.

renderer.autoClear = false;
renderer.clear();
renderer.render( quadScene, quadCamera );
renderer.render( scene, perspectiveCamera );
1 Like
5

simple options:

  1. add the quad as a child to your camera at the camera.far * .99 distance;
  2. render your shader to the WebGLRenderTarget, and use its texture as a background.
2 Likes
6

Cool. I’ll give it a try. Cheers.

7

I like this as well. Neat.

8

Implemented. Works great. Thx!

1 Like
9

Please can you share the code? I’m trying the solution, I can see quad with shader but no 3d scene over it…
Thank you
Michele

10

Hi,
It’s been a while but I do have a project that uses a texture mapping shader as a background. It might be overkill:

1 Like
11

Yes! That works for me too!
Here the WIP of my threejs game

https://geomensione.github.io/js13kgames-SPACE/v7.html

Thank you