Remap

Remap converts a value from one range to another, preserving its relative position. A value in [in_min, in_max] is returned as the corresponding value in [out_min, out_max]. Values outside [in_min, in_max] are not clamped and will extrapolate beyond [out_min, out_max]. It works by performing an InverseLerp, followed by a Lerp.

float Remap(float value, float in_min, float in_max, float out_min, float out_max)
{
    return (value - in_min) / (in_max - in_min) * (out_max - out_min) + out_min;
}

[{"code":{"demo":"vec3(Remap(st.x, in_min, in_max, out_min, out_max))"},"label":"Gradient","params":[],"template":"#version 300 es\nprecision mediump float;\n\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\n\nout vec4 outColor;\n\n@uniforms\n\n@snippet\n\nvoid main() {\n    vec2 st = gl_FragCoord.xy / u_resolution.xy;\n    st.x *= u_resolution.x / u_resolution.y;\n\n    vec3 c = @demo;\n    outColor = vec4(c, 1.0);\n}\n"},{"code":{"demo":"vec3(Remap(noise, in_min, in_max, out_min, out_max))"},"label":"Noise","params":[],"template":"#version 300 es\nprecision mediump float;\n\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\n\nout vec4 outColor;\n\n\n// Unit-length gradient from lattice point (8 directions).\nvec2 grad2(vec2 p) {\n    float h = fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n    float a = floor(h * 8.0) * 0.7853981633974483; // k * π/4\n    return vec2(cos(a), sin(a));\n}\n\n// Unit-length gradient from lattice point.\nvec3 grad3(vec3 p) {\n    p = vec3(dot(p, vec3(127.1, 311.7, 74.7)),\n             dot(p, vec3(269.5, 183.3, 246.1)),\n             dot(p, vec3(113.5, 271.9, 124.6)));\n    vec3 g = -1.0 + 2.0 * fract(sin(p) * 43758.5453123);\n    return g * inversesqrt(max(dot(g, g), 1e-6));\n}\n\nfloat noise2(vec2 p) {\n    vec2 i = floor(p);\n    vec2 f = fract(p);\n\n    // Quintic fade (Perlin's improved interpolation)\n    vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n\n    float n00 = dot(grad2(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0));\n    float n10 = dot(grad2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0));\n    float n01 = dot(grad2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0));\n    float n11 = dot(grad2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0));\n\n    float n = mix(mix(n00, n10, u.x),\n                  mix(n01, n11, u.x), u.y);\n\n    // Unit gradients ⇒ |n| ≤ √2/2. Scale to [-1, 1]; clamp covers FP error only.\n    return clamp(n * 1.41421356237, -1.0, 1.0);\n}\n\nfloat noise(vec3 p) {\n    vec3 i = floor(p);\n    vec3 f = fract(p);\n\n    // Quintic fade (Perlin's improved interpolation)\n    vec3 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n\n    float n000 = dot(grad3(i + vec3(0.0, 0.0, 0.0)), f - vec3(0.0, 0.0, 0.0));\n    float n100 = dot(grad3(i + vec3(1.0, 0.0, 0.0)), f - vec3(1.0, 0.0, 0.0));\n    float n010 = dot(grad3(i + vec3(0.0, 1.0, 0.0)), f - vec3(0.0, 1.0, 0.0));\n    float n110 = dot(grad3(i + vec3(1.0, 1.0, 0.0)), f - vec3(1.0, 1.0, 0.0));\n    float n001 = dot(grad3(i + vec3(0.0, 0.0, 1.0)), f - vec3(0.0, 0.0, 1.0));\n    float n101 = dot(grad3(i + vec3(1.0, 0.0, 1.0)), f - vec3(1.0, 0.0, 1.0));\n    float n011 = dot(grad3(i + vec3(0.0, 1.0, 1.0)), f - vec3(0.0, 1.0, 1.0));\n    float n111 = dot(grad3(i + vec3(1.0, 1.0, 1.0)), f - vec3(1.0, 1.0, 1.0));\n\n    float n = mix(\n        mix(mix(n000, n100, u.x), mix(n010, n110, u.x), u.y),\n        mix(mix(n001, n101, u.x), mix(n011, n111, u.x), u.y),\n        u.z);\n\n    // Unit gradients ⇒ |n| ≤ √3/2. Scale to [-1, 1]; clamp covers FP error only.\n    return clamp(n * 1.15470053838, -1.0, 1.0);\n}\n\n\n\n@uniforms\n\n@snippet\n\nvoid main() {\n    vec2 st = gl_FragCoord.xy / u_resolution.xy;\n\n    @uv\n\n    float noise = noise2(st * 5.0) * 0.5 + 0.5;\n\n    vec3 v = @demo;\n    outColor = vec4(vec3(v), 1.0);\n}\n"},{"code":{"demo":"Remap(x, in_min, in_max, out_min, out_max)"},"label":"Graph","params":[],"template":"#version 300 es\nprecision mediump float;\n\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\nuniform float u_time;\n\nout vec4 outColor;\n\n@uniforms\n\n@snippet\n\nconst vec4 GRAPH_WINDOW = vec4(-2.0, 2.0, -2.0, 2.0);\n \nconst float MINOR_GRID_SPACING = 0.25;   // graph units\nconst float MAJOR_GRID_SPACING = 1.0;\n \nconst float MINOR_GRID_WIDTH   = 1.0;    // pixels\nconst float MAJOR_GRID_WIDTH   = 1.0;\nconst float AXIS_WIDTH         = 1.5;\nconst float CURVE_WIDTH        = 2.0;\n \nconst vec3  BACKGROUND_COLOR   = vec3(0.067);\nconst vec3  MINOR_GRID_COLOR   = vec3(0.140);\nconst vec3  MAJOR_GRID_COLOR   = vec3(0.220);\nconst vec3  AXIS_COLOR         = vec3(0.400);\nconst vec3  CURVE_COLOR        = vec3(0.30, 0.62, 1.00);\n\nfloat GraphedFunction(float x) {\n    return @demo;\n}\n\nfloat Ink(float distancePixels, float widthPixels) {\n    float halfWidth = widthPixels * 0.5;\n    return 1.0 - smoothstep(halfWidth - 0.5, halfWidth + 0.5, distancePixels);\n}\n\n// Evenly spaced lines along both axes.\nfloat Grid(vec2 graphPos, vec2 pixelsPerUnit, float spacing, float widthPixels) {\n    vec2 toNearest = abs(fract(graphPos / spacing + 0.5) - 0.5) * spacing * pixelsPerUnit;\n    return Ink(min(toNearest.x, toNearest.y), widthPixels);\n}\n\n// The curve y = GraphedFunction(x).\nfloat Curve(vec2 graphPos, vec2 pixelsPerUnit, float widthPixels) {\n    float x         = graphPos.x;\n    float pixelInX  = 1.0 / pixelsPerUnit.x;\n    float y         = GraphedFunction(x);\n\n    if (!(abs(y) \u003c 1e6)) return 0.0;   // inf or NaN: draw nothing here\n\n    // Central difference either side, converted to pixel space.\n    float slope = (GraphedFunction(x + pixelInX) - GraphedFunction(x - pixelInX))\n                / (2.0 * pixelInX) * pixelsPerUnit.y / pixelsPerUnit.x;\n\n    // sqrt(1 + m^2) turns vertical distance into perpendicular distance,\n    // so steep sections don't render fat.\n    float distancePixels = abs(graphPos.y - y) * pixelsPerUnit.y\n                         / sqrt(1.0 + slope * slope);\n\n    return Ink(distancePixels, widthPixels);\n}\n\nvoid main() {\n    vec2 windowMin     = GRAPH_WINDOW.xz;\n    vec2 windowMax     = GRAPH_WINDOW.yw;\n    vec2 graphPos      = mix(windowMin, windowMax, gl_FragCoord.xy / u_resolution);\n    vec2 pixelsPerUnit = u_resolution / (windowMax - windowMin);\n\n    vec3 color = BACKGROUND_COLOR;\n    color = mix(color, MINOR_GRID_COLOR, Grid(graphPos, pixelsPerUnit, MINOR_GRID_SPACING, MINOR_GRID_WIDTH));\n    color = mix(color, MAJOR_GRID_COLOR, Grid(graphPos, pixelsPerUnit, MAJOR_GRID_SPACING, MAJOR_GRID_WIDTH));\n    color = mix(color, AXIS_COLOR, Ink(min(abs(graphPos.x) * pixelsPerUnit.x, abs(graphPos.y) * pixelsPerUnit.y), AXIS_WIDTH));\n    color = mix(color, CURVE_COLOR, Curve(graphPos, pixelsPerUnit, CURVE_WIDTH));\n\n    outColor = vec4(color, 1.0);\n}\n"}]

{"folders":[{"label":"Input range","params":["in_min","in_max"]},{"label":"Output range","params":["out_min","out_max"]}],"params":[{"label":"In Min","max":1,"min":0,"uniform":"in_min","value":0},{"label":"In Max","max":1,"min":0,"uniform":"in_max","value":1},{"label":"Out Min","max":1,"min":0,"uniform":"out_min","value":0.25},{"label":"Out Max","max":1,"min":0,"uniform":"out_max","value":0.75}],"previews":[{"code":{"demo":"vec3(Remap(st.x, in_min, in_max, out_min, out_max))"},"label":"Gradient","template":"shaders/templates/uv.frag"},{"code":{"demo":"vec3(Remap(noise, in_min, in_max, out_min, out_max))"},"label":"Noise","template":"shaders/templates/noise.frag"},{"code":{"demo":"Remap(x, in_min, in_max, out_min, out_max)"},"label":"Graph","template":"shaders/templates/graph.frag"}]}

Parameters:

value is the input value.
in_min and in_max define the original range of values (input range).
out_min and out_max define the target range of values (output range).

Use cases:

Procedural Generation: remapping an elevation value [-1000, 1000] to a color index [0, 255].
Animation: Driving a door’s rotation [0°, 90°] from a proximity value [0.5, 3] so it starts opening when you get close.
Shadow Bias: Mapping surface slope [0°, 90°] to a bias value [0.001, 0.01].

Lerp

Inverse Lerp

Ramp

Remap

Parameters:

Use cases:

Related