@bloopjs/toodle

---

@bloopjs/toodle / backends/webgl2/glsl/text.glsl / fragmentShader

Variable: fragmentShader

const fragmentShader: "#version 300 es\nprecision highp float;\n\n// Font texture (MSDF atlas)\nuniform sampler2D u_fontTexture;\n\n// Text color\nuniform vec4 u_textColor;\n\n// Input from vertex shader\nin vec2 v_texcoord;\n\n// Output color\nout vec4 fragColor;\n\n// Signed distance function sampling for MSDF font rendering\n// Median of three: max(min(r,g), min(max(r,g), b))\nfloat sampleMsdf(vec2 texcoord) {\n vec4 c = texture(u_fontTexture, texcoord);\n return max(min(c.r, c.g), min(max(c.r, c.g), c.b));\n}\n\nvoid main() {\n // pxRange (AKA distanceRange) comes from the msdfgen tool\n float pxRange = 4.0;\n vec2 texSize = vec2(textureSize(u_fontTexture, 0));\n\n // Anti-aliasing technique by Paul Houx\n // https://github.com/Chlumsky/msdfgen/issues/22#issuecomment-234958005\n float dx = texSize.x * length(vec2(dFdx(v_texcoord.x), dFdy(v_texcoord.x)));\n float dy = texSize.y * length(vec2(dFdx(v_texcoord.y), dFdy(v_texcoord.y)));\n\n float toPixels = pxRange * inversesqrt(dx * dx + dy * dy);\n float sigDist = sampleMsdf(v_texcoord) - 0.5;\n float pxDist = sigDist * toPixels;\n\n float edgeWidth = 0.5;\n float alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);\n\n if (alpha < 0.001) {\n discard;\n }\n\n fragColor = vec4(u_textColor.rgb, u_textColor.a * alpha);\n}\n"

Defined in: backends/webgl2/glsl/text.glsl.ts:87