OpenGL ES 2.0 Shader best practices

I've been searching for examples of shaders in OpenGL and I've seen some varying styles. Some shaders specifically use the built in types (ie. gl_Vertex) to transfer data to and from the application code and the shader.

Some shaders use the varying types to transfer data from vertex to fragment shader instead of gl_Position and gl_FragColor.

Some shaders use the prefixes 'in' and 'out' to specify data transfer:

in vec3 vertex;

void main() {
    gl_Position = projection_matrix * modelview_matrix * vec4(vertex, 1.0);
}

... while others use attributes:

attribute vec4 vertex_attrib;
attribute vec4 tex_coord_attrib;
attribute vec4 color_attrib;
uniform mat4 mvp_matrix;
uniform mat4 texture_matrix;
varying vec4 frag_color;
varying vec2 tex_coord;

void main(void)
{
  gl_Position = mvp_matrix * vertex_attrib;
  vec4 transformed_tex_coord = texture_matrix * tex_coord_attrib;
  tex_coord = transformed_tex_coord.st / transformed_tex_coord.q;
  frag_color = color_attrib;
}

My question is, what is the preferred way in GLES 2.0 to write shaders? Is there a best practices guide? Can someone provide an example of a vertex & fragment shader that is a shining example of 'what to do'??

Thanks.

1. There is no gl_Vertex in "ES 2.0". All attributes provided by you are custom.
2. gl_Position is not an option in ES 2 but a requirement. Learn about OpenGL pipeline to understand why. Hint: it could be optional only when rasterizer is disabled (Transform Feedback, for example) but this is not supported in ES.
3. In ES 2.0 vertex attributes have to have 'attribute' value and varyings have to be declared as 'varying'. Using 'in' and 'out' instead is a habit developed under OpenGL 3+ and can not be applied to ES.

Finally, the best option for you would be to read OpenGL ES 2.0 Specification as suggested by Nicol Bolas. Rules first, best practices - later. Good luck!

Your biggest problem is that you're looking at desktop GLSL shaders and trying to figure out what that means for GLSL-ES.

Just as OpenGL ES is not the same thing as OpenGL, GLSL-ES is not the same thing as GLSL. GLSL has progressed rather far in the many years since GLSL-ES split off. Therefore, you cannot use desktop GLSL shaders as anything more than a rough guide for implementing GLSL-ES shaders. Any more than you could use C++ texts as a guide for C.

The languages are quite similar, but desktop GLSL had to abandon a lot of keywords that GLSL-ES has not ditched yet. Similarly, old-school GLSL (1.20) implemented a lot of things that GLSL-ES and later versions of GLSL removed, like built-in inputs and outputs. So you will see a lot of desktop GLSL shaders that will flat-out not work on GLSL-ES. Indeed, if you find some that do, it will only be by sheer accident.

I don't know much about guides to GLSL-ES, but the easiest to find and use is the ultimate source: The OpenGL ES Shading Language Specification (PDF). Extensions can pile on functionality, but that PDF defines the core language. Your next bet would be any material explicitly marked as OpenGL ES 2.0 specific.

Basically, while you can understand what a desktop GLSL shader is doing, it is best to look at the algorithm and not the syntax if you're writing an OpenGL ES 2.0 application.

There is sample code for OpenGL ES 2.0 in the Android Developer OpenGL ES 2.0 tutorials and also in the sdk sample code. But you will still need the very same reference file people keep on mentioning: The OpenGL ES Shading Language Specification" to understand that sample code, since Google does not often explain what they are doing. And when they do, they don't always stick to standard OpenGL terminology.

That said, you may find it easier to refer to the OpenGL ES 2.0 Reference pages at http://www.khronos.org/opengles/sdk/docs/man/ while reading code.

From what I understand, you should be able to compile GLSL to SPIR-V, then decompile it to GLSL ES to get a working shader again.