feat(core): GlobeView pitch, bearing, and cursor-anchored zoom#10249
Open
charlieforward9 wants to merge 6 commits intomasterfrom
Open
feat(core): GlobeView pitch, bearing, and cursor-anchored zoom#10249charlieforward9 wants to merge 6 commits intomasterfrom
charlieforward9 wants to merge 6 commits intomasterfrom
Conversation
Add camera tilt (pitch) and rotation (bearing) to GlobeView, matching the Google Maps/Earth interaction model. Uses a lookAt-based view matrix that composes pitch and bearing rotations while keeping the target lng/lat at screen center. Scroll-wheel zoom now targets the mouse cursor position instead of screen center (matching MapView). Pan reuses MapState's grabbed-lng/lat logic so the point under the cursor stays under the cursor through the drag — previously GlobeState's delta-pan produced wrong on-screen speed and yanked the center at zoom > 12 where WebMercatorViewport takes over rendering. Unproject for rays that miss the globe surface returns a plausible fallback rather than null. Changes: - GlobeViewport: lookAt view matrix with pitch/bearing, cursor-anchored zoom, ray/sphere miss fallback - GlobeController: dragRotate/touchRotate, pitch/bearing constraints, inherits pan from MapState - GlobeView: pitch/bearing/minPitch/maxPitch view state props - Tests for pitch/bearing transitions and viewport math
This was referenced Apr 19, 2026
25 tasks
Collaborator
Author
7 tasks
7 tasks
felixpalmer
reviewed
Apr 21, 2026
| coord = vec3.lerp([], coord0, coord1, t); | ||
| const discriminant = lt * lt - dSqr; | ||
|
|
||
| if (discriminant < 0) { |
Collaborator
There was a problem hiding this comment.
This is a neat idea, but I'm not sure it leads to intuitive behavior, see other comment about keeping old behavior
Collaborator
Author
|
@felixpalmer thank you for the review - I agree with your reinstatement and pan behavior |
e273434 to
c123fa7
Compare
c123fa7 to
9d31831
Compare
|
Coverage is 83.747% — cr/feat/globe-camera into master. No base build found for |
25 tasks
ibgreen
reviewed
Apr 28, 2026
| startPanOnGlobe?: boolean; | ||
| }; | ||
|
|
||
| function unprojectOnGlobe( |
Collaborator
There was a problem hiding this comment.
maybe create a globe-projection.ts or globe-projection-utils.ts?
class GlobeProjection {
project()
unproject()
getViewMatrix()
..
}or would this be part of GlobeViewport?
| coord = vec3.lerp([], coord0, coord1, t); | ||
| const discriminant = lt * lt - dSqr; | ||
|
|
||
| if (discriminant < 0) { |
| const GlobeViewState = new GlobeController({} as any).ControllerState; | ||
|
|
||
| // Bearing should be normalized to [-180, 180] | ||
| let viewState = new GlobeViewState({ |
Collaborator
There was a problem hiding this comment.
IIRC, view state is normally a pure object, not a class?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Brings
GlobeViewto feature parity withMapViewfor camera interaction. Three related changes:GlobeViewnow acceptspitch,bearing,minPitch,maxPitchview-state props.GlobeViewportcomposes them into alookAt-based view matrix that keeps the target lng/lat fixed at screen center through tilt and rotation, matching the Google Maps/Earth interaction model.GlobeControllerwires updragRotateandtouchRotateand enforces the pitch constraints.MapView. When the cursor is outside the globe, zoom falls back to center zoom instead of anchoring to an inferred ray-miss point.Includes a ray/sphere-miss fallback in
GlobeViewport#unprojectfor callers that need a surface point, while controller pan/zoom anchoring only uses true globe intersections.Why
Pitch + bearing + zoom-toward-cursor are the camera affordances users already expect from MapView. Without them, GlobeView-based apps can't offer the same 3D tilt/orbit UX that MapView has supported for years, which makes it hard to build a projection-toggling app where the camera feels the same on both projections.
Test plan
test/modules/core/viewports/globe-viewport.spec.tsfor pitch/bearing viewport math and globe hit detectiontest/modules/core/controllers/view-states.spec.tsfor pitch/bearing transitions and off-globe delta-spin pan behaviortest/apps/globe/app.jsupdated with sliders to exercise the new view-state props interactivelyCompanion PRs
This PR is standalone. Two follow-up PRs build on it to bring terrain rendering to GlobeView: