roavatar-renderer 1.0.2 → 1.0.4

package/README.md

@@ -8,10 +8,22 @@ Also available on npm: https://www.npmjs.com/package/roavatar-renderer
 IMPORTANT: Assets are NOT included in the npm module or this repository, you have to get them from the main RoAvatar repository
 
 Basic (not really) example on how to load an avatar, that is also untested:
+```html
+<!--I know this is kind of terrible but... it has to be included-->
+<script src="/draco_decoder.js"></script>
+```
 ```ts
+
+//setup flags that are compatible with you environment
+FLAGS.ASSETS_PATH = chrome.runtime.getURL("assets/rbxasset/")
+FLAGS.USE_WORKERS = true //if layered assets dont work set this to false
+
 //setup instance wrappers and renderer
 RegisterWrappers()
 RBXRenderer.fullSetup() //you can alternatively choose to only setup specific parts and do some yourself
+RBXRenderer.setBackgroundColor( 0xffffff )
+RBXRenderer.setRendererSize(1000,500)
+document.body.appendChild(RBXRenderer.getRendererDom())
 
 //get avatar data for the user with id 1
 const outfit = API.Avatar.GetAvatarDetails(1)

package/dist/index.d.ts

@@ -187,7 +187,9 @@ export declare const API: {
         startCurrentlyLoadingAssets: () => void;
         stopCurrentlyLoadingAssets: () => void;
         idFromStr: (str: string) => number;
-        parseAssetString: (str: string) => string | undefined;
+        parseAssetString: (str: string) => string;
+        getCDNURLFromAssetDelivery: (url: string, headers?: any) => Promise<string | Response>;
+        assetURLToCDNURL: (url: string | number | bigint, headers?: any) => Promise<string | Response>;
     };
     Events: {
         OnLoadingAssets: Event_2;
@@ -225,8 +227,8 @@ export declare const API: {
         SetThumbnailCustomization: (auth: Authentication, body: ThumbnailsCustomization_Payload) => Promise<Response>;
     };
     Asset: {
-        GetAssetBuffer: (url: string, headers?: HeadersInit) => Promise<ArrayBuffer | Response>;
-        GetRBX: (url: string, headers?: HeadersInit) => Promise<RBX | Response>;
+        GetAssetBuffer: (url: string, headers?: HeadersInit) => Promise<Response | ArrayBuffer>;
+        GetRBX: (url: string, headers?: HeadersInit) => Promise<Response | RBX>;
         GetMesh: (url: string, headers?: HeadersInit, readOnly?: boolean) => Promise<FileMesh | Response>;
         IsLayered: (id: number) => Promise<boolean | Response>;
     };
@@ -910,6 +912,9 @@ export declare const FLAGS: {
     ENABLE_API_CACHE: boolean;
     ROAVATAR_DATA_URL: string;
     ROAVATAR_TRYON_PLACE: number;
+    ASSETS_PATH: string;
+    ASSETDELIVERY_V2: boolean;
+    USE_WORKERS: boolean;
     ENABLE_LC_WEIGHT_CACHE: boolean;
     INFLATE_LAYERED_CLOTHING: number;
     LAYERED_CLOTHING_ALGORITHM: "linear" | "linearnormal" | "linearnormal2" | "rbf";
@@ -1873,16 +1878,22 @@ export declare class RBXRenderer {
     static renderer: THREE.WebGLRenderer;
     static effectComposer: EffectComposer | undefined;
     static resolution: [number, number];
+    static plane?: THREE.Mesh;
     /**Fully sets up renderer with scene, camera and frame rendering*/
-    static fullSetup(): void;
+    static fullSetup(includeScene?: boolean, includeControls?: boolean): void;
     /**Sets up the THREE.js renderer */
     static create(): void;
     /**Sets up a basic scene with lighting
      * @param lightingType "WellLit" is the default lighting for RoAvatar, "Thumbnail" tries to match the Roblox thumbnail lighting
+     * @param backgroundColorHex is the hex code for the background color, for example 0x2b2d33
      */
-    static setupScene(lightingType?: "WellLit" | "Thumbnail"): void;
+    static setupScene(lightingType?: "WellLit" | "Thumbnail", backgroundColorHex?: number): void;
     /**Sets up orbit controls */
     static setupControls(): void;
+    /**
+     * @param colorHex example: 0x2b2d33 which is the default
+     */
+    static setBackgroundColor(colorHex: number): void;
     /**Makes the renderer render a new frame on every animationFrame */
     static animate(): void;
     static _createEffectComposer(): void;

package/dist/index.js

@@ -28252,7 +28252,10 @@ const FLAGS = {
   ROAVATAR_DATA_URL: "rbxassetid://102463700065175",
   //url of model to load that lists issues with specific versions
   ROAVATAR_TRYON_PLACE: 135979364355750,
+  ASSETS_PATH: "../assets/rbxasset/",
+  ASSETDELIVERY_V2: true,
   //layered clothing
+  USE_WORKERS: true,
   ENABLE_LC_WEIGHT_CACHE: true,
   INFLATE_LAYERED_CLOTHING: 0.05,
   //only used by linear algorithms
@@ -34263,7 +34266,7 @@ async function RBLXPost(url, auth, body, attempt = 0, method = "POST") {
     }
   });
 }
-async function RBLXGet(url, headers) {
+async function RBLXGet(url, headers, includeCredentials = true) {
   return new Promise((resolve) => {
     let newHeaders = {
       "Content-Type": "application/json"
@@ -34271,10 +34274,13 @@ async function RBLXGet(url, headers) {
     if (headers) {
       newHeaders = { ...newHeaders, ...headers };
     }
+    if (url.includes("rbxcdn.com")) {
+      includeCredentials = false;
+    }
     const fetchHeaders = new Headers(newHeaders);
     try {
       fetch(url, {
-        credentials: "include",
+        credentials: includeCredentials ? "include" : void 0,
         headers: fetchHeaders
       }).then((response) => {
         resolve(response);
@@ -34332,24 +34338,52 @@ const API = {
       return numStrs.length > 0 ? Number(numStrs[numStrs.length - 1]) : NaN;
     },
     "parseAssetString": function(str) {
+      let url = str;
       if (!isNaN(Number(str))) {
-        return `https://assetdelivery.roblox.com/v1/asset?id=${str}`;
+        url = `https://assetdelivery.roblox.com/v1/asset?id=${str}`;
       } else if (str.startsWith("rbxassetid://")) {
-        return `https://assetdelivery.roblox.com/v1/asset?id=${str.slice(13)}`;
+        url = `https://assetdelivery.roblox.com/v1/asset?id=${str.slice(13)}`;
       } else if (str.startsWith("rbxasset://")) {
         str = str.replaceAll("\\", "/");
-        return new URL("../assets/rbxasset/" + str.slice(11), import.meta.url).toString();
+        url = FLAGS.ASSETS_PATH + str.slice(11);
       } else if (str.includes("roblox.com/asset")) {
-        return `https://assetdelivery.roblox.com/v1/asset?id=${API.Misc.idFromStr(str)}`;
+        url = `https://assetdelivery.roblox.com/v1/asset?id=${API.Misc.idFromStr(str)}`;
       } else if (str.startsWith("https://assetdelivery.roblox.com/v1/asset/?id=")) {
-        return `https://assetdelivery.roblox.com/v1/asset?id=${str.slice(46)}`;
+        url = `https://assetdelivery.roblox.com/v1/asset?id=${str.slice(46)}`;
       } else if (str.includes("assetdelivery.roblox.com")) {
-        return `https://assetdelivery.roblox.com/v1/asset?id=${API.Misc.idFromStr(str)}`;
+        url = `https://assetdelivery.roblox.com/v1/asset?id=${API.Misc.idFromStr(str)}`;
       } else if (str.startsWith(".")) {
-        return new URL(str, import.meta.url).toString();
+        url = str;
       } else {
         console.warn(`Failed to parse path of ${str}`);
       }
+      if (FLAGS.ASSETDELIVERY_V2) {
+        if (url.includes("/v1/")) {
+          url = url.replace("/v1/", "/v2/");
+        }
+      }
+      return url;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    "getCDNURLFromAssetDelivery": async function(url, headers) {
+      if (!FLAGS.ASSETDELIVERY_V2 || !url.includes("assetdelivery.roblox.com/v2/")) {
+        return url;
+      } else {
+        const response = await RBLXGet(url, headers);
+        if (response.status !== 200) {
+          return response;
+        }
+        const data = await response.json();
+        return data.locations[0].location;
+      }
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    "assetURLToCDNURL": async function(url, headers) {
+      url = String(url);
+      if (url.includes("rbxcdn.com")) return url;
+      const fetchStr = API.Misc.parseAssetString(url) || url;
+      const cdnURL = await API.Misc.getCDNURLFromAssetDelivery(fetchStr, headers);
+      return cdnURL;
     }
   },
   "Events": {
@@ -34358,26 +34392,32 @@ const API = {
   "Generic": {
     LoadImage: async function(url) {
       return new Promise((resolve) => {
-        const fetchStr = API.Misc.parseAssetString(url) || url;
-        const cachedImage = CACHE.Image.get(fetchStr);
+        const cacheURL = API.Misc.parseAssetString(url) || url;
+        const cachedImage = CACHE.Image.get(cacheURL);
         if (cachedImage) {
           resolve(cachedImage);
         } else {
-          const image = new Image();
-          image.onload = () => {
-            if (FLAGS.ENABLE_API_CACHE) {
-              CACHE.Image.set(fetchStr, image);
-            }
-            resolve(image);
-          };
-          image.onerror = () => {
-            if (FLAGS.ENABLE_API_CACHE) {
-              CACHE.Image.set(fetchStr, void 0);
-            }
-            resolve(void 0);
-          };
-          image.crossOrigin = "anonymous";
-          image.src = fetchStr;
+          CACHE.Image.set(cacheURL, new Promise((cacheResolve) => {
+            API.Misc.assetURLToCDNURL(url).then((fetchStr) => {
+              if (fetchStr instanceof Response) {
+                resolve(void 0);
+                return;
+              }
+              const image = new Image();
+              image.onload = () => {
+                cacheResolve(image);
+                resolve(image);
+                CACHE.Image.set(cacheURL, image);
+              };
+              image.onerror = () => {
+                cacheResolve(image);
+                resolve(void 0);
+                CACHE.Image.set(cacheURL, void 0);
+              };
+              image.crossOrigin = "anonymous";
+              image.src = fetchStr;
+            });
+          }));
         }
       });
     },
@@ -34625,8 +34665,7 @@ const API = {
   },
   "Asset": {
     GetAssetBuffer: async function(url, headers) {
-      const fetchStr = API.Misc.parseAssetString(url) || url;
-      let cacheStr = fetchStr;
+      let cacheStr = API.Misc.parseAssetString(url) || url;
       if (headers) {
         cacheStr += JSON.stringify(headers);
       }
@@ -34635,7 +34674,9 @@ const API = {
         return cachedBuffer;
       } else {
         API.Misc.startCurrentlyLoadingAssets();
-        const response = await RBLXGet(fetchStr, headers);
+        const fetchStr = await API.Misc.assetURLToCDNURL(url, headers);
+        if (fetchStr instanceof Response) return fetchStr;
+        const response = await RBLXGet(fetchStr, void 0, false);
         API.Misc.stopCurrentlyLoadingAssets();
         if (response.status === 200) {
           const data = await response.arrayBuffer();
@@ -34649,7 +34690,7 @@ const API = {
       }
     },
     GetRBX: async function(url, headers) {
-      const fetchStr = API.Misc.parseAssetString(url) || url;
+      const fetchStr = url;
       let cacheStr = fetchStr;
       if (headers) {
         cacheStr += JSON.stringify(headers);
@@ -34673,7 +34714,7 @@ const API = {
       }
     },
     GetMesh: async function(url, headers, readOnly = false) {
-      const fetchStr = API.Misc.parseAssetString(url) || url;
+      const fetchStr = url;
       let cacheStr = fetchStr;
       if (headers) {
         cacheStr += JSON.stringify(headers);
@@ -48679,6 +48720,7 @@ function WorkerWrapper(options) {
     );
   }
 }
+console.log(WorkerWrapper);
 let idCounter = 0;
 class WorkerPool {
   static instance;
@@ -48686,7 +48728,7 @@ class WorkerPool {
   workersActiveTasks = [];
   workersResolves = [];
   constructor() {
-    if (window.Worker) {
+    if (window.Worker && FLAGS.USE_WORKERS) {
       const workerCount = navigator.hardwareConcurrency || 4;
       for (let i = 0; i < workerCount; i++) {
         const worker = new WorkerWrapper();
@@ -48697,6 +48739,10 @@ class WorkerPool {
           const [id, data] = e.data;
           this._onMessage(i, id, data);
         };
+        worker.onerror = (e) => {
+          console.warn(e);
+          throw new Error("Failed to create worker, try disabling workers by setting FLAGS.USE_WORKERS = false but do note doing so will degrade performance");
+        };
       }
     }
   }
@@ -48740,7 +48786,9 @@ class WorkerPool {
     }
   }
 }
-WorkerPool.instance = new WorkerPool();
+function setupWorkerPool() {
+  WorkerPool.instance = new WorkerPool();
+}
 class RBFDeformer {
   refVerts = [];
   distVerts = [];
@@ -52553,7 +52601,11 @@ class SoundWrapper extends InstanceWrapper {
         audioUrl = this.instance.Prop("AudioContent").uri;
       }
       if (audioUrl && audioUrl.length > 0) {
-        this.data.audio = new Audio(API.Misc.parseAssetString(audioUrl));
+        this.data.audio = new Audio();
+        API.Misc.assetURLToCDNURL(audioUrl).then((url) => {
+          if (url instanceof Response || !this.data.audio) return;
+          this.data.audio.src = url;
+        });
       }
     }
     if (this.data.audio) {
@@ -57518,7 +57570,7 @@ class MeshDesc {
           for (const child2 of children2) {
             if (child2.className === "CharacterMesh") {
               if (BodyPartNameToEnum[child.Property("Name")] === child2.Property("BodyPart")) {
-                characterMeshStr = child2.Property("MeshId");
+                characterMeshStr = "rbxassetid://" + child2.Property("MeshId");
               }
             }
           }
@@ -57609,18 +57661,21 @@ const compositMeshPaths = [
   "rbxasset://avatar/compositing/R15CompositTorsoBase.mesh"
 ];
 const compositMeshCache = /* @__PURE__ */ new Map();
-for (const meshPath of compositMeshPaths) {
-  compositMeshCache.set(meshPath, new Promise((resolve) => {
-    API.Asset.GetMesh(meshPath).then((result) => {
-      if (result instanceof Response) {
-        throw new Error(`Missing file for composit mesh: ${meshPath}`);
-      } else {
-        const threeGeometry = fileMeshToTHREEGeometry(result);
-        compositMeshCache.set(meshPath, threeGeometry);
-        resolve(threeGeometry);
-      }
-    });
-  }));
+function loadCompositMeshes() {
+  console.log("Loading composit meshes");
+  for (const meshPath of compositMeshPaths) {
+    compositMeshCache.set(meshPath, new Promise((resolve) => {
+      API.Asset.GetMesh(meshPath).then((result) => {
+        if (result instanceof Response) {
+          throw new Error(`Missing file for composit mesh: ${meshPath}`);
+        } else {
+          const threeGeometry = fileMeshToTHREEGeometry(result);
+          compositMeshCache.set(meshPath, threeGeometry);
+          resolve(threeGeometry);
+        }
+      });
+    }));
+  }
 }
 async function getCompositGeometry(path) {
   return compositMeshCache.get(path);
@@ -60088,11 +60143,14 @@ class RBXRenderer {
   static renderer = new WebGLRenderer({ antialias: true });
   static effectComposer;
   static resolution = [420, 420];
+  static plane;
   /**Fully sets up renderer with scene, camera and frame rendering*/
-  static fullSetup() {
+  static fullSetup(includeScene = true, includeControls = true) {
+    setupWorkerPool();
+    loadCompositMeshes();
     RBXRenderer.create();
-    RBXRenderer.setupScene();
-    RBXRenderer.setupControls();
+    if (includeScene) RBXRenderer.setupScene();
+    if (includeControls) RBXRenderer.setupControls();
     RBXRenderer.animate();
   }
   /**Sets up the THREE.js renderer */
@@ -60114,9 +60172,10 @@ class RBXRenderer {
   }
   /**Sets up a basic scene with lighting
    * @param lightingType "WellLit" is the default lighting for RoAvatar, "Thumbnail" tries to match the Roblox thumbnail lighting
+   * @param backgroundColorHex is the hex code for the background color, for example 0x2b2d33
   */
-  static setupScene(lightingType = "WellLit") {
-    const backgroundColor = new Color(2829619);
+  static setupScene(lightingType = "WellLit", backgroundColorHex = 2829619) {
+    const backgroundColor = new Color(backgroundColorHex);
     RBXRenderer.scene.background = backgroundColor;
     let thumbnailAmbientVal = 138;
     thumbnailAmbientVal = 128;
@@ -60184,6 +60243,7 @@ class RBXRenderer {
     plane.rotation.set(rad(-90), 0, 0);
     plane.position.set(0, 0, 0);
     plane.receiveShadow = false;
+    RBXRenderer.plane = plane;
     RBXRenderer.scene.add(plane);
   }
   /**Sets up orbit controls */
@@ -60198,6 +60258,15 @@ class RBXRenderer {
     RBXRenderer.camera.lookAt(new Vector3$1(...RBXRenderer.orbitControlsTarget));
     controls.update();
   }
+  /**
+   * @param colorHex example: 0x2b2d33 which is the default
+   */
+  static setBackgroundColor(colorHex) {
+    RBXRenderer.scene.background = new Color(colorHex);
+    if (RBXRenderer.plane) {
+      RBXRenderer.plane.material = new MeshBasicMaterial({ color: colorHex });
+    }
+  }
   /**Makes the renderer render a new frame on every animationFrame */
   static animate() {
     RBXRenderer.renderer.setRenderTarget(null);
@@ -60315,6 +60384,8 @@ class RBXRenderer {
   }
   static setRendererSize(width, height) {
     RBXRenderer.renderer.setSize(width, height);
+    RBXRenderer.camera.aspect = width / height;
+    RBXRenderer.camera.updateProjectionMatrix();
   }
   static getRendererDom() {
     return RBXRenderer.renderer.domElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "roavatar-renderer",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A renderer for Roblox avatars, used by the RoAvatar extension.",
   "author": "steinan",
   "type": "module",
@@ -8,6 +8,13 @@
   "exports": {
     ".": "./dist/index.js"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/steinann/RoAvatar-Renderer.git"
+  },
+  "publishConfig": {
+    "provenance": true
+  },
   "files": [
     "dist",
     "assets"