fix: transparency checks and depth writing

packages/scripts/src/core/blitz/extractModel/index.ts

@@ -61,20 +61,17 @@ export async function extractModel(vfs: SteamVFS, path: string) {
     }
 
     if (textures) {
+      const { image: baseColor, hasAlpha } = await readBaseColor(
+        `Data/3d/${dirname(path)}/${textures.baseColorMap ?? textures.albedo}`,
+        textures.miscMap
+          ? `Data/3d/${dirname(path)}/${textures.miscMap}`
+          : undefined,
+      );
       material.setBaseColorTexture(
         document
           .createTexture(node.materialName)
           .setMimeType("image/webp")
-          .setImage(
-            await readBaseColor(
-              `Data/3d/${dirname(path)}/${
-                textures.baseColorMap ?? textures.albedo
-              }`,
-              textures.miscMap
-                ? `Data/3d/${dirname(path)}/${textures.miscMap}`
-                : undefined,
-            ),
-          ),
+          .setImage(baseColor),
       );
 
       if (node.configCount) {
@@ -83,15 +80,7 @@ export async function extractModel(vfs: SteamVFS, path: string) {
           configIndex < node.configCount;
           configIndex++
         ) {
-          const archive = node[`configArchive_${configIndex}`];
-
-          if (
-            archive.configName !== "Default" ||
-            !archive.enabledPresets?.AlphaTest
-          ) {
-            continue;
-          }
-
+          if (!hasAlpha) continue;
           material.setAlphaMode("BLEND").setDoubleSided(true);
         }
       }

packages/scripts/src/core/blitz/readBaseColor.ts

@@ -2,6 +2,7 @@ import sharp from "sharp";
 import { readTexture } from "./readTexture";
 
 export async function readBaseColor(path: string, occlusionPath?: string) {
+  let hasAlpha = false;
   const baseRaw = await readTexture(path);
   const occlusionRaw = occlusionPath
     ? await readTexture(occlusionPath)
@@ -30,10 +31,13 @@ export async function readBaseColor(path: string, occlusionPath?: string) {
       c = occlusion![occlusionI] / 255;
     }
 
+    const alpha = base[i * 4 + 3];
+    hasAlpha ||= alpha < 255;
+
     combined[i * 4 + 0] = Math.round(base[i * 4 + 0] * c);
     combined[i * 4 + 1] = Math.round(base[i * 4 + 1] * c);
     combined[i * 4 + 2] = Math.round(base[i * 4 + 2] * c);
-    combined[i * 4 + 3] = base[i * 4 + 3];
+    combined[i * 4 + 3] = alpha;
   }
 
   const image = await sharp(combined, {
@@ -42,5 +46,5 @@ export async function readBaseColor(path: string, occlusionPath?: string) {
     .webp()
     .toBuffer();
 
-  return image;
+  return { hasAlpha, image };
 }

packages/website/src/core/blitzkit/jsxTree.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps, ReactNode } from "react";
-import { Mesh, Object3D } from "three";
+import { Mesh, MeshStandardMaterial, Object3D } from "three";
 
 export function jsxTree(
   node: Object3D,
@@ -7,14 +7,14 @@ export function jsxTree(
     mesh?: (
       mesh: Mesh,
       props: ComponentProps<"mesh">,
-      key: string
+      key: string,
     ) => ReactNode;
     group?: (
       object3d: Object3D,
       props: ComponentProps<"group">,
-      key: string
+      key: string,
     ) => ReactNode;
-  }
+  },
 ): ReactNode {
   if (node instanceof Mesh) {
     const props = {
@@ -25,6 +25,10 @@ export function jsxTree(
       scale: node.scale,
     };
 
+    if (props.material instanceof MeshStandardMaterial) {
+      props.material.depthWrite = true;
+    }
+
     return mergers?.mesh ? (
       mergers.mesh(node, props, node.uuid)
     ) : (