ERROR compiling vertex shader! ERROR: 0:3: 'attrubte' : syntax error

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

阅读错误信息：

ERROR compiling vertex shader! ERROR: 0:3: 'attrubte' : syntax error

您的顶点着色器程序中存在拼写错误。关键字是 attribute 而不是 attrubte.

改为

attribute vec2 vertPosition;

解决问题。

ERROR compiling vertex shader! ERROR: 0:3: 'attrubte' : syntax error

ERROR compiling vertex shader! ERROR: 0:3: 'attrubte' : syntax error

javascript

glsl

webgl