How can I fix this attribute error in WebGL?

Question

I'm following a demo from a class I'm doing, and I keep getting an error in the code below:

<html>
    <head>

        <script id="vertex-shader" type="x-shader/x-vertex">
            # version 300 es

            attribute vec4 vPosition;

            void main()
            {
              gl_Position = vPosition;
            }
            </script>

            <script id="fragment-shader" type="x-shader/x-fragment">
            # version 300 es

            precision mediump float;

            uniform vec4 fColor;

            void main()
            {
                gl_fragColor = fColor;
            }
        </script>

    <script type="text/javascript" src="initShaders.js"></script>
    <script type="text/javascript" src="triangle.js"></script>

    </head>
    <body data-new-gr-c-s-check-loaded="14.998.0" data-gr-ext-installed=""><canvas id="gl-canvas" width="512" height="512"> 
        <canvas id="gl-canvas" width="512" height="512"> </canvas>
    </body>
    
</html>

The problem here is that I keep getting "'attribute': illegal use of reserved word" in line 7. I already looked up for similar problems in stackoverflow and couldn't find a solution for this particular issue. I've tried using other versions of WebGL but it didn't work. The initShaders is a helper library used by the author of the book I'm using for the class, Interactive Computer Graphics by Edward Angel and works for other examples. The triangle.js script is the following:


"use strict";

var gl;
var points;

window.onload = function init()
{
    var canvas = document.getElementById( "gl-canvas" );

    gl = canvas.getContext('webgl2');
    
    
    if (!gl) { alert( "WebGL 2.0 isn't available" ); }

    //
    //  Initialize our data for a single triangle
    //

    // First, initialize the  three points.

    // vertices = new Float32Array([
    //    -1, -1 ,
    //       0,  1 ,
    //       1, -1
    //     ]);
    
    
    var vertices = [(1,-1,0),
                    (-0.5, 1, 0),
                    (0, -1, 0),
                    (0,-1,0),
                    (0.5, 1, 0),
                    (1,-1,0)];
    //
    //  Configure WebGL
    //
    gl.viewport( 0, 0, canvas.width, canvas.height);
    gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

    //  Load shaders and initialize attribute buffers

    var program = initShaders( gl, "vertex-shader", "fragment-shader" );
    gl.useProgram( program );

    // Load the data into the GPU

    var bufferId = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

    // Associate out shader variables with our data buffer

    var vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );
    var fColor = gl.getUniformLocation(program, "fColor");
    gl.clear(gl.COLOR_BUGGER_BIT);
    gl.uniform4f(fColor, 0.0, 1.0, 0.0, 1.0);
    gl.drawArrays(gl.TRIANGLES, 0,3);
    gl.uniform4f(fColor, 0.0, 0.0, 1.0, 1.0);
    gl.drawArrays(gl.TRIANGLES, 3,3);
    
  
};

Rabbid76 · Accepted Answer · 2021-03-21T14:58:41.653

7

The keywords attribute and varying are deprecated in GLSL ES 3.00. Compare OpenGL ES Shading Language 1.00 Specification and OpenGL ES Shading Language 3.00 Specification. Use in and out instead of attribute and varying:

#version 300 es

in vec4 vPosition;

void main()
{
    gl_Position = vPosition;
}

gl_FragColor (case sensitive not gl_fragColor) is also obsolete. Instead, you need to declare an out variable::

#version 300 es

precision mediump float;

uniform vec4 fColor;
out vec4 fragColor;

void main()
{
    fragColor = fColor;
}

edited Mar 21 '21 at 14:58

answered Mar 21 '21 at 14:51

Rabbid76

202,892
27
131
174

1

Thanks! Worked like a charm :) The demo code was outdated and I still had to fix a couple of things, but this step in my question worked just like you said. – hrmello Mar 21 '21 at 16:02

How can I fix this attribute error in WebGL?

1 Answers1

Linked