roavatar-renderer 1.3.4 → 1.3.6

package/dist/index.d.ts

@@ -1044,6 +1044,7 @@ export declare const FLAGS: {
     AUDIO_ENABLED: boolean;
     LEGACY_WELD_BEHAVIOR: boolean;
     USE_RENDERTARGET: boolean;
+    AUTO_RESTORE_CONTEXT: boolean;
     SHOW_SKELETON_HELPER: boolean;
     UPDATE_SKELETON: boolean;
     ANIMATE_SKELETON: boolean;
@@ -2195,7 +2196,8 @@ export declare class RBXRenderer {
     /**Creates canvasContainer */
     static createContainer(): void;
     /**Sets up the THREE.js renderer */
-    static create(): void;
+    static create(canvas?: HTMLCanvasElement): void;
+    static setupLostContextHandler(): 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

package/dist/index.js

@@ -29523,6 +29523,7 @@ const FLAGS = {
   AUDIO_ENABLED: true,
   LEGACY_WELD_BEHAVIOR: false,
   USE_RENDERTARGET: true,
+  AUTO_RESTORE_CONTEXT: true,
   //skeleton
   SHOW_SKELETON_HELPER: false,
   UPDATE_SKELETON: true,
@@ -41942,18 +41943,21 @@ class HSRDesc {
       if (this.layers.length !== other.layers.length) return false;
       if (this.layerTransparent.length !== other.layerTransparent.length) return false;
       for (const layer of this.layers) {
-        layerLoop: {
-          const selfIndex = this.layers.indexOf(layer);
-          for (const otherLayer of other.layers) {
-            const otherIndex = other.layers.indexOf(otherLayer);
-            if (layer.isSame(otherLayer)) {
-              if (this.layerTransparent[selfIndex] !== other.layerTransparent[otherIndex]) {
-                return false;
-              }
-              break layerLoop;
+        let foundLayer = false;
+        const selfIndex = this.layers.indexOf(layer);
+        for (const otherLayer of other.layers) {
+          const otherIndex = other.layers.indexOf(otherLayer);
+          if (layer.isSame(otherLayer)) {
+            foundLayer = true;
+            if (this.layerTransparent[selfIndex] !== other.layerTransparent[otherIndex]) {
+              return false;
             }
+            break;
           }
         }
+        if (!foundLayer) {
+          return false;
+        }
       }
     }
     return true;
@@ -43166,9 +43170,11 @@ class MaterialDesc {
   bodyPart;
   //should only be accounted for if uvType != Normal in TextureLayer
   avatarType;
+  dirty = false;
   //result
   createdTextures = [];
   isSame(other) {
+    if (this.dirty || other.dirty) return false;
     const propertiesSame = this.isDecal === other.isDecal && this.transparent === other.transparent && Math.round(this.transparency * 100) === Math.round(other.transparency * 100) && this.doubleSided === other.doubleSided && this.visible === other.visible;
     let layersSame = true;
     if (this.layers.length !== other.layers.length) {
@@ -43546,7 +43552,32 @@ class MaterialDesc {
     texture.needsUpdate = true;
     return [texture, hasTransparency];
   }
-  async compileTexture(textureType, meshDesc) {
+  async compileTexture_DirectCompose(textureType) {
+    let textureUrl = void 0;
+    for (const layer of this.layers) {
+      if (layer instanceof TextureLayer) {
+        if (layer[textureType]) {
+          textureUrl = layer[textureType];
+        }
+      }
+    }
+    if (textureUrl) {
+      const image = await API.Generic.LoadImage(textureUrl);
+      if (image) {
+        let hasTransparency = true;
+        if (!this.transparent) {
+          hasTransparency = false;
+        }
+        const texture = new Texture(image);
+        texture.wrapS = RepeatWrapping;
+        texture.wrapT = RepeatWrapping;
+        texture.colorSpace = textureType === "color" ? SRGBColorSpace : NoColorSpace;
+        texture.needsUpdate = true;
+        return [texture, hasTransparency];
+      }
+    }
+  }
+  getComposeType(textureType) {
     let hasSpecialUVType = false;
     let hasColorLayer = false;
     let hasLayerOfType = false;
@@ -43568,33 +43599,23 @@ class MaterialDesc {
     }
     if (!hasLayerOfType) return;
     if ((hasSpecialUVType || this.bodyPart !== void 0) && FLAGS.USE_RENDERTARGET) {
-      return this.compileTexture_FullCompose(textureType, meshDesc);
+      return "full";
     } else if (this.layers.length > 1 || hasColorLayer && FLAGS.USE_RENDERTARGET) {
-      return this.compileTexture_SimpleCompose(textureType);
+      return "simple";
     } else {
-      let textureUrl = void 0;
-      for (const layer of this.layers) {
-        if (layer instanceof TextureLayer) {
-          if (layer[textureType]) {
-            textureUrl = layer[textureType];
-          }
-        }
-      }
-      if (textureUrl) {
-        const image = await API.Generic.LoadImage(textureUrl);
-        if (image) {
-          let hasTransparency = true;
-          if (!this.transparent) {
-            hasTransparency = false;
-          }
-          const texture = new Texture(image);
-          texture.wrapS = RepeatWrapping;
-          texture.wrapT = RepeatWrapping;
-          texture.colorSpace = textureType === "color" ? SRGBColorSpace : NoColorSpace;
-          texture.needsUpdate = true;
-          return [texture, hasTransparency];
-        }
-      }
+      return "direct";
+    }
+  }
+  async compileTexture(textureType, meshDesc) {
+    const composeType = this.getComposeType(textureType);
+    if (!composeType) return;
+    switch (composeType) {
+      case "full":
+        return this.compileTexture_FullCompose(textureType, meshDesc);
+      case "simple":
+        return this.compileTexture_SimpleCompose(textureType);
+      case "direct":
+        return this.compileTexture_DirectCompose(textureType);
     }
   }
   async compileMaterial(meshDesc) {
@@ -49197,8 +49218,8 @@ class RBXRenderer {
     RBXRenderer.canvasContainer.style.height = `${RBXRenderer.resolution[1]}px`;
   }
   /**Sets up the THREE.js renderer */
-  static create() {
-    RBXRenderer.renderer = new WebGLRenderer({ antialias: true, alpha: true });
+  static create(canvas) {
+    RBXRenderer.renderer = new WebGLRenderer({ antialias: true, alpha: true, canvas });
     RBXRenderer.renderer.setClearColor(new Color(1, 0, 1), 0);
     RBXRenderer.renderer.outputColorSpace = SRGBColorSpace;
     RBXRenderer.renderer.shadowMap.enabled = true;
@@ -49210,12 +49231,45 @@ class RBXRenderer {
     }
     RBXRenderer.renderer.domElement.setAttribute("id", "OutfitInfo-outfit-image-3d");
     RBXRenderer.canvasContainer.appendChild(RBXRenderer.renderer.domElement);
-    if (RBXRenderer.createLoadingIcon) {
+    if (RBXRenderer.createLoadingIcon && !RBXRenderer.loadingIcon) {
       RBXRenderer.createLoadingIconHTML();
     }
     if (FLAGS.USE_POST_PROCESSING) {
       RBXRenderer._createEffectComposer();
     }
+    RBXRenderer.setupLostContextHandler();
+  }
+  static setupLostContextHandler() {
+    if (!RBXRenderer.renderer) return;
+    RBXRenderer.renderer.domElement.addEventListener("webglcontextlost", (e) => {
+      e.preventDefault();
+      error(true, "RBXRenderer's WebGL2 context was lost, consider optimizing your WebGL usage");
+      if (FLAGS.AUTO_RESTORE_CONTEXT) {
+        const newCanvas = document.createElement("canvas");
+        if (RBXRenderer.renderer?.domElement) {
+          RBXRenderer.canvasContainer.replaceChild(newCanvas, RBXRenderer.renderer.domElement);
+        }
+        RBXRenderer.renderer?.dispose();
+        RBXRenderer.create(newCanvas);
+        for (const renderScene of RBXRenderer.scenes) {
+          const controls = renderScene.controls;
+          if (controls) {
+            controls.dispose();
+            controls.domElement = newCanvas;
+            controls.connect(newCanvas);
+          }
+          for (const renderDesc of renderScene.renderDescs.values()) {
+            if (renderDesc instanceof ObjectDesc) {
+              const materialDesc = renderDesc.materialDesc;
+              const composeType = materialDesc.getComposeType("color");
+              if (composeType === "full" || composeType === "simple") {
+                materialDesc.dirty = true;
+              }
+            }
+          }
+        }
+      }
+    });
   }
   /**Sets up a basic scene with lighting
    * @param lightingType "WellLit" is the default lighting for RoAvatar, "Thumbnail" tries to match the Roblox thumbnail lighting

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "roavatar-renderer",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "A renderer for Roblox avatars, used by the RoAvatar extension.",
   "author": "steinan",
   "type": "module",