DotScreenShader.js 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. import {
  2. Vector2
  3. } from 'three';
  4. /**
  5. * @module DotScreenShader
  6. * @three_import import { DotScreenShader } from 'three/addons/shaders/DotScreenShader.js';
  7. */
  8. /**
  9. * Dot screen shader based on [glfx.js sepia shader]{@link https://github.com/evanw/glfx.js}.
  10. *
  11. * @constant
  12. * @type {ShaderMaterial~Shader}
  13. */
  14. const DotScreenShader = {
  15. name: 'DotScreenShader',
  16. uniforms: {
  17. 'tDiffuse': { value: null },
  18. 'tSize': { value: new Vector2( 256, 256 ) },
  19. 'center': { value: new Vector2( 0.5, 0.5 ) },
  20. 'angle': { value: 1.57 },
  21. 'scale': { value: 1.0 }
  22. },
  23. vertexShader: /* glsl */`
  24. varying vec2 vUv;
  25. void main() {
  26. vUv = uv;
  27. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  28. }`,
  29. fragmentShader: /* glsl */`
  30. uniform vec2 center;
  31. uniform float angle;
  32. uniform float scale;
  33. uniform vec2 tSize;
  34. uniform sampler2D tDiffuse;
  35. varying vec2 vUv;
  36. float pattern() {
  37. float s = sin( angle ), c = cos( angle );
  38. vec2 tex = vUv * tSize - center;
  39. vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;
  40. return ( sin( point.x ) * sin( point.y ) ) * 4.0;
  41. }
  42. void main() {
  43. vec4 color = texture2D( tDiffuse, vUv );
  44. float average = ( color.r + color.g + color.b ) / 3.0;
  45. gl_FragColor = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );
  46. }`
  47. };
  48. export { DotScreenShader };