WebGLのモデルレンダリングなしの色

Question

私は異なるシェーダで異なるモデルを描画できるように、WebGL関数を抽象化するjavascriptプログラムを作成しようとしています。 Shaderオブジェクトを作成しました.Shaderオブジェクトは、最終的にシェーダープログラムを引数として使用するように変更します。モデルオブジェクトも作成します。私が抱えている問題は、私のモデルが現在スクリーン上に描画されていますが、目的のフォンシェイダーを適用するのではなく、黒く表示されていることです。エラーがjavascriptやシェーダープログラムにあるかどうかはわかりません。私は、完全に黒く描かれているオブジェクトが特定の問題であるのか、それとも数多くの異なるものであるのかを把握しようとしています。どんな助けもありがとうございます。この質問があまりにも曖昧であれば申し訳ありません。

これは私のShaderオブジェクトである：

function Shader(){ 
    this.program = createProgram(gl, document.getElementById('vertexShader').text, 
           document.getElementById('fragmentShader').text); 


    this.vertexPositionLocation = gl.getUniformLocation(this.program, 'vertexPosition'); 
    this.vertexNormalLocation = gl.getUniformLocation(this.program, 'vertexNormal') 

    gl.enableVertexAttribArray(this.vertexNormalLocation); 
    gl.enableVertexAttribArray(this.vertexNormalLocation); 

    this.projectionMatrixLocation = gl.getUniformLocation(this.program, 'projectionMatrix'); 
    this.viewMatrixLocation = gl.getUniformLocation(this.program, 'viewMatrix'); 
    this.modelMatrixLocation = gl.getUniformLocation(this.program, 'modelMatrix'); 

    this.lightPositionLocation = gl.getUniformLocation(this.program, 'lightPosition'); 

    this.lightColorLocation = gl.getUniformLocation(this.program, 'lightColor'); 
    this.modelColorLocation = gl.getUniformLocation(this.program, 'modelColor'); 



    gl.useProgram(this.program); 

}

これは私のモデルオブジェクトである：

function Model(model){ 
    this.positionArray = new Float32Array(flatten(model.positions)); 
    this.normalArray = new Float32Array(flatten(model.normals)); 
    this.triangleArray = new Uint16Array(flatten(model.triangles)); 

    //initialize buffer objects 

    this.normalBuffer = gl.createBuffer(); 
    this.positionBuffer = gl.createBuffer(); 
    this.triangleBuffer = gl.createBuffer(); 

    gl.bindBuffer(gl.ARRAY_BUFFER, this.normalBuffer); 
    gl.bufferData(gl.ARRAY_BUFFER, this.normalArray, gl.STATIC_DRAW); 

    gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer); 
    gl.bufferData(gl.ARRAY_BUFFER, this.positionArray, gl.STATIC_DRAW); 

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.triangleBuffer); 
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.triangleArray, gl.STATIC_DRAW); 


    gl.enable(gl.DEPTH_TEST); 

    Model.draw = function(shader){ 

     var modelMatrix = new Matrix4(); 
     var viewMatrix = new Matrix4(); 
     var projectionMatrix = new Matrix4(); 

     modelMatrix.rotate(modelRotationX, 1, 0, 0); 
     modelMatrix.rotate(modelRotationY, 0, 1, 0); 
     viewMatrix.translate(0, 0, -3); 

     projectionMatrix.perspective(90, 1, 1, 10); 

     gl.uniform3f(shader.lightColorLocation, 1.0, 1.0, 1.0); 
     gl.uniform4f(shader.lightPositionLocation, 0.0, 8.0, 8.0, 1.0);  
     gl.uniform3f(shader.modelColorLocation, 0.6, 0.0, 0.0); 


     gl.uniformMatrix4fv(shader.modelMatrixLocation, false, modelMatrix.elements); 
     gl.uniformMatrix4fv(shader.viewMatrixLocation, false, viewMatrix.elements); 
     gl.uniformMatrix4fv(shader.projectionMatrixLocation, false, projectionMatrix.elements); 

     gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer); 
     gl.vertexAttribPointer(shader.vertexNormalLocation, 3, gl.FLOAT, false, 0, 0); 

     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 
     gl.vertexAttribPointer(shader.vertexPositionLocation, 3, gl.FLOAT, false, 0, 0); 


     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleBuffer); 
     gl.drawElements(gl.TRIANGLES, triangleArray.length, gl.UNSIGNED_SHORT, 0); 

} 

}

ここに私のフラグメントシェーダプログラムがあります：

<script id = "fragmentShader" type="x-shader/x-fragment"> 
     precision mediump float; 

     varying vec3 fragmentNormal; 
     varying vec3 fragmentLight; 
     varying vec3 fragmentView; 

     uniform vec3 modelColor; 
     uniform vec3 lightColor; 


     void main() { 

      vec3 n = normalize(fragmentNormal); 
      vec3 l = normalize(fragmentLight); 
      vec3 v = normalize(fragmentView); 
      vec3 h = normalize(l + v); 

      float d = max(dot(l, n), 0.0); 
      float s = pow(max(dot(h, n), 0.0), 10.0); 

      vec3 fragmentColor = modelColor * lightColor * d + lightColor * s; 

      gl_FragColor = vec4(fragmentColor, 1.0); 
     } 
    </script> 

Answer 1

モデルのシルエットは見えますが、それは黒ですか？私がやるだろう

まず最初は、フラグメントシェーダの下で

gl_FragColor = vec4(1,0,0,1); 

を追加することです。あなたのモデルは緑色に変わりますか？いいえ？その後、あなたはそのシェーダを使用していません。

othewise次の私は

gl_FragColor = vec4(lightColor,1); 

モデルは光の色を回すん試してみましたか？あなたは間違って光の色を設定しているなし、その後場合

次

gl_FragColor = vec4(modelColor,1); 

モデルはモデルの色をオンにしていますか？いいえ、あなたがモデルの色を間違って設定している場合。

次の私は、あなたが色としてあなたのモデルの法線が表示されるはずです

gl_FragColor = vec4(n * .5 + .5,1); 

を試してみました。それは黒いので、fragmentNormalが間違っています。

そうでない場合は、lと同じことをしてみてくださいv、およびh等...