Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Project Web Mercator Tiles to Sphere with ShaderMaterial #75

Merged
merged 4 commits into from
Jul 15, 2024

Conversation

cmurphy23
Copy link

@cmurphy23 cmurphy23 commented Jun 24, 2024

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

Copy link
Owner

@tentone tentone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello

Check documentation for auxiliary methods please, other than that code seems alright.

Comment on lines 149 to 156
public static getTileSize(zoom: number): number
{
const maxExtent = UnitsUtils.MERCATOR_MAX_EXTENT;
const numTiles = Math.pow(2, zoom);
return 2 * maxExtent / numTiles;
}

public static tileBounds(zoom: number, x: number, y: number): number[]
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add docs for these parameters.

@cmurphy23
Copy link
Author

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
Copy link

FengFengmomo commented Jun 30, 2024

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

expecially in high level
image

@cmurphy23
Copy link
Author

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.

@tentone tentone merged commit 259e87f into tentone:master Jul 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants