Migrate to TSL

package.json

@@ -67,7 +67,7 @@
     "@monaco-editor/react": "^4.7.0",
     "@react-spring/three": "^10.0.0",
     "@react-three/drei": "^10.7.7",
-    "@react-three/fiber": "^9.5.0",
+    "@react-three/fiber": "^9.8.0",
     "@react-three/postprocessing": "^3.0.4",
     "@types/three": "^0.182.0",
     "@types/webpack": "^5.28.5",
@@ -81,7 +81,7 @@
     "icechunk-js": "^0.6.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.562.0",
-    "next": "^16.2.7",
+    "next": "16.3.8", 
     "next-themes": "^0.4.6",
     "pnpm": "^10.34.5",
     "proj4": "^2.20.9",
@@ -91,7 +91,7 @@
     "react-icons": "^5.5.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.0",
-    "three": "^0.182.0",
+    "three": "^0.186.0",
     "three-stdlib": "^2.36.0",
     "tunnel-rat": "^0.1.2",
     "vaul": "^1.1.2",

src/GlobalStates/GlobalStore.ts

@@ -59,6 +59,7 @@ type StoreState = {
   useF16Textures: boolean;
   borderCompatible: boolean;
   mainTextures: THREE.DataTexture[] | THREE.Data3DTexture[] | undefined;
+  isWebGPU: boolean;
 
   // setters
   setDataShape: (dataShape: number[]) => void;
@@ -102,6 +103,7 @@ type StoreState = {
   setClampExtremes: (clampExtremes: boolean) => void;
   setUseF16Textures: (useF16Textures: boolean) => void;
   setMainTextures: (mainTextures: THREE.DataTexture[] | THREE.Data3DTexture[] | undefined) => void;
+  setIsWebGPU: (isWebGPU: boolean) => void;
 };
 
 const createStore = () => create<StoreState>((set, get) => ({
@@ -148,6 +150,7 @@ const createStore = () => create<StoreState>((set, get) => ({
   useF16Textures: false,
   borderCompatible: true,
   mainTextures: undefined,
+  isWebGPU: true,
 
   // setters
   setDataShape: (dataShape) => set({ dataShape }),
@@ -209,7 +212,8 @@ const createStore = () => create<StoreState>((set, get) => ({
   setScalingFactors: (scalingFactors) => set({ scalingFactors }),
   setClampExtremes: (clampExtremes) => set({ clampExtremes }),
   setUseF16Textures: (useF16Textures) => set({ useF16Textures }),
-  setMainTextures: (mainTextures) => set({ mainTextures })
+  setMainTextures: (mainTextures) => set({ mainTextures }),
+  setIsWebGPU: (isWebGPU) => set({ isWebGPU }),
 }));
 
 declare global {

src/GlobalStates/PlotStore.ts

@@ -116,7 +116,7 @@ type PlotState ={
 
 export const usePlotStore = create<PlotState>((set, get) => ({
   plotType: "volume", 
-  pointSize: 5,
+  pointSize: 0.1,
   scalePoints: false,
   scaleIntensity: 1,
   quality: 200,