WebGL problème de création de shaders

Question

Je suis en train de faire une application simple WebGL et JavaScript, et quelques tutoriels tout je vide sanitaire trouvé sur Internet, je suis tombé sur un problème étrange, tout en créant des shaders de base. La fonction qui crée l'apparence du programme de shaders comme ceci:

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

Et les 2 shaders ressemblent:

  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 chose étrange est que le premier Vertex Shader compile avec succès, mais pour le fragment shader il se bloque sur le « this.gl.compileShader (tempFrag); » ligne et je ne peux pas comprendre pourquoi.

Answer 1

Cet extrait de votre code:

#ifdef GL_ES  precision highp float;
#endif

doit être sur des lignes distinctes:

#ifdef GL_ES
precision highp float;
#endif

En effet, le langage d'ombrage utilise un préprocesseur, un peu comme le C préprocesseur . les lignes commençant par # sont les directives du préprocesseur, qui couvrent toute la ligne. Considérant que la déclaration de precision n'est pas; il est juste une déclaration normale en GLSL. de les mettre sur la même ligne confond le préprocesseur, car elle considère la déclaration de précision dans le cadre de sa directive.

conseils de Zecc à l'utilisation getShaderInfoLog est également une valeur inestimable pour le débogage de ce genre de problèmes.

Answer 2

Si vous ne savez pas pourquoi il ne compiler, puis changer votre code comme ceci:

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

Cela devrait vous donner plus d'informations sur ce qui ne va pas (peut-être l'utilisation de #ifdef)