ToonShader.js 7.0 KB

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