search

tentone / geo-three

Tile based geographic world map visualization library for threejs
https://tentone.github.io/geo-three/docs/
MIT License
699 stars 112 forks source link

Project Web Mercator Tiles to Sphere with ShaderMaterial #75

Closed cmurphy23 closed 2 months ago

cmurphy23 commented 3 months ago

This PR is for #74, where I also wrote some comments about my work as I went.

The changes are primarily to MapSphereNode, specifically swapping the material for a ShaderMaterial that calculates the color of a given position by looking up the corresponding pixel on the web mercator tile image. In addition, we change the size of the tiles so that their position properly matches the coordinates they are supposed to show. This method, while not identical, was inspired by a very similar approach used by CesiumJS.

Added the applyTexture function for MapNode base class so that MapSphereNode could override it load the texture into the ShaderMaterial.

Also added some utility functions to UnitsUnitls.

I wasn't sure whether to update the build/ folder or not, I can remove those changes from the PR if necessary.

Before: image

After: image

cmurphy23 commented 3 months ago

Okay, I added some documentation for those methods, I reverted the build folder to before my changes, and I fixed some weird indentation on the shader code.

FengFengmomo commented 3 months ago

i have modify code as yours but there still some misalignment image

expecially in high level image

cmurphy23 commented 3 months ago

I'm not sure if this PR is the right place to discuss, but the problem you're having is because the tile bounds expected by the shader code don't match the tile bounds used for the tile's geometry, specifically in the Y/latitutde direction. I recommend using identical calculations for both.