01.
Sub-Pixel GLSL Boundary Rasterization over R16UI State Buffers
The Problem: Rendering 4,000+ interactive polygonal subdivisions via DOM SVG or stroked canvas paths caused catastrophic layout thrashing and dropped frame rates below 15 FPS.
The Architectural Solution: Engineered a direct-to-GPU WebGL2 pipeline. Dynamic territorial state resides in a 16-bit unsigned texture buffer (R16UI), while international borders and coastal anti-aliasing compute on-the-fly in fragment shaders using cardinal-neighbor smoothstep evaluations.
Sub-Pixel GLSL Boundary Rasterization over R16UI State Buffers — Source Solutionglsl
1234567891011121314151617181920212223242526272829303132333435// GLSL Fragment Shader: R16UI state lookup, palette sampling & dynamic border rasterizer
#version 300 es
precision highp float;
precision highp usampler2D;
in vec2 v_texCoord;
out vec4 fragColor;
uniform usampler2D u_liveStateTexture;
uniform sampler2D u_paletteTexture;
uniform vec2 u_texelSize;
uniform float u_scale;
vec4 sampleCountryColor(uint pid) {
float u = (float(pid & 255u) + 0.5) / 256.0;
float v = (float((pid >> 8u) & 255u) + 0.5) / 256.0;
return texture(u_paletteTexture, vec2(u, v));
}
void main() {
uint centerPid = texture(u_liveStateTexture, v_texCoord).r & 4095u;
if (centerPid <= 1u) discard;
vec4 centerColor = sampleCountryColor(centerPid);
int centerCountryId = int(floor(centerColor.a * 255.0 + 0.5));
// Compute smoothstep antialiased boundary stroke against cardinal neighbors
vec2 o = u_texelSize;
uint pW = texture(u_liveStateTexture, v_texCoord + vec2(-o.x, 0.0)).r & 4095u;
float stroke = clamp(u_scale * 0.95, 0.85, 1.90);
float edgeSoft = clamp(stroke * 0.45, 0.35, 0.70);
float distW = fract(v_texCoord.x / o.x) * u_scale;
float border = (pW != centerPid) ? 1.0 - smoothstep(stroke - edgeSoft, stroke + edgeSoft, distW) : 0.0;
fragColor = mix(centerColor, vec4(0.01, 0.015, 0.03, 1.0), border * 0.85);
}
