niklasvh / webgl-css-shaders

CSS Shaders through WebGL

CSS Shaders through WebGL

For more information and demos, please read the introduction here.

Usage

To have the script parse all the CSS automatically (very experimental), just call:

CSSshaders.init();

To manually add a shader:

CSSshaders.add( element, shaderParameters ); - returns shader element

Example:

CSSshaders.add( "#content","url(shaders/flag.vs) url(shaders/grayscale.fs), 20 20, phase 50.0, amplitude 100.0, txf rotateX(45deg), amount 1")

Shader element methods:

• transition( duration, function); - adds transition with specified duration and function, returns Shader element
• state( shaderParameters ); - creates CSS state with specified parameters, returns Shader state

Shader state methods:

• enable() - enable state
• disable() - disable state
• toggle() - toggle state

webgl-css-shaders's Issues

Current status?

Thanks for creating this, it's been over three years already!

I have to admit that at first I rejected the implementation because I felt the browser vendors would be fast to support CSS shaders, and a polyfil-type library didn't seem necessary...

I was wrong. 2016 is coming and full support for CSS shaders is still a distant reality.

Obviously not enough people have bumped into this limitation to make it a priority; although that may change soon, as the browser is used more like a game engine viewport.

Having said that, what is your take on the issue based on your experience and how do you feel about using your library today? Any missing features you'd like to see PRs for?

Cheers