VignetteShader.js 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. /**
  2. * Vignette shader
  3. * based on PaintEffect postprocess from ro.me
  4. * http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js
  5. */
  6. var VignetteShader = {
  7. uniforms: {
  8. 'tDiffuse': { value: null },
  9. 'offset': { value: 1.0 },
  10. 'darkness': { value: 1.0 }
  11. },
  12. vertexShader: [
  13. 'varying vec2 vUv;',
  14. 'void main() {',
  15. ' vUv = uv;',
  16. ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
  17. '}'
  18. ].join( '\n' ),
  19. fragmentShader: [
  20. 'uniform float offset;',
  21. 'uniform float darkness;',
  22. 'uniform sampler2D tDiffuse;',
  23. 'varying vec2 vUv;',
  24. 'void main() {',
  25. // Eskil's vignette
  26. ' vec4 texel = texture2D( tDiffuse, vUv );',
  27. ' vec2 uv = ( vUv - vec2( 0.5 ) ) * vec2( offset );',
  28. ' gl_FragColor = vec4( mix( texel.rgb, vec3( 1.0 - darkness ), dot( uv, uv ) ), texel.a );',
  29. /*
  30. // alternative version from glfx.js
  31. // this one makes more "dusty" look (as opposed to "burned")
  32. " vec4 color = texture2D( tDiffuse, vUv );",
  33. " float dist = distance( vUv, vec2( 0.5 ) );",
  34. " color.rgb *= smoothstep( 0.8, offset * 0.799, dist *( darkness + offset ) );",
  35. " gl_FragColor = color;",
  36. */
  37. '}'
  38. ].join( '\n' )
  39. };
  40. export { VignetteShader };