Mapbox-gl-js Custom Layer - Background Map goes white when clearing using threejs renderer

Viewed 275

Copied from github issue,

Hello, I was experimenting with loading models using the custom layer interface and ran into a problem. I'm actually drawing the custom layer through DeckGL and react-map-gl, however I believe that the heart of the problem lies in the custom layer which belongs here so I'm asking the question here. Anyways the problem is pretty similar to issue #8936. However the solution there doesn't work but infact, it's the cause of the problem as far as I understood. If you try clearing manually or set renderer.autoClear to true, the underlying map disappears and only a white background is shown with the model laid on top.

This can be easily seen using the official example and it's jsfiddle. Just set autoClear to true.

I was actually experimenting with using post processing, which requires to use composer.render instead of renderer.render and the former clears the buffers during passes.

I thought this was due to a non transparent canvas issue perhaps and initialized the threejs renderer with a separate canvas, with alpha set to true and setting the clear color to all 0's but on alpha 0, it shows white and if you increase alpha it starts showing whatever clearColor was set to. It doesn't show the underlying mapbox canvas.

A screencap to demonstrate clearly whats the problem,

clearColor all 0's and alpha 0. enter image description here

ClearColor is red and alpha is 0.2. enter image description here

Intended picture when using clearing, enter image description here

Update:- Ok it seems like the transparency is working fine. This is because when I changed the clearColor to red and alpha to 0.4 I noticed there was a small time period where the map was shown with a red overlay like so enter image description here

However as soon as the model appears, the map disappears and the image resembles the second one. So something's wrong there.

0 Answers
Related