Remove in-shader glow, add background color, wire PostProcessGL to Contour

src/components/themes/contour/fragment.glsl

@@ -15,11 +15,6 @@ uniform float uScaleContour;
 // Line width: controls how much of the contour field is visible (0 = thin hairlines, 1 = wide bands)
 uniform float uWidth;
 
-// Glow brightness: overall intensity of the bloom halo
-uniform float uGlow;
-
-// Glow width: 0 = wide diffuse bloom, 1 = tight narrow halo (controls pow exponent)
-uniform float uGlowWidth;
 
 // Max line band: caps the upper visible threshold so all lines have similar spatial width
 // smaller = more uniform thin lines, larger = allows wide bands
@@ -31,6 +26,9 @@ uniform vec3 uColor1;
 // Second gradient color (RGB)
 uniform vec3 uColor2;
 
+// Background color — shown where lines and glow are absent
+uniform vec3 uBackground;
+
 const float M_PI = 3.14159265;
 const int NUM_OCTAVES = 2;
 
@@ -113,11 +111,6 @@ void main() {
   float line = smoothstep(lo - fw, lo + fw, contour_fac)
              - smoothstep(hi - fw, hi + fw, contour_fac);
 
-  // Glow: tent-shaped halo centered on the band with controlled falloff on both sides
-  float glowExponent = mix(1.0, 16.0, uGlowWidth);
-  float glow_t = clamp((contour_fac - lo + 0.1) / (uMaxLine + 0.2), 0.0, 1.0);
-  float glow_bell = 1.0 - abs(glow_t * 2.0 - 1.0);
-  float glow = uGlow * pow(glow_bell, glowExponent);
-
-  gl_FragColor = vec4(color * max(line, glow), 1.0);
+  float brightness = line;
+  gl_FragColor = vec4(mix(uBackground, color, brightness), 1.0);
 }

src/components/themes/contour/index.tsx

@@ -1,11 +1,12 @@
 import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import GL from '@/utils/gl'
+import PostProcessGL from '@/utils/postprocess'
 import { useThemeStore } from '@/store/theme'
 import { hexToRgb } from '@/utils/color'
 import fragmentShader from './fragment.glsl'
 import vertexShader from './vertex.glsl'
 
-let render: GL
+let render: PostProcessGL
 
 export default defineComponent({
   name: 'ContourTheme',
@@ -18,14 +19,14 @@ export default defineComponent({
     const scale          = computed(() => themeStore.getThemeInput('scale')?.value          as number || 3.0)
     const contour        = computed(() => themeStore.getThemeInput('contour')?.value        as number || 32.0)
     const width          = computed(() => themeStore.getThemeInput('width')?.value          as number || 0.15)
-    const glow           = computed(() => themeStore.getThemeInput('glow')?.value           as number || 0.15)
-    const glowWidth      = computed(() => themeStore.getThemeInput('glow-width')?.value     as number || 0.5)
+
     const maxLine        = computed(() => themeStore.getThemeInput('max-line')?.value       as number || 0.3)
     const color1         = computed(() => themeStore.getThemeInput('color-active')?.value   as string || '#FF00FF')
     const color2         = computed(() => themeStore.getThemeInput('color-second')?.value   as string || '#00FFFF')
+    const background     = computed(() => themeStore.getThemeInput('color-bg')?.value       as string || '#000000')
 
     onMounted(() => {
-      render = new GL(
+      render = new PostProcessGL(
         canvasRef.value!,
         vertexShader,
         fragmentShader,
@@ -41,11 +42,11 @@ export default defineComponent({
               gl.programInfo.uniforms.scale    = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'uScale')
               gl.programInfo.uniforms.contour  = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'uScaleContour')
               gl.programInfo.uniforms.width    = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'uWidth')
-              gl.programInfo.uniforms.glow      = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'uGlow')
-              gl.programInfo.uniforms.glowWidth = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'uGlowWidth')
+
               gl.programInfo.uniforms.maxLine   = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'uMaxLine')
-              gl.programInfo.uniforms.color1   = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'uColor1')
-              gl.programInfo.uniforms.color2   = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'uColor2')
+              gl.programInfo.uniforms.color1      = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'uColor1')
+              gl.programInfo.uniforms.color2      = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'uColor2')
+              gl.programInfo.uniforms.background  = gl.ctx.getUniformLocation(gl.program as WebGLProgram, 'uBackground')
             }
 
             gl.pxratio = pxratio.value
@@ -58,12 +59,16 @@ export default defineComponent({
             gl.ctx.uniform1f(gl.programInfo.uniforms.scale,   scale.value)
             gl.ctx.uniform1f(gl.programInfo.uniforms.contour, contour.value)
             gl.ctx.uniform1f(gl.programInfo.uniforms.width, width.value)
-            gl.ctx.uniform1f(gl.programInfo.uniforms.glow,      glow.value)
-            gl.ctx.uniform1f(gl.programInfo.uniforms.glowWidth, glowWidth.value)
+
             gl.ctx.uniform1f(gl.programInfo.uniforms.maxLine,   maxLine.value)
-            gl.ctx.uniform3f(gl.programInfo.uniforms.color1,  c1[0] / 255, c1[1] / 255, c1[2] / 255)
-            gl.ctx.uniform3f(gl.programInfo.uniforms.color2,  c2[0] / 255, c2[1] / 255, c2[2] / 255)
+            const bg = hexToRgb(background.value)
+            gl.ctx.uniform3f(gl.programInfo.uniforms.color1,     c1[0] / 255, c1[1] / 255, c1[2] / 255)
+            gl.ctx.uniform3f(gl.programInfo.uniforms.color2,     c2[0] / 255, c2[1] / 255, c2[2] / 255)
+            gl.ctx.uniform3f(gl.programInfo.uniforms.background, bg[0] / 255, bg[1] / 255, bg[2] / 255)
           }
+        },
+        {
+          radiusB: .5, intensityB: 1.0,
         }
       )
       render.running = true

src/utils/constant.ts

@@ -180,10 +180,10 @@ export const AppThemes: AppTheme[] = [
       buildInputSlider({ name: 'contour',  value: 32,   min: 2,    max: 64,   step: 1    }),
       buildInputSlider({ name: 'width',    value: 0.15, min: 0.01, max: 1,    step: 0.01 }),
       buildInputSlider({ name: 'max-line', value: 0.3,  min: 0.01, max: 1,    step: 0.01 }),
-      buildInputSlider({ name: 'glow',       value: 0.15, min: 0, max: 1,  step: 0.01 }),
-      buildInputSlider({ name: 'glow-width', value: 0.5,  min: 0, max: 1,  step: 0.01 }),
+
       buildInputColor({ name: 'color-active', value: '#FF00FF' }),
       buildInputColor({ name: 'color-second', value: '#00FFFF' }),
+      buildInputColor({ name: 'color-bg',     value: '#000000' }),
       randomButton,
       resetButton
     ]