MMDToonShader.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. ( function () {
  2. /**
  3. * MMD Toon Shader
  4. *
  5. * This shader is extended from MeshPhongMaterial, and merged algorithms with
  6. * MeshToonMaterial and MeshMetcapMaterial.
  7. * Ideas came from https://github.com/mrdoob/three.js/issues/19609
  8. *
  9. * Combining steps:
  10. * * Declare matcap uniform.
  11. * * Add gradientmap_pars_fragment.
  12. * * Use gradient irradiances instead of dotNL irradiance from MeshPhongMaterial.
  13. * (Replace lights_phong_pars_fragment with lights_mmd_toon_pars_fragment)
  14. * * Add mmd_toon_matcap_fragment.
  15. */
  16. const lights_mmd_toon_pars_fragment = `
  17. varying vec3 vViewPosition;
  18. #ifndef FLAT_SHADED
  19. varying vec3 vNormal;
  20. #endif
  21. struct BlinnPhongMaterial {
  22. vec3 diffuseColor;
  23. vec3 specularColor;
  24. float specularShininess;
  25. float specularStrength;
  26. };
  27. void RE_Direct_BlinnPhong( const in IncidentLight directLight, const in GeometricContext geometry, const in BlinnPhongMaterial material, inout ReflectedLight reflectedLight ) {
  28. vec3 irradiance = getGradientIrradiance( geometry.normal, directLight.direction ) * directLight.color;
  29. #ifndef PHYSICALLY_CORRECT_LIGHTS
  30. irradiance *= PI; // punctual light
  31. #endif
  32. reflectedLight.directDiffuse += irradiance * BRDF_Diffuse_Lambert( material.diffuseColor );
  33. reflectedLight.directSpecular += irradiance * BRDF_Specular_BlinnPhong( directLight, geometry, material.specularColor, material.specularShininess ) * material.specularStrength;
  34. }
  35. void RE_IndirectDiffuse_BlinnPhong( const in vec3 irradiance, const in GeometricContext geometry, const in BlinnPhongMaterial material, inout ReflectedLight reflectedLight ) {
  36. reflectedLight.indirectDiffuse += irradiance * BRDF_Diffuse_Lambert( material.diffuseColor );
  37. }
  38. #define RE_Direct RE_Direct_BlinnPhong
  39. #define RE_IndirectDiffuse RE_IndirectDiffuse_BlinnPhong
  40. #define Material_LightProbeLOD( material ) (0)
  41. `;
  42. const mmd_toon_matcap_fragment = `
  43. #ifdef USE_MATCAP
  44. vec3 viewDir = normalize( vViewPosition );
  45. vec3 x = normalize( vec3( viewDir.z, 0.0, - viewDir.x ) );
  46. vec3 y = cross( viewDir, x );
  47. vec2 uv = vec2( dot( x, normal ), dot( y, normal ) ) * 0.495 + 0.5; // 0.495 to remove artifacts caused by undersized matcap disks
  48. vec4 matcapColor = texture2D( matcap, uv );
  49. matcapColor = matcapTexelToLinear( matcapColor );
  50. #ifdef MATCAP_BLENDING_MULTIPLY
  51. outgoingLight *= matcapColor.rgb;
  52. #elif defined( MATCAP_BLENDING_ADD )
  53. outgoingLight += matcapColor.rgb;
  54. #endif
  55. #endif
  56. `;
  57. const MMDToonShader = {
  58. defines: {
  59. TOON: true,
  60. MATCAP: true,
  61. MATCAP_BLENDING_ADD: true
  62. },
  63. uniforms: THREE.UniformsUtils.merge( [ THREE.ShaderLib.toon.uniforms, THREE.ShaderLib.phong.uniforms, THREE.ShaderLib.matcap.uniforms ] ),
  64. vertexShader: THREE.ShaderLib.phong.vertexShader,
  65. fragmentShader: THREE.ShaderLib.phong.fragmentShader.replace( '#include <common>', `
  66. #ifdef USE_MATCAP
  67. uniform sampler2D matcap;
  68. #endif
  69. #include <common>
  70. ` ).replace( '#include <envmap_common_pars_fragment>', `
  71. #include <gradientmap_pars_fragment>
  72. #include <envmap_common_pars_fragment>
  73. ` ).replace( '#include <lights_phong_pars_fragment>', lights_mmd_toon_pars_fragment ).replace( '#include <envmap_fragment>', `
  74. #include <envmap_fragment>
  75. ${mmd_toon_matcap_fragment}
  76. ` )
  77. };
  78. THREE.MMDToonShader = MMDToonShader;
  79. } )();