Shaders

Shaders
1

Hallelujah! 1.5 is out! But now I’m stuck in the whirling cloud of confusion and inner turmoil, I want to get straight into coding with shaders, tweening, and parameters, but… I have no clue how. The tweening and parameter libraries are fabulous and easy to use, I just need to learn their syntax, but shaders…
I am experimenting with making a super simple shader, a shader to convert an image into grayscale. I am only messing with fragment shaders for now. But my code seemed to be doing what I wanted till I added in division of floats.


//
// A basic fragment shader
//

//Default precision qualifier
precision highp float;

//This represents the current texture on the mesh
uniform lowp sampler2D texture;

//The interpolated vertex color for this fragment
varying lowp vec4 vColor;

//The interpolated texture coordinate for this fragment
varying highp vec2 vTexCoord;

void main()
{
    //Sample the texture at the interpolated coordinate
    lowp vec4 col = texture2D( texture, vTexCoord );
    lowp float a = (col.r + col.g + col.b);
    //a /= 3.0;
    //Set the output color to the texture color
    gl_FragColor = vec4(a, a, a, col.a);
}

Uncomment the //a/=3.0; and it stops working. I have no clue why or how. So I want to make a few requests…

  1. An output window for shader lab, so I can see variables.
  2. Window gestures for shader lab (swiping left-right to move the cursor, + 2 fingers for up-down).
  3. Someone please post a link to a decent and simple GLSL tutorial.

Thanks, and good job on the AMAZING update! You guys are fantastic!

2

.@Jordan good suggestions. And thank you for your comments.

I think your shader is not working right due to the use of lowp float a — try making it a mediump or highp float.

As you have experienced, shader code is pretty technical compared to Lua. The precision qualifiers can be used to optimise rendering speed (lowp is fastest).

The issue with lowp float a is that lowp float values have a very small range (0.0 to 1.0 I think). So you are overflowing it by adding all the colour values together and need a higher precision variable to store them before doing the division.

I’d suggest sticking with highp variables (which is the default) until you are more comfortable with GLSL.

3

Thanks so much @Simeon! It is working like a charm!