diff --git a/cors-config.json b/cors-config.json new file mode 100644 index 0000000..446d2dc --- /dev/null +++ b/cors-config.json @@ -0,0 +1,8 @@ +[ + { + "origin": ["https://nlesc.github.io/","http://localhost", "http://localhost:5173","https://ruisdael.ctwhome.com"], + "method": ["GET"], + "responseHeader": ["Content-Type"], + "maxAgeSeconds": 3600 + } +] \ No newline at end of file diff --git a/src/lib/utils/Utils.js b/src/lib/utils/Utils.js index 3381207..16e0e1d 100644 --- a/src/lib/utils/Utils.js +++ b/src/lib/utils/Utils.js @@ -17,7 +17,6 @@ export function disableSpinnerRepeat(event, previous) { export function fixVolumeSize(volumeSize, data) { const volumeSizeFixed = volumeSize; - // TODO: Is it really right that in practice, `image_size[2]` on the original file can be wrong? const realFrameCount = data.byteLength / (volumeSize[0] * volumeSize[1]); if (realFrameCount !== volumeSize[2]) { console.log(`Frame count (z) seems to be ${realFrameCount} rather than ${volumeSize[2]}`); diff --git a/src/routes/viewer/components/TimeLine.svelte b/src/routes/viewer/components/TimeLine.svelte index 0cd4082..0ddbdc1 100644 --- a/src/routes/viewer/components/TimeLine.svelte +++ b/src/routes/viewer/components/TimeLine.svelte @@ -15,8 +15,6 @@ function play() { playAnimation = !playAnimation; - // TODO This invertal emulates the playback of the data, make it a real playback - if (playAnimation) { interval = setInterval(() => { if (get(dataSlices)[get(currentTimeIndex)]) { @@ -29,13 +27,6 @@ } } - // TODO - // TODO - // TODO - // TODO update the material when the currentTimeIndex changes - // TODO - // TODO - // TODO onMount(() => { // Update the material when the currentTimeIndex changes currentTimeIndex.subscribe((index: number) => { diff --git a/src/routes/viewer/components/Viewer.svelte b/src/routes/viewer/components/Viewer.svelte index fa1c66f..5a264a8 100644 --- a/src/routes/viewer/components/Viewer.svelte +++ b/src/routes/viewer/components/Viewer.svelte @@ -26,16 +26,9 @@ // Change transparency of the materials boxes.ql && (boxes.ql.material.uniforms.uTransparency.value = $cloudLayerSettings.opacity / 100); boxes.qr && (boxes.qr.material.uniforms.uTransparency.value = $rainLayerSettings.opacity / 100); - - // TODO WORK IN PROGRSS< ADDING THE TEMPERATURE LAYER boxes.thetavmix && (boxes.thetavmix.material.uniforms.uTransparency.value = $temperatureLayerSettings.opacity / 100); - // TODO: TESTING - // boxes.ql && (boxes.ql.material.opacity = $cloudLayerSettings.opacity / 100); - // boxes.qrBox && (boxes.qrBox.material.opacity = $rainLayerSettings.opacity / 100); - // boxes.thetavmix && (boxes.thetavmix.material.opacity = $temperatureLayerSettings.opacity / 100); - // Enable and disable the layers $rainLayerSettings.enabled && !!boxes.qr ? scene.add(boxes.qr) : scene.remove(boxes.qr); $cloudLayerSettings.enabled && !!boxes.ql ? scene.add(boxes.ql) : scene.remove(boxes.ql); @@ -66,11 +59,6 @@ // It runs only once. dataSetup(data_layers, scene); - // TODO: - // TODO: FETCH THE REST OF THE DATA - // TODO: - // TODO: - // Add the example points to the scene // scene.add(examplePoints()); diff --git a/src/routes/viewer/fetchAndPrepareData/dataSetup.ts b/src/routes/viewer/fetchAndPrepareData/dataSetup.ts index d403e8f..942aefe 100644 --- a/src/routes/viewer/fetchAndPrepareData/dataSetup.ts +++ b/src/routes/viewer/fetchAndPrepareData/dataSetup.ts @@ -16,17 +16,18 @@ export async function dataSetup(visible_data, scene) { for (const variable of visible_data) { const dimensions = variable === 'thetavmix' ? 3 : 4; - // Common operation for all variables - - const { dataUint8, store, shape } = await fetchSlice({ currentTimeIndex: 0, path: variable, dimensions }); variable === 'thetavmix' ? await getVoxelAndVolumeSize2D(store, shape, variable) : await getVoxelAndVolumeSize(store, shape, variable); await createVolumetricRenderingBox({ scene, variable, dataUint8 }); + } - fetchAllSlices({ path: variable, dimensions }); // TODO: FETCH ALL SLICES ONCE I HAVE THE FIRST ONE + // Fetch all slices after shwing the first one + for (const variable of visible_data) { + const dimensions = variable === 'thetavmix' ? 3 : 4; + fetchAllSlices({ path: variable, dimensions }); } } \ No newline at end of file diff --git a/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts b/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts index 0dc1df8..276ca1e 100644 --- a/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts +++ b/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts @@ -17,7 +17,7 @@ export async function fetchSlice({ const datasetUrl = urlSearchParams.get("dataset") || 'http://localhost:5173/data/movie.zarr'; // Create an HTTPStore pointing to the base of your Zarr hierarchy - const store = new HTTPStore(datasetUrl, { fetchOptions: { redirect: 'follow', mode: 'cors', credentials: 'include' } }); + const store = new HTTPStore(datasetUrl, { fetchOptions: { redirect: 'follow', mode: 'no-cors', credentials: 'include' } }); const zarrdata = await openArray({ store, path, mode }); const { data, shape } = dimensions === 4 ? await zarrdata.getRaw([currentTimeIndex, null, null, null]) diff --git a/src/routes/viewer/sceneSetup/createPlaneMesh.ts b/src/routes/viewer/sceneSetup/createPlaneMesh.ts index 86f52fb..ae4e831 100644 --- a/src/routes/viewer/sceneSetup/createPlaneMesh.ts +++ b/src/routes/viewer/sceneSetup/createPlaneMesh.ts @@ -7,8 +7,6 @@ import { scaleFactor } from '../stores/viewer.store'; export function createPlaneMesh(): THREE.Mesh { const textureLoader = new THREE.TextureLoader(); const texture = textureLoader.load('/maps/nl_map 50m per pixel.webp'); - // texture.encoding = THREE.sRGBEncoding; - // TODO Replace with the following line when the texture is in sRGB texture.colorSpace = THREE.SRGBColorSpace; // Scale factor: 50 meters per pixel diff --git a/src/routes/viewer/sceneSetup/initMaterial.ts b/src/routes/viewer/sceneSetup/initMaterial.ts index 2d45055..8db7930 100644 --- a/src/routes/viewer/sceneSetup/initMaterial.ts +++ b/src/routes/viewer/sceneSetup/initMaterial.ts @@ -13,11 +13,6 @@ import { makeRainTransferTex } from '$lib/utils/makeRainTransferTex'; import { cameraFar, cameraNear } from './create3DScene'; import { cloudLayerSettings, rainLayerSettings, temperatureLayerSettings } from '../stores/viewer.store'; -// TODO: -// TODO: -// TODO: MAKE THIS WORK -// TODO: - // Run only once at mount const transferTexture = makeRainTransferTex(); diff --git a/src/routes/viewer/sceneSetup/updateMaterial.ts b/src/routes/viewer/sceneSetup/updateMaterial.ts index cd424fd..0897697 100644 --- a/src/routes/viewer/sceneSetup/updateMaterial.ts +++ b/src/routes/viewer/sceneSetup/updateMaterial.ts @@ -35,7 +35,7 @@ export function updateMaterial({ variable, dataUint8 }) { 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.// TODO: is this the best filter? + volumeTexture.minFilter = THREE.LinearFilter; // Better for volume rendering. volumeTexture.magFilter = THREE.LinearFilter; uniforms.dataScale.value = qlScale; uniforms.dtScale.value = dtScale; @@ -51,7 +51,7 @@ export function updateMaterial({ variable, dataUint8 }) { case 'qr': volumeTexture = new THREE.Data3DTexture(dataUint8, sizes[0] / 8, sizes[1] / 8, sizes[2] / 8); volumeTexture.format = THREE.RedFormat; - volumeTexture.minFilter = THREE.NearestFilter; // TODO: is this the best filter? + volumeTexture.minFilter = THREE.NearestFilter; volumeTexture.magFilter = THREE.NearestFilter; uniforms.dataScale.value = qrScale; uniforms.dtScale.value = dtScale; diff --git a/src/routes/viewer/stores/viewer.store.ts b/src/routes/viewer/stores/viewer.store.ts index 66cc0f0..e586271 100644 --- a/src/routes/viewer/stores/viewer.store.ts +++ b/src/routes/viewer/stores/viewer.store.ts @@ -14,4 +14,5 @@ export const temperatureLayerSettings = persisted('temperatureLayer', { enabled: // 1 unit in the scene = 1000 meters (1 kilometer) in real life // Meters of the bounding box of the data -export const scaleFactor = persisted('scaleFactor', 33800); // TODO: calculate this value from the data +// NOTE: Calculate the bounding box of the data and set it here if possible. +export const scaleFactor = persisted('scaleFactor', 33800);