diff --git a/js/regl/rainPass.js b/js/regl/rainPass.js index 254344f..ca5fa7c 100644 --- a/js/regl/rainPass.js +++ b/js/regl/rainPass.js @@ -202,7 +202,7 @@ export default ({ regl, config, lkg }) => { { primary: output, }, - Promise.all([msdf.loaded, rainPassShine.loaded, rainPassVert.loaded, rainPassFrag.loaded]), + Promise.all([msdf.loaded, rainPassShine.loaded, rainPassSymbol.loaded, rainPassVert.loaded, rainPassFrag.loaded]), (w, h) => { output.resize(w, h); const aspectRatio = w / h; diff --git a/shaders/glsl/resurrectionPass.frag.glsl b/shaders/glsl/resurrectionPass.frag.glsl deleted file mode 100644 index da51a27..0000000 --- a/shaders/glsl/resurrectionPass.frag.glsl +++ /dev/null @@ -1,59 +0,0 @@ -precision mediump float; -#define PI 3.14159265359 - -uniform sampler2D tex; -uniform sampler2D bloomTex; -uniform float bloomStrength; -uniform float ditherMagnitude; -uniform float time; -uniform vec3 backgroundColor; -varying vec2 vUV; - -highp float rand( const in vec2 uv, const in float t ) { - const highp float a = 12.9898, b = 78.233, c = 43758.5453; - highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI ); - return fract(sin(sn) * c + t); -} - -float rgbComponent(float p, float q, float t) { - if (t < 0.0) t += 1.0; - if (t > 1.0) t -= 1.0; - if (t < 1.0 / 6.0) return p + (q - p) * 6.0 * t; - if (t < 1.0 / 2.0) return q; - if (t < 2.0 / 3.0) return p + (q - p) * (2.0 / 3.0 - t) * 6.0; - return p; -} - -vec3 hslToRgb(float h, float s, float l){ - float q = l < 0.5 ? l * (1. + s) : l + s - l * s; - float p = 2.0 * l - q; - return vec3( - rgbComponent(p, q, h + 1.0 / 3.0), - rgbComponent(p, q, h), - rgbComponent(p, q, h - 1.0 / 3.0) - ); -} - -void main() { - - // Mix the texture and bloom based on distance from center, - // to approximate a lens blur - vec3 brightness = mix( - texture2D( bloomTex, vUV ).rgb * bloomStrength, - texture2D( tex, vUV ).rgb, - (0.7 - length(vUV - 0.5)) - ) * 1.25; - - // Dither: subtract a random value from the brightness - brightness = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude; - - // Calculate a hue based on distance from center - float hue = 0.35 + (length(vUV - vec2(0.5, 1.0)) * -0.4 + 0.2); - - // Convert HSL to RGB - vec3 rgb = hslToRgb(hue, 0.8, max(0., brightness.r)) * vec3(0.8, 1.0, 0.7); - - // Calculate a separate RGB for upward-flowing glyphs - vec3 resurrectionRGB = hslToRgb(0.13, 1.0, max(0., brightness.g) * 0.9); - gl_FragColor = vec4(rgb + resurrectionRGB + backgroundColor, 1.0); -} diff --git a/shaders/wgsl/rainPass.wgsl b/shaders/wgsl/rainPass.wgsl index ef518b0..0dbc606 100644 --- a/shaders/wgsl/rainPass.wgsl +++ b/shaders/wgsl/rainPass.wgsl @@ -16,7 +16,7 @@ struct Config { brightnessDecay : f32, baseBrightness : f32, baseContrast : f32, - cursorEffectThreshold : f32, + cursorBrightness : f32, cycleSpeed : f32, cycleFrameSkip : i32, fallSpeed : f32, @@ -209,7 +209,7 @@ fn applyRippleEffect(effect : f32, simTime : f32, screenPos : vec2) -> f32 } fn applyCursorEffect(effect : f32, brightness : f32) -> f32 { - if (brightness >= config.cursorEffectThreshold) { + if (brightness >= config.cursorBrightness) { return 1.0; } return effect; diff --git a/shaders/wgsl/resurrectionPass.wgsl b/shaders/wgsl/resurrectionPass.wgsl deleted file mode 100644 index 642260f..0000000 --- a/shaders/wgsl/resurrectionPass.wgsl +++ /dev/null @@ -1,91 +0,0 @@ -struct Config { - bloomStrength : f32, - ditherMagnitude : f32, - backgroundColor : vec3, -}; - -struct Time { - seconds : f32, - frames : i32, -}; - -@group(0) @binding(0) var config : Config; -@group(0) @binding(1) var time : Time; -@group(0) @binding(2) var linearSampler : sampler; -@group(0) @binding(3) var tex : texture_2d; -@group(0) @binding(4) var bloomTex : texture_2d; -@group(0) @binding(5) var outputTex : texture_storage_2d; - -struct ComputeInput { - @builtin(global_invocation_id) id : vec3, -}; - -const PI : f32 = 3.14159265359; - -fn randomFloat( uv : vec2 ) -> f32 { - let a = 12.9898; - let b = 78.233; - let c = 43758.5453; - let dt = dot( uv, vec2( a, b ) ); - let sn = dt % PI; - return fract(sin(sn) * c); -} - -fn rgbComponent(p : f32, q : f32, t : f32) -> f32 { - var t2 = t; - if (t2 < 0.0) { t2 += 1.0; } - if (t2 > 1.0) { t2 -= 1.0; } - if (t2 < 1.0 / 6.0) { return p + (q - p) * 6.0 * t2; } - if (t2 < 1.0 / 2.0) { return q; } - if (t2 < 2.0 / 3.0) { return p + (q - p) * (2.0 / 3.0 - t2) * 6.0; } - return p; -} - -fn hslToRgb(h : f32, s : f32, l : f32) -> vec3 { - var q : f32; - if (l < 0.5) { - q = l * (1. + s); - } else { - q = l + s - l * s; - } - var p = 2.0 * l - q; - return vec3( - rgbComponent(p, q, h + 1.0 / 3.0), - rgbComponent(p, q, h), - rgbComponent(p, q, h - 1.0 / 3.0) - ); -} - -@compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) { - - // Resolve the invocation ID to a texel coordinate - var coord = vec2(input.id.xy); - var screenSize = textureDimensions(tex); - - if (coord.x >= screenSize.x) { - return; - } - - var uv = vec2(coord) / vec2(screenSize); - - // Mix the texture and bloom based on distance from center, - // to approximate a lens blur - var brightness = mix( - textureSampleLevel( tex, linearSampler, uv, 0.0 ).rgb, - textureSampleLevel( bloomTex, linearSampler, uv, 0.0 ).rgb * config.bloomStrength, - (0.7 - length(uv - 0.5)) - ) * 1.25; - - // Dither: subtract a random value from the brightness - brightness -= randomFloat( uv + vec2(time.seconds) ) * config.ditherMagnitude; - - // Calculate a hue based on distance from center - var hue = 0.35 + (length(vec2(uv.x, 1.0 - uv.y) - vec2(0.5, 1.0)) * -0.4 + 0.2); - - // Convert HSL to RGB - var rgb = hslToRgb(hue, 0.8, max(0., brightness.r)) * vec3(0.8, 1.0, 0.7); - - // Calculate a separate RGB for upward-flowing glyphs - var resurrectionRGB = hslToRgb(0.13, 1.0, max(0., brightness.g) * 0.9); - textureStore(outputTex, coord, vec4(rgb + resurrectionRGB + config.backgroundColor, 1.0)); -}