@tableslayer/ui 0.1.4 → 0.1.6

package/src/lib/components/Stage/components/Scene/Scene.svelte

@@ -1,651 +0,0 @@
-<script lang="ts">
-  import * as THREE from 'three';
-  import { getContext, onMount, onDestroy, untrack } from 'svelte';
-  import { T, useThrelte, useTask } from '@threlte/core';
-  import {
-    EffectComposer,
-    EffectPass,
-    RenderPass,
-    BloomEffect,
-    VignetteEffect,
-    ChromaticAberrationEffect,
-    BlendFunction,
-    ToneMappingEffect,
-    ToneMappingMode,
-    LUT3DEffect
-  } from 'postprocessing';
-  import { getLUT } from './luts';
-  import { type Callbacks, type StageProps } from '../Stage/types';
-  import { MapLayerType, type MapLayerExports } from '../MapLayer/types';
-  import { clippingPlaneStore, updateClippingPlanes } from '../../helpers/clippingPlaneStore.svelte';
-  import { beginFrame, endFrame, startTiming, endTiming, logMetrics } from '../../helpers/performanceMetrics.svelte';
-  import { debugState } from '../../helpers/debugState.svelte';
-  import { getGridCellSize as getGridCellSizeHelper } from '../../helpers/grid';
-  import { SceneLayer, SceneLayerOrder, SceneLoadingState } from './types';
-  import type { AnnotationExports } from '../AnnotationLayer/types';
-  import AnnotationLayer from '../AnnotationLayer/AnnotationLayer.svelte';
-  import CursorLayer from '../CursorLayer/CursorLayer.svelte';
-  import type { CursorData } from '../CursorLayer/types';
-  import EdgeOverlayLayer from '../EdgeOverlayLayer/EdgeOverlayLayer.svelte';
-  import GridLayer from '../GridLayer/GridLayer.svelte';
-  import MapLayer from '../MapLayer/MapLayer.svelte';
-  import MarkerLayer from '../MarkerLayer/MarkerLayer.svelte';
-  import MeasurementLayer from '../MeasurementLayer/MeasurementLayer.svelte';
-  import type { MarkerLayerExports } from '../MarkerLayer/types';
-  import WeatherLayer from '../WeatherLayer/WeatherLayer.svelte';
-
-  interface Props {
-    props: StageProps;
-    cursors?: CursorData[];
-    trackLocalCursor?: boolean;
-    receivedMeasurement?: {
-      startPoint: { x: number; y: number };
-      endPoint: { x: number; y: number };
-      type: number;
-      beamWidth?: number;
-      coneAngle?: number;
-      // Visual properties
-      color?: string;
-      thickness?: number;
-      outlineColor?: string;
-      outlineThickness?: number;
-      opacity?: number;
-      markerSize?: number;
-      // Timing properties
-      autoHideDelay?: number;
-      fadeoutTime?: number;
-      // Distance properties
-      showDistance?: boolean;
-      snapToGrid?: boolean;
-      enableDMG252?: boolean;
-    } | null;
-  }
-
-  let { props, receivedMeasurement = null, cursors = [], trackLocalCursor = false }: Props = $props();
-
-  const { scene, renderer, camera, size, autoRender, renderStage } = useThrelte();
-
-  const callbacks = getContext<Callbacks>('callbacks');
-  const onSceneUpdate = callbacks.onSceneUpdate;
-
-  // Type definition for MeasurementLayer exports
-  type MeasurementLayerExports = {
-    getCurrentMeasurement: () => {
-      startPoint: THREE.Vector2 | null;
-      endPoint: THREE.Vector2 | null;
-      type: number;
-    } | null;
-    isCurrentlyDrawing: () => boolean;
-  };
-
-  let annotationsLayer: AnnotationExports;
-  let mapLayer: MapLayerExports;
-  let markerLayer: MarkerLayerExports;
-  let measurementLayer: MeasurementLayerExports | null = $state(null);
-  let needsResize = true;
-  let loadingState = SceneLoadingState.LoadingMap;
-
-  // Local cursor tracking
-  let raycaster = new THREE.Raycaster();
-  raycaster.layers.enable(SceneLayer.Main);
-
-  // Pre-allocated objects for mouse tracking to avoid GC pressure
-  const mouseNDC = new THREE.Vector2();
-  const intersectionPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
-  const intersectionPoint = new THREE.Vector3();
-
-  let composer = new EffectComposer(renderer);
-
-  onMount(() => {
-    let before = autoRender.current;
-    autoRender.set(false);
-    renderer.autoClear = false;
-    renderer.setClearColor(0, 0);
-    // Cap pixel ratio for performance on weak GPUs (e.g., Mac Mini)
-    const maxDpr = props.display.maxPixelRatio ?? 2;
-    const dpr = Math.min(window.devicePixelRatio, maxDpr);
-    renderer.setPixelRatio(dpr);
-    renderer.localClippingEnabled = true;
-
-    // Add mouse tracking if enabled
-    if (trackLocalCursor && callbacks.onCursorMove) {
-      const handleMouseMove = (event: MouseEvent) => {
-        // Convert mouse position to normalized device coordinates
-        const rect = renderer.domElement.getBoundingClientRect();
-        mouseNDC.set(
-          ((event.clientX - rect.left) / rect.width) * 2 - 1,
-          -((event.clientY - rect.top) / rect.height) * 2 + 1
-        );
-
-        // Update raycaster with camera and mouse position
-        raycaster.setFromCamera(mouseNDC, $camera);
-
-        // Find intersection with the z=0 plane using ray.intersectPlane (no allocations)
-        const hit = raycaster.ray.intersectPlane(intersectionPlane, intersectionPoint);
-
-        if (hit) {
-          // Account for scene transform (offset and zoom)
-          const adjustedPos = {
-            x: (intersectionPoint.x - props.scene.offset.x) / props.scene.zoom,
-            y: (intersectionPoint.y - props.scene.offset.y) / props.scene.zoom,
-            z: 0
-          };
-
-          callbacks.onCursorMove?.(adjustedPos);
-        }
-      };
-
-      renderer.domElement.addEventListener('mousemove', handleMouseMove);
-
-      return () => {
-        autoRender.set(before);
-        renderer.domElement.removeEventListener('mousemove', handleMouseMove);
-      };
-    }
-
-    return () => {
-      autoRender.set(before);
-    };
-  });
-
-  onDestroy(() => {
-    composer.dispose();
-  });
-
-  // Setup camera and renderer in effect
-  $effect(() => {
-    if (!camera) return;
-
-    // Configure camera to see both layers
-    $camera.layers.disableAll();
-    $camera.layers.enable(SceneLayer.Main);
-    $camera.layers.enable(SceneLayer.Overlay);
-  });
-
-  // Whenever the scene or display properties change, update the clipping planes
-  $effect(() => {
-    updateClippingPlanes(props.scene, props.display);
-    untrack(() => (renderer.clippingPlanes = clippingPlaneStore.value));
-  });
-
-  // Update needsResize when map URL changes
-  $effect(() => {
-    const mapUrl = props.map.url;
-    if (mapUrl) {
-      needsResize = true;
-    }
-  });
-
-  // Effect to update post-processing settings when props change
-  $effect(() => {
-    const postProcessing = $state.snapshot(props.postProcessing);
-
-    // Need to convert the LUT to a LookupTexture
-    Promise.resolve(getLUT(postProcessing.lut.url))
-      .then((lut) => {
-        composer.dispose();
-        composer = new EffectComposer(renderer);
-
-        const effects = [];
-
-        const renderPass = new RenderPass(scene, $camera);
-        composer.addPass(renderPass);
-
-        if (postProcessing.enabled) {
-          if (postProcessing.bloom.enabled) {
-            const bloomEffect = new BloomEffect({
-              intensity: postProcessing.bloom.intensity,
-              mipmapBlur: postProcessing.bloom.mipmapBlur,
-              radius: postProcessing.bloom.radius,
-              levels: postProcessing.bloom.levels,
-              luminanceThreshold: postProcessing.bloom.threshold,
-              luminanceSmoothing: postProcessing.bloom.smoothing
-            });
-            effects.push(bloomEffect);
-          }
-
-          if (postProcessing.chromaticAberration.enabled) {
-            const chromaticAberrationEffect = new ChromaticAberrationEffect({
-              offset: new THREE.Vector2(postProcessing.chromaticAberration.offset),
-              radialModulation: true,
-              modulationOffset: 0.025
-            });
-            effects.push(chromaticAberrationEffect);
-          }
-
-          if (postProcessing.vignette.enabled) {
-            const vignetteEffect = new VignetteEffect({
-              offset: postProcessing.vignette.offset,
-              darkness: postProcessing.vignette.darkness,
-              blendFunction: BlendFunction.NORMAL
-            });
-            effects.push(vignetteEffect);
-          }
-
-          if (postProcessing.lut.enabled && postProcessing.lut.url !== null) {
-            const lutEffect = new LUT3DEffect(new THREE.Data3DTexture(), {
-              blendFunction: BlendFunction.SET
-            });
-            lutEffect.setSize($size.width, $size.height);
-
-            if (!lut) return;
-            lutEffect.lut.dispose();
-            lutEffect.lut = lut;
-
-            effects.push(lutEffect);
-          }
-
-          // Add final tonemapping pass
-          const toneMappingEffect = new ToneMappingEffect({
-            mode:
-              postProcessing.enabled && postProcessing.toneMapping.enabled
-                ? postProcessing.toneMapping.mode
-                : ToneMappingMode.LINEAR
-          });
-          effects.push(toneMappingEffect);
-
-          const effectPass = new EffectPass($camera, ...effects);
-          composer.addPass(effectPass);
-        }
-      })
-      .catch((error) => console.error(error));
-  });
-
-  $effect(() => {
-    const renderSize = new THREE.Vector2();
-    renderer.getSize(renderSize);
-
-    // Only update render/composer size if it doesn't match the canvas size
-    // This check must be done here; it does not work when placed in $effect
-    if (
-      renderSize.width !== $size.width ||
-      renderSize.height !== $size.height ||
-      composer.outputBuffer.width !== $size.width ||
-      composer.outputBuffer.height !== $size.height
-    ) {
-      needsResize = true;
-    }
-  });
-
-  // Check if any post-processing effects are active
-  const hasActiveEffects = $derived(() => {
-    const pp = props.postProcessing;
-    if (!pp.enabled) return false;
-    return pp.bloom.enabled || pp.chromaticAberration.enabled || pp.vignette.enabled || pp.lut.enabled;
-  });
-
-  // Custom render task
-  useTask(
-    (dt) => {
-      if (!scene || !renderer || !camera) return;
-
-      const enableMetrics = debugState.enableMetrics;
-      const frameStart = enableMetrics ? beginFrame() : 0;
-
-      if (needsResize) {
-        needsResize = false;
-        renderer.setSize($size.width, $size.height);
-        composer.setSize($size.width, $size.height);
-        if (props.scene.autoFit) {
-          fit();
-        }
-      }
-
-      renderer.clear();
-
-      // Render main scene with post-processing (or bypass if no effects active)
-      camera.current.layers.set(SceneLayer.Main);
-
-      let composerTime = 0;
-      if (hasActiveEffects()) {
-        const composerStart = enableMetrics ? startTiming() : 0;
-        composer.render(dt);
-        composerTime = enableMetrics ? endTiming(composerStart) : 0;
-      } else {
-        const composerStart = enableMetrics ? startTiming() : 0;
-        renderer.render(scene, camera.current);
-        composerTime = enableMetrics ? endTiming(composerStart) : 0;
-      }
-
-      // Render overlays (grid/ping) without post-processing
-      camera.current.layers.set(SceneLayer.Overlay);
-
-      const overlayStart = enableMetrics ? startTiming() : 0;
-      renderer.render(scene, camera.current);
-      const overlayTime = enableMetrics ? endTiming(overlayStart) : 0;
-
-      // Reset camera back to main layer
-      camera.current.layers.set(SceneLayer.Main);
-
-      // Update metrics if enabled
-      if (enableMetrics) {
-        endFrame(frameStart, renderer, { composerTime, overlayTime });
-
-        if (debugState.logMetricsToConsole) {
-          logMetrics(props.debug.loggingRate);
-        }
-      }
-
-      // If scene was resized, need to wait for prop update to finish
-      if (loadingState === SceneLoadingState.Resizing) {
-        setLoadingState(SceneLoadingState.Rendering);
-      } else if (loadingState === SceneLoadingState.Rendering) {
-        setLoadingState(SceneLoadingState.Initialized);
-      }
-    },
-    { stage: renderStage }
-  );
-
-  function setLoadingState(state: SceneLoadingState) {
-    loadingState = state;
-    if (state === SceneLoadingState.Initialized) {
-      callbacks.onStageInitialized();
-    }
-  }
-
-  export function fill() {
-    const canvasAspectRatio = renderer.domElement.clientWidth / renderer.domElement.clientHeight;
-    let sceneAspectRatio = props.display.resolution.x / props.display.resolution.y;
-    let sceneWidth = props.display.resolution.x;
-    let sceneHeight = props.display.resolution.y;
-
-    // Swap dimensions if rotated 90 or 270 degrees
-    if (props.scene.rotation === 90 || props.scene.rotation === 270) {
-      sceneAspectRatio = props.display.resolution.y / props.display.resolution.x;
-      sceneWidth = props.display.resolution.y;
-      sceneHeight = props.display.resolution.x;
-    }
-
-    let newZoom: number;
-    if (sceneAspectRatio > canvasAspectRatio) {
-      newZoom = renderer.domElement.clientHeight / sceneHeight;
-    } else {
-      newZoom = renderer.domElement.clientWidth / sceneWidth;
-    }
-
-    onSceneUpdate({ x: 0, y: 0 }, newZoom);
-  }
-
-  export function fit() {
-    const canvasAspectRatio = $size.width / $size.height;
-    let sceneAspectRatio = props.display.resolution.x / props.display.resolution.y;
-    let sceneWidth = props.display.resolution.x;
-    let sceneHeight = props.display.resolution.y;
-
-    // Swap dimensions if rotated 90 or 270 degrees
-    if (props.scene.rotation === 90 || props.scene.rotation === 270) {
-      sceneAspectRatio = props.display.resolution.y / props.display.resolution.x;
-      sceneWidth = props.display.resolution.y;
-      sceneHeight = props.display.resolution.x;
-    }
-
-    let newZoom: number;
-    if (sceneAspectRatio < canvasAspectRatio) {
-      newZoom = $size.height / sceneHeight;
-    } else {
-      newZoom = $size.width / sceneWidth;
-    }
-
-    onSceneUpdate({ x: 0, y: 0 }, newZoom);
-  }
-
-  export async function generateThumbnail(quality: number = 0.5): Promise<Blob> {
-    const texture = mapLayer.getCompositeMapTexture();
-
-    if (!texture) return new Blob();
-
-    // Store original scene state
-    const originalScene = scene;
-    const originalCamera = camera.current;
-    const originalSize = $size;
-
-    const displayWidth = props.display.resolution.x;
-    const displayHeight = props.display.resolution.y;
-
-    // Handle both image and video textures
-    let imageWidth: number;
-    let imageHeight: number;
-
-    const textureImage = texture.image as HTMLVideoElement | HTMLImageElement;
-    if (textureImage instanceof HTMLVideoElement) {
-      // For video textures, use videoWidth and videoHeight
-      imageWidth = textureImage.videoWidth || displayWidth;
-      imageHeight = textureImage.videoHeight || displayHeight;
-    } else {
-      // For image textures, use width and height
-      imageWidth = textureImage.width;
-      imageHeight = textureImage.height;
-    }
-
-    // Create a temporary scene and camera for rendering
-    const tempScene = new THREE.Scene();
-    const tempCamera = new THREE.OrthographicCamera(
-      -displayWidth / 2,
-      displayWidth / 2,
-      displayHeight / 2,
-      -displayHeight / 2,
-      0.1,
-      1000
-    );
-    tempCamera.position.z = 100;
-
-    // Create a quad to render the texture
-    const geometry = new THREE.PlaneGeometry(1, 1);
-    const material = new THREE.MeshBasicMaterial({ map: texture.clone() });
-    const quad = new THREE.Mesh(geometry, material);
-    quad.position.set(props.map.offset.x, props.map.offset.y, 0);
-    quad.rotation.z = (props.map.rotation / 180.0) * Math.PI;
-    quad.scale.set(imageWidth * props.map.zoom, imageHeight * props.map.zoom, 1);
-    tempScene.add(quad);
-
-    // Temporarily replace scene and camera
-    composer.setMainScene(tempScene);
-    composer.setMainCamera(tempCamera);
-    renderer.setSize(displayWidth, displayHeight);
-    composer.setSize(displayWidth, displayHeight);
-
-    // Temporarily disable clipping planes
-    renderer.clippingPlanes = [];
-
-    // Render to the offscreen canvas
-    composer.render();
-
-    const offscreenCanvas = new OffscreenCanvas(displayWidth, displayHeight);
-    const context = offscreenCanvas.getContext('2d');
-    context?.drawImage(renderer.domElement, 0, 0, displayWidth, displayHeight);
-
-    // Restore original state
-    composer.setMainScene(originalScene);
-    composer.setMainCamera(originalCamera);
-    renderer.setSize(originalSize.width, originalSize.height);
-    composer.setSize(originalSize.width, originalSize.height);
-    renderer.clippingPlanes = clippingPlaneStore.value;
-
-    // Clean up
-    geometry.dispose();
-    material.dispose();
-
-    return offscreenCanvas.convertToBlob({ type: 'image/jpeg', quality });
-  }
-
-  export const annotations = {
-    clear: (layerId: string) => annotationsLayer.clear(layerId),
-    toRLE: () => annotationsLayer?.toRLE(),
-    fromRLE: (rleData: Uint8Array, width: number, height: number) => annotationsLayer?.fromRLE(rleData, width, height),
-    loadMask: (layerId: string, rleData: Uint8Array) => annotationsLayer?.loadMask(layerId, rleData),
-    isDrawing: () => annotationsLayer?.isDrawing() ?? false
-  };
-
-  export const map = {
-    fill: () => mapLayer.fill(),
-    fit: () => mapLayer.fit(),
-    getSize: () => mapLayer?.mapSize ?? null
-  };
-
-  // References to the layer doesn't exist until the component is mounted,
-  // so we need create these wrapper functions
-  export const fogOfWar = {
-    clear: () => mapLayer.fogOfWar.clear(),
-    reset: () => mapLayer.fogOfWar.reset(),
-    toPng: () => mapLayer.fogOfWar.toPng(),
-    toRLE: () => mapLayer.fogOfWar.toRLE(),
-    fromRLE: (rleData: Uint8Array, width: number, height: number) => mapLayer.fogOfWar.fromRLE(rleData, width, height),
-    isDrawing: () => mapLayer?.fogOfWar?.isDrawing() ?? false
-  };
-
-  // Export marker state getters
-  export const markers = {
-    get isHoveringMarker() {
-      return markerLayer?.markerState?.isHovering ?? false;
-    },
-    get isDraggingMarker() {
-      return markerLayer?.markerState?.isDragging ?? false;
-    },
-    get hoveredMarker() {
-      return markerLayer?.markerState?.hoveredMarker ?? null;
-    },
-    get selectedMarker() {
-      return markerLayer?.markerState?.selectedMarker ?? null;
-    },
-    maintainHover: (maintain: boolean) => {
-      markerLayer?.maintainHover?.(maintain);
-    },
-    onSceneChange: () => {
-      markerLayer?.onSceneChange?.();
-    }
-  };
-
-  // Export measurement layer methods
-  export const measurement = {
-    getCurrentMeasurement: () => measurementLayer?.getCurrentMeasurement?.() ?? null,
-    isDrawing: () => measurementLayer?.isCurrentlyDrawing?.() ?? false
-  };
-
-  export function getMarkerSizeInScreenSpace(markerSize = 1) {
-    const worldGridSize = getGridCellSizeHelper(props.grid, props.display);
-    const worldMarkerDiameter = worldGridSize * markerSize * 0.9;
-    const zoomedMarkerDiameter = worldMarkerDiameter * props.scene.zoom;
-    const screenMarkerDiameter = (zoomedMarkerDiameter / props.display.resolution.x) * $size.width;
-
-    return screenMarkerDiameter;
-  }
-
-  export function getMarkerScreenPosition(marker: { position?: { x: number; y: number } }) {
-    if (!marker?.position) return null;
-
-    // Create a vector at the marker's local position
-    const vector = new THREE.Vector3(marker.position.x, marker.position.y, 0);
-
-    // Apply scene transformations to get world position
-    // The markers are rendered inside a T.Object3D with position and scale transforms
-    vector.x = vector.x * props.scene.zoom + props.scene.offset.x;
-    vector.y = vector.y * props.scene.zoom + props.scene.offset.y;
-
-    // Project world position to screen space
-    vector.project(camera.current);
-
-    // Convert from normalized device coordinates (-1 to 1) to screen coordinates
-    const x = (vector.x * 0.5 + 0.5) * $size.width;
-    const y = (-vector.y * 0.5 + 0.5) * $size.height;
-
-    return { x, y };
-  }
-</script>
-
-<T.OrthographicCamera
-  makeDefault
-  near={0.1}
-  far={1000}
-  rotation={[0, 0, (props.scene.rotation * Math.PI) / 180]}
-  position={[0, 0, 100]}
-></T.OrthographicCamera>
-
-<!-- Scene -->
-<T.Object3D position={[props.scene.offset.x, props.scene.offset.y, 0]} scale={[props.scene.zoom, props.scene.zoom, 1]}>
-  <MapLayer
-    bind:this={mapLayer}
-    {props}
-    onMapLoading={() => {
-      callbacks.onStageLoading();
-      setLoadingState(SceneLoadingState.LoadingMap);
-    }}
-    onMapLoaded={() => {
-      needsResize = true;
-      if (loadingState === SceneLoadingState.LoadingMap) {
-        setLoadingState(SceneLoadingState.Resizing);
-      }
-    }}
-  />
-
-  <WeatherLayer
-    {props}
-    size={props.display.resolution}
-    layers={[SceneLayer.Main]}
-    renderOrder={SceneLayerOrder.Weather}
-  />
-
-  <!-- Map overlays that scale with the scene -->
-  <GridLayer
-    grid={props.grid}
-    display={props.display}
-    sceneZoom={props.scene.zoom}
-    layers={[SceneLayer.Overlay]}
-    renderOrder={SceneLayerOrder.Grid}
-  />
-
-  <EdgeOverlayLayer
-    props={props.edgeOverlay}
-    display={props.display}
-    visible={props.edgeOverlay.enabled}
-    layers={[SceneLayer.Overlay]}
-    renderOrder={SceneLayerOrder.EdgeOverlay}
-  />
-
-  <AnnotationLayer
-    bind:this={annotationsLayer}
-    props={props.annotations}
-    mode={props.mode}
-    isActive={props.activeLayer === MapLayerType.Annotation}
-    sceneZoom={props.scene.zoom}
-    display={props.display}
-  />
-
-  <MarkerLayer
-    bind:this={markerLayer}
-    {props}
-    isActive={props.activeLayer === MapLayerType.Marker || props.activeLayer === MapLayerType.None}
-    grid={props.grid}
-    display={props.display}
-  />
-
-  {#if props.measurement}
-    <MeasurementLayer
-      bind:this={measurementLayer}
-      props={props.measurement}
-      isActive={props.activeLayer === MapLayerType.Measurement}
-      display={props.display}
-      grid={props.grid}
-      sceneRotation={props.scene.rotation}
-      onMeasurementStart={callbacks.onMeasurementStart}
-      onMeasurementUpdate={callbacks.onMeasurementUpdate}
-      onMeasurementEnd={callbacks.onMeasurementEnd}
-      {receivedMeasurement}
-    />
-  {:else}
-    <!-- MeasurementLayer skipped: props.measurement is undefined -->
-  {/if}
-
-  <!-- Cursor Layer for rendering remote cursors -->
-  <CursorLayer
-    props={{
-      cursors: cursors,
-      showLabels: true,
-      fadeOutDelay: 5000,
-      fadeOutDuration: 500,
-      gridSpacing: props.grid.spacing,
-      displaySize: props.display.size,
-      displayResolution: props.display.resolution,
-      sceneZoom: props.scene.zoom
-    }}
-  />
-</T.Object3D>

package/src/lib/components/Stage/components/Scene/luts.ts

@@ -1,24 +0,0 @@
-import { LookupTexture } from 'postprocessing';
-import * as THREE from 'three';
-import { LUTCubeLoader } from 'three/examples/jsm/loaders/LUTCubeLoader';
-
-const loadingManager = new THREE.LoadingManager();
-const lutLoader = new LUTCubeLoader(loadingManager);
-
-/**
- * Gets a LUT
- * @param url The URL of the LUT to get
- * @returns A promise that resolves to the LookupTexture
- */
-export const getLUT = async (url: string | null): Promise<LookupTexture | null> => {
-  if (!url) return null;
-  const result = await lutLoader.loadAsync(url);
-  try {
-    const lookupTexture = LookupTexture.from(result.texture3D);
-    lookupTexture.colorSpace = THREE.LinearSRGBColorSpace;
-    return lookupTexture;
-  } catch (error) {
-    console.error(error);
-    return null;
-  }
-};