Skip to content

Instantly share code, notes, and snippets.

@yetithefoot
Created July 9, 2013 08:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yetithefoot/5955689 to your computer and use it in GitHub Desktop.
Save yetithefoot/5955689 to your computer and use it in GitHub Desktop.
Custom CSS Shader - grayscale Can test thru GIST via http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/
/*
Copyright 2012 Adobe Systems, Incorporated
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License http://creativecommons.org/licenses/by-nc-sa/3.0/ .
Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe http://www.adobe.com/communities/guidelines/ccplus/commercialcode_plus_permission.html .
*/
precision mediump float;
// This uniform value is passed in using CSS.
uniform float value;
void main()
{
const mat4 identityMatrix = mat4(1.0);
const mat4 grayscaleMatrix = mat4(0.33, 0.33, 0.33, 0.0,
0.33, 0.33, 0.33, 0.0,
0.33, 0.33, 0.33, 0.0,
0.0, 0.0, 0.0, 1.0);
css_ColorMatrix[0] = mix(identityMatrix[0], grayscaleMatrix[0], value);
css_ColorMatrix[1] = mix(identityMatrix[1], grayscaleMatrix[1], value);
css_ColorMatrix[2] = mix(identityMatrix[2], grayscaleMatrix[2], value);
css_ColorMatrix[3] = mix(identityMatrix[3], grayscaleMatrix[3], value);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment