このWebGLシェーダタイプが無効なのはなぜですか？

免責事項：私は今、WebGLを使い始めました。このWebGLシェーダタイプが無効なのはなぜですか？

「標準」2Dコンテキストの代わりにWebGLコンテキストを使用してHTML5キャンバスにいくつかの基本的なことを描こうとしています。

私はdeveloper.Mozilla.org WebGLのドキュメントを参考にしていますが、いくつかのコードをいじっています。

Iは頂点シェーダが「clipspace」座標をレンダリングするために必要であり、フラグメントシェーダがレンダリングされるピクセルの色をレンダリングするために必要であることを考え出しました。 WebGLのwikipediaページによれば、シェーダはGLSLで直接コーディングされているようです。これはCの高水準の方言です。Mozillaのドキュメントでは、これらのコードはJavaScriptでストリング化されていますが、それを行う方法はたくさんあります...

ここまではコードがありますが、私が実行しているエラーはキャンバスのWebGLコンテキストのVERTEX_SHADER列挙型とは関係ありません。コンテキストのドキュメントとプロトタイプにはそのような列挙型があることがわかりますこのエラーの原因を知るために、またはこのエラーが表示される理由を知ることができます。

コードは以下のとおりです。ありがとうございました。

<html> 
<head> 
    <title>webgl try</title> 
</head> 
<body> 
<canvas width="600" height="400" id="canvas" style="border: 1px dotted;"> </canvas> 

<script> 
    var canvas = document.getElementById("canvas"); 
    var gl = canvas.getContext("webgl"); 

    function createShader (gl, sourceCode, type) { 
     var shader = gl.createShader(type); 
     gl.shaderSource(shader, sourceCode); 
     gl.compileShader(shader); 

     if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 
     var info = gl.getShaderInfoLog(shader); 
     throw "could not compile web gl shader. \n\n" + info; 
     } 
    } 

    var vertexShaderSource = 
     "attribute vec4 position;\n" 
     "void main() {\n"+ 
     " gl_Position = position;\n"+ 
     "}\n"; 

    var fragmentShaderSource = 
     "void main() {\n"+ 
     " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n"+ 
     "}\n"; 

    /* 
    * create program 
    */ 

    var program = gl.createProgram(); 

    // ERROR COMES ON THIS LINE WHEN ATTEMPTING TO ACCESS THE VERTEX_SHADER ENUM: WebGL: 
    // **INVALID_ENUM: createShader: invalid shader type** 
    var vertexShader = gl.createShader(gl, vertexShaderSource, gl.VERTEX_SHADER); 
    var fragmentShader = gl.createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER); 

    // Attach pre-existing shaders 
    gl.attachShader(program, vertexShader); 
    gl.attachShader(program, fragmentShader); 

    gl.linkProgram(program); 

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { 
     var info = gl.getProgramInfoLog(program); 
     throw "Could not compile WebGL program. \n\n" + info; 
    } 
</script> 
</body> 
</html>

出典

2016-06-14 pward

コードに意味エラーが含まれています。

あなたはWebGLのコンテキストの方法の上ではなくcreateShader関数を呼び出しているので、それは

var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER); 
var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);

でなければなりません。

あなたcreateShaderは、それが作成されたシェーダを返す必要があります：

function createShader (gl, sourceCode, type) { 
    var shader = gl.createShader(type); 
    gl.shaderSource(shader, sourceCode); 
    gl.compileShader(shader); 

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 
     var info = gl.getShaderInfoLog(shader); 
     throw "could not compile web gl shader. \n\n" + info; 
    } 

    return shader; 
}

ます。またvertexShaderSrcで+を逃しました。

出典

2016-06-14 16:11:21

ありがとうございます！私は意味が分からないように思えます。なぜなら、何かをコーディングするのではなく、パズルの部分をまとめて入れているように感じるからです。私は一般に、他人のコードを調べるのは好きではありません。 – pward

このWebGLシェーダタイプが無効なのはなぜですか？

答えて

関連する問題