feat(model): handle depth test and depth write material flags

package.json

@@ -38,7 +38,7 @@
     "three.js"
   ],
   "dependencies": {
-    "@wowserhq/format": "^0.10.2"
+    "@wowserhq/format": "^0.11.0"
   },
   "peerDependencies": {
     "three": "^0.160.0"

src/lib/model/ModelManager.ts

@@ -157,16 +157,14 @@ class ModelManager {
     const textures = await Promise.all(
       m2Textures.map((m2Texture) => this.#createTexture(m2Texture)),
     );
-    const side =
-      batch.material.flags & M2_MATERIAL_FLAG.FLAG_TWO_SIDED ? THREE.DoubleSide : THREE.FrontSide;
 
     return new ModelMaterial(
       vertexShader,
       fragmentShader,
       textures,
       batch.material.blend,
       M2_MATERIAL_PASS.PASS_0,
-      side,
+      batch.material.flags,
     );
   }
 

src/lib/model/ModelMaterial.ts

@@ -1,11 +1,11 @@
 import * as THREE from 'three';
-import { M2_MATERIAL_BLEND } from '@wowserhq/format';
+import { M2_MATERIAL_BLEND, M2_MATERIAL_FLAG } from '@wowserhq/format';
 import { M2_MATERIAL_BLEND_TO_THREE_BLEND, M2_MATERIAL_PASS } from './const.js';
 import { THREE_BLEND_STATE } from '../blend.js';
 
 const DEFAULT_BLEND: M2_MATERIAL_BLEND = M2_MATERIAL_BLEND.BLEND_OPAQUE;
 const DEFAULT_PASS: M2_MATERIAL_PASS = M2_MATERIAL_PASS.PASS_0;
-const DEFAULT_SIDE: THREE.Side = THREE.FrontSide;
+const DEFAULT_FLAGS: number = 0x0;
 const DEFAULT_ALPHA: number = 1.0;
 
 const getThreeBlendState = (blend: M2_MATERIAL_BLEND, pass: M2_MATERIAL_PASS) =>
@@ -24,28 +24,22 @@ class ModelMaterial extends THREE.RawShaderMaterial {
     textures: THREE.Texture[],
     blend = DEFAULT_BLEND,
     pass = DEFAULT_PASS,
-    side = DEFAULT_SIDE,
+    flags = DEFAULT_FLAGS,
   ) {
     super();
 
     this.#blend = blend;
     this.#pass = pass;
 
+    this.side = flags & M2_MATERIAL_FLAG.FLAG_TWO_SIDED ? THREE.DoubleSide : THREE.FrontSide;
+    this.depthTest = !(flags & M2_MATERIAL_FLAG.FLAG_DISABLE_DEPTH_TEST);
+    this.depthWrite = !(flags & M2_MATERIAL_FLAG.FLAG_DISABLE_DEPTH_WRITE);
     this.alpha = DEFAULT_ALPHA;
 
-    this.uniforms = {
-      textures: { value: textures },
-      alphaRef: { value: this.#alphaRef },
-      fogColor: { value: new THREE.Color(0.25, 0.5, 0.8) },
-      fogParams: { value: new THREE.Vector3(0.0, 1066.0, 1.0) },
-    };
-
     this.glslVersion = THREE.GLSL3;
     this.vertexShader = vertexShader;
     this.fragmentShader = fragmentShader;
 
-    this.side = side;
-
     const threeBlendState = getThreeBlendState(this.#blend, this.#pass);
     const { blending, blendSrc, blendSrcAlpha, blendDst, blendDstAlpha } = threeBlendState;
 
@@ -54,6 +48,13 @@ class ModelMaterial extends THREE.RawShaderMaterial {
     this.blendSrcAlpha = blendSrcAlpha;
     this.blendDst = blendDst;
     this.blendDstAlpha = blendDstAlpha;
+
+    this.uniforms = {
+      textures: { value: textures },
+      alphaRef: { value: this.#alphaRef },
+      fogColor: { value: new THREE.Color(0.25, 0.5, 0.8) },
+      fogParams: { value: new THREE.Vector3(0.0, 1066.0, 1.0) },
+    };
   }
 
   get alphaRef() {