How to set transparency in WebGLDeferredRenderer?

0
votes

I'm using WebGLDeferredRenderer for my scene, and and I've realized that material property transparency is not working at all.

If i set transparent: true - material is not displaying at all If i set transparent: false - material using transparency: 1.0 If I change the transparency property - there is no difference

case1: transparent : true, transparency : 0.5 There is no material

case2: transparent : false, transparency : 0.5 There is material with transparency 1.0

1
3dthree.jswebgl

1 Answers

0
votes

You do know that deferred rendering has certain issues with transparent materials and blending?

I don't know if there's currently any kind of support for transparent materials, and I would wait until there's some newer Three.js version and at least one demo.

You have two choices:

  • change to WebGLRenderer, so no deferred pipeline at all
  • have deferred pipeline but also have additional WebGLRenderer that will forward-render transparent materials and then blend scenes using depth buffer or any other technique that you know

If you don't have real reasons why to use deferred rendering then switch to "basic" WebGLRendering with forward pipeline and you won't have a problem.