Skip to content

Instantly share code, notes, and snippets.

@gregkepler

gregkepler/LuminanceMapping-frag.glsl

Created January 8, 2016 17:41
Show Gist options
  • Save gregkepler/803b03e04c396132b808 to your computer and use it in GitHub Desktop.
Save gregkepler/803b03e04c396132b808 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. gregkepler created this gist Jan 8, 2016.
    23 changes: 23 additions & 0 deletions LuminanceMapping-frag.glsl
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    // glsl fragment shader sample
    // can be seen at https://www.shadertoy.com/view/MscGD2

    void mainImage( out vec4 fragColor, in vec2 fragCoord )
    {
    vec2 uv = fragCoord.xy / iResolution.xy;

    vec3 color1 = vec3(90.0/255.0, 170.0/255.0, 251.0/255.0); // light color blue
    vec3 color2 = vec3(5.0/255.0, 57.0/255.0, 109.0/255.0); // dark color blue
    //vec3 color1 = vec3(247.0/255.0, 238.0/255.0, 87.0/255.0); // light color yellow
    //vec3 color2 = vec3(182.0/255.0, 14.0/255.0, 77.0/255.0); // dark color dark red
    vec3 texColor = texture2D(iChannel0, uv).xyz; // texture pixel color

    // Replaces the color with a mix of the light and dark color based on the luminance of the original pixel color
    // luminance value
    // https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Shaders/Builtin/Functions/luminance.glsl
    const vec3 W = vec3(0.2125, 0.7154, 0.0721);
    float luminance = 1.0 - dot(texColor, W);
    vec3 lumColor = mix(color1, color2, luminance);
    vec3 newColor = lumColor;

    fragColor = vec4(newColor,1.0);
    }
    45 changes: 45 additions & 0 deletions LuminanceMapping.as
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    // example for as3, which is similar to early android

    import flash.display.MovieClip;

    // standard luminance values
    var lumR:Number = 0.2125;
    var lumG:Number = 0.7154;
    var lumB:Number = 0.0721;

    //var lumR:Number = 0.3086;
    //var lumG:Number = 0.6094;
    //var lumB:Number = 0.0820;

    var color1:Array = [90.0/255.0, 170.0/255.0, 251.0/255.0];
    var color2:Array = [5.0/255.0, 57.0/255.0, 109.0/255.0];
    //var color1:Array = [247.0/255.0, 238.0/255.0, 87.0/255.0];
    //var color2:Array = [182.0/255.0, 14.0/255.0, 77.0/255.0];

    // get difference of colors
    var rDif = color1[0] - color2[0];
    var gDif = color1[1] - color2[1];
    var bDif = color1[2] - color2[2];

    // movieclip on stage named "pic"
    var pic:MovieClip = getChildByName("pic") as MovieClip;

    // converts image to grayscale based on luminance value
    var lumMat:Array = new Array();
    lumMat=lumMat.concat([lumR, lumG, lumB, 0, 0]);
    lumMat=lumMat.concat([lumR, lumG, lumB, 0, 0]);
    lumMat=lumMat.concat([lumR, lumG, lumB, 0, 0]);
    lumMat=lumMat.concat([0, 0, 0, 1, 0]);

    // matrix to multiply value diff by color diff
    var colorMat:Array = new Array();
    colorMat=colorMat.concat([rDif, 0, 0, 0, color2[0] * 255 ]);
    colorMat=colorMat.concat([0, gDif, 0, 0, color2[1] * 255 ]);
    colorMat=colorMat.concat([0, 0, bDif, 0, color2[2] * 255 ]);
    colorMat=colorMat.concat([0, 0, 0, 1, 0]);

    var lum = new ColorMatrixFilter(lumMat);
    var mat = new ColorMatrixFilter(colorMat);

    // apply the filters
    pic.filters = [lum, mat];