react-babylon-map 0.0.1

package/stories/src/postprocessing.stories.tsx

@@ -0,0 +1,125 @@
+import { FC, memo, useEffect, useRef, useState } from "react";
+import {
+  MeshBuilder, StandardMaterial, Vector3, Color3,
+  HemisphericLight, DefaultRenderingPipeline,
+} from '@babylonjs/core';
+import { levaStore, useControls } from 'leva';
+import { useBabylonMap } from 'react-babylon-map';
+import { StoryMap } from "./story-map";
+
+function Lights() {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+    const light = new HemisphericLight("hemiLight", new Vector3(0, 1, 0), scene);
+    light.intensity = 1;
+    return () => { light.dispose(); };
+  }, [scene]);
+  return null;
+}
+
+/** Box with hover color change */
+const HoverBox: FC<{ scale: number }> = memo(({ scale }) => {
+  const { scene } = useBabylonMap();
+  const [hovered, setHovered] = useState(false);
+  const matRef = useRef<StandardMaterial | null>(null);
+
+  useEffect(() => {
+    if (!scene) return;
+    const s = scale;
+    const box = MeshBuilder.CreateBox('hoverBox', { width: s, height: s, depth: s }, scene);
+    box.position.y = s * 0.5;
+
+    const mat = new StandardMaterial('hoverBoxMat', scene);
+    mat.diffuseColor = Color3.FromHexString('#CCCCCC');
+    mat.alpha = 0.5;
+    matRef.current = mat;
+    box.material = mat;
+
+    box.metadata = {
+      onPointerOver: () => setHovered(true),
+      onPointerOut: () => setHovered(false),
+    };
+
+    return () => { box.dispose(); mat.dispose(); };
+  }, [scene, scale]);
+
+  useEffect(() => {
+    if (!matRef.current) return;
+    matRef.current.diffuseColor = Color3.FromHexString(hovered ? '#FFFF00' : '#CCCCCC');
+  }, [hovered]);
+
+  return null;
+});
+HoverBox.displayName = 'HoverBox';
+
+/** Ground plane */
+const Ground: FC = memo(() => {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+    const ground = MeshBuilder.CreateGround('ground', { width: 2, height: 2 }, scene);
+    const mat = new StandardMaterial('groundMat', scene);
+    mat.diffuseColor = Color3.FromHexString('#CCCCCC');
+    ground.material = mat;
+    return () => { ground.dispose(); mat.dispose(); };
+  }, [scene]);
+  return null;
+});
+Ground.displayName = 'Ground';
+
+/** Attach Babylon's built-in post-processing pipeline */
+const PostProcessing: FC<{ ao: boolean; ssaoEnabled: boolean }> = memo(({ ao, ssaoEnabled }) => {
+  const { scene, engine } = useBabylonMap();
+  useEffect(() => {
+    if (!scene || !engine) return;
+
+    const pipeline = new DefaultRenderingPipeline('defaultPipeline', true, scene, [scene.activeCamera!]);
+
+    // SSAO (equivalent to N8AO in react-three-postprocessing)
+    pipeline.ssaoEnabled = ao && ssaoEnabled;
+    if (pipeline.ssao) {
+      pipeline.ssao.totalStrength = 1.5;
+      pipeline.ssao.radius = 0.5;
+    }
+
+    // Bloom
+    pipeline.bloomEnabled = false;
+
+    // FXAA
+    pipeline.fxaaEnabled = true;
+
+    return () => { pipeline.dispose(); };
+  }, [scene, engine, ao, ssaoEnabled]);
+
+  return null;
+});
+PostProcessing.displayName = 'PostProcessing';
+
+export default { title: 'Postprocessing' };
+
+export function Default() {
+  const { ao, scale } = useControls({
+    ao: { value: true, label: 'Ambient Occlusion' },
+    scale: { value: 35 },
+  });
+
+  // Default to overlay mode
+  useEffect(() => {
+    levaStore.setValueAtPath('overlay', true, true);
+  }, []);
+
+  return (
+    <StoryMap
+      latitude={51.508}
+      longitude={-0.1281}
+      zoom={18}
+      pitch={60}
+    >
+      <Lights />
+      <PostProcessing ao={ao} ssaoEnabled={true} />
+      <HoverBox scale={scale} />
+      <Ground />
+    </StoryMap>
+  );
+}

package/stories/src/render-on-demand.stories.tsx

@@ -0,0 +1,76 @@
+import { FC, memo, useEffect, useRef, useState } from "react";
+import { MeshBuilder, StandardMaterial, Vector3, Color3, HemisphericLight } from '@babylonjs/core';
+import { useBabylonMap } from 'react-babylon-map';
+import { levaStore, useControls } from 'leva';
+import { StoryMap } from "./story-map";
+
+export function Default() {
+  const [toggle, setToggle] = useState(false);
+  useEffect(() => { levaStore.setValueAtPath('overlay', true, true); }, []);
+
+  return (
+    <StoryMap
+      latitude={51.508}
+      longitude={-0.1281}
+      zoom={18}
+      pitch={60}
+    >
+      <SceneContent toggle={toggle} />
+    </StoryMap>
+  );
+}
+
+function SceneContent({ toggle }: { toggle: boolean }) {
+  const { scene } = useBabylonMap();
+  const boxRef = useRef<any>(null);
+  const matRef = useRef<any>(null);
+  const groundRef = useRef<any>(null);
+  const groundMatRef = useRef<any>(null);
+
+  const rootRef = useRef<any>(null);
+
+  const rootMatRef = useRef<any>(null);
+
+  const boxMatRef = useRef<any>(null);
+
+  const boxMatMat = useRef<any>(null);
+
+  useEffect(() => {
+    if (!scene) return;
+    const light = new HemisphericLight("hemiLight", new Vector3(0, 1, 0), scene);
+    light.intensity = 1;
+    const root = MeshBuilder.CreateBox("root", { size: 35 }, scene);
+    root.position.y = 17.5;
+    root.rotation.y = 13 * Math.PI / 180;
+    rootRef.current = root;
+    const rMat = new StandardMaterial("rootMat", scene);
+    rMat.diffuseColor = Color3.FromHexString("#cccccc");
+    rMat.alpha = 0.5;
+    rootMatRef.current = rMat;
+    root.material = rMat;
+    root.metadata = {
+      onPointerOver: () => setToggle(true),
+      onPointerOut: () => setToggle(false),
+    };
+    // Ground plane
+    const ground = MeshBuilder.CreateGround("ground", { width: 70, height: 70 }, scene);
+    groundRef.current = ground;
+    const gMat = new StandardMaterial("groundMat", scene);
+    gMat.diffuseColor = Color3.FromHexString("#cccccc");
+    ground.material = gMat;
+    return () => {
+      light.dispose();
+      root.dispose(); rMat.dispose(); ground.dispose(); gMat.dispose();
+    };
+  }, [scene]);
+
+  useEffect(() => {
+    if (!rootMatRef.current) return;
+    rootMatRef.current.diffuseColor = toggle
+      ? Color3.FromHexString("#ffff00")
+      : Color3.FromHexString("#cccccc");
+  }, [toggle]);
+
+  return null;
+}
+SceneContent.displayName = 'SceneContent';

package/stories/src/story-map.tsx

@@ -0,0 +1,44 @@
+import { useControls } from 'leva';
+import { FC, PropsWithChildren, ReactNode } from "react";
+import { CanvasProps } from 'react-babylon-map';
+import { StoryMapbox } from './mapbox/story-mapbox';
+import { StoryMaplibre } from './maplibre/story-maplibre';
+
+export enum MapProvider {
+  maplibre = "maplibre",
+  mapbox = "mapbox",
+}
+
+export interface StoryMapProps extends PropsWithChildren {
+  latitude: number,
+  longitude: number,
+  zoom?: number,
+  pitch?: number,
+  bearing?: number,
+  canvas?: Partial<CanvasProps>,
+  mapChildren?: ReactNode,
+  mapboxChildren?: ReactNode,
+  maplibreChildren?: ReactNode,
+}
+
+/** `<Map>` styled for stories */
+export const StoryMap: FC<StoryMapProps> = (props) => {
+
+  const { mapProvider, overlay } = useControls({
+    mapProvider: {
+      value: MapProvider.maplibre,
+      options: MapProvider,
+      label: 'map provider'
+    },
+    overlay: {
+      value: false,
+    }
+  });
+
+  const canvas = { overlay, ...props.canvas };
+
+  return <div style={{ height: '100vh', position: 'relative' }}>
+    {mapProvider === MapProvider.maplibre && <StoryMaplibre {...props} canvas={canvas} />}
+    {mapProvider === MapProvider.mapbox && <StoryMapbox {...props} canvas={canvas} />}
+  </div>
+}

package/stories/src/sunlight.stories.tsx

@@ -0,0 +1,215 @@
+import { FC, memo, useEffect, useMemo, useRef } from "react";
+import {
+  MeshBuilder, StandardMaterial, Vector3, Color3, Matrix,
+  HemisphericLight, DirectionalLight, ShadowGenerator,
+  VertexData, VertexBuffer, DynamicTexture,
+} from '@babylonjs/core';
+import { useBabylonMap } from 'react-babylon-map';
+import { useControls } from 'leva';
+import { StoryMap } from "./story-map";
+import { getPosition } from 'suncalc';
+import tzLookup from 'tz-lookup';
+import { DateTime } from 'luxon';
+
+const RADIUS = 150;
+
+function getSunPosition({ date, latitude, longitude, radius = RADIUS }: {
+  date: Date; latitude: number; longitude: number; radius?: number;
+}): [number, number, number] {
+  const sun = getPosition(date, latitude, longitude);
+  const x = radius * Math.cos(sun.altitude) * -Math.sin(sun.azimuth);
+  const z = radius * Math.cos(sun.altitude) * Math.cos(sun.azimuth);
+  const y = radius * Math.sin(sun.altitude);
+  return [x, y, z];
+}
+
+function useSun({ latitude, longitude }: { longitude: number; latitude: number }) {
+  const { month, hour } = useControls({
+    month: { value: new Date().getMonth() + 1, min: 1, max: 12, step: 0.1 },
+    hour: { value: new Date().getHours(), min: 0, max: 23, step: 0.1 },
+  });
+
+  const date = useMemo(() => {
+    const timeZone = tzLookup(latitude, longitude);
+    return DateTime.now().setZone(timeZone).set({
+      month: Math.floor(month),
+      day: Math.floor((month % 1) * 27) + 1,
+      hour: Math.floor(hour),
+      minute: (hour % 1) * 60,
+      second: 0,
+      millisecond: 0,
+    }).toJSDate();
+  }, [latitude, longitude, month, hour]);
+
+  const { position, sunPath } = useMemo(() => {
+    const position = getSunPosition({ date, latitude, longitude });
+    const tempDate = new Date(date);
+    const sunPath: [number, number, number][] = [];
+    for (let h = 0; h <= 24; h++) {
+      tempDate.setHours(h);
+      sunPath.push(getSunPosition({ date: tempDate, latitude, longitude }));
+    }
+    return { position, sunPath };
+  }, [date, latitude, longitude]);
+
+  return { position, sunPath };
+}
+
+/** Sun path line with per-vertex colors (night=blue, day=orange) */
+const SunPathLine: FC<{ path: [number, number, number][] }> = memo(({ path }) => {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene || path.length < 2) return;
+
+    const positions: number[] = [];
+    const colors: number[] = [];
+    const indices: number[] = [];
+    const night = Color3.FromHexString('#00008B');
+    const day = Color3.FromHexString('#FFA500');
+    const tmp = new Color3();
+
+    for (let i = 0; i < path.length; i++) {
+      positions.push(path[i][0], path[i][1], path[i][2]);
+      indices.push(i, i + 1);
+
+      const y = path[i][1];
+      const nightStart = -RADIUS * 0.5;
+      const dayStart = RADIUS * 0.5;
+      let c: Color3;
+      if (y <= nightStart) c = night;
+      else if (y >= dayStart) c = day;
+      else {
+        const d = (y - nightStart) / (dayStart - nightStart);
+        c = tmp.copyFrom(night).lerp(day, d);
+      }
+      colors.push(c.r, c.g, c.b);
+    }
+    // Remove last index (no segment after last point)
+    indices.pop();
+
+    const mesh = new MeshBuilder.CreateLines('sunPath', {
+      points: path.map(p => new Vector3(p[0], p[1], p[2])),
+      updatable: false,
+    }, scene);
+    const mat = new StandardMaterial('sunPathMat', scene);
+    mat.emissiveColor = new Color3(1, 1, 1);
+    mat.disableLighting = true;
+    mesh.material = mat;
+
+    return () => { mesh.dispose(); mat.dispose(); };
+  }, [scene, path]);
+  return null;
+});
+SunPathLine.displayName = 'SunPathLine';
+
+/** Floor plane that receives shadows */
+const Floor: FC = () => {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+    const floor = MeshBuilder.CreateGround('floor', { width: 1000, height: 1000 }, scene);
+    const mat = new StandardMaterial('floorMat', scene);
+    mat.diffuseColor = Color3.Black();
+    mat.specularColor = Color3.Black();
+    mat.alpha = 0.5;
+    floor.material = mat;
+    floor.receiveShadows = true;
+    return () => { floor.dispose(); mat.dispose(); };
+  }, [scene]);
+  return null;
+};
+
+/** Sphere mesh */
+const MySphere: FC<{ position: [number, number, number]; color: string; castShadow?: boolean }> = memo(({ position, color, castShadow }) => {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+    const sphere = MeshBuilder.CreateSphere('sunSphere', { diameter: 32 }, scene);
+    sphere.position.set(position[0], position[1], position[2]);
+    sphere.rotation.y = 45 * Math.PI / 180;
+    const mat = new StandardMaterial('sphereMat', scene);
+    mat.diffuseColor = Color3.FromHexString(color);
+    mat.emissiveColor = Color3.FromHexString(color).scale(0.3);
+    sphere.material = mat;
+    if (castShadow) sphere.receiveShadows = true;
+    return () => { sphere.dispose(); mat.dispose(); };
+  }, [scene, position, color, castShadow]);
+  return null;
+});
+MySphere.displayName = 'MySphere';
+
+/** Sun with directional light + shadow */
+const Sun: FC<{ latitude: number; longitude: number }> = ({ latitude, longitude }) => {
+  const { scene, map } = useBabylonMap();
+  const { position, sunPath } = useSun({ latitude, longitude });
+  const isDay = position[1] >= 0;
+
+  // Switch map style based on sun position
+  useEffect(() => {
+    if (!map) return;
+    const style = isDay
+      ? "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+      : "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
+    map.setStyle(style);
+  }, [map, isDay]);
+
+  // Directional light + shadow
+  useEffect(() => {
+    if (!scene) return;
+    const dir = new DirectionalLight('sunLight',
+      new Vector3(-position[0], -position[1], -position[2]).normalize(), scene);
+    dir.position = new Vector3(position[0], position[1], position[2]);
+    dir.intensity = isDay ? 1.5 * Math.PI : 0;
+
+    const shadowGen = new ShadowGenerator(1024, dir);
+    shadowGen.useBlurExponentialShadowMap = true;
+    shadowGen.blurKernel = 32;
+
+    // Add shadow casters as they're created
+    scene.meshes.forEach(m => {
+      if (m.name === 'sunSphere') shadowGen.addShadowCaster(m);
+    });
+
+    return () => {
+      shadowGen.dispose();
+      dir.dispose();
+    };
+  }, [scene, position, isDay]);
+
+  // Hemisphere light for night
+  useEffect(() => {
+    if (!scene || isDay) return;
+    const hemi = new HemisphericLight('nightHemi',
+      new Vector3(position[0], position[1], position[2]), scene);
+    hemi.intensity = Math.PI;
+    hemi.groundColor = Color3.FromHexString('#005f6b');
+    hemi.diffuse = Color3.FromHexString('#343838');
+    return () => { hemi.dispose(); };
+  }, [scene, position, isDay]);
+
+  return (
+    <>
+      <SunPathLine path={sunPath} />
+      {isDay && (
+        <MySphere position={position} color="#FFA500" />
+      )}
+    </>
+  );
+};
+
+export default { title: 'Sunlight' };
+
+export function Default() {
+  const { longitude, latitude } = useControls({
+    longitude: { value: 0, min: -179, max: 180, pad: 6 },
+    latitude: { value: 51, min: -80, max: 80, pad: 6 },
+  });
+
+  return (
+    <StoryMap longitude={longitude} latitude={latitude} zoom={6} pitch={60}>
+      <Sun longitude={longitude} latitude={latitude} />
+      <Floor />
+      <MySphere position={[0, 10, 0]} color="#E28357" castShadow />
+    </StoryMap>
+  );
+}

package/stories/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/stories/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "Node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "allowSyntheticDefaultImports": true,
+
+    "paths": {
+      "react-babylon-map": ["../src/mapbox.index.ts"],
+      "react-babylon-map/maplibre": ["../src/maplibre.index.ts"]
+    },
+    "baseUrl": "../"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/stories/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/stories/vite.config.ts

@@ -0,0 +1,27 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      'react-babylon-map/maplibre': resolve(__dirname, '../src/maplibre.index.ts'),
+      'react-babylon-map': resolve(__dirname, '../src/mapbox.index.ts'),
+    }
+  },
+  server: {
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    },
+    fs: {
+      strict: false,
+      allow: ['/home/ney/os/react-babylon-map'],
+    },
+  },
+  optimizeDeps: {
+    exclude: ['react-babylon-map', '@ifc-lite/geometry', '@ifc-lite/wasm']
+  },
+  assetsInclude: ['**/*.wasm'],
+})

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "paths": {
+      "react-babylon-map": ["./src/mapbox.index.ts"],
+      "react-babylon-map/maplibre": ["./src/maplibre.index.ts"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.mapbox.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.types.json",
+  "compilerOptions": {
+    "outDir": "dist/types"
+  },
+  "include": ["src/mapbox.index.ts"]
+}

package/tsconfig.maplibre.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.types.json",
+  "compilerOptions": {
+    "outDir": "dist/maplibre/types"
+  },
+  "include": ["src/maplibre.index.ts"]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/tsconfig.types.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  }
+}

package/vite.config.ts

@@ -0,0 +1,65 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path';
+
+/** 0: no lib mode, 1: ES, 2: cjs */
+const libMode = parseInt(process.env.LIB_MODE!) || 0;
+
+/** 0: MapLibre, 1: MapBox */
+const mapProvider = parseInt(process.env.MAP_MODE!) || 0;
+
+const isES = libMode === 1;
+
+const isMaplibre = mapProvider === 0;
+
+const entry = `src/${isMaplibre ? 'maplibre' : 'mapbox'}.index.ts`;
+
+let outDir = isMaplibre ? 'dist/maplibre' : 'dist';
+
+outDir = `${outDir}/${isES ? 'es' : 'cjs'}`;
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  ...(!libMode
+    // dev mode
+    ? {
+      base: '',
+      resolve: {
+        alias: {
+          'react-babylon-map/maplibre': resolve(__dirname, './src/maplibre.index.ts'),
+          'react-babylon-map/mapbox': resolve(__dirname, './src/mapbox.index.ts'),
+          'react-babylon-map': resolve(__dirname, './src/mapbox.index.ts'),
+        }
+      }
+    }
+    // lib mode
+    : {
+      publicDir: false,
+      build: {
+        minify: false,
+        lib: {
+          entry,
+          name: 'react-babylon-map',
+          formats: isES ? ['es'] : ['cjs'],
+          fileName: 'main',
+        },
+        outDir,
+        rollupOptions: {
+          output: !isES ? undefined : { sourcemap: true, preserveModules: true },
+          external: [
+            "@babylonjs/core",
+            "@babylonjs/materials",
+            "maplibre-gl",
+            "mapbox-gl",
+            "react",
+            'react/jsx-runtime',
+            "react-dom",
+            "react-map-gl",
+            "react-map-gl/mapbox",
+            "react-map-gl/maplibre",
+          ]
+        },
+      },
+    })
+})