diff --git a/public/videos/phase-3/bg/cloud_cover_global_100km.mp4 b/public/videos/phase-3/bg/cloud_cover_global_100km.mp4 index 0c83b4f..c70b63b 100644 Binary files a/public/videos/phase-3/bg/cloud_cover_global_100km.mp4 and b/public/videos/phase-3/bg/cloud_cover_global_100km.mp4 differ diff --git a/public/videos/phase-3/bg/cloud_cover_global_100km_original.mp4 b/public/videos/phase-3/bg/cloud_cover_global_100km_original.mp4 deleted file mode 100644 index 681cb4f..0000000 Binary files a/public/videos/phase-3/bg/cloud_cover_global_100km_original.mp4 and /dev/null differ diff --git a/public/videos/phase-3/bg/sst_global_100km.mp4 b/public/videos/phase-3/bg/sst_global_100km.mp4 index daa6059..4549148 100644 Binary files a/public/videos/phase-3/bg/sst_global_100km.mp4 and b/public/videos/phase-3/bg/sst_global_100km.mp4 differ diff --git a/public/videos/phase-3/bg/tas_global_100km.mp4 b/public/videos/phase-3/bg/tas_global_100km.mp4 new file mode 100644 index 0000000..de54f19 Binary files /dev/null and b/public/videos/phase-3/bg/tas_global_100km.mp4 differ diff --git a/public/videos/phase-3/bg/tp_global_100km.mp4 b/public/videos/phase-3/bg/tp_global_100km.mp4 index 21362b4..17f11a2 100644 Binary files a/public/videos/phase-3/bg/tp_global_100km.mp4 and b/public/videos/phase-3/bg/tp_global_100km.mp4 differ diff --git a/src/components/globe-map/data.ts b/src/components/globe-map/data.ts index de96e65..7430760 100644 --- a/src/components/globe-map/data.ts +++ b/src/components/globe-map/data.ts @@ -9,8 +9,9 @@ export const markers: MarkerType[] = [ export const BACKGROUND_VIDEOS = [ "videos/phase-3/bg/tp_global_100km.mp4", - "videos/phase-3/bg/cloud_cover_global_100km.mp4", - "videos/phase-3/bg/tas_100km.mp4", + // "videos/phase-3/bg/cloud_cover_global_100km.webm", + "videos/phase-3/originals/bg/cloud_cover_global_100km.mp4", + "videos/phase-3/bg/tas_global_100km.mp4", "videos/phase-3/bg/sst_global_100km.mp4", ]; diff --git a/src/components/globe-map/globe.tsx b/src/components/globe-map/globe.tsx index 1e35d44..f6025d2 100644 --- a/src/components/globe-map/globe.tsx +++ b/src/components/globe-map/globe.tsx @@ -1,14 +1,20 @@ import { useTexture, useVideoTexture } from "@react-three/drei"; import { Suspense } from "react"; -import { ShaderMaterial, DoubleSide } from "three"; +import { ShaderMaterial, DoubleSide, NearestFilter } from "three"; import { useRef, useMemo } from "react"; function VideoMaterial({ url }: { url: string }) { - const texture = useVideoTexture(url) - return + const texture = useVideoTexture(url, {}); + texture.minFilter = NearestFilter; + texture.magFilter = NearestFilter; + return } +function ImageMaterial({ url }: { url: string }) { + const texture = useTexture(url); + return +} const GlobeShaderMaterial = ({ url }: { url: string }) => { const texture = useTexture(url); diff --git a/src/components/globe-map/popup.tsx b/src/components/globe-map/popup.tsx index 16e676c..2a007b0 100644 --- a/src/components/globe-map/popup.tsx +++ b/src/components/globe-map/popup.tsx @@ -4,6 +4,7 @@ import { cn } from "@/lib/utils"; import ArrowRight from '@/svgs/arrow-right.svg'; import Close from '@/svgs/close.svg'; import { popupContent } from './data'; + const Corners = () => ( <>
@@ -39,7 +40,7 @@ const Popup = ({ closePopup, setSelectedMarker, index }: { "relative -mt-[140px] -ml-[140px] xl:-ml-[140px]": !isMobile, "fixed top-0 xs:left-[calc(50%-250px)] sm:left-[calc(50%-325px)] z-50 px-4 w-full h-full items-center justify-center xs:max-w-[500px] sm:max-w-[650px]": isMobile })}> -
+
@@ -142,7 +142,7 @@ export default function Section2() { hasMarkers={globePhase > 1} rotate={globePhase === 1} videoMaterial={ - globePhase === 0 ? "videos/wind_speed_global_100km.webm" : (globePhase === 1 ? "videos/wind_speed_global_10km.webm" : undefined) + globePhase === 0 ? "videos/wind_speed_global_100km.mp4" : (globePhase === 1 ? "videos/wind_speed_global_10km.webm" : undefined) } globePhase={globePhase} />