0

For some reason every time I declare a custom variable in my CSS fragment shader, the shader stops working. I have no idea why this is the case since I'm quite sure the syntax is correct.

Here is my HTML code and my CSS:

#holder{
    width:600;
    height:600;
    -webkit-filter :custom(url(v.vs) mix(url(f2.fs) multiply source-over), 20 20);
}
...
...
<div id="holder"></div>

Here is my fragment shader f2.fs:

void main()
{
    uniform float time;//remove this line and the shader will work!

    css_MixColor = vec4(0.738, 0.821, 0.321, 1.0);

    css_ColorMatrix = mat4(1, 0, 0, 0,
                           0, 1, 0, 0,
                           0, 0, 1, 0,
                           0, 0, 0, 1 );

}

Instead of uniform float, I also tried float or vec4 test = vec4(1,1,1,1);, but no matter what I do the shader won't get applied every time I tried to declare a custom variable. Any thoughts?

Discombobulous
  • 1,112
  • 2
  • 14
  • 25

1 Answers1

0

I'm not familiar with shaders in CSS, but in WebGL you have to declare your uniforms at the top level, outside of main.

Kevin Reid
  • 37,492
  • 13
  • 80
  • 108