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:
jscastro76/threebox#146 (comment)

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.

[phpia]

Awesome work @mourner
I got it working without problem with libregl and custom json buildings
Thanks

[ted-piotrowski]

For Mapbox GL JS version 2.0 and up, here is the updated example

https://gist.github.com/ted-piotrowski/420a31bf3c157664fdda14bf45692785

...and the revision if you're wondering what changed

https://gist.github.com/ted-piotrowski/420a31bf3c157664fdda14bf45692785/revisions

[yan-map]

@ted-piotrowski
Still not working with 2.12.0 version:

Failed to execute 'uniformMatrix4fv' on 'WebGLRenderingContext': Overload resolution failed.
on this line:
gl.uniformMatrix4fv(this.uMatrix, false, coord.posMatrix);

[ted-piotrowski]

@yan-map Let me know if the following works for 2.12.0.

https://gist.github.com/ted-piotrowski/420a31bf3c157664fdda14bf45692785/5850fa7c51c57d75dfbc18270fc57f8b0f4c64cc

[McFly78]

@mourner @ted-piotrowski
Wow !!!!
Thank you It's Awesome !!!
Do you you know if it is possible to change the opacity or the color of shadows ?
Opacity parameter is not working on my side and all the shadows are black.
Thanks

[ted-piotrowski]

Do you you know if it is possible to change the opacity or the color of shadows ?

Somewhat. Because the implementation is quite naive (it uses "Carpet shadows" which pass underneath objects instead of colliding with them), translucent shadows will stack on top of each other resulting in different opacities. Here's a sample gist: https://gist.github.com/ted-piotrowski/420a31bf3c157664fdda14bf45692785

In theory, you could do two passes using a renderbuffer. The first one to get the shadow outlines and a second pass to assign a uniform color/opacity to all of them.

[ted-piotrowski]

https://gist.github.com/ted-piotrowski/420a31bf3c157664fdda14bf45692785

@McFly78 Here is a revised gist to allow for shadow transparency. Modify this line to set the shadow rgba values:

gl.uniform4fv(this.shadeColor, new Float32Array([0, 0, 0, 0.6]))

Let me know if you run into any issues. (Note: this approach does not work with 3D terrain enabled)

[McFly78]

@ted-piotrowski Thanks so much !
It's great, It's working really fine !