WebGLシェーダ作成の問題

Question

私はWebGlとJavaScriptで簡単なアプリケーションを作成しようとしていますが、インターネット上で見つけたチュートリアルをいくつか残しながら、いくつかの基本的なシェーダを作成する際に奇妙な問題が発生しました。シェーダプログラムを作成する関数は次のようになります。

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

そして2つのシェーダは次のようになります。

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

奇妙なことが最初の頂点シェーダのコンパイルが成功していることですが、用フラグメントシェーダのための"this.gl.compileShader（tempFrag）;でクラッシュします。私は理由を理解できません。それはコンパイルしていない理由がわからない場合は、次のようにコードを変更

Answer 1

あなたのコードからのこの抜粋：

：

#ifdef GL_ES precision highp float; 
#endif 

は別の行にする必要があります

#ifdef GL_ES 
precision highp float; 
#endif 

シェーディング言語がC Preprocessorのようにプリプロセッサを使用するためです。 #で始まる行は、行全体にまたがるプリプロセッサ指令です。 precisionステートメントはそうではありません。これはGLSLの通常の文です。それらを同じ行に置くと、プリプロセッサはその命令の一部として精度ステートメントが考慮されるため、プリプロセッサを混乱させます。

ZeccのアドバイスgetShaderInfoLogの使用は、これらの種類の問題のデバッグにも非常に役立ちます。

Answer 2

：

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

これはあなたに（#ifdefの利用可能性）が間違っているかについてのより多くの情報を与えるべきである