All examplesglobeglobe-effects
§ examples · globe

Globe Effects

Atmosphere, fog, pole caps and three sky presets over a satellite globe. Toggle and segmented controls call `view.setGlobeEffects(...)` live.

slugglobe-effects
source104 lines
statuslive
tsexamples-src/globe-effects.ts
1/**
2 * Globe Effects — atmosphere, fog, pole caps and starry sky configured
3 * declaratively via `globeEffects`. Toggles re-issue `view.goTo` and use
4 * the `MapView.globeEffects` setter to flip effects on/off at runtime.
5 */
6 
7import { MapView } from "mapgpu";
8import { RasterTileLayer } from "mapgpu/layers";
9import { RenderEngine } from "mapgpu/render";
10 
11import type { RunResultObject } from "@/components/examples/ExampleCanvas";
12 
13export async function run(container: HTMLElement): Promise<RunResultObject> {
14 const view = new MapView({
15 container,
16 renderEngine: new RenderEngine(),
17 mode: "3d",
18 center: [20, 20],
19 zoom: 1.4,
20 pitch: 0,
21 bearing: 0,
22 // Opaque so the sky mesh is visible behind the globe (transparent
23 // backgrounds would reveal the host page instead of the sky).
24 backgroundColor: [0, 0, 0, 1],
25 globeEffects: {
26 atmosphere: {
27 enabled: true,
28 colorInner: [0.55, 0.78, 1.0, 0.6],
29 colorOuter: [0.4, 0.6, 1.0, 0.15],
30 strength: 0.9,
31 falloff: 3.2,
32 },
33 sky: {
34 enabled: true,
35 preset: "realistic-cinematic",
36 starIntensity: 0.75,
37 starDensity: 0.45,
38 },
39 poleCaps: { enabled: true, color: [0.88, 0.95, 1.0] },
40 },
41 });
42 
43 view.map.add(
44 new RasterTileLayer({
45 id: "esri-imagery",
46 urlTemplate:
47 "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
48 maxZoom: 19,
49 attribution: "© Esri · DigitalGlobe · GeoEye · Earthstar Geographics",
50 }),
51 );
52 
53 await view.when();
54 
55 const flag = { fog: false };
56 
57 return {
58 dispose: () => view.destroy(),
59 controls: [
60 {
61 kind: "toggle",
62 id: "fog",
63 labels: ["fog off", "fog on"],
64 initial: false,
65 onChange: (on) => {
66 flag.fog = on;
67 view.setGlobeEffects({
68 fog: {
69 enabled: on,
70 density: 0.00025,
71 color: [0.55, 0.7, 0.85, 1.0],
72 equation: "exp",
73 },
74 });
75 },
76 },
77 {
78 kind: "segmented",
79 id: "sky",
80 initial: "cinematic",
81 options: [
82 { value: "cinematic", label: "Cinematic" },
83 { value: "stylized", label: "Stylized" },
84 { value: "neutral", label: "Neutral" },
85 ],
86 onChange: (value) => {
87 view.setGlobeEffects({
88 sky: {
89 enabled: true,
90 preset: value === "cinematic"
91 ? "realistic-cinematic"
92 : value === "stylized"
93 ? "stylized"
94 : "neutral",
95 starIntensity: value === "neutral" ? 0 : 0.7,
96 },
97 fog: { enabled: flag.fog },
98 });
99 },
100 },
101 ],
102 };
103}