Mapbox-gl-js: Can buildings make shadows?

[BTF-Sang]

    I saw the example of the official website. The building has no shadow and it feels very fake. 
    The API did not find an example of building shadows. 
    How can I achieve this? Thank you....

[mourner]

There's currently no easy way to do this. I did an experiment on this with CustomerLayer interface here, although it's a very fragile approach (not sure if it works with the current version): https://gist.github.com/mourner/e24fab0dd579402b0a6a3bbeaf916a02

I'd still be interested in seeing shadows as a part of core — perhaps we'll implement it some day.

[andrewharvey]

That's very awesome @mourner. I had to make some tweaks to get it working, so I hope you don't mind I've published it at https://bl.ocks.org/andrewharvey/9490afae78301c047adddfb06523f6f1

[mourner]

Awesome! One thing that didn't carryover from the demo is the semi-transparency — I hoped to get opacity in the custom layer implementation but that got scrubbed. Not sure if there is a good workaround. cc @ansis

[BTF-Sang]

@mourner @andrewharvey thank you for the help
I still have a problem，I want mapbox to combine osm map to achieve 3D effect, and load raster-json building data, how to achieve?

[ansis]

One thing that didn't carryover from the demo is the semi-transparency — I hoped to get opacity in the custom layer implementation but that got scrubbed. Not sure if there is a good workaround. cc @ansis

I think opacity will have to be in the hands of the custom layer implementer now that we aren't rendering into a texture first. Two approaches to implement opacity here:

• render into a texture and copy with an opacity
• use the stencil or depth buffer to prevent double-drawing and draw with opacity directly

[mourner]

@ansis thanks! This makes sense. Maybe we can even get away with double-drawing for the building shadows layer (it may have a cool effect).

[Stefwint]

@mourner Hi! Thanks for the example :). I tried setting this up in my project which uses v2.1.0 from mapbox. Since v2 this example doesn't seem to work anymore, I'm getting the following error:

GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0

When I change the drawElements part to something like this:

gl.drawElements( gl.TRIANGLES, segment.primitiveLength * 0.003, gl.UNSIGNED_SHORT, segment.primitiveOffset * 3 * 2 );

the shadows do render, but they're really off. Any idea what has changed since v2 of mapbox which causes this error? This is the full code which I'm using to test:
https://gist.github.com/Stefwint/121dbb209bd273e52d87542ba77204dc

[BraydenKC]

@Stefwint were you able to figure anything out for this? We're struggling with the same issue at the moment.

[Stefwint]

@BraydenKC Unfortunately not. The owner of this repository is giving some more in depth explanation about the issue:
https://github.com/jscastro76/threebox/issues/146#issuecomment-780521627

So let's hope there will be a solution soon..

[satorbs]

i solved this like below

gl.vertexAttribPointer(this.aPosition2d, 2, gl.SHORT, false, 8, 8 * vertexOffset)
gl.vertexAttribPointer(this.aNormal, 4, gl.SHORT, false, 8, 4 + 8 * vertexOffset)

[Stefwint]

@satorbs Do you have a full example? It looks better with your changes, but it's not quite there yet.