爲什麼這個WebGL着色器類型無效？

我試圖在HTML5畫布上使用WebGL上下文代替「標準」2d上下文來繪製一些基本的東西。

我正在使用developer.Mozilla.org WebGL文檔作爲參考，並開始搞亂一些代碼。

我已經想通了，一個頂點着色器爲需要使「clipspace」座標和片段着色器是必要的渲染顏色渲染像素。根據WebGL維基百科頁面，似乎着色器直接在GLSL中編碼，這是C的高級方言。在Mozilla文檔中，這些代碼在JavaScript中被串化，但有很多方法可以做到這一點...

這是我到目前爲止的代碼，但我遇到的錯誤必須與VERTEX_SHADER畫布的枚舉'WebGL上下文無法識別，並且看到上下文的文檔和原型有這樣一個枚舉，我想要知道是什麼導致了這個錯誤或爲什麼我看到這個錯誤。

代碼如下，並感謝您的任何幫助。

<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

您的代碼包含語義錯誤。

應該

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

因爲您呼叫上面，而不是createShader功能的WebGL上下文的方法。

你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

謝謝！在使用API時，我似乎在語義上搞亂了，我不知道爲什麼。我認爲這是因爲我覺得我只是拼湊一些拼圖，而不是編碼，而我通常不喜歡檢查其他人的代碼。 – pward

爲什麼這個WebGL着色器類型無效？

回答

相關問題