From cd6c501ea829816e46f9b5cf00f26a7487eaef40 Mon Sep 17 00:00:00 2001
From: 0b5vr <0b5vr@0b5vr.com>
Date: Fri, 13 Sep 2024 19:39:08 +0900
Subject: [PATCH] fix: Fix screenCoordinates outline rendering in WebGL

Ref, the same logic in WebGPU: https://github.com/pixiv/three-vrm/blob/c30792c30865de5af7408fd8d0145cc7bc06c716/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterial.ts#L370
---
 .../src/shaders/mtoon.vert                    | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/three-vrm-materials-mtoon/src/shaders/mtoon.vert b/packages/three-vrm-materials-mtoon/src/shaders/mtoon.vert
index 72664cfa2..f1815e97b 100644
--- a/packages/three-vrm-materials-mtoon/src/shaders/mtoon.vert
+++ b/packages/three-vrm-materials-mtoon/src/shaders/mtoon.vert
@@ -92,27 +92,22 @@ void main() {
 
   vViewPosition = - mvPosition.xyz;
 
-  float outlineTex = 1.0;
-
   #ifdef OUTLINE
+    float worldNormalLength = length( transformedNormal );
+    vec3 outlineOffset = outlineWidthFactor * worldNormalLength * objectNormal;
+
     #ifdef USE_OUTLINEWIDTHMULTIPLYTEXTURE
       vec2 outlineWidthMultiplyTextureUv = ( outlineWidthMultiplyTextureUvTransform * vec3( vUv, 1 ) ).xy;
-      outlineTex = texture2D( outlineWidthMultiplyTexture, outlineWidthMultiplyTextureUv ).g;
-    #endif
-
-    #ifdef OUTLINE_WIDTH_WORLD
-      float worldNormalLength = length( transformedNormal );
-      vec3 outlineOffset = outlineWidthFactor * outlineTex * worldNormalLength * objectNormal;
-      gl_Position = projectionMatrix * modelViewMatrix * vec4( outlineOffset + transformed, 1.0 );
+      float outlineTex = texture2D( outlineWidthMultiplyTexture, outlineWidthMultiplyTextureUv ).g;
+      outlineOffset *= outlineTex;
     #endif
 
     #ifdef OUTLINE_WIDTH_SCREEN
-      vec3 clipNormal = ( projectionMatrix * modelViewMatrix * vec4( objectNormal, 0.0 ) ).xyz;
-      vec2 projectedNormal = normalize( clipNormal.xy );
-      projectedNormal.x *= projectionMatrix[ 0 ].x / projectionMatrix[ 1 ].y;
-      gl_Position.xy += 2.0 * outlineWidthFactor * outlineTex * projectedNormal.xy;
+      outlineOffset *= vViewPosition.z / projectionMatrix[ 1 ].y;
     #endif
 
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( outlineOffset + transformed, 1.0 );
+
     gl_Position.z += 1E-6 * gl_Position.w; // anti-artifact magic
   #endif