Depth/layer order in 2d custom layers

[markusjohnsson]

mapbox-gl-js version: 0.50.0

Question

I'm porting a couple of canvas layers in our application to use the new Custom Layers API. How do I correctly use scene depth with respect to the layer stack?

Here is my example code:
JS Fiddle

The code renders a plane at z = 0. The layer is added to the map using

map.on('load', () => {
	map.addLayer(new MyCustomLayer());
});

I expected the plane to be rendered above everything else - but it is rendered below the water layer.

Do I need to do any depth buffer stuff to get this right?

If I change z-position of the layer (see comment in code), it does render above the water layer, but I get a parallax effect , where the plane moves relative to the map.. it seams like mapbox is using a perspective matrix in 2d where it should be using (imho) a non-perspective / orthographic matrix..

Links to related documentation

https://www.mapbox.com/mapbox-gl-js/api/#customlayerinterface

EDIT: Added screenshot

[markusjohnsson]

Hm. Adding another layer to the style makes the custom layer pop to the top:

Added layer:

    {
      "id": "admin-boundaries-bg",
      "type": "line",
      "source": "composite",
      "source-layer": "admin"
    }

Updated fiddle: https://jsfiddle.net/23ae6ys1/5/

[markusjohnsson]

@ansis Is there any chance of a quick fix, or can you suggest a workaround?

[markusjohnsson]

Comparing draw_custom.js and draw_raster.js I came up with this change to draw_custom that renders my example correctly:

  const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly, gl.LESS);
  context.setDepthMode(depthMode);

Not sure what that zero should be changed to though, as I just picked the value from debugging canvas layers. Perhaps I can get this into a acceptable state for a pull request?