ToonShader.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. import {
  2. Color,
  3. Vector3
  4. } from '../../../build/three.module.js';
  5. /**
  6. * Currently contains:
  7. *
  8. * toon1
  9. * toon2
  10. * hatching
  11. * dotted
  12. */
  13. const ToonShader1 = {
  14. uniforms: {
  15. 'uDirLightPos': { value: new Vector3() },
  16. 'uDirLightColor': { value: new Color( 0xeeeeee ) },
  17. 'uAmbientLightColor': { value: new Color( 0x050505 ) },
  18. 'uBaseColor': { value: new Color( 0xffffff ) }
  19. },
  20. vertexShader: /* glsl */`
  21. varying vec3 vNormal;
  22. varying vec3 vRefract;
  23. void main() {
  24. vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
  25. vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  26. vec3 worldNormal = normalize ( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
  27. vNormal = normalize( normalMatrix * normal );
  28. vec3 I = worldPosition.xyz - cameraPosition;
  29. vRefract = refract( normalize( I ), worldNormal, 1.02 );
  30. gl_Position = projectionMatrix * mvPosition;
  31. }`,
  32. fragmentShader: /* glsl */`
  33. uniform vec3 uBaseColor;
  34. uniform vec3 uDirLightPos;
  35. uniform vec3 uDirLightColor;
  36. uniform vec3 uAmbientLightColor;
  37. varying vec3 vNormal;
  38. varying vec3 vRefract;
  39. void main() {
  40. float directionalLightWeighting = max( dot( normalize( vNormal ), uDirLightPos ), 0.0);
  41. vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;
  42. float intensity = smoothstep( - 0.5, 1.0, pow( length(lightWeighting), 20.0 ) );
  43. intensity += length(lightWeighting) * 0.2;
  44. float cameraWeighting = dot( normalize( vNormal ), vRefract );
  45. intensity += pow( 1.0 - length( cameraWeighting ), 6.0 );
  46. intensity = intensity * 0.2 + 0.3;
  47. if ( intensity < 0.50 ) {
  48. gl_FragColor = vec4( 2.0 * intensity * uBaseColor, 1.0 );
  49. } else {
  50. gl_FragColor = vec4( 1.0 - 2.0 * ( 1.0 - intensity ) * ( 1.0 - uBaseColor ), 1.0 );
  51. }
  52. }`
  53. };
  54. const ToonShader2 = {
  55. uniforms: {
  56. 'uDirLightPos': { value: new Vector3() },
  57. 'uDirLightColor': { value: new Color( 0xeeeeee ) },
  58. 'uAmbientLightColor': { value: new Color( 0x050505 ) },
  59. 'uBaseColor': { value: new Color( 0xeeeeee ) },
  60. 'uLineColor1': { value: new Color( 0x808080 ) },
  61. 'uLineColor2': { value: new Color( 0x000000 ) },
  62. 'uLineColor3': { value: new Color( 0x000000 ) },
  63. 'uLineColor4': { value: new Color( 0x000000 ) }
  64. },
  65. vertexShader: /* glsl */`
  66. varying vec3 vNormal;
  67. void main() {
  68. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  69. vNormal = normalize( normalMatrix * normal );
  70. }`,
  71. fragmentShader: /* glsl */`
  72. uniform vec3 uBaseColor;
  73. uniform vec3 uLineColor1;
  74. uniform vec3 uLineColor2;
  75. uniform vec3 uLineColor3;
  76. uniform vec3 uLineColor4;
  77. uniform vec3 uDirLightPos;
  78. uniform vec3 uDirLightColor;
  79. uniform vec3 uAmbientLightColor;
  80. varying vec3 vNormal;
  81. void main() {
  82. float camera = max( dot( normalize( vNormal ), vec3( 0.0, 0.0, 1.0 ) ), 0.4);
  83. float light = max( dot( normalize( vNormal ), uDirLightPos ), 0.0);
  84. gl_FragColor = vec4( uBaseColor, 1.0 );
  85. if ( length(uAmbientLightColor + uDirLightColor * light) < 1.00 ) {
  86. gl_FragColor *= vec4( uLineColor1, 1.0 );
  87. }
  88. if ( length(uAmbientLightColor + uDirLightColor * camera) < 0.50 ) {
  89. gl_FragColor *= vec4( uLineColor2, 1.0 );
  90. }
  91. }`
  92. };
  93. const ToonShaderHatching = {
  94. uniforms: {
  95. 'uDirLightPos': { value: new Vector3() },
  96. 'uDirLightColor': { value: new Color( 0xeeeeee ) },
  97. 'uAmbientLightColor': { value: new Color( 0x050505 ) },
  98. 'uBaseColor': { value: new Color( 0xffffff ) },
  99. 'uLineColor1': { value: new Color( 0x000000 ) },
  100. 'uLineColor2': { value: new Color( 0x000000 ) },
  101. 'uLineColor3': { value: new Color( 0x000000 ) },
  102. 'uLineColor4': { value: new Color( 0x000000 ) }
  103. },
  104. vertexShader: /* glsl */`
  105. varying vec3 vNormal;
  106. void main() {
  107. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  108. vNormal = normalize( normalMatrix * normal );
  109. }`,
  110. fragmentShader: /* glsl */`
  111. uniform vec3 uBaseColor;
  112. uniform vec3 uLineColor1;
  113. uniform vec3 uLineColor2;
  114. uniform vec3 uLineColor3;
  115. uniform vec3 uLineColor4;
  116. uniform vec3 uDirLightPos;
  117. uniform vec3 uDirLightColor;
  118. uniform vec3 uAmbientLightColor;
  119. varying vec3 vNormal;
  120. void main() {
  121. float directionalLightWeighting = max( dot( normalize(vNormal), uDirLightPos ), 0.0);
  122. vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;
  123. gl_FragColor = vec4( uBaseColor, 1.0 );
  124. if ( length(lightWeighting) < 1.00 ) {
  125. if ( mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {
  126. gl_FragColor = vec4( uLineColor1, 1.0 );
  127. }
  128. }
  129. if ( length(lightWeighting) < 0.75 ) {
  130. if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {
  131. gl_FragColor = vec4( uLineColor2, 1.0 );
  132. }
  133. }
  134. if ( length(lightWeighting) < 0.50 ) {
  135. if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {
  136. gl_FragColor = vec4( uLineColor3, 1.0 );
  137. }
  138. }
  139. if ( length(lightWeighting) < 0.3465 ) {
  140. if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {
  141. gl_FragColor = vec4( uLineColor4, 1.0 );
  142. }
  143. }
  144. }`
  145. };
  146. const ToonShaderDotted = {
  147. uniforms: {
  148. 'uDirLightPos': { value: new Vector3() },
  149. 'uDirLightColor': { value: new Color( 0xeeeeee ) },
  150. 'uAmbientLightColor': { value: new Color( 0x050505 ) },
  151. 'uBaseColor': { value: new Color( 0xffffff ) },
  152. 'uLineColor1': { value: new Color( 0x000000 ) }
  153. },
  154. vertexShader: /* glsl */`
  155. varying vec3 vNormal;
  156. void main() {
  157. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  158. vNormal = normalize( normalMatrix * normal );
  159. }`,
  160. fragmentShader: /* glsl */`
  161. uniform vec3 uBaseColor;
  162. uniform vec3 uLineColor1;
  163. uniform vec3 uLineColor2;
  164. uniform vec3 uLineColor3;
  165. uniform vec3 uLineColor4;
  166. uniform vec3 uDirLightPos;
  167. uniform vec3 uDirLightColor;
  168. uniform vec3 uAmbientLightColor;
  169. varying vec3 vNormal;
  170. void main() {
  171. float directionalLightWeighting = max( dot( normalize(vNormal), uDirLightPos ), 0.0);
  172. vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;
  173. gl_FragColor = vec4( uBaseColor, 1.0 );
  174. if ( length(lightWeighting) < 1.00 ) {
  175. if ( ( mod(gl_FragCoord.x, 4.001) + mod(gl_FragCoord.y, 4.0) ) > 6.00 ) {
  176. gl_FragColor = vec4( uLineColor1, 1.0 );
  177. }
  178. }
  179. if ( length(lightWeighting) < 0.50 ) {
  180. if ( ( mod(gl_FragCoord.x + 2.0, 4.001) + mod(gl_FragCoord.y + 2.0, 4.0) ) > 6.00 ) {
  181. gl_FragColor = vec4( uLineColor1, 1.0 );
  182. }
  183. }
  184. }`
  185. };
  186. export { ToonShader1, ToonShader2, ToonShaderHatching, ToonShaderDotted };