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 a2d39b2..226a823 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;
@@ -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.
@@ -66,10 +67,9 @@ void main(void){
 
   tBox.x=max(tBox.x,0.);
 
-  ivec3 volumeTexSize=textureSize(volumeTex,0);
-  //  vec3 dt0 = 1.0 / (vec3(volumeTexSize) * abs(rayDir));
+  ivec3 volumeTexSize=textureSize(coarseVolumeTex,0);
   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,13 +100,13 @@ 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){
-
-    float value=texture(volumeTex, pSized).r;
+    // look 8 steps ahead
+    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;
@@ -132,8 +132,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/+page.svelte b/src/routes/viewer/+page.svelte
index 65f866e..4eb8955 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..eafeb3e 100644
--- a/src/routes/viewer/components/TimeLine.svelte
+++ b/src/routes/viewer/components/TimeLine.svelte
@@ -1,14 +1,17 @@
 <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 { updateMaterial,
+		refreshMaterial,  
+		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 +21,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);
 		}
@@ -31,12 +38,24 @@
 		// 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] });
+					let variableCoarseData = null;
+					if (coarseData && variable in coarseData){
+						variableCoarseData = coarseData[variable];
+					}
+					updateMaterial({ variable, dataUint8: data[variable], coarseData: variableCoarseData });
 				}
 			}
 		});
+		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 fd617a8..5ca0e08 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, scene } 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 gridHelper: THREE.GridHelper;
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/dataSetup.ts b/src/routes/viewer/fetchAndPrepareData/dataSetup.ts
index f4add97..73f625c 100644
--- a/src/routes/viewer/fetchAndPrepareData/dataSetup.ts
+++ b/src/routes/viewer/fetchAndPrepareData/dataSetup.ts
@@ -4,11 +4,15 @@ import {
 import {
   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 +31,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 8fb244e..c4e2dac 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 { coarseData } from './coarseData';
+import { dataSlices, coarseDataSlices } from "../stores/allSlices.store";
 import { zarrdata } from './dataSetup';
+import { slice } from 'zarr';
+import { coarseData } from './coarseData';
 
 // downloadZarrPoints
 export async function fetchSlice({
@@ -17,16 +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);
-  }
-  else {
-    dataUint8 = data;
-  }
+  const dataUint8 = data;
 
-  // allSlices.set(data);
   // Update the time slices store
   dataSlices.update((timeSlices) => {
     if (timeSlices[currentTimeIndex]) {
@@ -39,4 +32,57 @@ 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], '...');
+
+  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 += 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) => {
+      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) {
+      coarseDataSlices.update((timeSlices) => {
+        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, fullShape };
+}
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/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 0897697..9268971 100644
--- a/src/routes/viewer/sceneSetup/updateMaterial.ts
+++ b/src/routes/viewer/sceneSetup/updateMaterial.ts
@@ -1,8 +1,10 @@
 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';
 
+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;
@@ -16,7 +18,22 @@ const bottomColor: number[] = [0.0, 0.0005, 0.0033];
 const bottomHeight: number = 675.0;
 const finalGamma = 6.0;
 
-export function updateMaterial({ variable, dataUint8 }) {
+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, coarseData = null }) {
   const localBox = boxes[variable];
 
 
@@ -24,6 +41,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.
@@ -31,10 +49,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;
@@ -46,21 +66,36 @@ 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':
-      volumeTexture = new THREE.Data3DTexture(dataUint8, sizes[0] / 8, sizes[1] / 8, sizes[2] / 8);
-      volumeTexture.format = THREE.RedFormat;
+      if (uniforms?.coarseVolumeTex.value !== null) {
+        uniforms.coarseVolumeTex.value.dispose();
+      }
+    
+      volumeTexture = new THREE.Data3DTexture(dataUint8, sizes[0], sizes[1], sizes[2]);
       volumeTexture.minFilter = THREE.NearestFilter;
       volumeTexture.magFilter = THREE.NearestFilter;
       uniforms.dataScale.value = qrScale;
       uniforms.dtScale.value = dtScale;
       uniforms.alphaNorm.value = 2.0;
       uniforms.finalGamma.value = finalGamma;
+
+      coarseVolumeTexture = new THREE.Data3DTexture(coarseData, 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;
+      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;
   }
   //
@@ -75,8 +110,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 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({})