A Little Help Debugging CSS Shaders

Anyone playing around with CSS Shaders has probably discovered very quickly how difficult it is to debug your shader.  There are no debuggers, no breakpoints, not even a simple console.log.  Fortunately, I’ve found a few simple things you can do to prevent you from ripping your hair out.

First off, you need to start with something that works, either  a copy of the default shader as referenced in the spec draft, or use an example that you know works, and then slowly bend it to your will.

Let’s say for example you want to write a custom vertex shader.  You could start with one of the demos on github.  Or, for purposes of illustration, let’s use the shader currently outlined in the spec draft:

attribute vec4 a_position;
attribute vec2 a_texCoord;

uniform mat4 u_projectionMatrix;

varying vec2 v_texCoord;

void main()
    v_texCoord = a_texCoord;
    gl_Position = u_projectionMatrix * a_position;

Before you do anything, confirm that everything works ok.  Setup your html to point to your shader (which should do nothing) and open up your page in the WebKit prototype browser that supports CSS shaders.  Everything should look normal.  I’ve noticed if I have a typo in my shader that would cause a compiler error, the rendered image often gets color shifted.  That’s a definite clue that something’s wrong.

Now, I know this is tedious, but add code slowly and confirm that it still works after each change.

Of course, once you know something’s wrong, knowing exactly what is wrong is another story.

It was recently pointed out to me (after much coding in the dark) is that if you open the prototype WebKit browser directly from the command line, all compile errors will be directed to the console.  Woohoo!

On a MacOS, that means bring up a terminal, navigate to where you have the prototype downloaded, and cd to Chromium.app/Contents/MacOS and open Chromium.

> cd Chromium.app/Contents/MacOS
> open Chromium

Pretty simple, but oh boy, it’s like the lights just got turned on.

I took the shader outlined above, and changed ‘vec2’ to ‘vec5’, reloaded my page, and got the following error:

Shader compiler error: ERROR: 0:6: 'vec5' : syntax error

That tells me there was a problem with ‘vec5’ on line 6 of my script.  Excellent.

I realize this is setting the bar very low, but hey, it’s a start.

Tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *