WebGL problema creazione di shader

Question

Sto cercando di fare una semplice applicazione in WebGL e JavaScript, e mentre il fermo alcuni tutorial che ho trovato su internet, mi sono imbattuto in uno strano problema durante la creazione di alcuni shaders di base. La funzione che crea l'aspetto del programma di shader in questo modo:

 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;
  }

e il 2 shaders assomigliano:

  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);  };

La cosa strana è che il primo vertice Shader compilato correttamente, ma per per lo shader frammento si blocca sul "this.gl.compileShader (tempFrag);" la linea e non riesco a capire perché.

Answer 1

Questo frammento dal codice:

#ifdef GL_ES  precision highp float;
#endif

Dovrebbe essere su righe separate:

#ifdef GL_ES
precision highp float;
#endif

Questo perché il linguaggio di shading utilizza un preprocessore, molto simile al C preprocessore . righe iniziali con # sono direttive preprocessore, che si estendono su tutta la linea. Considerando che la dichiarazione precision non lo è; si tratta solo di una dichiarazione normale in GLSL. Metterli sulla stessa linea confonde il preprocessore, perché considera la dichiarazione di precisione come parte della sua direttiva.

I consigli di Zecc all'uso getShaderInfoLog è anche prezioso per il debug di questi tipi di problemi.

Answer 2

Se non si conosce il motivo per cui non è la compilazione, quindi modificare il codice in questo modo:

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

Questo dovrebbe dare maggiori informazioni su ciò che è sbagliato (forse l'uso di #ifdef)