background.frag.ts 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. export const background_frag = `
  2. precision mediump float;
  3. precision mediump samplerCube;
  4. precision mediump sampler2D;
  5. #if defined(dVariant_skybox)
  6. uniform samplerCube tSkybox;
  7. uniform mat4 uViewDirectionProjectionInverse;
  8. uniform float uBlur;
  9. uniform float uOpacity;
  10. uniform float uSaturation;
  11. uniform float uLightness;
  12. #elif defined(dVariant_image)
  13. uniform sampler2D tImage;
  14. uniform vec2 uImageScale;
  15. uniform vec2 uImageOffset;
  16. uniform float uOpacity;
  17. uniform float uSaturation;
  18. uniform float uLightness;
  19. #elif defined(dVariant_horizontalGradient) || defined(dVariant_radialGradient)
  20. uniform vec3 uGradientColorA;
  21. uniform vec3 uGradientColorB;
  22. uniform float uGradientRatio;
  23. #endif
  24. uniform vec2 uTexSize;
  25. uniform vec4 uViewport;
  26. uniform bool uViewportAdjusted;
  27. varying vec4 vPosition;
  28. // TODO: add as general pp option to remove banding?
  29. // Iestyn's RGB dither from http://alex.vlachos.com/graphics/Alex_Vlachos_Advanced_VR_Rendering_GDC2015.pdf
  30. vec3 ScreenSpaceDither(vec2 vScreenPos) {
  31. vec3 vDither = vec3(dot(vec2(171.0, 231.0), vScreenPos.xy));
  32. vDither.rgb = fract(vDither.rgb / vec3(103.0, 71.0, 97.0));
  33. return vDither.rgb / 255.0;
  34. }
  35. vec3 saturateColor(vec3 c, float amount) {
  36. // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
  37. const vec3 W = vec3(0.2125, 0.7154, 0.0721);
  38. vec3 intensity = vec3(dot(c, W));
  39. return mix(intensity, c, 1.0 + amount);
  40. }
  41. vec3 lightenColor(vec3 c, float amount) {
  42. return c + amount;
  43. }
  44. void main() {
  45. #if defined(dVariant_skybox)
  46. vec4 t = uViewDirectionProjectionInverse * vPosition;
  47. #ifdef enabledShaderTextureLod
  48. gl_FragColor = textureCubeLodEXT(tSkybox, normalize(t.xyz / t.w), uBlur * 8.0);
  49. #else
  50. gl_FragColor = textureCube(tSkybox, normalize(t.xyz / t.w));
  51. #endif
  52. gl_FragColor.a = uOpacity;
  53. gl_FragColor.rgb = lightenColor(saturateColor(gl_FragColor.rgb, uSaturation), uLightness);
  54. #elif defined(dVariant_image)
  55. vec2 coords;
  56. if (uViewportAdjusted) {
  57. coords = ((gl_FragCoord.xy - uViewport.xy) * (uTexSize / uViewport.zw) / uImageScale) + uImageOffset;
  58. } else {
  59. coords = (gl_FragCoord.xy / uImageScale) + uImageOffset;
  60. }
  61. gl_FragColor = texture2D(tImage, vec2(coords.x, 1.0 - coords.y));
  62. gl_FragColor.a = uOpacity;
  63. gl_FragColor.rgb = lightenColor(saturateColor(gl_FragColor.rgb, uSaturation), uLightness);
  64. #elif defined(dVariant_horizontalGradient)
  65. float d;
  66. if (uViewportAdjusted) {
  67. d = ((gl_FragCoord.y - uViewport.y) * (uTexSize.y / uViewport.w) / uTexSize.y) + 1.0 - (uGradientRatio * 2.0);
  68. } else {
  69. d = (gl_FragCoord.y / uTexSize.y) + 1.0 - (uGradientRatio * 2.0);
  70. }
  71. gl_FragColor = vec4(mix(uGradientColorB, uGradientColorA, clamp(d, 0.0, 1.0)), 1.0);
  72. gl_FragColor.rgb += ScreenSpaceDither(gl_FragCoord.xy);
  73. #elif defined(dVariant_radialGradient)
  74. float d;
  75. if (uViewportAdjusted) {
  76. d = distance(vec2(0.5), (gl_FragCoord.xy - uViewport.xy) * (uTexSize / uViewport.zw) / uTexSize) + uGradientRatio - 0.5;
  77. } else {
  78. d = distance(vec2(0.5), gl_FragCoord.xy / uTexSize) + uGradientRatio - 0.5;
  79. }
  80. gl_FragColor = vec4(mix(uGradientColorB, uGradientColorA, 1.0 - clamp(d, 0.0, 1.0)), 1.0);
  81. gl_FragColor.rgb += ScreenSpaceDither(gl_FragCoord.xy);
  82. #endif
  83. }
  84. `;