Merge pull request #143 from M3-org/thumbnail-gen

Thumbnail gen

New menu to generate thumbnails working as expected :). Probably would be good to improve UI for better user experience, but that will come with user interaction and suggestions, mergin now :D

package.json

@@ -34,13 +34,15 @@
     "html2canvas": "^1.4.1",
     "i18next": "^22.4.10",
     "i18next-browser-languagedetector": "^7.0.1",
+    "jszip": "^3.10.1",
     "ktx2-encoder": "^0.0.6",
     "load-script": "^1.0.0",
     "postprocessing": "^6.29.1",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
+    "react-dropdown": "^1.11.0",
     "react-i18next": "^12.1.5",
     "react-scripts": "^5.0.0",
     "sepia-speechrecognition-polyfill": "^1.0.0",

public/manifest.json

@@ -0,0 +1,85 @@
+{
+  "characters":[
+    {
+      "name": "Anata",
+      "description": "Anata",
+      "portrait": "./assets/portraitImages/anata.png",
+      "manifest":"./character-assets/anata/manifest.json",
+      "icon": "./assets/icons/class-neural-hacker.svg",
+      "format": "vrm"
+    },
+    {
+      "name": "Anata Male",
+      "description": "Anata Male",
+      "portrait": "./assets/portraitImages/anata_male.png",
+      "manifest":"./character-assets/anata_male/manifest.json",
+      "icon": "|",
+      "format": "vrm"
+    },
+    {
+      "name": "Anata Male",
+      "description": "Anata Male",
+      "portrait": "./assets/portraitImages/anata_male.png",
+      "manifest":"./character-assets/test.json",
+      "icon": "|",
+      "format": "vrm"
+    }
+  ],
+  "loras":[
+    {
+      "name": "SDXL Lora 728",
+      "description": "Poses and camera positions to create Lora for SDXL 726 x 726",
+      "manifest":"./lora-assets/manifest.json",
+      "icon": "|"
+    }
+  ],
+  "sprites":[
+    {
+      "name": "Multiple Animations",
+      "description": "Multiple definitions for different animations converted to sprites.",
+      "manifest":"./sprite-atlas-assets/manifest.json",
+      "icon": "|"
+    }
+
+  ],
+  "thumbnails":[
+    {
+      "name": "Clothing Thumbnail",
+      "description": "Create thumbnails for Clothing",
+      "manifest":"./thumbnail-assets/manifest.json",
+      "icon": "|"
+    },
+    {
+      "name": "Clothing Thumbnail2",
+      "description": "Create thumbnails for Clothing",
+      "manifest":"./thumbnail-assets/manifest.json",
+      "icon": "|"
+    }
+  ],
+  "defaultAnimations":[
+    {
+      "name": "T-Pose",
+      "description": "T-Pose",
+      "location":"./animations/T-Pose.fbx",
+      "icon": "|"
+    },
+    {
+      "name": "Dancing",
+      "description": "Basic Dance Animation",
+      "location":"./animations/Dancing.fbx",
+      "icon": "|"
+    },
+    {
+      "name": "Walking",
+      "description": "Basic Walk Animation",
+      "location":"./animations/Walking.fbx",
+      "icon": "|"
+    },
+    {
+      "name": "Waving",
+      "description": "Basic Waving Animation",
+      "location":"./animations/Waving.fbx",
+      "icon": "|"
+    }
+  ]
+}

public/sprite-atlas-assets/manifest.json

@@ -5,8 +5,8 @@
     "atlasWidth":128,
     "atlasHeight":128,
     "screenshotOffset":[-1,0.5],
-    "topFrameOffset":0,
-    "bottomFrameOffset":0,
+    "topFrameOffset":0.2,
+    "bottomFrameOffset":0.2,
     "pixelStyleSize":2,
     "spritesCollection":[
         {

public/thumbnail-assets/manifest.json

@@ -0,0 +1,27 @@
+{
+    "assetsLocation": "./thumbnail-assets/",
+    "poseAnimation": "/Idle.fbx",
+    "animationTime":0,
+    "backgroundColor":[0,0,0,0],
+    "screenshotOffset":[0,0],
+    "topFrameOffset":0.1,
+    "bottomFrameOffset":0.1,
+    "thumbnailsWidth":512,
+    "thumbnailsHeight":512,
+    "thumbnailsCollection":[
+        {
+            "traitGroup":"CLOTHING",
+            "cameraPosition":"front-left",
+            "cameraFrame":"mediumShot",
+            "groupTopOffset":0.1,
+            "groupBotomOffset":0.1
+        },
+        {
+            "traitGroup":"HAIR",
+            "cameraPosition":"front-left",
+            "cameraFrame":"mediumShot",
+            "groupTopOffset":0.1,
+            "groupBotomOffset":0.1
+        }
+    ]
+}

src/App.jsx

@@ -28,6 +28,7 @@ import Wallet from "./pages/Wallet"
 
 // dynamically import the manifest
 const assetImportPath = import.meta.env.VITE_ASSET_PATH + "/manifest.json"
+//const assetImportPath = "./manifest.json"
 
 let cameraDistance
 const centerCameraTarget = new THREE.Vector3()
@@ -288,7 +289,7 @@ export default function App() {
 
       <div className="generalTitle">Character Studio</div>
 
-      <LanguageSwitch />
+      {/* <LanguageSwitch /> */}
       <MessageWindow
         confirmDialogText = {confirmDialogText}
         confirmDialogCallback = {confirmDialogCallback}