Почему этот шейдер WebGL недействителен?

Отказ от ответственности: Я только начал использовать WebGL сегодня.Почему этот шейдер WebGL недействителен?

Я пытаюсь нарисовать некоторые основные вещи на холсте HTML5 с использованием контекста WebGL вместо «стандартного» контекста 2d.

Я использую документацию developer.Mozilla.org WebGL в качестве справочной информации и начал возиться с некоторым кодом.

я понял, что вершинный шейдер необходимо для рендеринга «clipspace» координаты и фрагмента шейдер необходимо для рендеринга цвета для пикселей визуализируемого. На странице wikipedia WebGL кажется, что шейдеры закодированы непосредственно в GLSL, что является диалектом высокого уровня C. В документации Mozilla этот код стробируется на JavaScript, но есть много способов сделать это ...

Вот код, который у меня есть до сих пор, но ошибка, с которой я столкнулся, связана с перечислением VERTEX_SHADER enum of canvas. Контекст 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 недействителен?

ответ

Смежные вопросы