Gradient background with WebGLRenderer

Questions
1

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

2

Are you looking for something like this: Edit fiddle - JSFiddle - Code Playground

Using WebGLRenderer.setClearColor() is not necessary.

2 Likes
3

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

4

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.