FilmShader.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. ( function () {
  2. /**
  3. * Film grain & scanlines shader
  4. *
  5. * - ported from HLSL to WebGL / GLSL
  6. * http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html
  7. *
  8. * Screen Space Static Postprocessor
  9. *
  10. * Produces an analogue noise overlay similar to a film grain / TV static
  11. *
  12. * Original implementation and noise algorithm
  13. * Pat 'Hawthorne' Shearon
  14. *
  15. * Optimized scanlines + noise version with intensity scaling
  16. * Georg 'Leviathan' Steinrohder
  17. *
  18. * This version is provided under a Creative Commons Attribution 3.0 License
  19. * http://creativecommons.org/licenses/by/3.0/
  20. */
  21. const FilmShader = {
  22. uniforms: {
  23. 'tDiffuse': {
  24. value: null
  25. },
  26. 'time': {
  27. value: 0.0
  28. },
  29. 'nIntensity': {
  30. value: 0.5
  31. },
  32. 'sIntensity': {
  33. value: 0.05
  34. },
  35. 'sCount': {
  36. value: 4096
  37. },
  38. 'grayscale': {
  39. value: 1
  40. }
  41. },
  42. vertexShader:
  43. /* glsl */
  44. `
  45. varying vec2 vUv;
  46. void main() {
  47. vUv = uv;
  48. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  49. }`,
  50. fragmentShader:
  51. /* glsl */
  52. `
  53. #include <common>
  54. // control parameter
  55. uniform float time;
  56. uniform bool grayscale;
  57. // noise effect intensity value (0 = no effect, 1 = full effect)
  58. uniform float nIntensity;
  59. // scanlines effect intensity value (0 = no effect, 1 = full effect)
  60. uniform float sIntensity;
  61. // scanlines effect count value (0 = no effect, 4096 = full effect)
  62. uniform float sCount;
  63. uniform sampler2D tDiffuse;
  64. varying vec2 vUv;
  65. void main() {
  66. // sample the source
  67. vec4 cTextureScreen = texture2D( tDiffuse, vUv );
  68. // make some noise
  69. float dx = rand( vUv + time );
  70. // add noise
  71. vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx, 0.0, 1.0 );
  72. // get us a sine and cosine
  73. vec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );
  74. // add scanlines
  75. cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;
  76. // interpolate between source and result by intensity
  77. cResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );
  78. // convert to grayscale if desired
  79. if( grayscale ) {
  80. cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );
  81. }
  82. gl_FragColor = vec4( cResult, cTextureScreen.a );
  83. }`
  84. };
  85. THREE.FilmShader = FilmShader;
  86. } )();