From aeffa70dda0905d85204d5437f94a6ce45f600e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20K=C3=B6lling?= <tobias.koelling@mpimet.mpg.de>
Date: Thu, 15 May 2025 01:51:44 +0900
Subject: [PATCH 1/2] implement azimuthal projection

---
 src/components/Globe.vue                | 24 +++++++++++--
 src/components/GlobeControls.vue        | 22 ++++++++++++
 src/components/GlobeHealpix.vue         | 24 ++++++++++++-
 src/components/utils/colormapShaders.ts | 46 ++++++++++++++++++++++---
 src/types/GlobeTypes.ts                 |  7 +++-
 src/views/GlobeView.vue                 |  1 +
 6 files changed, 115 insertions(+), 9 deletions(-)

diff --git a/src/components/Globe.vue b/src/components/Globe.vue
index b1fb7f74..ce3e5b63 100644
--- a/src/components/Globe.vue
+++ b/src/components/Globe.vue
@@ -6,6 +6,7 @@ import {
   makeColormapMaterial,
   availableColormaps,
   calculateColorMapProperties,
+  availableProjections,
 } from "./utils/colormapShaders.ts";
 import { decodeTime } from "./utils/timeHandling.ts";
 
@@ -26,6 +27,7 @@ import { storeToRefs } from "pinia";
 import type {
   TBounds,
   TColorMap,
+  TProjection,
   TSources,
   TVarInfo,
 } from "../types/GlobeTypes.ts";
@@ -38,6 +40,7 @@ const props = defineProps<{
   varbounds?: TBounds;
   colormap?: TColorMap;
   invertColormap?: boolean;
+  projection?: TProjection;
 }>();
 
 const emit = defineEmits<{ varinfo: [TVarInfo] }>();
@@ -109,11 +112,18 @@ watch(
   }
 );
 
+watch(
+  () => props.projection,
+  () => {
+    updateProjection();
+  }
+);
+
 const colormapMaterial = computed(() => {
   if (props.invertColormap) {
-    return makeColormapMaterial(props.colormap, 1.0, -1.0);
+    return makeColormapMaterial(props.colormap, 1.0, -1.0, props.projection);
   } else {
-    return makeColormapMaterial(props.colormap, 0.0, 1.0);
+    return makeColormapMaterial(props.colormap, 0.0, 1.0, props.projection);
   }
 });
 
@@ -184,6 +194,16 @@ function updateColormap() {
   redraw();
 }
 
+function updateProjection() {
+  if (props.projection) {
+    const myMesh = mainMesh as THREE.Mesh;
+    const material = myMesh.material as THREE.ShaderMaterial;
+    material.uniforms.projection.value =
+      availableProjections[props.projection!];
+    redraw();
+  }
+}
+
 async function getData() {
   store.startLoading();
   try {
diff --git a/src/components/GlobeControls.vue b/src/components/GlobeControls.vue
index 1c8288fe..c41b114c 100644
--- a/src/components/GlobeControls.vue
+++ b/src/components/GlobeControls.vue
@@ -7,9 +7,11 @@ import type {
   TColorMap,
   TModelInfo,
   TBounds,
+  TProjection,
   TVarInfo,
   TSelection,
 } from "../types/GlobeTypes.js";
+import { availableProjections } from "./utils/colormapShaders.ts";
 
 const props = defineProps<{ varinfo?: TVarInfo; modelInfo?: TModelInfo }>();
 
@@ -32,6 +34,7 @@ const defaultBounds: Ref<TBounds> = ref({});
 const userBoundsLow: Ref<number | undefined> = ref(undefined);
 const userBoundsHigh: Ref<number | undefined> = ref(undefined);
 const pickedBounds = ref("auto");
+const projection: Ref<TProjection> = ref("perspective");
 
 const activeBounds = computed(() => {
   if (pickedBounds.value === "auto") {
@@ -119,6 +122,11 @@ watch(
   () => setDefaultColormap()
 );
 
+watch(
+  () => projection.value,
+  () => publish()
+);
+
 function toggleMenu() {
   menuCollapsed.value = !menuCollapsed.value;
 }
@@ -132,6 +140,7 @@ const publish = () => {
     bounds: bounds.value as TBounds,
     colormap: colormap.value,
     invertColormap: invertColormap.value,
+    projection: projection.value,
   });
 };
 
@@ -404,6 +413,19 @@ publish(); // ensure initial settings are published
         </button>
       </div>
     </div>
+    <div v-if="modelInfo && !isHidden" class="panel-block">
+      <div class="select is-fullwidth">
+        <select v-model="projection">
+          <option
+            v-for="p in Object.keys(availableProjections)"
+            :key="p"
+            :value="p"
+          >
+            {{ p }}
+          </option>
+        </select>
+      </div>
+    </div>
     <div v-if="modelInfo && !isHidden" class="panel-block">
       <p class="control">
         <button
diff --git a/src/components/GlobeHealpix.vue b/src/components/GlobeHealpix.vue
index d2ad8366..32b6fe85 100644
--- a/src/components/GlobeHealpix.vue
+++ b/src/components/GlobeHealpix.vue
@@ -4,6 +4,7 @@ import * as zarr from "zarrita";
 import * as healpix from "@hscmap/healpix";
 import {
   availableColormaps,
+  availableProjections,
   calculateColorMapProperties,
   makeTextureMaterial,
 } from "./utils/colormapShaders.ts";
@@ -16,6 +17,7 @@ import { storeToRefs } from "pinia";
 import type {
   TBounds,
   TColorMap,
+  TProjection,
   TSources,
   TVarInfo,
 } from "../types/GlobeTypes.ts";
@@ -28,6 +30,7 @@ const props = defineProps<{
   varbounds?: TBounds;
   colormap?: TColorMap;
   invertColormap?: boolean;
+  projection?: TProjection;
 }>();
 
 const emit = defineEmits<{ varinfo: [TVarInfo] }>();
@@ -103,6 +106,13 @@ watch(
   }
 );
 
+watch(
+  () => props.projection,
+  () => {
+    updateProjection();
+  }
+);
+
 const gridsource = computed(() => {
   if (props.datasources) {
     return props.datasources.levels[0].grid;
@@ -156,6 +166,17 @@ function updateColormap() {
   redraw();
 }
 
+function updateProjection() {
+  for (const myMesh of mainMeshes) {
+    const material = myMesh.material as THREE.ShaderMaterial;
+    if (material?.uniforms.projection && props.projection) {
+      material.uniforms.projection.value =
+        availableProjections[props.projection];
+    }
+  }
+  redraw();
+}
+
 async function fetchGrid() {
   const gridStep = 64 + 1;
   try {
@@ -468,7 +489,8 @@ onBeforeMount(async () => {
       new THREE.Texture(),
       props.colormap!,
       addOffset,
-      scaleFactor
+      scaleFactor,
+      props.projection!
     );
     mainMeshes[ipix] = new THREE.Mesh(
       makeHealpixGeometry(1, ipix, gridStep),
diff --git a/src/components/utils/colormapShaders.ts b/src/components/utils/colormapShaders.ts
index e3dfce1d..f626a7db 100644
--- a/src/components/utils/colormapShaders.ts
+++ b/src/components/utils/colormapShaders.ts
@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import type { TColorMap } from "../../types/GlobeTypes";
+import type { TColorMap, TProjection } from "../../types/GlobeTypes";
 
 export const availableColormaps = {
   inferno: 0,
@@ -62,6 +62,11 @@ export const availableColormaps = {
   tarn: 57,
 } as const;
 
+export const availableProjections = {
+  perspective: 0,
+  azimuthal: 1,
+} as const;
+
 const shaders = `
 vec3 inferno(float t) {
 
@@ -1031,14 +1036,40 @@ void main() {
     ${distinguishShaders}
 }`;
 
+const PI = 3.14159265359;
+
+const positionVertexShaderPerspective = `
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
+`;
+
+const positionVertexShaderAzimuthal = `
+      vec3 pos = mat3(modelViewMatrix) * position;
+      float dist = (${PI} / 2.) - asin(pos.z);
+      pos.xy = normalize(pos.xy) * (dist * .25);
+      pos.z = -10. + pos.z * 0.001;
+      gl_Position = projectionMatrix * vec4(pos, 1.);
+`;
+
+const positionVertexShaderUniforms = `
+uniform int projection;
+`;
+const positionVertexShaderPart = `
+      if (projection == 0) {
+        ${positionVertexShaderPerspective}
+      } else if (projection == 1) {
+        ${positionVertexShaderAzimuthal}
+      }
+`;
+
 const dataOnMeshVertexShader = `
     attribute float data_value;
 
     varying float v_value;
+    ${positionVertexShaderUniforms}
 
     void main() {
       v_value = data_value;
-      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
+      ${positionVertexShaderPart}
     }
     `;
 
@@ -1055,23 +1086,26 @@ const dataOnScreenMeshVertexShader = `
 
 const dataOnTextureVertexShader = `
     varying vec2 vUv;
+    ${positionVertexShaderUniforms}
 
     void main() {
       vUv = uv;
-      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
+      ${positionVertexShaderPart}
     }
     `;
 
 export function makeColormapMaterial(
   colormap: TColorMap = "turbo",
   addOffset: 1.0 | 0.0 = 0.0,
-  scaleFactor: -1.0 | 1.0 = 1.0
+  scaleFactor: -1.0 | 1.0 = 1.0,
+  projection: TProjection = "perspective"
 ) {
   const material = new THREE.ShaderMaterial({
     uniforms: {
       addOffset: { value: addOffset },
       scaleFactor: { value: scaleFactor },
       colormap: { value: availableColormaps[colormap] },
+      projection: { value: availableProjections[projection] },
     },
 
     vertexShader: dataOnMeshVertexShader,
@@ -1102,7 +1136,8 @@ export function makeTextureMaterial(
   texture: THREE.Texture,
   colormap: TColorMap = "turbo",
   addOffset: number,
-  scaleFactor: number
+  scaleFactor: number,
+  projection: TProjection = "perspective"
 ) {
   const material = new THREE.ShaderMaterial({
     uniforms: {
@@ -1110,6 +1145,7 @@ export function makeTextureMaterial(
       scaleFactor: { value: scaleFactor },
       colormap: { value: availableColormaps[colormap] },
       data: { value: texture },
+      projection: { value: availableProjections[projection] },
     },
 
     vertexShader: dataOnTextureVertexShader,
diff --git a/src/types/GlobeTypes.ts b/src/types/GlobeTypes.ts
index 769dd6d2..5e4ddbba 100644
--- a/src/types/GlobeTypes.ts
+++ b/src/types/GlobeTypes.ts
@@ -1,10 +1,14 @@
 import type { Dayjs } from "dayjs";
-import type { availableColormaps } from "../components/utils/colormapShaders.ts";
+import type {
+  availableColormaps,
+  availableProjections,
+} from "../components/utils/colormapShaders.ts";
 import * as zarr from "zarrita";
 
 export type EmptyObj = Record<PropertyKey, never>;
 
 export type TColorMap = keyof typeof availableColormaps;
+export type TProjection = keyof typeof availableProjections;
 
 export type TBounds = EmptyObj | { low: number; high: number };
 
@@ -12,6 +16,7 @@ export type TSelection = {
   colormap: TColorMap;
   invertColormap: boolean;
   bounds: TBounds;
+  projection: TProjection;
 };
 
 export type TVarInfo = {
diff --git a/src/views/GlobeView.vue b/src/views/GlobeView.vue
index 9c522ba2..81677649 100644
--- a/src/views/GlobeView.vue
+++ b/src/views/GlobeView.vue
@@ -360,6 +360,7 @@ onMounted(async () => {
       :invert-colormap="selection.invertColormap"
       :varbounds="selection.bounds"
       :is-rotated="gridType === GRID_TYPES.REGULAR_ROTATED"
+      :projection="selection.projection"
       @varinfo="updateVarinfo"
     />
     <div v-if="isLoading || loading" class="top-right-loader loader" />

From 523486dcebcbaebe2a4855b01b2b930625df5255 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20K=C3=B6lling?= <tobias.koelling@mpimet.mpg.de>
Date: Thu, 15 May 2025 17:52:02 +0900
Subject: [PATCH 2/2] adjust azimuth parameter to SPHERE

---
 src/components/utils/colormapShaders.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/utils/colormapShaders.ts b/src/components/utils/colormapShaders.ts
index f626a7db..12825079 100644
--- a/src/components/utils/colormapShaders.ts
+++ b/src/components/utils/colormapShaders.ts
@@ -1045,7 +1045,7 @@ const positionVertexShaderPerspective = `
 const positionVertexShaderAzimuthal = `
       vec3 pos = mat3(modelViewMatrix) * position;
       float dist = (${PI} / 2.) - asin(pos.z);
-      pos.xy = normalize(pos.xy) * (dist * .25);
+      pos.xy = normalize(pos.xy) * (dist * .39);
       pos.z = -10. + pos.z * 0.001;
       gl_Position = projectionMatrix * vec4(pos, 1.);
 `;