VignetteShader.js 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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 };