mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.2k stars 2.22k forks source link

Can buildings make shadows? #7976

Open BTF-Sang opened 5 years ago

BTF-Sang commented 5 years ago
    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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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:

mourner commented 5 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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

Stefwint commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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

phpia commented 3 years ago

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

ted-piotrowski commented 2 years ago

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 commented 1 year ago

@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 commented 1 year ago

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

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

McFly78 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

WelschChristopher commented 1 month ago

Hey, the gist worked perfectly for my application. However, since mapbox 3.0.6 it does not work any more. After building, there are no shadows, but the actual building get's darker depending of the time. Are there any changes that could result in that?

Greetings