From e1743644f25aede2d8fb79c5839c530542ccae4b Mon Sep 17 00:00:00 2001
From: ctwhome <ctw@ctwhome.com>
Date: Thu, 14 Mar 2024 09:19:28 +0100
Subject: [PATCH 1/6] WIP

---
 src/lib/shaders/volume_transfer.frag           | 10 +++++-----
 src/routes/viewer/sceneSetup/updateMaterial.ts | 10 ++++++----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/lib/shaders/volume_transfer.frag b/src/lib/shaders/volume_transfer.frag
index a2d39b2..15752ec 100644
--- a/src/lib/shaders/volume_transfer.frag
+++ b/src/lib/shaders/volume_transfer.frag
@@ -1,13 +1,13 @@
 // This code is based upon Janelia's web-vol-viewer
 // https://github.com/JaneliaSciComp/web-vol-viewer
 
-precision highp float;
+precision mediump float;
 in vec3 rayDirUnnorm;
 in vec3 lightDir;
 
 uniform sampler2D transferTex;
-// uniform lowp sampler3D volumeTex;
 uniform lowp sampler3D volumeTex;
+uniform lowp sampler3D coarseVolumeTex;
 uniform float dtScale;
 uniform float finalGamma;
 uniform vec3 sunLightColor;
@@ -66,7 +66,7 @@ void main(void){
 
   tBox.x=max(tBox.x,0.);
 
-  ivec3 volumeTexSize=textureSize(volumeTex,0);
+  ivec3 volumeTexSize=textureSize(coarseVolumeTex,0);
   //  vec3 dt0 = 1.0 / (vec3(volumeTexSize) * abs(rayDir));
   vec3 dt0=1./(vec3(volumeTexSize)*abs(rayDir));
   float dt=min(dt0.x,min(dt0.y,dt0.z)) * 0.5;
@@ -101,8 +101,8 @@ void main(void){
   vec3 random=fract(sin(gl_FragCoord.x*12.9898+gl_FragCoord.y*78.233)*43758.5453)*dt*rayDir/8.0;
   for(float t=tBox.x;t<tBox.y;t+=dt){
 
-    float value=texture(volumeTex, pSized).r;
-    if(value != 0.0){
+    float value=texture(coarseVolumeTex, pSized).r;
+    if(value != 100.0){
       #pragma unroll_loop_start
       for(int i = 0; i < 8; ++i)
       {
diff --git a/src/routes/viewer/sceneSetup/updateMaterial.ts b/src/routes/viewer/sceneSetup/updateMaterial.ts
index cd424fd..070096b 100644
--- a/src/routes/viewer/sceneSetup/updateMaterial.ts
+++ b/src/routes/viewer/sceneSetup/updateMaterial.ts
@@ -2,6 +2,7 @@ import * as THREE from 'three';
 import { get } from 'svelte/store';
 import { volumeSizes } from '../stores/allSlices.store';
 import { boxes } from './boxSetup';
+import { coarseData } from '../fetchAndPrepareData/coarseData';
 
 
 // Be caruful with these valies, they can clip the data in the 3D scene
@@ -49,7 +50,9 @@ export function updateMaterial({ variable, dataUint8 }) {
       break;
 
     case 'qr':
-      volumeTexture = new THREE.Data3DTexture(dataUint8, sizes[0] / 8, sizes[1] / 8, sizes[2] / 8);
+      // uniforms?.coarseVolumeTex?.value?.dispose();
+
+      volumeTexture = new THREE.Data3DTexture(dataUint8, sizes[0], sizes[1], sizes[2]);
       volumeTexture.format = THREE.RedFormat;
       volumeTexture.minFilter = THREE.NearestFilter; // TODO: is this the best filter?
       volumeTexture.magFilter = THREE.NearestFilter;
@@ -57,6 +60,8 @@ export function updateMaterial({ variable, dataUint8 }) {
       uniforms.dtScale.value = dtScale;
       uniforms.alphaNorm.value = 2.0;
       uniforms.finalGamma.value = finalGamma;
+
+      uniforms.coarseVolumeTex.value = new THREE.Data3DTexture(coarseData(sizes, dataUint8), sizes[0] / 8, sizes[1] / 8, sizes[2] / 8);;
       break;
 
     case 'thetavmix':
@@ -76,7 +81,4 @@ export function updateMaterial({ variable, dataUint8 }) {
   //
   uniforms.volumeTex.value = volumeTexture;
 
-
-
-
 }

From 5d2b46b843c6704d579b3992bf6f40fa0ec52ca8 Mon Sep 17 00:00:00 2001
From: goord <G.vandenOord@gmail.com>
Date: Wed, 27 Mar 2024 20:26:25 +0100
Subject: [PATCH 2/6] Fixed empty space skipping for 3d rain

---
 src/lib/shaders/volume_transfer.frag          |  9 ++---
 src/lib/utils/makeRainTransferTex.ts          |  9 +++--
 .../viewer/fetchAndPrepareData/coarseData.ts  | 38 +++++++++++--------
 .../viewer/fetchAndPrepareData/fetchSlice.ts  |  5 ++-
 .../viewer/sceneSetup/updateMaterial.ts       | 21 +++++++---
 5 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/src/lib/shaders/volume_transfer.frag b/src/lib/shaders/volume_transfer.frag
index 15752ec..94018f4 100644
--- a/src/lib/shaders/volume_transfer.frag
+++ b/src/lib/shaders/volume_transfer.frag
@@ -67,9 +67,8 @@ void main(void){
   tBox.x=max(tBox.x,0.);
 
   ivec3 volumeTexSize=textureSize(coarseVolumeTex,0);
-  //  vec3 dt0 = 1.0 / (vec3(volumeTexSize) * abs(rayDir));
   vec3 dt0=1./(vec3(volumeTexSize)*abs(rayDir));
-  float dt=min(dt0.x,min(dt0.y,dt0.z)) * 0.5;
+  float dt=min(dt0.x,min(dt0.y,dt0.z));
 
   // Prevents a lost WebGL context.
   if(dt<.00001){
@@ -100,9 +99,9 @@ void main(void){
   float transmittance_threshold=0.05;
   vec3 random=fract(sin(gl_FragCoord.x*12.9898+gl_FragCoord.y*78.233)*43758.5453)*dt*rayDir/8.0;
   for(float t=tBox.x;t<tBox.y;t+=dt){
-
+    // look 8 steps ahead
     float value=texture(coarseVolumeTex, pSized).r;
-    if(value != 100.0){
+    if(value != 0.0){
       #pragma unroll_loop_start
       for(int i = 0; i < 8; ++i)
       {
@@ -132,8 +131,6 @@ void main(void){
   }
   else
   {
-    // float g=1./finalGamma;
-    // gl_FragColor=pow(vec4(illumination,1.0-transmittance),vec4(g,g,g,1));
     float g=1./finalGamma;
     vec4 finalColor = pow(vec4(illumination,1.0-transmittance),vec4(g,g,g,1));
     // Apply uTransparency to the alpha component
diff --git a/src/lib/utils/makeRainTransferTex.ts b/src/lib/utils/makeRainTransferTex.ts
index ae3297c..8ab350f 100644
--- a/src/lib/utils/makeRainTransferTex.ts
+++ b/src/lib/utils/makeRainTransferTex.ts
@@ -6,15 +6,18 @@ export function makeRainTransferTex() {
 	const size = width * height;
 	const data = new Uint8Array(4 * size);
 
-	const rstart = 0;
+	const rstart = 2;
 	const rend = 60;
-	const astart = 1;
+	const bstart = 16;
+	const bend = 60;
+	const astart = 0;
 	const aend = 64;
 	const imid = 32;
 	const amid = 32;
 
 	for (let i = 0; i < width; i += 1) {
 		const r = rstart + (i * (rend - rstart)) / (width - 1);
+		const b = bstart + (i * (bend - bstart)) / (width - 1);
 		let alpha = 0;
 		if (i < imid) {
 			alpha = astart + (i * (amid - astart)) / (imid - 1);
@@ -24,7 +27,7 @@ export function makeRainTransferTex() {
 
 		data[4 * i] = r;
 		data[4 * i + 1] = 0;
-		data[4 * i + 2] = r;
+		data[4 * i + 2] = b;
 		data[4 * i + 3] = alpha;
 	}
 	// console.log(data);
diff --git a/src/routes/viewer/fetchAndPrepareData/coarseData.ts b/src/routes/viewer/fetchAndPrepareData/coarseData.ts
index dfb229f..b654e7f 100644
--- a/src/routes/viewer/fetchAndPrepareData/coarseData.ts
+++ b/src/routes/viewer/fetchAndPrepareData/coarseData.ts
@@ -1,29 +1,37 @@
 //
 // Coarse data to compress the ammount of data for the qr dataset
 //
-export function coarseData(shape, data) {
+export function coarseData(data, shape) {
   // Coarse data to compress the ammount of data
   let dataCoarse = null;
-  // console.log("Coarse graining...");
-  dataCoarse = new Uint8Array(shape[0] * shape[1] * shape[2] / (8 * 8 * 8));
-  for (let i = 0; i < shape[0] / 8; i++) {
-    for (let j = 0; j < shape[1] / 8; j++) {
-      for (let k = 0; k < shape[2] / 8; k++) {
-        let x = 0;
-        for (let l = 0; l < 8; l++) {
-          for (let m = 0; m < 8; m++) {
-            for (let n = 0; n < 8; n++) {
-              const index = (k * 8 + n) + (j * 8 + m) * shape[2] + (l * 8 + i) * shape[2] * shape[1];
-              x = Math.max(x, data[index])
+  const blockSize = 8;
+  const s0 = Math.ceil(shape[0] / blockSize);
+  const s1 = Math.ceil(shape[1] / blockSize);
+  const s2 = Math.ceil(shape[2] / blockSize);
+  console.log("Coarse graining array of shape ",shape," to ",[s0, s1, s2],"...");
+  dataCoarse = new Uint8ClampedArray(s0 * s1 * s2);
+  let index2 = 0;
+  let x = 0;
+  for (let i = 0; i < shape[2]; i += blockSize) {
+    for (let j = 0; j < shape[0]; j += blockSize) {
+      for (let k = 0; k < shape[1]; k += blockSize) {
+        x = 0;
+        for (let l = i; l < (i + blockSize) && l < shape[2]; l++) {
+          for (let m = j; m < (j + blockSize) && m < shape[0]; m++) {
+            for (let n = k; n < (k + blockSize) && n < shape[1]; n++) {
+                const value = data[n + m * shape[1] + l * shape[0] * shape[1]];
+                if (value > x){
+                  x = value;
+                }
             }
           }
         }
-        const index2 = k + j * shape[2] / 8 + i * (shape[2] / 8) * (shape[1] / 8);
-        dataCoarse[index2] = x
+        dataCoarse[index2] = x;
+        index2++;
       }
     }
   }
-  // console.log("...Done");
+  console.log("...Done");
 
   return dataCoarse;
 }
\ No newline at end of file
diff --git a/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts b/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts
index 276ca1e..a62dc54 100644
--- a/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts
+++ b/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts
@@ -2,7 +2,7 @@ import { openArray, HTTPStore } from 'zarr';
 import type { PersistenceMode } from 'zarr/types/types';
 
 import { dataSlices } from "../stores/allSlices.store";
-import { coarseData } from './coarseData';
+//import { coarseData } from './coarseData';
 
 // downloadZarrPoints
 export async function fetchSlice({
@@ -27,7 +27,8 @@ export async function fetchSlice({
   let dataUint8 = null;
   if (path == 'qr') {
     // Coarse data to compress the ammount of data
-    dataUint8 = coarseData(shape, data);
+//    dataUint8 = coarseData(shape, data);
+    dataUint8 = data;
   }
   else {
     dataUint8 = data;
diff --git a/src/routes/viewer/sceneSetup/updateMaterial.ts b/src/routes/viewer/sceneSetup/updateMaterial.ts
index e031847..76f24c5 100644
--- a/src/routes/viewer/sceneSetup/updateMaterial.ts
+++ b/src/routes/viewer/sceneSetup/updateMaterial.ts
@@ -25,6 +25,7 @@ export function updateMaterial({ variable, dataUint8 }) {
   const uniforms = localBox.material.uniforms;
   const sizes = get(volumeSizes)[variable];
   let volumeTexture = null;
+  let coarseVolumeTexture = null;
 
   //
   // Dispose of the old texture to free up memory.
@@ -32,10 +33,12 @@ export function updateMaterial({ variable, dataUint8 }) {
   if (uniforms?.volumeTex.value !== null) {
     uniforms.volumeTex.value.dispose();
   }
+  const s0 = Math.ceil(sizes[0] / 8);
+  const s1 = Math.ceil(sizes[1] / 8);
+  const s2 = Math.ceil(sizes[2] / 8);
   switch (variable) {
     case 'ql':
       volumeTexture = new THREE.Data3DTexture(dataUint8, sizes[0], sizes[1], sizes[2]);
-      volumeTexture.format = THREE.RedFormat;
       volumeTexture.minFilter = THREE.LinearFilter; // Better for volume rendering.
       volumeTexture.magFilter = THREE.LinearFilter;
       uniforms.dataScale.value = qlScale;
@@ -50,10 +53,11 @@ export function updateMaterial({ variable, dataUint8 }) {
       break;
 
     case 'qr':
-      // uniforms?.coarseVolumeTex?.value?.dispose();
-
+      if (uniforms?.coarseVolumeTex.value !== null) {
+        uniforms.coarseVolumeTex.value.dispose();
+      }
+    
       volumeTexture = new THREE.Data3DTexture(dataUint8, sizes[0], sizes[1], sizes[2]);
-      volumeTexture.format = THREE.RedFormat;
       volumeTexture.minFilter = THREE.NearestFilter;
       volumeTexture.magFilter = THREE.NearestFilter;
       uniforms.dataScale.value = qrScale;
@@ -61,7 +65,14 @@ export function updateMaterial({ variable, dataUint8 }) {
       uniforms.alphaNorm.value = 2.0;
       uniforms.finalGamma.value = finalGamma;
 
-      uniforms.coarseVolumeTex.value = new THREE.Data3DTexture(coarseData(sizes, dataUint8), sizes[0] / 8, sizes[1] / 8, sizes[2] / 8);;
+      coarseVolumeTexture = new THREE.Data3DTexture(coarseData(dataUint8, sizes), s0, s1, s2);
+      coarseVolumeTexture.format = THREE.RedFormat;
+      coarseVolumeTexture.minFilter = THREE.NearestFilter;
+      coarseVolumeTexture.magFilter = THREE.NearestFilter;
+      coarseVolumeTexture.type = THREE.UnsignedByteType;
+      coarseVolumeTexture.generateMipmaps = false; // Saves memory.
+      coarseVolumeTexture.needsUpdate = true;
+      uniforms.coarseVolumeTex.value = coarseVolumeTexture;
       break;
 
     case 'thetavmix':

From b8336a2cdff6eda284b5ae50d76457b16bd5bec7 Mon Sep 17 00:00:00 2001
From: goord <G.vandenOord@gmail.com>
Date: Sat, 30 Mar 2024 11:23:08 +0100
Subject: [PATCH 3/6] first version of substepping

---
 src/lib/shaders/volume.frag                   |  3 ++-
 src/lib/shaders/volume_transfer.frag          |  5 ++--
 src/routes/viewer/+page.svelte                |  4 ++-
 src/routes/viewer/components/TimeLine.svelte  | 25 +++++++++++++----
 src/routes/viewer/components/Viewer.svelte    |  4 ++-
 src/routes/viewer/sceneSetup/initMaterial.ts  |  9 ++++---
 .../viewer/sceneSetup/updateMaterial.ts       | 27 ++++++++++++++++---
 src/routes/viewer/stores/allSlices.store.ts   |  2 --
 8 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/src/lib/shaders/volume.frag b/src/lib/shaders/volume.frag
index ecee761..7521585 100644
--- a/src/lib/shaders/volume.frag
+++ b/src/lib/shaders/volume.frag
@@ -18,6 +18,7 @@ uniform float gHG;
 uniform float dataEpsilon;
 uniform vec3 bottomColor;
 uniform float bottomHeight;
+uniform vec3 displacement;
 
 // Optional parameters, for when a solid surface is being drawn along with
 // the volume data.
@@ -163,7 +164,7 @@ void main(void){
   vec3 dg=vec3(1)/vec3(volumeTexSize);
   for(float t=tBox.x;t<tBox.y;t+=dt){
 
-    float v=texture(volumeTex,pSized).r;
+    float v=texture(volumeTex,pSized - displacement).r;
     float ql=(v==0.0)?0.:(dataScale*pow(dataEpsilon/dataScale,1.0-v)-dataEpsilon);
     if(ql==0.0)
     {
diff --git a/src/lib/shaders/volume_transfer.frag b/src/lib/shaders/volume_transfer.frag
index 94018f4..226a823 100644
--- a/src/lib/shaders/volume_transfer.frag
+++ b/src/lib/shaders/volume_transfer.frag
@@ -15,6 +15,7 @@ uniform highp vec3 boxSize;
 uniform float dataScale;
 uniform float alphaNorm;
 uniform bool useLighting;
+uniform vec3 displacement;
 
 // Optional parameters, for when a solid surface is being drawn along with
 // the volume data.
@@ -100,12 +101,12 @@ void main(void){
   vec3 random=fract(sin(gl_FragCoord.x*12.9898+gl_FragCoord.y*78.233)*43758.5453)*dt*rayDir/8.0;
   for(float t=tBox.x;t<tBox.y;t+=dt){
     // look 8 steps ahead
-    float value=texture(coarseVolumeTex, pSized).r;
+    float value=texture(coarseVolumeTex, pSized - displacement).r;
     if(value != 0.0){
       #pragma unroll_loop_start
       for(int i = 0; i < 8; ++i)
       {
-        float fineValue = texture(volumeTex, pSized + random).r;
+        float fineValue = texture(volumeTex, pSized - displacement + random).r;
         vec4 vColor = fineValue == 0.0 ? vec4(0.0) : texture(transferTex, vec2(fineValue, 0.5));
         vColor.a *= alphaNorm;
         illumination.rgb += transmittance*clamp(vColor.a,0.0,1.0)*vColor.rgb;
diff --git a/src/routes/viewer/+page.svelte b/src/routes/viewer/+page.svelte
index 27390ee..db61ee0 100644
--- a/src/routes/viewer/+page.svelte
+++ b/src/routes/viewer/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import TimeLine from './components/TimeLine.svelte';
 
-	import { dataSlices, currentTimeIndex, totalSlices } from './stores/allSlices.store';
+	import { dataSlices, totalSlices } from './stores/allSlices.store';
 	import {
 		cloudLayerSettings,
 		rainLayerSettings,
@@ -9,6 +9,8 @@
 		temperatureLayerSettings
 	} from './stores/viewer.store';
 
+	import { currentTimeIndex } from './sceneSetup/updateMaterial';
+
 	import Stats from '$lib/components/Stats.svelte';
 	import Viewer from './components/Viewer.svelte';
 	// import Viewer from '$lib/components/viewerExample.svelte';
diff --git a/src/routes/viewer/components/TimeLine.svelte b/src/routes/viewer/components/TimeLine.svelte
index 0ddbdc1..ba2d5bd 100644
--- a/src/routes/viewer/components/TimeLine.svelte
+++ b/src/routes/viewer/components/TimeLine.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	import { get } from 'svelte/store';
-	import { dataSlices, currentTimeIndex, downloadedTime } from '../stores/allSlices.store';
+	import { dataSlices, downloadedTime } from '../stores/allSlices.store';
 	import { data_layers } from '../sceneSetup/boxSetup';
-	import { updateMaterial } from '../sceneSetup/updateMaterial';
+	import { updateMaterial,
+		refreshMaterial, 
+		currentTimeIndex, 
+		currentStepIndex } from '../sceneSetup/updateMaterial';
 
 	export let playAnimation = false;
 	export let length = 10;
 	export let positionIndex = 0;
 	export let playSpeedInMiliseconds = 300;
+	export let subStepsPerFrame = 10;
 
 	let interval;
 	const dispatch = createEventDispatcher();
@@ -18,10 +22,14 @@
 		if (playAnimation) {
 			interval = setInterval(() => {
 				if (get(dataSlices)[get(currentTimeIndex)]) {
-					const next = (get(currentTimeIndex) + 1) % get(dataSlices).length;
-					currentTimeIndex.set(next);
+					const nextStep = (get(currentStepIndex) + 1) % subStepsPerFrame;
+					currentStepIndex.set(nextStep);
+					if(nextStep == 0) {
+						const nextTimeIndex = (get(currentTimeIndex) + 1) % get(dataSlices).length;
+						currentTimeIndex.set(nextTimeIndex);	
+					}
 				}
-			}, playSpeedInMiliseconds);
+			}, playSpeedInMiliseconds/subStepsPerFrame);
 		} else {
 			clearInterval(interval);
 		}
@@ -37,6 +45,13 @@
 				}
 			}
 		});
+		currentStepIndex.subscribe((index: number) => {
+			if(index != 0){
+				for (const variable of data_layers) {
+					refreshMaterial({variable, index, maxIndex: subStepsPerFrame});
+				}
+			}
+		})
 	});
 
 	onDestroy(() => {
diff --git a/src/routes/viewer/components/Viewer.svelte b/src/routes/viewer/components/Viewer.svelte
index 5a264a8..94dbab5 100644
--- a/src/routes/viewer/components/Viewer.svelte
+++ b/src/routes/viewer/components/Viewer.svelte
@@ -3,7 +3,7 @@
 	import * as THREE from 'three';
 	import DebugButtons from './DebugButtons.svelte';
 
-	import { dataSlices, currentTimeIndex, downloadedTime } from '../stores/allSlices.store';
+	import { dataSlices, downloadedTime } from '../stores/allSlices.store';
 	import { cloudLayerSettings, rainLayerSettings, temperatureLayerSettings, showGrid } from '../stores/viewer.store';
 	import { create3DScene } from '../sceneSetup/create3DScene';
 
@@ -12,6 +12,8 @@
 	import { boxes, data_layers } from '../sceneSetup/boxSetup';
 	// import examplePoints from '../fetchAndPrepareData/examplePoints';
 
+	import { currentTimeIndex } from '../sceneSetup/updateMaterial';
+
 	let canvas: HTMLElement;
 	let scene: THREE.Scene;
 	let camera: THREE.PerspectiveCamera;
diff --git a/src/routes/viewer/sceneSetup/initMaterial.ts b/src/routes/viewer/sceneSetup/initMaterial.ts
index 8db7930..ae1eb75 100644
--- a/src/routes/viewer/sceneSetup/initMaterial.ts
+++ b/src/routes/viewer/sceneSetup/initMaterial.ts
@@ -64,7 +64,8 @@ export function initMaterial({ variable }): THREE.Material {
           dataEpsilon: new THREE.Uniform(0),
           bottomColor: new THREE.Uniform(new THREE.Vector3(0.0, 0.0005, 0.0033)),
           bottomHeight: new THREE.Uniform(0),
-          finalGamma: new THREE.Uniform(0)
+          finalGamma: new THREE.Uniform(0),
+          displacement: new THREE.Uniform(new THREE.Vector3(0.0, 0.0, 0.0)),
         }
       });
       break;
@@ -92,7 +93,8 @@ export function initMaterial({ variable }): THREE.Material {
           dataScale: new THREE.Uniform(0),
           alphaNorm: new THREE.Uniform(0),
           finalGamma: new THREE.Uniform(0),
-          useLighting: new THREE.Uniform(false)
+          useLighting: new THREE.Uniform(false),
+          displacement: new THREE.Uniform(new THREE.Vector3(0.0, 0.0, 0.0)),
         }
       });
       break;
@@ -103,7 +105,8 @@ export function initMaterial({ variable }): THREE.Material {
         uniforms: {
           volumeTex: { value: null },
           uTransparency: { value: get(temperatureLayerSettings).opacity / 100 },
-          uScaleFactor: { value: 200.0 }
+          uScaleFactor: { value: 200.0 },
+          displacement: new THREE.Uniform(new THREE.Vector2(0.0, 0.0)),
         },
         vertexShader: vertexShaderSurface,
         fragmentShader: fragmentShaderSurfaceHeatMap,
diff --git a/src/routes/viewer/sceneSetup/updateMaterial.ts b/src/routes/viewer/sceneSetup/updateMaterial.ts
index 76f24c5..929b3bd 100644
--- a/src/routes/viewer/sceneSetup/updateMaterial.ts
+++ b/src/routes/viewer/sceneSetup/updateMaterial.ts
@@ -1,9 +1,11 @@
 import * as THREE from 'three';
-import { get } from 'svelte/store';
-import { volumeSizes } from '../stores/allSlices.store';
+import { get, writable } from 'svelte/store';
+import { volumeSizes, voxelSizes } from '../stores/allSlices.store';
 import { boxes } from './boxSetup';
 import { coarseData } from '../fetchAndPrepareData/coarseData';
 
+export const currentTimeIndex = writable(0);
+export const currentStepIndex = writable(0);
 
 // Be caruful with these valies, they can clip the data in the 3D scene
 const dtScale: number = 0.8;
@@ -17,6 +19,21 @@ const bottomColor: number[] = [0.0, 0.0005, 0.0033];
 const bottomHeight: number = 675.0;
 const finalGamma = 6.0;
 
+const dTSnapshot = 10.0;
+const wind = [-10.5, -4.7];
+
+
+export function refreshMaterial({variable, index, maxIndex}) {
+  const localBox = boxes[variable];
+  if (!localBox) { return }
+  const cellSizes = get(voxelSizes)[variable];
+  const numCells = get(volumeSizes)[variable];
+  const deltaX = wind[0] * (index / maxIndex) * dTSnapshot / (cellSizes[0] * numCells[0]);
+  const deltaY = wind[1] * (index / maxIndex) * dTSnapshot / (cellSizes[1] * numCells[1]);
+  const uniforms = localBox.material.uniforms;
+  uniforms.displacement.value = new THREE.Vector3(deltaX, deltaY, 0.0);
+}
+
 export function updateMaterial({ variable, dataUint8 }) {
   const localBox = boxes[variable];
 
@@ -50,6 +67,7 @@ export function updateMaterial({ variable, dataUint8 }) {
       uniforms.bottomColor.value = bottomColor;
       uniforms.bottomHeight.value = bottomHeight;
       uniforms.finalGamma.value = finalGamma;
+      uniforms.displacement.value = new THREE.Vector3(0.0, 0.0, 0.0);
       break;
 
     case 'qr':
@@ -65,7 +83,7 @@ export function updateMaterial({ variable, dataUint8 }) {
       uniforms.alphaNorm.value = 2.0;
       uniforms.finalGamma.value = finalGamma;
 
-      coarseVolumeTexture = new THREE.Data3DTexture(coarseData(dataUint8, sizes), s0, s1, s2);
+/*      coarseVolumeTexture = new THREE.Data3DTexture(coarseData(dataUint8, sizes), s0, s1, s2);
       coarseVolumeTexture.format = THREE.RedFormat;
       coarseVolumeTexture.minFilter = THREE.NearestFilter;
       coarseVolumeTexture.magFilter = THREE.NearestFilter;
@@ -73,10 +91,12 @@ export function updateMaterial({ variable, dataUint8 }) {
       coarseVolumeTexture.generateMipmaps = false; // Saves memory.
       coarseVolumeTexture.needsUpdate = true;
       uniforms.coarseVolumeTex.value = coarseVolumeTexture;
+*/      uniforms.displacement.value = new THREE.Vector3(0.0, 0.0, 0.0);
       break;
 
     case 'thetavmix':
       volumeTexture = new THREE.DataTexture(dataUint8, sizes[0], sizes[1]);
+      uniforms.displacement.value = new THREE.Vector2(0.0, 0.0);
       break;
   }
   //
@@ -91,5 +111,4 @@ export function updateMaterial({ variable, dataUint8 }) {
   // Apply the updated material uniforms with new texture and parameters.
   //
   uniforms.volumeTex.value = volumeTexture;
-
 }
diff --git a/src/routes/viewer/stores/allSlices.store.ts b/src/routes/viewer/stores/allSlices.store.ts
index 18137f5..dba4326 100644
--- a/src/routes/viewer/stores/allSlices.store.ts
+++ b/src/routes/viewer/stores/allSlices.store.ts
@@ -6,8 +6,6 @@ import { openArray } from 'zarr';
 
 export const totalSlices = writable(1); // calculated number of slices in the data
 export const dataSlices = writable([]);
-export const currentTimeIndex = writable(0);
-
 export const voxelSizes = writable({})
 export const volumeSizes = writable({})
 export const boxSizes = writable({})

From b5457db39c6e6cbebaa299309edb8b9dd588058e Mon Sep 17 00:00:00 2001
From: goord <G.vandenOord@gmail.com>
Date: Tue, 2 Apr 2024 09:38:06 +0200
Subject: [PATCH 4/6] Faster bulk download of all time slices

---
 src/routes/viewer/components/TimeLine.svelte  |  6 +-
 .../viewer/fetchAndPrepareData/dataSetup.ts   | 34 ++++++++--
 .../fetchAndPrepareData/fetchAllSlices.ts     | 27 ++++++--
 .../viewer/fetchAndPrepareData/fetchSlice.ts  | 64 +++++++++++++++----
 src/routes/viewer/sceneSetup/boxSetup.ts      |  4 +-
 .../viewer/sceneSetup/updateMaterial.ts       |  5 +-
 src/routes/viewer/stores/allSlices.store.ts   |  1 +
 7 files changed, 112 insertions(+), 29 deletions(-)

diff --git a/src/routes/viewer/components/TimeLine.svelte b/src/routes/viewer/components/TimeLine.svelte
index 0ddbdc1..6cbd060 100644
--- a/src/routes/viewer/components/TimeLine.svelte
+++ b/src/routes/viewer/components/TimeLine.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	import { get } from 'svelte/store';
-	import { dataSlices, currentTimeIndex, downloadedTime } from '../stores/allSlices.store';
+	import { dataSlices, coarseDataSlices, currentTimeIndex, downloadedTime } from '../stores/allSlices.store';
 	import { data_layers } from '../sceneSetup/boxSetup';
 	import { updateMaterial } from '../sceneSetup/updateMaterial';
+	import { coarseData } from '../fetchAndPrepareData/coarseData';
 
 	export let playAnimation = false;
 	export let length = 10;
@@ -31,9 +32,10 @@
 		// Update the material when the currentTimeIndex changes
 		currentTimeIndex.subscribe((index: number) => {
 			const data = get(dataSlices)[index];
+			const coarseData = get(coarseDataSlices)[index];
 			if (data) {
 				for (const variable of data_layers) {
-					updateMaterial({ variable, dataUint8: data[variable] });
+					updateMaterial({ variable, dataUint8: data[variable], coarseData: coarseData[variable] ?? null });
 				}
 			}
 		});
diff --git a/src/routes/viewer/fetchAndPrepareData/dataSetup.ts b/src/routes/viewer/fetchAndPrepareData/dataSetup.ts
index f4add97..5754528 100644
--- a/src/routes/viewer/fetchAndPrepareData/dataSetup.ts
+++ b/src/routes/viewer/fetchAndPrepareData/dataSetup.ts
@@ -2,13 +2,18 @@ import {
   createVolumetricRenderingBox
 } from "../sceneSetup/boxSetup";
 import {
+  dataSlices,
   getVoxelAndVolumeSize,
   getVoxelAndVolumeSize2D,
-  totalSlices
+  totalSlices,
+  coarseDataSlices
 } from "../stores/allSlices.store";
-import { fetchAllSlices } from "./fetchAllSlices";
+import { fetchAllSlices, fetchAllSlicesAtOnce } from "./fetchAllSlices";
 import { fetchSlice } from "./fetchSlice";
 import { openArray, HTTPStore } from 'zarr';
+import { get } from "svelte/store";
+import { slicesToRender } from "../stores/viewer.store";
+import { coarseData } from "./coarseData";
 
 
 export const zarrdata = []
@@ -27,18 +32,37 @@ export async function dataSetup(visible_data, scene) {
     zarrdata[variable] = await openArray({ store, path: variable, mode: 'r' });
     const dimensions = variable === 'thetavmix' ? 3 : 4;
     const { dataUint8, shape } = await fetchSlice({ currentTimeIndex: 0, path: variable, dimensions });
+    let coarseSlice = null;
+    if (variable == 'qr'){
+      coarseSlice = coarseData(dataUint8, shape);
+      coarseDataSlices.update((timeSlices) => {
+        if(timeSlices[0]){
+          timeSlices[0][variable] = coarseSlice;
+        }
+        else{
+          timeSlices[0] = {variable: coarseSlice};
+        }
+        return timeSlices
+      })
+    }
 
     variable === 'thetavmix'
       ? await getVoxelAndVolumeSize2D(store, shape, variable)
       : await getVoxelAndVolumeSize(store, shape, variable);
 
     totalSlices.set(zarrdata[variable].length);
-    await createVolumetricRenderingBox({ scene, variable, dataUint8 });
+    await createVolumetricRenderingBox({ scene, variable, dataUint8, coarseData: coarseSlice });
   }
 
   // Fetch all slices after shwing the first one
+  //fetchAllData(visible_data, [1, get(slicesToRender)]);
+  fetchAllSlicesAtOnce(visible_data, [1, Math.floor(get(slicesToRender))]);
+}
+
+function fetchAllData(visible_data, timeRange) {
   for (const variable of visible_data) {
     const dimensions = variable === 'thetavmix' ? 3 : 4;
-    fetchAllSlices({ path: variable, dimensions }); // todo run this in parallel
+    fetchAllSlices({ path: variable, dimensions, timeRange });
   }
-}
\ No newline at end of file
+}
+
diff --git a/src/routes/viewer/fetchAndPrepareData/fetchAllSlices.ts b/src/routes/viewer/fetchAndPrepareData/fetchAllSlices.ts
index 37e91fe..aebbed9 100644
--- a/src/routes/viewer/fetchAndPrepareData/fetchAllSlices.ts
+++ b/src/routes/viewer/fetchAndPrepareData/fetchAllSlices.ts
@@ -1,13 +1,12 @@
 // import { Queue } from "async-await-queue";
 import { get } from "svelte/store";
-import { fetchSlice } from "./fetchSlice";
+import { fetchSlice, fetchRange } from "./fetchSlice";
 import { downloadedTime } from "../stores/allSlices.store";
-import { slicesToRender } from "../stores/viewer.store";
 
 /**
  * Creates a new Queue instance with a concurrency of 1 and a timeout of 5000ms.
  */
-export async function fetchAllSlices({ path = 'ql', dimensions = 4 }) {
+export async function fetchAllSlices({ path = 'ql', dimensions = 4, timeRange = [1, 10] }) {
 
   /**
    * Creates a new Queue instance with a concurrency of 1 and a timeout of 5000ms.
@@ -18,7 +17,7 @@ export async function fetchAllSlices({ path = 'ql', dimensions = 4 }) {
 
   console.log('📕 Downloading all slices');
   // Start loop at 1 because the first slice was already fetched at mounted
-  for (let i = 1; i < get(slicesToRender); ++i) { // start with 1 because 0 was already fetched at mounted
+  for (let i = timeRange[0]; i < timeRange[1]; ++i) { // start with 1 because 0 was already fetched at mounted
     // const me = Symbol();
     // await q.wait(me, 10 - i);
     try {
@@ -39,3 +38,23 @@ export async function fetchAllSlices({ path = 'ql', dimensions = 4 }) {
 
   // return await q.flush();
 }
+
+export async function fetchAllSlicesAtOnce(visible_data, timeRange = [1, 10]) {
+  const timing = performance.now()
+  const promises = [];
+  for (const variable of visible_data) {
+    const dimensions = variable === 'thetavmix' ? 3 : 4;
+    try {
+      promises.push(fetchRange({ timeRange, path: variable, dimensions }));
+    } catch (e) {
+      console.error(e);
+    } finally {
+      // q.end(me);
+    }
+  }
+  await Promise.all(promises);
+  downloadedTime.set(get(downloadedTime) + Math.round(performance.now() - timing))
+  console.log('🎹 all data downladed in', get(downloadedTime), ' + ', Math.round(performance.now() - timing), 'ms');
+}
+
+
diff --git a/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts b/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts
index d4a2740..7054849 100644
--- a/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts
+++ b/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts
@@ -1,7 +1,8 @@
 
-import { dataSlices } from "../stores/allSlices.store";
+import { dataSlices, coarseDataSlices } from "../stores/allSlices.store";
 import { zarrdata } from './dataSetup';
-//import { coarseData } from './coarseData';
+import { slice } from 'zarr';
+import { coarseData } from './coarseData';
 
 // downloadZarrPoints
 export async function fetchSlice({
@@ -17,17 +18,8 @@ export async function fetchSlice({
     : await zarrdata[path].getRaw([currentTimeIndex, null, null]);
 
 
-  let dataUint8 = null;
-  if (path == 'qr') {
-    // Coarse data to compress the ammount of data
-//    dataUint8 = coarseData(shape, data);
-    dataUint8 = data;
-  }
-  else {
-    dataUint8 = data;
-  }
+  const dataUint8 = data;
 
-  // allSlices.set(data);
   // Update the time slices store
   dataSlices.update((timeSlices) => {
     if (timeSlices[currentTimeIndex]) {
@@ -40,4 +32,50 @@ export async function fetchSlice({
     return timeSlices;
   });
   return { dataUint8, shape };
-}
\ No newline at end of file
+}
+
+export async function fetchRange({
+  timeRange = [0, 10],
+  path = 'ql',
+  dimensions = 4,
+}) {
+  console.log('🚀 Downloading slices for ' ,path, ': ', timeRange[0], ' to ', timeRange[1], '...');
+
+  // Create an HTTPStore pointing to the base of the Zarr hierarchy
+  const { data, shape } = dimensions === 4
+    ? await zarrdata[path].getRaw([slice(timeRange[0], timeRange[1]+1), null, null, null])
+    : await zarrdata[path].getRaw([slice(timeRange[0], timeRange[1]+1), null, null]);
+
+  const dataUint8 = data;
+
+  // Update the time slices store
+  const coarsening = (path == 'qr');
+  for(let i = timeRange[0]; i < timeRange[1]; ++i){
+    dataSlices.update((timeSlices) => {
+      const gridSize = dimensions === 4 ? shape[1] * shape[2] * shape[3] : shape[1] * shape[2];
+      if (timeSlices[i]) {
+        timeSlices[i][path] = dataUint8.subarray(i * gridSize, (i + 1) * gridSize);
+      }
+      else {
+        timeSlices[i] = {};
+        timeSlices[i][path] = dataUint8.subarray(i * gridSize, (i + 1) * gridSize);
+      }
+      return timeSlices;
+    });
+    if(coarsening){
+      coarseDataSlices.update((timeSlices) => {
+        const gridSize = dimensions === 4 ? shape[1] * shape[2] * shape[3] : shape[1] * shape[2];
+        const gridShape = dimensions ===4 ? [shape[1], shape[2], shape[3]] : [shape[1], shape[2]];
+        if (timeSlices[i]) {
+          timeSlices[i][path] = coarseData(dataUint8.subarray(i * gridSize, (i + 1) * gridSize), gridShape);
+        }
+        else {
+          timeSlices[i] = {};
+          timeSlices[i][path] = coarseData(dataUint8.subarray(i * gridSize, (i + 1) * gridSize), gridShape);
+        }
+        return timeSlices;
+      });
+    }
+  }
+  return { dataUint8, shape };
+}
diff --git a/src/routes/viewer/sceneSetup/boxSetup.ts b/src/routes/viewer/sceneSetup/boxSetup.ts
index 4088d34..bcb2363 100644
--- a/src/routes/viewer/sceneSetup/boxSetup.ts
+++ b/src/routes/viewer/sceneSetup/boxSetup.ts
@@ -36,7 +36,7 @@ export const data_layers = [
  * The box will be centered at the origin, with X in [-0.5, 0.5] so the width is 1, and
  * Y (height) and Z (depth) scaled to match.
  */
-export function createVolumetricRenderingBox({ scene, variable, dataUint8 }) {
+export function createVolumetricRenderingBox({ scene, variable, dataUint8, coarseData = null }) {
   // const boxGeometry = new THREE.BoxGeometry(get(volumeSize)[0], get(volumeSize)[1], get(volumeSize)[2]);
   // const boxSizeInKm = 33.8; // 33.8 km
   // const boxScale = boxSizeInKm; // / scaleFactor; // Convert to meters and then apply scale factor to scene units
@@ -75,6 +75,6 @@ export function createVolumetricRenderingBox({ scene, variable, dataUint8 }) {
 
     }
   }
-  updateMaterial({ variable, dataUint8 });
+  updateMaterial({ variable, dataUint8, coarseData });
 
 }
\ No newline at end of file
diff --git a/src/routes/viewer/sceneSetup/updateMaterial.ts b/src/routes/viewer/sceneSetup/updateMaterial.ts
index 76f24c5..2537bc9 100644
--- a/src/routes/viewer/sceneSetup/updateMaterial.ts
+++ b/src/routes/viewer/sceneSetup/updateMaterial.ts
@@ -2,7 +2,6 @@ import * as THREE from 'three';
 import { get } from 'svelte/store';
 import { volumeSizes } from '../stores/allSlices.store';
 import { boxes } from './boxSetup';
-import { coarseData } from '../fetchAndPrepareData/coarseData';
 
 
 // Be caruful with these valies, they can clip the data in the 3D scene
@@ -17,7 +16,7 @@ const bottomColor: number[] = [0.0, 0.0005, 0.0033];
 const bottomHeight: number = 675.0;
 const finalGamma = 6.0;
 
-export function updateMaterial({ variable, dataUint8 }) {
+export function updateMaterial({ variable, dataUint8, coarseData = null }) {
   const localBox = boxes[variable];
 
 
@@ -65,7 +64,7 @@ export function updateMaterial({ variable, dataUint8 }) {
       uniforms.alphaNorm.value = 2.0;
       uniforms.finalGamma.value = finalGamma;
 
-      coarseVolumeTexture = new THREE.Data3DTexture(coarseData(dataUint8, sizes), s0, s1, s2);
+      coarseVolumeTexture = new THREE.Data3DTexture(coarseData, s0, s1, s2);
       coarseVolumeTexture.format = THREE.RedFormat;
       coarseVolumeTexture.minFilter = THREE.NearestFilter;
       coarseVolumeTexture.magFilter = THREE.NearestFilter;
diff --git a/src/routes/viewer/stores/allSlices.store.ts b/src/routes/viewer/stores/allSlices.store.ts
index 78407a1..9c8aa33 100644
--- a/src/routes/viewer/stores/allSlices.store.ts
+++ b/src/routes/viewer/stores/allSlices.store.ts
@@ -6,6 +6,7 @@ import { openArray } from 'zarr';
 
 export const totalSlices = writable(0); // calculated number of slices in the data
 export const dataSlices = writable([]);
+export const coarseDataSlices = writable([]);
 export const currentTimeIndex = writable(0);
 
 export const voxelSizes = writable({})

From 0a8c254cead142575eeea6b325620ec4c65ea5f4 Mon Sep 17 00:00:00 2001
From: goord <G.vandenOord@gmail.com>
Date: Tue, 2 Apr 2024 10:48:42 +0200
Subject: [PATCH 5/6] optimized imports

---
 src/routes/viewer/components/TimeLine.svelte       | 1 -
 src/routes/viewer/fetchAndPrepareData/dataSetup.ts | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/routes/viewer/components/TimeLine.svelte b/src/routes/viewer/components/TimeLine.svelte
index c787140..f3506d6 100644
--- a/src/routes/viewer/components/TimeLine.svelte
+++ b/src/routes/viewer/components/TimeLine.svelte
@@ -6,7 +6,6 @@
 	import { updateMaterial,
 		refreshMaterial,  
 		currentStepIndex } from '../sceneSetup/updateMaterial';
-	import { coarseData } from '../fetchAndPrepareData/coarseData';
 
 	export let playAnimation = false;
 	export let length = 10;
diff --git a/src/routes/viewer/fetchAndPrepareData/dataSetup.ts b/src/routes/viewer/fetchAndPrepareData/dataSetup.ts
index 5754528..73f625c 100644
--- a/src/routes/viewer/fetchAndPrepareData/dataSetup.ts
+++ b/src/routes/viewer/fetchAndPrepareData/dataSetup.ts
@@ -2,7 +2,6 @@ import {
   createVolumetricRenderingBox
 } from "../sceneSetup/boxSetup";
 import {
-  dataSlices,
   getVoxelAndVolumeSize,
   getVoxelAndVolumeSize2D,
   totalSlices,

From ec29a678cece4673fa202cc4409867dc0a016837 Mon Sep 17 00:00:00 2001
From: goord <G.vandenOord@gmail.com>
Date: Wed, 12 Jun 2024 16:17:21 +0200
Subject: [PATCH 6/6] Fixed missing coarseData problem + better memory handling

---
 src/routes/viewer/components/TimeLine.svelte  |  6 +-
 .../viewer/fetchAndPrepareData/fetchSlice.ts  | 57 +++++++++++--------
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/routes/viewer/components/TimeLine.svelte b/src/routes/viewer/components/TimeLine.svelte
index f3506d6..eafeb3e 100644
--- a/src/routes/viewer/components/TimeLine.svelte
+++ b/src/routes/viewer/components/TimeLine.svelte
@@ -41,7 +41,11 @@
 			const coarseData = get(coarseDataSlices)[index];
 			if (data) {
 				for (const variable of data_layers) {
-					updateMaterial({ variable, dataUint8: data[variable], coarseData: coarseData[variable] ?? null });
+					let variableCoarseData = null;
+					if (coarseData && variable in coarseData){
+						variableCoarseData = coarseData[variable];
+					}
+					updateMaterial({ variable, dataUint8: data[variable], coarseData: variableCoarseData });
 				}
 			}
 		});
diff --git a/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts b/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts
index 7054849..c4e2dac 100644
--- a/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts
+++ b/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts
@@ -39,43 +39,50 @@ export async function fetchRange({
   path = 'ql',
   dimensions = 4,
 }) {
-  console.log('🚀 Downloading slices for ' ,path, ': ', timeRange[0], ' to ', timeRange[1], '...');
+  console.log('🚀 Downloading slices for ', path, ': ', timeRange[0], ' to ', timeRange[1], '...');
 
-  // Create an HTTPStore pointing to the base of the Zarr hierarchy
-  const { data, shape } = dimensions === 4
-    ? await zarrdata[path].getRaw([slice(timeRange[0], timeRange[1]+1), null, null, null])
-    : await zarrdata[path].getRaw([slice(timeRange[0], timeRange[1]+1), null, null]);
-
-  const dataUint8 = data;
+  let dataUint8 = null;
+  let fullShape = null;
 
   // Update the time slices store
+  const chunkSize = 8;
   const coarsening = (path == 'qr');
-  for(let i = timeRange[0]; i < timeRange[1]; ++i){
+
+  for (let i = timeRange[0]; i < timeRange[1]; i += chunkSize) {
+    const end = Math.min(i + chunkSize, timeRange[1]);
+    const { data, shape } = dimensions === 4
+    ? await zarrdata[path].getRaw([slice(timeRange[0], end + 1), null, null, null])
+    : await zarrdata[path].getRaw([slice(timeRange[0], end + 1), null, null]);
+    dataUint8 = data;
+    const gridSize = dimensions === 4 ? shape[1] * shape[2] * shape[3] : shape[1] * shape[2];
+    const gridShape = dimensions === 4 ? [shape[1], shape[2], shape[3]] : [shape[1], shape[2]];
+    fullShape = [timeRange[1] - timeRange[0] + 1].concat(gridShape);
+  
+    const chunk = dataUint8.subarray(i * gridSize, end * gridSize);
     dataSlices.update((timeSlices) => {
-      const gridSize = dimensions === 4 ? shape[1] * shape[2] * shape[3] : shape[1] * shape[2];
-      if (timeSlices[i]) {
-        timeSlices[i][path] = dataUint8.subarray(i * gridSize, (i + 1) * gridSize);
-      }
-      else {
-        timeSlices[i] = {};
-        timeSlices[i][path] = dataUint8.subarray(i * gridSize, (i + 1) * gridSize);
+      for (let j = i; j < end; j++) {
+        if (timeSlices[j]) {
+          timeSlices[j][path] = chunk.subarray((j - i) * gridSize, (j - i + 1) * gridSize);
+        } else {
+          timeSlices[j] = {};
+          timeSlices[j][path] = chunk.subarray((j - i) * gridSize, (j - i + 1) * gridSize);
+        }
       }
       return timeSlices;
     });
-    if(coarsening){
+    if (coarsening) {
       coarseDataSlices.update((timeSlices) => {
-        const gridSize = dimensions === 4 ? shape[1] * shape[2] * shape[3] : shape[1] * shape[2];
-        const gridShape = dimensions ===4 ? [shape[1], shape[2], shape[3]] : [shape[1], shape[2]];
-        if (timeSlices[i]) {
-          timeSlices[i][path] = coarseData(dataUint8.subarray(i * gridSize, (i + 1) * gridSize), gridShape);
-        }
-        else {
-          timeSlices[i] = {};
-          timeSlices[i][path] = coarseData(dataUint8.subarray(i * gridSize, (i + 1) * gridSize), gridShape);
+        for (let j = i; j < end; j++) {
+          if (timeSlices[j]) {
+            timeSlices[j][path] = coarseData(chunk.subarray((j - i) * gridSize, (j - i + 1) * gridSize), gridShape);
+          } else {
+            timeSlices[j] = {};
+            timeSlices[j][path] = coarseData(chunk.subarray((j - i) * gridSize, (j - i + 1) * gridSize), gridShape);
+          }
         }
         return timeSlices;
       });
     }
   }
-  return { dataUint8, shape };
+  return { dataUint8, fullShape };
 }