fix(model): correct alpha handling using separate blend func

wowserhq · Feb 4, 2024 · b96720c · b96720c
1 parent 14f5883
commit b96720c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/lib/blend.ts b/src/lib/blend.ts
@@ -15,36 +15,50 @@ const THREE_BLEND_STATE = {
     blending: THREE.NoBlending,
     blendSrc: THREE.OneFactor,
     blendDst: THREE.ZeroFactor,
+    blendSrcAlpha: THREE.OneFactor,
+    blendDstAlpha: THREE.ZeroFactor,
   },
   [THREE_BLEND.BLEND_ALPHA_KEY]: {
     blending: THREE.NoBlending,
     blendSrc: THREE.OneFactor,
     blendDst: THREE.ZeroFactor,
+    blendSrcAlpha: THREE.OneFactor,
+    blendDstAlpha: THREE.ZeroFactor,
   },
   [THREE_BLEND.BLEND_ALPHA]: {
     blending: THREE.CustomBlending,
     blendSrc: THREE.SrcAlphaFactor,
     blendDst: THREE.OneMinusSrcAlphaFactor,
+    blendSrcAlpha: THREE.OneFactor,
+    blendDstAlpha: THREE.OneMinusSrcAlphaFactor,
   },
   [THREE_BLEND.BLEND_NO_ALPHA_ADD]: {
     blending: THREE.CustomBlending,
     blendSrc: THREE.OneFactor,
     blendDst: THREE.OneFactor,
+    blendSrcAlpha: THREE.ZeroFactor,
+    blendDstAlpha: THREE.OneFactor,
   },
   [THREE_BLEND.BLEND_ADD]: {
     blending: THREE.CustomBlending,
     blendSrc: THREE.SrcAlphaFactor,
     blendDst: THREE.OneFactor,
+    blendSrcAlpha: THREE.ZeroFactor,
+    blendDstAlpha: THREE.OneFactor,
   },
   [THREE_BLEND.BLEND_MOD]: {
     blending: THREE.CustomBlending,
     blendSrc: THREE.DstColorFactor,
     blendDst: THREE.ZeroFactor,
+    blendSrcAlpha: THREE.DstAlphaFactor,
+    blendDstAlpha: THREE.ZeroFactor,
   },
   [THREE_BLEND.BLEND_MOD2X]: {
     blending: THREE.CustomBlending,
     blendSrc: THREE.DstColorFactor,
     blendDst: THREE.SrcColorFactor,
+    blendSrcAlpha: THREE.DstAlphaFactor,
+    blendDstAlpha: THREE.SrcAlphaFactor,
   },
 };
 

diff --git a/src/lib/model/ModelMaterial.ts b/src/lib/model/ModelMaterial.ts
@@ -232,12 +232,16 @@ class ModelMaterial extends THREE.RawShaderMaterial {
       ? M2_MATERIAL_BLEND_TO_THREE_BLEND_OPAQUE[this.#blend]
       : M2_MATERIAL_BLEND_TO_THREE_BLEND_TRANSPARENT[this.#blend];
     const threeBlendState = THREE_BLEND_STATE[threeBlend];
-    const { blending, blendSrc, blendDst } = threeBlendState;
+
+    const { blending, blendSrc, blendDst, blendSrcAlpha, blendDstAlpha } = threeBlendState;
+    const transparent = blending !== THREE.NoBlending;
 
     this.blending = blending;
     this.blendSrc = blendSrc;
     this.blendDst = blendDst;
-    this.transparent = blending !== THREE.NoBlending;
+    this.blendSrcAlpha = blendSrcAlpha;
+    this.blendDstAlpha = blendDstAlpha;
+    this.transparent = transparent;
   }
 }