Question

我在着色器方面遇到麻烦，并且是WebGL的新手。我已经搜索了几个小时的错误，但是找不到它。我正在关注一个教程，并将我的代码与教程作者的代码进行了比较，它完全匹配，并且他的代码在演示中运行良好，但是由于某种原因无法在我的代码上运行。这是

  var vertexShaderText =
    [
    'precision mediump float;',
    '',
    'attrubte vec2 vertPosition;',
    '',
    'void main()',
    '{',
    '   gl_Position = vec4(vertPosition, 0.0, 1.0);',
    '}'
    ].join('\n');

    var fragmentShaderText =
    [
    'precision mediump float;',
    '',
    'void main()',
    '{',
    'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);',
    '}'
    ].join('\n');

    var InitDemo = function() {
        console.log('this is working');

        var canvas = document.getElementById('game-surface')
        var gl = canvas.getContext('webgl');

        if (!gl){
        console.log('WebGL not supported, falling back on experimental-webgl');
        gl = canvas.getContext('experimental-webgl');

        }
        if (!gl) {
            alert('Your browser does not support WebGL')
        }


        gl.clearColor(0.75, 0.85,0.8,1.0)
        gl.clear(gl.COLOR_BUFFER_BIT  |  gl.DEPTH_BUFFER_BIT);

        // 
        // Create shaders
        // 
        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

        gl.shaderSource(vertexShader, vertexShaderText);
        gl.shaderSource(fragmentShader, fragmentShaderText);



        gl.compileShader(vertexShader);
        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
            console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertexShader));
            return;
        }

        gl.compileShader(fragmentShader);
        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
            console.error('ERROR compiling fragment Shader!', gl.getShaderInfoLog(fragmentShader));
            return;
        }
    };

Answer 1

阅读错误消息：

错误编译顶点着色器！错误：0：3：“ attrubte”：语法错误

您的顶点着色器程序中有一个错字。关键字是attribute，而不是attrubte。

更改为

attribute vec2 vertPosition;

解决问题。

编译顶点着色器时出错！错误：0：3：“ attrubte”：语法错误

1 个答案: