Skip to content

Variable: SCREEN_GLSL ​

ts
const SCREEN_GLSL: '\nuniform vec2 uResolution;\nuniform float uPixelRatio;\nuniform vec4 uViewport; // GL viewport in device px (xy origin, zw size)\n\nvec2 hcClipToScreen(vec4 clip) {\n  return (clip.xy / clip.w * 0.5 + 0.5) * uResolution;\n}\n\nvec4 hcScreenToClip(vec2 screen, float ndcZ) {\n  return vec4(screen / uResolution * 2.0 - 1.0, ndcZ, 1.0);\n}\n\nvec4 hcOffsetClip(vec4 clip, vec2 offsetPx) {\n  clip.xy += offsetPx / uResolution * 2.0 * clip.w;\n  return clip;\n}\n\n/** Snap CSS px to the device-pixel grid; phase 0 = pixel edges, 0.5 = pixel centers. */\nfloat hcSnap(float px, float phase) {\n  return (floor(px * uPixelRatio - phase + 0.5) + phase) / uPixelRatio;\n}\n\n/** Width of one device pixel in CSS px: the anti-aliasing ramp used by SDF fragment shaders. */\nfloat hcAAWidth() {\n  return 1.0 / uPixelRatio;\n}\n';

Experimental

Screen-space helpers. "Screen" = CSS pixels from the viewport's bottom-left corner. Offsetting in clip space (hcOffsetClip) keeps sizes in px for both the 2D pixel ortho camera and 3D perspective cameras.

Released under the MIT License.