roavatar-renderer 1.0.3 → 1.0.4

package/README.md

@@ -13,9 +13,17 @@ Basic (not really) example on how to load an avatar, that is also untested:
 <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");
               }
             }
           }
@@ -60091,12 +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 */
@@ -60118,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;
@@ -60188,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 */
@@ -60202,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);
@@ -60319,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.3",
+  "version": "1.0.4",
   "description": "A renderer for Roblox avatars, used by the RoAvatar extension.",
   "author": "steinan",
   "type": "module",