EarthyScience · TheJeran · Oct 15, 2025 · Oct 15, 2025
diff --git a/src/components/plots/Plot.tsx b/src/components/plots/Plot.tsx
@@ -72,8 +72,6 @@ const Orbiter = ({isFlat} : {isFlat  : boolean}) =>{
     </>
   );
 }
-
-
 
 const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
     const {
@@ -122,7 +120,7 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
     const [showInfo, setShowInfo] = useState<boolean>(false)
     const [loc, setLoc] = useState<number[]>([0,0])
 
-    const [texture, setTexture] = useState<THREE.DataTexture[] | THREE.Data3DTexture[] | null>(null)
+    const [textures, setTextures] = useState<THREE.DataTexture[] | THREE.Data3DTexture[] | null>(null)
     const [show, setShow] = useState<boolean>(true) //Prevents rendering of 3D objects until data is fully loaded in
 
   //DATA LOADING
@@ -131,12 +129,18 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
       setShowLoading(true);
       setShow(false)
       try{
+        if (textures) {
+          textures.forEach(tex =>{
+            tex.dispose();
+            tex.source.data = null
+          });
+        }
         ZarrDS.GetArray(variable, {xSlice, ySlice, zSlice}).then((result) => {
         const [tempTexture, scaling] = ArrayToTexture({
           data: result.data,
           shape: result.shape
         })
-        setTexture(tempTexture)
+        setTextures(tempTexture)
         if (result.scalingFactor){
           const {maxVal, minVal} = scaling
           setValueScales({ maxVal: maxVal*(Math.pow(10,result.scalingFactor)), minVal: minVal*(Math.pow(10,result.scalingFactor)) });
@@ -195,15 +199,16 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
     }else{
       setMetadata(null)
     }
-
   }, [reFetch])
 
   useEffect(()=>{ // Reset after analysis mode
-    if(!analysisMode){
+    if(!analysisMode && show){
       const {dataShape} = useGlobalStore.getState();
       setIsFlat(dataShape.length == 2)
       const newText = GetCurrentTexture(dataShape)
-      setTexture(newText)
+      if (newText){
+        setTextures(newText)
+      }
     }
   },[analysisMode])
 
@@ -213,12 +218,13 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
     coords,
     val
   }),[])
+
   const Nav = useMemo(()=>Navbar,[])
   return (
     <div className='main-canvas'
       style={{width:'100vw'}}
     >
-      <AnalysisWG setTexture={setTexture} ZarrDS={ZarrDS}/>
+      <AnalysisWG setTexture={setTextures} ZarrDS={ZarrDS}/>
       {show && <Colorbar units={metadata?.units} valueScales={valueScales}/>}
       <Nav />
       {(isFlat || plotType == "flat") && <AnalysisInfo loc={loc} show={showInfo} info={[...coords.current,val.current]}/> }
@@ -232,17 +238,17 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
         {show && <AxisLines />}
         {plotType == "volume" && show && 
           <>
-            <DataCube volTexture={texture}/>
+            <DataCube volTexture={textures}/>
             <UVCube ZarrDS={ZarrDS} />
           </>
         }
         {plotType == "point-cloud" && show &&
           <>
-            <PointCloud textures={{texture: texture as THREE.Data3DTexture[],colormap}} ZarrDS={ZarrDS}/>
+            <PointCloud textures={{texture: textures as THREE.Data3DTexture[],colormap}} ZarrDS={ZarrDS}/>
           </> 
         }
         {plotType == "sphere" && show && 
-          <Sphere textures={texture} ZarrDS={ZarrDS} /> 
+          <Sphere textures={textures} ZarrDS={ZarrDS} /> 
         }
         <Orbiter isFlat={false} />
       </Canvas>
@@ -255,7 +261,7 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
           <ExportCanvas show={show}/>
           <CountryBorders/>
           {show && <AxisLines />}
-          <FlatMap textures={texture as THREE.DataTexture | THREE.Data3DTexture[]} infoSetters={infoSetters} />
+          <FlatMap textures={textures as THREE.DataTexture | THREE.Data3DTexture[]} infoSetters={infoSetters} />
           <Orbiter isFlat={true}/>
         </Canvas>
         </>}

diff --git a/src/components/textures/TextureMakers.tsx b/src/components/textures/TextureMakers.tsx
@@ -8,77 +8,26 @@ interface Array {
     shape: number[];
 }
 
-function ArrayTo2D(array: Array, valueScales?: {maxVal: number, minVal: number}): [ THREE.DataTexture[], {minVal: number, maxVal: number}]{
-    const {textureArrayDepths} = useGlobalStore.getState()
-    const shape = array.shape;
-    const data = array.data;
-    const width = shape[1];
-    const height = shape[0];
-    const [minVal,maxVal] = valueScales ? [valueScales.minVal, valueScales.maxVal] : ArrayMinMax(data)
-    const normed = data.map((i)=>(i-minVal)/(maxVal-minVal))
-    const textureData = new Uint8Array(normed.map((i)=>isNaN(i) ? 255 : i*254));   
-    const chunkSize = {
-        y: Math.floor(height / textureArrayDepths[1]),
-        x: Math.floor(width / textureArrayDepths[2])
-    };
-
-    const chunkData = chunkArray2D(textureData as Uint8Array, {y:height, x:width}, chunkSize)
-    const chunks = []
-    for (const chunk of chunkData){
-        const texture = new THREE.DataTexture(
-            chunk.data,
-            chunk.dims.x,
-            chunk.dims.y,
-            THREE.RedFormat,
-            THREE.UnsignedByteType
-        );
-        texture.needsUpdate = true;
-        chunks.push(texture)
-    }
-    return [chunks, {maxVal,minVal}]
-}
+function StoreData(array: Array, valueScales?: {maxVal: number, minVal: number}): {minVal: number, maxVal: number}{
+    const { setTextureData} = useGlobalStore.getState()
 
-export function ArrayTo3D(array: Array, valueScales?: {maxVal: number, minVal: number}) : [ THREE.Data3DTexture[], {minVal: number, maxVal: number}]{
-    const {textureArrayDepths, setTextureData} = useGlobalStore.getState()
-    const shape = array.shape;
     const data = array.data;
-    const [lz,ly,lx] = shape
     const [minVal,maxVal] = valueScales ? [valueScales.minVal, valueScales.maxVal] : ArrayMinMax(data)
-    const normed = array.data.map((i)=>(i-minVal)/(maxVal-minVal))
-    const textureData = new Uint8Array(normed.map((i)=>isNaN(i) ? 255 : i*254));  
+    const textureData = new Uint8Array(
+      array.data.map((i) => {
+        const normed = (i - minVal) / (maxVal - minVal);
+        return isNaN(normed) ? 255 : normed * 254;
+      })
+    );
     setTextureData(textureData)
-    // Calculate chunk dimensions
-    const chunkSize = {
-        z: Math.floor(lz / textureArrayDepths[0]),
-        y: Math.floor(ly / textureArrayDepths[1]),
-        x: Math.floor(lx / textureArrayDepths[2])
-    };
-    const chunkData = chunkArray(textureData, {z:lz, y:ly, x:lx}, chunkSize, textureArrayDepths)
-    const chunks = []
-    for (const chunk of chunkData){   
-        //@ts-expect-error stop whining
-        const volTexture = new THREE.Data3DTexture(chunk.data, chunk.dims.x, chunk.dims.y, chunk.dims.z);
-        volTexture.format = THREE.RedFormat;
-        volTexture.minFilter = THREE.NearestFilter;
-        volTexture.magFilter = THREE.NearestFilter;
-        volTexture.needsUpdate = true;
-        chunks.push(volTexture)
-    }
-    return [chunks, {maxVal,minVal}]
+    return {minVal, maxVal}
 }
 
-export function ArrayToTexture(array: Array, valueScales?: {maxVal: number, minVal: number}, cached?: boolean): [ THREE.Data3DTexture[] | THREE.DataTexture[], {minVal: number, maxVal: number}]{
-    const shape = array.shape;
-    if (cached){
-      array.data = useGlobalStore.getState().textureData
-    }
-    const [textures,scales] = shape.length == 3 ? ArrayTo3D(array, valueScales) : ArrayTo2D(array, valueScales);
-    return [textures, scales];
-}
-
-export function GetCurrentTexture(shape: number[]) : THREE.DataTexture[] | THREE.Data3DTexture[] {
+export function GetCurrentTexture(shape: number[]) : THREE.DataTexture[] | THREE.Data3DTexture[] | undefined {
   const {textureData, textureArrayDepths} = useGlobalStore.getState()
-
+  if (!textureData){
+    return
+  }
   if (shape.length == 2){
     const width = shape[1];
     const height = shape[0];
@@ -122,6 +71,11 @@ export function GetCurrentTexture(shape: number[]) : THREE.DataTexture[] | THREE
   }
 }
 
+export function ArrayToTexture(array: Array, valueScales?: {maxVal: number, minVal: number}): [ THREE.Data3DTexture[] | THREE.DataTexture[], {minVal: number, maxVal: number}]{
+    const scales = StoreData(array, valueScales);
+    const textures = GetCurrentTexture(array.shape)
+    return [textures as THREE.Data3DTexture[] | THREE.DataTexture[], scales];
+}
 
 function chunkArray(
   arr: Uint8Array,

diff --git a/src/components/textures/index.ts b/src/components/textures/index.ts
@@ -1,10 +1,9 @@
 import { GetColorMapTexture, colormaps } from './colormap';
-import {ArrayToTexture, ArrayTo3D, GetCurrentTexture} from './TextureMakers'
+import {ArrayToTexture, GetCurrentTexture} from './TextureMakers'
 
 export {
     GetColorMapTexture,
     colormaps,
     ArrayToTexture,
-    ArrayTo3D,
     GetCurrentTexture
 }
diff --git a/src/utils/GlobalStates.ts b/src/utils/GlobalStates.ts
@@ -3,7 +3,6 @@ import * as THREE from 'three';
 import { GetColorMapTexture } from "@/components/textures";
 import { GetStore } from "@/components/zarr/ZarrLoaderLRU";
 import MemoryLRU from "./MemoryLRU";
-import { U } from "vitest/dist/chunks/environment.d.cL3nLXbE.js";
 
 
 const ESDC = 'https://s3.bgc-jena.mpg.de:9000/esdl-esdc-v3.0.2/esdc-16d-2.5deg-46x72x1440-3.0.2.zarr'