shink assets that are way too large

frontend/apps/artcraft/app/src/config/appMenu.tsx

@@ -62,7 +62,7 @@ export const APP_DESCRIPTORS: AppDescriptor[] = [
     id: "2D",
     label: "Image Editor",
     icon: faPenNib,
-    imageSrc: "/resources/gifs/2D_CANVAS_DEMO.gif",
+    imageSrc: "/resources/gifs/2D_CANVAS_DEMO.webp",
     description: "Easy edits. Great for graphic design.",
     large: true,
   },
@@ -70,7 +70,7 @@ export const APP_DESCRIPTORS: AppDescriptor[] = [
     id: "3D",
     label: "3D Stage",
     icon: faCube,
-    imageSrc: "/resources/gifs/3D_CANVAS_DEMO.gif",
+    imageSrc: "/resources/gifs/3D_CANVAS_DEMO.webp",
     description: "Precision control. Great for AI film.",
     large: true,
   },

frontend/apps/artcraft/app/src/pages/PageImage/Background.css

@@ -5,7 +5,7 @@
       rgb(var(--st-photo-tint-rgb) / var(--st-photo-tint-alpha)),
       rgb(var(--st-photo-tint-rgb) / var(--st-photo-tint-alpha))
     ),
-    url("/resources/images/digital-mountains.png");
+    url("/resources/images/digital-mountains.webp");
   background-repeat: no-repeat;
   background-size: cover;
   position: fixed;

frontend/apps/artcraft/app/src/pages/PageImageTo3DObject/ImageTo3DObject.tsx

@@ -6,7 +6,7 @@ export const ImageTo3DObject = () => {
       title="Generate 3D Object"
       subtitle="Transform your image into a 3D object with textures."
       variant="object"
-      backgroundImage="/resources/images/floating-cubes.png"
+      backgroundImage="/resources/images/floating-cubes.webp"
     />
   );
 };

frontend/apps/artcraft/app/src/pages/PageImageTo3DWorld/ImageTo3DWorld.tsx

@@ -6,7 +6,7 @@ export const ImageTo3DWorld = () => {
       title="Image to 3D World"
       subtitle="Generate 3D worlds from an image with World Labs"
       variant="world"
-      backgroundImage="/resources/images/room-of-items.png"
+      backgroundImage="/resources/images/room-of-items.webp"
     />
   );
 };

frontend/apps/artcraft/app/src/pages/PageVideo/Background.css

@@ -5,7 +5,7 @@
       rgb(var(--st-photo-tint-rgb) / var(--st-photo-tint-alpha)),
       rgb(var(--st-photo-tint-rgb) / var(--st-photo-tint-alpha))
     ),
-    url("/resources/images/forest-trees.png");
+    url("/resources/images/forest-trees.webp");
   background-repeat: no-repeat;
   background-size: cover;
   position: fixed;

frontend/libs/components/pagescene/src/lib/engine/scene.ts

@@ -1075,12 +1075,12 @@ class Scene {
 
     if (this.skybox == "Default") {
       const texture = loader.load([
-        "/resources/skybox/day/px.png",
-        "/resources/skybox/day/nx.png",
-        "/resources/skybox/day/py.png",
-        "/resources/skybox/day/ny.png",
-        "/resources/skybox/day/pz.png",
-        "/resources/skybox/day/nz.png",
+        "/resources/skybox/day/px.webp",
+        "/resources/skybox/day/nx.webp",
+        "/resources/skybox/day/py.webp",
+        "/resources/skybox/day/ny.webp",
+        "/resources/skybox/day/pz.webp",
+        "/resources/skybox/day/nz.webp",
       ]);
       this.scene.background = texture;
       if (this.ambientLight) this.scene.remove(this.ambientLight);
@@ -1088,12 +1088,12 @@ class Scene {
       if (this.hemisphereLight) this.scene.add(this.hemisphereLight);
     } else if (this.skybox == "m_0") {
       const texture = loader.load([
-        "/resources/skybox/night/Night_Moon_Burst_Cam_2_LeftX.png",
-        "/resources/skybox/night/Night_Moon_Burst_Cam_3_Right-X.png",
-        "/resources/skybox/night/Night_Moon_Burst_Cam_4_UpY.png",
-        "/resources/skybox/night/Night_Moon_Burst_Cam_5_Down-Y.png",
-        "/resources/skybox/night/Night_Moon_Burst_Cam_0_FrontZ.png",
-        "/resources/skybox/night/Night_Moon_Burst_Cam_1_Back-Z.png",
+        "/resources/skybox/night/Night_Moon_Burst_Cam_2_LeftX.webp",
+        "/resources/skybox/night/Night_Moon_Burst_Cam_3_Right-X.webp",
+        "/resources/skybox/night/Night_Moon_Burst_Cam_4_UpY.webp",
+        "/resources/skybox/night/Night_Moon_Burst_Cam_5_Down-Y.webp",
+        "/resources/skybox/night/Night_Moon_Burst_Cam_0_FrontZ.webp",
+        "/resources/skybox/night/Night_Moon_Burst_Cam_1_Back-Z.webp",
       ]);
       this.scene.background = texture;
       if (this.ambientLight) this.scene.remove(this.ambientLight);
@@ -1112,12 +1112,12 @@ class Scene {
       if (this.hemisphereLight) this.scene.remove(this.hemisphereLight);
     } else if (this.skybox == "m_3") {
       const texture = loader.load([
-        "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_2_LeftX.png",
-        "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_3_Right-X.png",
-        "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_4_UpY.png",
-        "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_5_Down-Y.png",
-        "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_0_FrontZ.png",
-        "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_1_Back-Z.png",
+        "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_2_LeftX.webp",
+        "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_3_Right-X.webp",
+        "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_4_UpY.webp",
+        "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_5_Down-Y.webp",
+        "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_0_FrontZ.webp",
+        "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_1_Back-Z.webp",
       ]);
       this.scene.background = texture;
       if (this.ambientLight) this.scene.remove(this.ambientLight);
@@ -1142,7 +1142,7 @@ class Scene {
   // deafult image skybox.
   _create_single_skybox() {
     const loader = new THREE.TextureLoader();
-    const texture = loader.load("/resources/skybox/single.jpg", () => {
+    const texture = loader.load("/resources/skybox/single.webp", () => {
       texture.mapping = THREE.EquirectangularReflectionMapping;
       texture.colorSpace = THREE.SRGBColorSpace;
       this.scene.background = texture;

frontend/libs/components/pagescene/src/lib/signals/demoAssets/demoAnimationItems.ts

@@ -64,7 +64,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Jump Forward",
-    thumbnail: "/resources/characters_gif/Jump Forward.gif",
+    thumbnail: "/resources/characters_gif/Jump Forward.webp",
     media_type: "glb",
   },
   {
@@ -73,7 +73,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Tonic Seizure",
-    thumbnail: "/resources/characters_gif/Tonic Seizure.gif",
+    thumbnail: "/resources/characters_gif/Tonic Seizure.webp",
     media_type: "glb",
   },
   {
@@ -82,7 +82,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Ginga Variation 3",
-    thumbnail: "/resources/characters_gif/Ginga Variation 3.gif",
+    thumbnail: "/resources/characters_gif/Ginga Variation 3.webp",
     media_type: "glb",
   },
   {
@@ -91,7 +91,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Texting",
-    thumbnail: "/resources/characters_gif/Texting.gif",
+    thumbnail: "/resources/characters_gif/Texting.webp",
     media_type: "glb",
   },
   {
@@ -100,7 +100,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Pushing",
-    thumbnail: "/resources/characters_gif/Pushing.gif",
+    thumbnail: "/resources/characters_gif/Pushing.webp",
     media_type: "glb",
   },
   {
@@ -109,7 +109,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Texting While Standing",
-    thumbnail: "/resources/characters_gif/Texting While Standing.gif",
+    thumbnail: "/resources/characters_gif/Texting While Standing.webp",
     media_type: "glb",
   },
   {
@@ -118,7 +118,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Getting Bit",
-    thumbnail: "/resources/characters_gif/Getting Bit.gif",
+    thumbnail: "/resources/characters_gif/Getting Bit.webp",
     media_type: "glb",
   },
   {
@@ -127,7 +127,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Twist Dance",
-    thumbnail: "/resources/characters_gif/Twist Dance.gif",
+    thumbnail: "/resources/characters_gif/Twist Dance.webp",
     media_type: "glb",
   },
   {
@@ -136,7 +136,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Peek Around Corner",
-    thumbnail: "/resources/characters_gif/Femme Peek Around Corner.gif",
+    thumbnail: "/resources/characters_gif/Femme Peek Around Corner.webp",
     media_type: "glb",
   },
   {
@@ -145,7 +145,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Sword And Shield Casting",
-    thumbnail: "/resources/characters_gif/Sword And Shield Casting.gif",
+    thumbnail: "/resources/characters_gif/Sword And Shield Casting.webp",
     media_type: "glb",
   },
   {
@@ -154,7 +154,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Breakdance Ready",
-    thumbnail: "/resources/characters_gif/Breakdance Ready.gif",
+    thumbnail: "/resources/characters_gif/Breakdance Ready.webp",
     media_type: "glb",
   },
   {
@@ -163,7 +163,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Sitting Yell",
-    thumbnail: "/resources/characters_gif/Sitting Yell.gif",
+    thumbnail: "/resources/characters_gif/Sitting Yell.webp",
     media_type: "glb",
   },
   {
@@ -172,7 +172,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Uppercut",
-    thumbnail: "/resources/characters_gif/Uppercut.gif",
+    thumbnail: "/resources/characters_gif/Uppercut.webp",
     media_type: "glb",
   },
   {
@@ -181,7 +181,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Breakdance Uprock Var 1",
-    thumbnail: "/resources/characters_gif/Breakdance Uprock Var 1.gif",
+    thumbnail: "/resources/characters_gif/Breakdance Uprock Var 1.webp",
     media_type: "glb",
   },
   {
@@ -190,7 +190,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Standard Walk",
-    thumbnail: "/resources/characters_gif/Standard Walk.gif",
+    thumbnail: "/resources/characters_gif/Standard Walk.webp",
     media_type: "glb",
   },
   {
@@ -199,7 +199,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Sword And Shield Jump",
-    thumbnail: "/resources/characters_gif/Sword And Shield Jump.gif",
+    thumbnail: "/resources/characters_gif/Sword And Shield Jump.webp",
     media_type: "glb",
   },
   {
@@ -208,7 +208,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Baseball Bunt",
-    thumbnail: "/resources/characters_gif/Baseball Bunt.gif",
+    thumbnail: "/resources/characters_gif/Baseball Bunt.webp",
     media_type: "glb",
   },
 
@@ -218,7 +218,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Sneaking Forward",
-    thumbnail: "/resources/characters_gif/Sneaking Forward.gif",
+    thumbnail: "/resources/characters_gif/Sneaking Forward.webp",
     media_type: "glb",
   },
   {
@@ -227,7 +227,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Right Strafe Walking",
-    thumbnail: "/resources/characters_gif/Right Strafe Walking.gif",
+    thumbnail: "/resources/characters_gif/Right Strafe Walking.webp",
     media_type: "glb",
   },
   {
@@ -236,7 +236,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Laying Breathless",
-    thumbnail: "/resources/characters_gif/Laying Breathless.gif",
+    thumbnail: "/resources/characters_gif/Laying Breathless.webp",
     media_type: "glb",
   },
   {
@@ -245,7 +245,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Orc Walk",
-    thumbnail: "/resources/characters_gif/Orc Walk.gif",
+    thumbnail: "/resources/characters_gif/Orc Walk.webp",
     media_type: "glb",
   },
   {
@@ -254,7 +254,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Run Look Back",
-    thumbnail: "/resources/characters_gif/Run Look Back.gif",
+    thumbnail: "/resources/characters_gif/Run Look Back.webp",
     media_type: "glb",
   },
   {
@@ -263,7 +263,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Lengthy Head Nod",
-    thumbnail: "/resources/characters_gif/Lengthy Head Nod.gif",
+    thumbnail: "/resources/characters_gif/Lengthy Head Nod.webp",
     media_type: "glb",
   },
   {
@@ -272,7 +272,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Right Hook",
-    thumbnail: "/resources/characters_gif/Right Hook.gif",
+    thumbnail: "/resources/characters_gif/Right Hook.webp",
     media_type: "glb",
   },
   {
@@ -281,7 +281,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Great Sword Impact",
-    thumbnail: "/resources/characters_gif/Great Sword Impact.gif",
+    thumbnail: "/resources/characters_gif/Great Sword Impact.webp",
     media_type: "glb",
   },
   {
@@ -290,7 +290,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Zombie Biting",
-    thumbnail: "/resources/characters_gif/Zombie Biting.gif",
+    thumbnail: "/resources/characters_gif/Zombie Biting.webp",
     media_type: "glb",
   },
   {
@@ -299,7 +299,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Leaning",
-    thumbnail: "/resources/characters_gif/Leaning.gif",
+    thumbnail: "/resources/characters_gif/Leaning.webp",
     media_type: "glb",
   },
   {
@@ -308,7 +308,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Corkscrew Evade",
-    thumbnail: "/resources/characters_gif/Corkscrew Evade.gif",
+    thumbnail: "/resources/characters_gif/Corkscrew Evade.webp",
     media_type: "glb",
   },
   {
@@ -317,7 +317,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Catwalk Walk Forward Crossed",
-    thumbnail: "/resources/characters_gif/Catwalk Walk Forward Crossed.gif",
+    thumbnail: "/resources/characters_gif/Catwalk Walk Forward Crossed.webp",
     media_type: "glb",
   },
   {
@@ -326,7 +326,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Look Around",
-    thumbnail: "/resources/characters_gif/Look Around.gif",
+    thumbnail: "/resources/characters_gif/Look Around.webp",
     media_type: "glb",
   },
   {
@@ -335,7 +335,7 @@ export const demoAnimationItems: MediaItem[] = [
     type: AssetType.ANIMATION,
     length: 100,
     name: "Convulsing",
-    thumbnail: "/resources/characters_gif/Convulsing.gif",
+    thumbnail: "/resources/characters_gif/Convulsing.webp",
     media_type: "glb",
   },
 ];

frontend/libs/components/pagescene/src/lib/signals/demoAssets/demoSkyboxItems.ts

@@ -14,14 +14,14 @@ export const demoSkyboxItems: MediaItem[] = [
     media_id: "SKY::Default",
     type: AssetType.SKYBOX,
     name: "Day Skybox",
-    thumbnail: "/resources/skybox/day/px.png",
+    thumbnail: "/resources/skybox/day/px.webp",
   },
   {
     version: 1,
     media_id: "SKY::m_0",
     type: AssetType.SKYBOX,
     name: "Night Skybox",
-    thumbnail: "/resources/skybox/night/Night_Moon_Burst_Cam_2_LeftX.png",
+    thumbnail: "/resources/skybox/night/Night_Moon_Burst_Cam_2_LeftX.webp",
   },
   {
     version: 1,
@@ -29,7 +29,7 @@ export const demoSkyboxItems: MediaItem[] = [
     type: AssetType.SKYBOX,
     name: "Gray Skybox",
     thumbnail:
-      "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_2_LeftX.png",
+      "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_2_LeftX.webp",
   },
   {
     version: 1,