@johnmorrisdotca/chikyu-earth 0.4.0 → 0.5.0

package/dist/realistic/shaders.js

@@ -0,0 +1,79 @@
+// The three programs of the realistic Earth, as GLSL strings: the surface (day, night, sun glint, rim), the cloud layer and the
+// atmosphere's glow. Colours are shaded in the textures' own (sRGB) space: a look, not a radiometric model.
+export const SURFACE_VERT = /* glsl */ `
+varying vec2 vUv;
+varying vec3 vNormal;
+void main() {
+  vUv = uv;
+  vNormal = normalize(mat3(modelMatrix) * position);
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}`;
+export const SURFACE_FRAG = /* glsl */ `
+uniform sampler2D dayMap;
+uniform sampler2D nightMap;
+uniform sampler2D waterMap;
+uniform vec3 sunDir;
+uniform float lights;
+varying vec2 vUv;
+varying vec3 vNormal;
+void main() {
+  vec3 n = normalize(vNormal);
+  float ndl = dot(n, sunDir);
+  float day = smoothstep(-0.10, 0.22, ndl);
+  vec3 albedo = texture2D(dayMap, vUv).rgb;
+  float water = texture2D(waterMap, vUv).r;
+
+  vec3 lit = albedo * (0.07 + 1.0 * pow(max(ndl, 0.0), 0.5));
+  float dusk = smoothstep(-0.14, 0.0, ndl) * (1.0 - smoothstep(0.0, 0.30, ndl));
+  lit += vec3(0.55, 0.28, 0.14) * dusk * 0.30 * (0.35 + 0.65 * albedo.g);
+
+  vec3 h = normalize(sunDir + vec3(0.0, 0.0, 1.0));
+  float glint = pow(max(dot(n, h), 0.0), 220.0) * water * day;
+  lit += vec3(1.0, 0.93, 0.80) * glint * 0.7;
+
+  vec3 night = texture2D(nightMap, vUv).rgb;
+  night = night * night * vec3(1.6, 1.5, 1.3) * lights + night * 0.25;
+  vec3 col = mix(night, lit, day);
+
+  float rim = pow(1.0 - clamp(n.z, 0.0, 1.0), 3.0);
+  float sunSide = 0.12 + 0.88 * smoothstep(-0.25, 0.5, ndl);
+  col += vec3(0.20, 0.45, 1.0) * rim * sunSide * 0.55;
+  gl_FragColor = vec4(col, 1.0);
+}`;
+export const CLOUD_FRAG = /* glsl */ `
+uniform sampler2D cloudMap;
+uniform vec3 sunDir;
+uniform float shift;
+uniform float opacity;
+varying vec2 vUv;
+varying vec3 vNormal;
+void main() {
+  vec3 n = normalize(vNormal);
+  float ndl = dot(n, sunDir);
+  float c = texture2D(cloudMap, vec2(vUv.x + shift, vUv.y)).r;
+  float a = smoothstep(0.28, 0.88, c) * opacity;
+  float day = smoothstep(-0.10, 0.25, ndl);
+  vec3 col = mix(vec3(0.015, 0.02, 0.04), vec3(1.0), day * (0.18 + 0.82 * pow(max(ndl, 0.0), 0.45)));
+  col += vec3(0.55, 0.28, 0.14) * smoothstep(-0.14, 0.0, ndl) * (1.0 - smoothstep(0.0, 0.25, ndl)) * 0.35;
+  gl_FragColor = vec4(col, a);
+}`;
+export const ATMOSPHERE_VERT = /* glsl */ `
+varying vec3 vView;
+void main() {
+  vec4 view = modelViewMatrix * vec4(position, 1.0);
+  vView = view.xyz;
+  gl_Position = projectionMatrix * view;
+}`;
+export const ATMOSPHERE_FRAG = /* glsl */ `
+uniform vec3 sunDir;
+uniform float outer;
+varying vec3 vView;
+void main() {
+  float rho = length(vView.xy);
+  float t = clamp((rho - 1.0) / (outer - 1.0), 0.0, 1.0);
+  vec2 dir = rho > 0.0 ? vView.xy / rho : vec2(1.0, 0.0);
+  float side = smoothstep(-0.40, 0.55, dot(vec3(dir, 0.0), sunDir));
+  float glow = pow(1.0 - t, 3.0) * (0.10 + 0.90 * side);
+  vec3 col = mix(vec3(0.10, 0.22, 0.60), vec3(0.42, 0.68, 1.0), side);
+  gl_FragColor = vec4(col, glow * 0.9);
+}`;

package/dist/realistic/sun.d.ts

@@ -0,0 +1,7 @@
+import type { GeoPoint } from "../types.ts";
+/** Julian day number of a moment in milliseconds since the Unix epoch. */
+export declare const julianDay: (ms: number) => number;
+/** The point where the Sun is at the zenith at `ms`: latitude is the Sun's declination, longitude runs west at 15 degrees an hour. */
+export declare function subsolarPoint(ms: number): GeoPoint;
+/** A point on the globe as a unit vector: +z is longitude 0 on the equator, +x east, +y north. */
+export declare function unitVector(point: GeoPoint): [number, number, number];

package/dist/realistic/sun.js

@@ -0,0 +1,28 @@
+const RAD = Math.PI / 180;
+const wrap360 = (degrees) => ((degrees % 360) + 360) % 360;
+/** Julian day number of a moment in milliseconds since the Unix epoch. */
+export const julianDay = (ms) => ms / 86_400_000 + 2_440_587.5;
+/** The point where the Sun is at the zenith at `ms`: latitude is the Sun's declination, longitude runs west at 15 degrees an hour. */
+export function subsolarPoint(ms) {
+    const jd = julianDay(ms);
+    const t = (jd - 2_451_545) / 36_525;
+    const meanLongitude = wrap360(280.46646 + t * (36_000.76983 + t * 0.0003032));
+    const meanAnomaly = wrap360(357.52911 + t * (35_999.05029 - t * 0.0001537)) * RAD;
+    const centre = (1.914602 - t * (0.004817 + 0.000014 * t)) * Math.sin(meanAnomaly) +
+        (0.019993 - 0.000101 * t) * Math.sin(2 * meanAnomaly) +
+        0.000289 * Math.sin(3 * meanAnomaly);
+    const node = (125.04 - 1934.136 * t) * RAD;
+    const apparentLongitude = (meanLongitude + centre - 0.00569 - 0.00478 * Math.sin(node)) * RAD;
+    const obliquity = (23 + (26 + (21.448 - t * (46.815 + t * (0.00059 - t * 0.001813))) / 60) / 60 + 0.00256 * Math.cos(node)) * RAD;
+    const declination = Math.asin(Math.sin(obliquity) * Math.sin(apparentLongitude));
+    const rightAscension = Math.atan2(Math.cos(obliquity) * Math.sin(apparentLongitude), Math.cos(apparentLongitude)) / RAD;
+    const siderealGreenwich = wrap360(280.46061837 + 360.98564736629 * (jd - 2_451_545) + 0.000387933 * t * t);
+    const lon = ((wrap360(rightAscension - siderealGreenwich) + 180) % 360) - 180;
+    return { lon, lat: declination / RAD };
+}
+/** A point on the globe as a unit vector: +z is longitude 0 on the equator, +x east, +y north. */
+export function unitVector(point) {
+    const lon = point.lon * RAD;
+    const lat = point.lat * RAD;
+    return [Math.cos(lat) * Math.sin(lon), Math.sin(lat), Math.cos(lat) * Math.cos(lon)];
+}

package/dist/realistic/tiers.d.ts

@@ -0,0 +1,20 @@
+export type Layer = "day" | "night" | "clouds" | "water";
+/** The widths each layer is shipped in (every picture is 2:1, so the height is half). */
+export declare const TIERS: Record<Layer, readonly number[]>;
+/** The most pixels across a texture the package ever asks the GPU for. */
+export declare const MAX_TEXTURE = 4096;
+/** Texels across the whole circumference wanted per device pixel of the globe's radius: 3 is a little under 2 pi, so a texel is a little larger than a pixel. */
+export declare const TEXELS_PER_RADIUS_PIXEL = 3;
+/**
+ * The width to hold for a layer when the globe's disc has radius `radiusPx` device pixels: the smallest shipped width that gives
+ * `TEXELS_PER_RADIUS_PIXEL` texels per pixel, else the largest, never more than `cap`, never less than the smallest.
+ */
+export declare function chooseTier(layer: Layer, radiusPx: number, cap?: number): number;
+/** The cap for this device: low-memory phones stop at 2048, and the GPU's own limit and the option are never passed. */
+export declare function textureCap(options?: {
+    max?: number;
+    gpuMax?: number;
+    deviceMemory?: number;
+}): number;
+/** Bytes of GPU memory a texture of this width costs, with its mipmaps, at 4 bytes a pixel (the most it can be). */
+export declare const textureBytes: (width: number) => number;

package/dist/realistic/tiers.js

@@ -0,0 +1,30 @@
+// Which size of each picture to hold on the GPU. Small first, sharper on zoom, and never past a cap. Pure.
+/** The widths each layer is shipped in (every picture is 2:1, so the height is half). */
+export const TIERS = {
+    day: [1024, 2048, 4096],
+    night: [1024, 2048],
+    clouds: [1024, 2048],
+    water: [1024, 2048],
+};
+/** The most pixels across a texture the package ever asks the GPU for. */
+export const MAX_TEXTURE = 4096;
+/** Texels across the whole circumference wanted per device pixel of the globe's radius: 3 is a little under 2 pi, so a texel is a little larger than a pixel. */
+export const TEXELS_PER_RADIUS_PIXEL = 3;
+/**
+ * The width to hold for a layer when the globe's disc has radius `radiusPx` device pixels: the smallest shipped width that gives
+ * `TEXELS_PER_RADIUS_PIXEL` texels per pixel, else the largest, never more than `cap`, never less than the smallest.
+ */
+export function chooseTier(layer, radiusPx, cap = MAX_TEXTURE) {
+    const widths = TIERS[layer].filter((width) => width <= Math.max(cap, TIERS[layer][0]));
+    const wanted = radiusPx * TEXELS_PER_RADIUS_PIXEL;
+    return widths.find((width) => width >= wanted) ?? widths[widths.length - 1];
+}
+/** The cap for this device: low-memory phones stop at 2048, and the GPU's own limit and the option are never passed. */
+export function textureCap(options = {}) {
+    let cap = Math.min(MAX_TEXTURE, options.max ?? MAX_TEXTURE, options.gpuMax ?? MAX_TEXTURE);
+    if (options.deviceMemory !== undefined && options.deviceMemory <= 2)
+        cap = Math.min(cap, 2048);
+    return cap;
+}
+/** Bytes of GPU memory a texture of this width costs, with its mipmaps, at 4 bytes a pixel (the most it can be). */
+export const textureBytes = (width) => Math.round(width * (width / 2) * 4 * (4 / 3));

package/dist/view.d.ts

@@ -8,5 +8,7 @@ export interface ProjectionView {
 }
 /** The radius of an unzoomed globe in a square of `size` pixels. */
 export declare const globeBaseScale: (size: number) => number;
+/** Where the view is centred on the globe: the home centre, turned by yaw (west) and tipped by tilt (north), held to the poles. */
+export declare const lookAt: (centre: GeoPoint, view: GlobeView) => GeoPoint;
 /** yaw turns longitude, tilt tips latitude, zoom scales and pan moves the disc in CSS pixels. */
 export declare function projectionView(centre: GeoPoint, size: number, view?: GlobeView): ProjectionView;

package/dist/view.js

@@ -2,6 +2,11 @@
 export const HOME_VIEW = Object.freeze({ yaw: 0, tilt: 0, zoom: 1, panX: 0, panY: 0 });
 /** The radius of an unzoomed globe in a square of `size` pixels. */
 export const globeBaseScale = (size) => size / 2 - 1;
+/** Where the view is centred on the globe: the home centre, turned by yaw (west) and tipped by tilt (north), held to the poles. */
+export const lookAt = (centre, view) => ({
+    lon: centre.lon - view.yaw,
+    lat: Math.max(-90, Math.min(90, centre.lat + view.tilt)),
+});
 /** yaw turns longitude, tilt tips latitude, zoom scales and pan moves the disc in CSS pixels. */
 export function projectionView(centre, size, view = HOME_VIEW) {
     return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@johnmorrisdotca/chikyu-earth",
-  "version": "0.4.0",
-  "description": "Chikyu Earth 地球: a line-drawn globe with country outlines that turns at the Earth's own rate and opens centred on where you are. The outlines, names and codes come from chizu's world-geo (Natural Earth), drawn with d3-geo. SVG, no canvas.",
+  "version": "0.5.0",
+  "description": "Chikyu Earth 地球: a line-drawn globe with country outlines that turns at the Earth's own rate and opens centred on where you are. The outlines, names and codes come from chizu's world-geo (Natural Earth), drawn with d3-geo. SVG, with an optional realistic Earth from space (three.js) and markers.",
   "keywords": [
     "earth",
     "globe",
@@ -22,7 +22,11 @@
     "custom-element",
     "d3-geo",
     "natural-earth",
-    "typescript"
+    "typescript",
+    "markers",
+    "satellite-imagery",
+    "webgl",
+    "three"
   ],
   "homepage": "https://johnmorrisdotca.github.io/chikyu-earth/",
   "repository": {
@@ -37,7 +41,9 @@
   "type": "module",
   "sideEffects": [
     "./dist/element.js",
-    "./src/element.ts"
+    "./src/element.ts",
+    "./dist/realistic/element.js",
+    "./src/realistic/element.ts"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -53,6 +59,21 @@
       "import": "./dist/element.js",
       "default": "./dist/element.js"
     },
+    "./realistic": {
+      "types": "./dist/realistic/index.d.ts",
+      "import": "./dist/realistic/index.js",
+      "default": "./dist/realistic/index.js"
+    },
+    "./realistic/element": {
+      "types": "./dist/realistic/element.d.ts",
+      "import": "./dist/realistic/element.js",
+      "default": "./dist/realistic/element.js"
+    },
+    "./markers": {
+      "types": "./dist/markers/index.d.ts",
+      "import": "./dist/markers/index.js",
+      "default": "./dist/markers/index.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -67,7 +88,7 @@
     "node": ">=24"
   },
   "scripts": {
-    "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsc -p tsconfig.json",
+    "build": "node -e \"const fs=require('node:fs');fs.rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.json && node -e \"require('node:fs').cpSync('textures','dist/textures',{recursive:true})\"",
     "lint": "eslint .",
     "typecheck": "tsc -p tsconfig.check.json && tsc -p tsconfig.tools.json && tsc -p tsconfig.demo.json",
     "test": "node --test test/*.test.ts",
@@ -76,13 +97,27 @@
     "prepublishOnly": "pnpm check",
     "site": "pnpm build && node scripts/site.ts",
     "dev": "pnpm site && node scripts/dev.ts",
-    "test:demo": "pnpm site && playwright test",
-    "screenshots": "pnpm site && node scripts/screenshots.ts"
+    "test:demo": "pnpm site && playwright test --project=chromium-desk --project=chromium-phone --project=webkit-desk --project=webkit-phone --project=chromium-gl",
+    "screenshots": "pnpm site && node scripts/screenshots.ts",
+    "textures": "python3 scripts/make-textures.py",
+    "test:soak": "pnpm site && playwright test --project=soak"
   },
   "dependencies": {
     "@johnmorrisdotca/chizu": "^1.6.0",
     "d3-geo": "^3.1.1"
   },
+  "peerDependencies": {
+    "@johnmorrisdotca/kazoku-ui": ">=0.9.0",
+    "three": ">=0.160.0"
+  },
+  "peerDependenciesMeta": {
+    "@johnmorrisdotca/kazoku-ui": {
+      "optional": true
+    },
+    "three": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@eslint/js": "^9.0.0",
     "@johnmorrisdotca/kazoku-ui": "^0.9.0",
@@ -90,8 +125,11 @@
     "@types/d3-geo": "^3.1.0",
     "@types/geojson": "^7946.0.14",
     "@types/node": "^24.0.0",
+    "@types/three": "^0.187.0",
+    "astronomy-engine": "2.1.19",
     "esbuild": "^0.25.0",
     "eslint": "^9.0.0",
+    "three": "0.186.1",
     "typescript": "^5.9.0",
     "typescript-eslint": "^8.0.0"
   },