WebGL shader creation problem

Question

I am trying to make a simple application in WebGl and JavaScript, and while fallowing some tutorials I found on the internet, I came across a strange problem while creating some basic shaders. The function which creates the shader program looks like this :

 this.CreateShaderProgram = function(vertexShader, fragmentShader)
  {
    var tmp = this.gl.createProgram();

    var tempVert = this.gl.createShader(this.gl.VERTEX_SHADER);     
    this.gl.shaderSource(tempVert, vertexShader);
    this.gl.compileShader(tempVert);
    if(!this.gl.getShaderParameter(tempVert, this.gl.COMPILE_STATUS)) {
          this.Log("invalid shader : " + vertexShader);
          return null;
    };

    var tempFrag = this.gl.createShader(this.gl.FRAGMENT_SHADER); 
    this.gl.shaderSource(tempFrag, fragmentShader);
    this.gl.compileShader(tempFrag);    
    if(!this.gl.getShaderParameter(tempFrag, this.gl.COMPILE_STATUS)) {
          this.Log("invalid shader : " + fragmentShader);
          return null;
    };

    this.gl.attachShader(tmp, tempVert);
    this.gl.attachShader(tmp, tempFrag);

    return tmp;
  }

And the 2 shaders look like :

  attribute vec3 aVertexPosition;
  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;
  void main(void) {
         gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
  }
  --------------------------------------------  

  #ifdef GL_ES  precision highp float;
  #endif
  void main(void) { 
  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);  };

The strange thing is that the first Vertex Shader compiles successfully, but for for the fragment shader it crashes on the "this.gl.compileShader(tempFrag);" line and I can't figure out why.

Stéphan Kochen · Accepted Answer · 2010-11-28 14:24:50Z

4

This snippet from your code:

#ifdef GL_ES  precision highp float;
#endif

Should be on separate lines:

#ifdef GL_ES
precision highp float;
#endif

This is because the shading language uses a preprocessor, much like the C Preprocessor. lines that start with # are preprocessor directives, that span the entire line. Whereas the precision statement is not; it is just a normal statement in GLSL. Putting them on the same line confuses the preprocessor, because it considers the precision statement as part of its directive.

Zecc's advice to use getShaderInfoLog is also invaluable for debugging these kinds of problems.

edited Nov 28, 2010 at 14:24

answered Nov 28, 2010 at 14:16

Stéphan Kochen

20k9 gold badges63 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Colin Dumitru Over a year ago

Yes... such a beginner mistake. I wrote the whole shader in a single string for now to get it to work faster, but I forgot to include \n where it should have been.

Zecc · Accepted Answer · 2010-11-28 14:08:02Z

4

If you don't know why it's not compiling, then change your code like this:

this.gl.compileShader(tempFrag);    
if(!this.gl.getShaderParameter(tempFrag, this.gl.COMPILE_STATUS)) {
      this.Log("invalid shader : " + this.gl.getShaderInfoLog(tempFrag));
      return null;
};

This should give you more information on what is wrong (possibly the use of #ifdef)

answered Nov 28, 2010 at 14:08

Zecc

4,35023 silver badges17 bronze badges

Collectives™ on Stack Overflow

WebGL shader creation problem

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related