Gradient background with WebGLRenderer

Hi guys, got everything working now except for the background gradient.

I read in the documentation, and from some other developers that when instantiating WebGLRenderer you can pass along “alpha:true”.

After that you should add renderer.setClearColor(0x000000, 0); to make the canvas be transparant so it shows your HTML background.

Unfortunately nothing happens when I do this.

Anyone here who knows the proper way of doing this?

Best regards

Are you looking for something like this: https://jsfiddle.net/f2Lommf5/15331/

Using WebGLRenderer.setClearColor() is not necessary.

1 Like

Thanks, I got it working now! will post my code later for reference :smiley:

We’ve used this approach to render our animation with a simple gradient-background, but :point_up: applying an UnrealBloomPass breaks this concept because the UnrealBloomPass-alpha is currently not being applied correctly with a transparent WebGLRenderer, see: Unreal Bloom and Renderer Transparency issue · Issue #14104 · mrdoob/three.js · GitHub

I guess this will be fixed in future releases.