Convert WebGL fragment shader to GLES

Question

I am a beginner in OpenGL, trying to run some tests. There are plenty of fragment shaders available at GLSL Sandbox Gallexy, and I would like to try them in GLES, reusing the code. But, for most of the shaders, it does not seem to work.

Among the shaders I tried to run, the only one that worked in GLES is this one, for some reason. And I had to eliminate the time dependence of the shader, in order to accomplish that.

It seems that some variable names are different in WebGL and GLES. If that's the case, which ones, exactly? If not, what exactly is the procedure of translation from the former to the later?

One example of simple fragment shader that gives a black screen only. In my particular case, I am running it along this minimal vertex shader:

precision mediump float;

uniform mat4 uMVPMatrix;

attribute vec4 aPosition;
attribute vec2 aTextureCoord;

varying vec2 vTextureCoord;

void main() {
    vTextureCoord = aTextureCoord;
    gl_Position = uMVPMatrix * aPosition;
}

There is not much unique to WebGL's implementation of GLSL vs. OpenGL ES 2.0 #version 100, it is generally just a stricter version of ESSL. The one exception would be shaders that use webgl_ constructs, but this is just a reserved namespace with no actual use at the moment. The compiler has stricter requirements, and in fact most browsers use the ANGLE project's GLSL validator to produce consistent results across multiple platforms. However, there should be no need to translate shaders; this assumes you are discussing OpenGL ES 2.0 (it is not clear by your tags if you mean 2.0 or 3.0). — Andon M. Coleman
Yes, I am using OpenGL ES 2.0. More specifically, in an android application. So can I safely assume that, if the shader is not working, it is likely not a problem of the shader per se? It's still odd that some shaders work, and others don't. None of the shaders I tried had any webgl_ construct. — bluewhale
This is correct, WebGL only compiles shaders that comply with OpenGL ES 2.0's GLSL #version 100 plus some additional WebGL-only restrictions. Porting from ES 2.0 to WebGL may require additional work, but because ES 2.0 is less restrictive the other way around should not be a problem. I might be able to offer some more insight if you pointed out some actual shaders that do not work and what you tried. — Andon M. Coleman
I have included an example in the description of the question. The framework I'm currently using, named Rajawali, requires the specification of a vertex shader, along the fragment shader, and the one I'm using is that minimal one. — bluewhale

rickster rickster · Accepted Answer · 2013-10-28T23:02:37

This issue isn't a difference between WebGL and OpenGL ES, it's a difference between the shader programming environment provided by sites like the GLSL Sandbox Gallery and Shadertoy and the corresponding environment (or lack thereof) on the OpenGL ES platform of your choice.

The various WebGL fragment shader sandboxes you see on the web provide inputs to your shader code via uniform variables. When you develop your own OpenGL ES app on another platform, you'll need to provide those inputs yourself.

The sandbox site you linked to provides the time, mouse, resolution and backbuffer uniforms in its JavaScript code by calculating the appropriate values itself and passing them to gl.uniform1f or similar functions (after first compiling the shaders and then looking up the numeric location for each uniform name in the compiled program). On another platform, you'll need to do the same using the OpenGL ES bindings that platform provides.

Convert WebGL fragment shader to GLES

1 Answers