visgl / deck.gl

WebGL2 powered visualization framework
https://deck.gl
MIT License
12.2k stars 2.09k forks source link

Current visible bounds #4532

Closed andybak closed 4 years ago

andybak commented 4 years ago

I'm generating charts based on the visible area in longitude/latitude.

I can't find an obvious way to derive this. It's a fairly complex projection of the camera FOV onto a plane (or sphere) based on the current pitch and I was hoping the engine could tell me somehow

Now I understand there's various ways to do this. You could always give the inner or outer bounds of a box aligned with the equator. (We'd call this an AABBB - an axis-aligned bounding box in 3d land)

Or you could give the inner or outer bounds of a non-equator aligned rectangle (a simple bounding rectangle)

Or you could just give the 4 corners of a quadrilateral.

I'd be happy with any of these.

Pessimistress commented 4 years ago

https://deck.gl/#/documentation/deckgl-api-reference/viewports/web-mercator-viewport

andybak commented 4 years ago

I actually got a similar hint on the Slack channel earlier and meant to write it up here. I ended up with:

function quadFromViewport(viewport) {
    const {width, height} = viewport;
    const projection = new deck.WebMercatorViewport(viewport);
    return [
        projection.unproject([0, 0]),
        projection.unproject([width, 0]),
        projection.unproject([width, height]),
        projection.unproject([0, height]),
    ];
}

var quad = quadFromViewport(deckgl.getViewports()[0]);

This gives a trapezoid. I initially followed a StackOverflow answer which gave a rectangle but the rectangle seemed only to loosely fit the viewport when the view was tilted.

The trapezoid is a much better fit at the cost of slower PostGIS queries.