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);
};
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);
};
1 Answer
Reset to default 11The 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;
}