Mapbox-gl-js: Incorrect display of the 3D model after adding it to the map as custom layer in v0.52.0

[Solomka12]

mapbox-gl-js version:
v0.52.0

browser:
Google Chrome 71.0.3578.98

Link to Demonstration

Full example can be seen here:
https://bl.ocks.org/ryanbaumann/b9725e79b5b1742d92ada00ddbf5c3d3

Expected Behavior

in v0.51.0
https://i.imgur.com/cLR3OFJ.jpg

Actual Behavior

in v0.52.0
https://i.imgur.com/R9T3Tsa.jpg

[RubioV]

I can confirm I am having the same problem. It appears the rendering order is incorrect since v0.52.0.

v0.51.0:

v0.52.0:

[ansis]

In order for depth rendering to work correctly the layer needs to specify "renderingMode": "3d". For example:

var threeJSModel = {
    id: 'custom_layer',
    type: 'custom',
    renderingMode: '3d'
    ...
};

This was not documented anywhere! I've opened a pull request to document this property: https://github.com/mapbox/mapbox-gl-js/pull/7951

@RubioV @Solomka12 can you confirm that this fixes your issues?

@ryanbaumann - https://bl.ocks.org/ryanbaumann/b9725e79b5b1742d92ada00ddbf5c3d3 should start using "renderingMode": "3d"

[ryanbaumann]

Updated the block example @ansis, thanks for the bug report @rubiov @solomka12

https://bl.ocks.org/ryanbaumann/b9725e79b5b1742d92ada00ddbf5c3d3/4848a74b67ea1f2b803f587cc9caf8a23e3f83f8

[RubioV]

@ansis: yes this fixes the problem, thanks!

[Solomka12]

Yes, everything works as it should, thanks!
Now even models in custom layers are part of the map. This can be seen by the way they are displayed with the native 3d-buildings layer:

renderingMode: '3d'

But what if I need this behavior when my model overlaps all other native layers. How do I get this effect now?

renderingMode: '2d'

[ansis]

@Solomka12 thanks for confirming! Adding this to the top of render should work:

gl.clear(gl.DEPTH_BUFFER_BIT);

This clears all the depth information previously rendered which lets you draw above the buildings.

[Nimash68]

@ansis Hi Ansis, how can i do that?