I am following a tutorial in the basics of WebGL. I have written the code to produce a basic triangle with the console warnings-
webGL warning: enableVertexAttribArray: -1 is not a valid `index`. This value probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program.
WebGL warning: vertexAttribI?Pointer: `index` (4294967295) must be < MAX_VERTEX_ATTRIBS.
I am new to development and my question is; why I can only see my html tag when loading with wsl on local server? I have used Node.js and Express.js packages. I am using VScode & Mozilla Firefox.
Here is the code of the main.js file;
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
throw new Error("webgl not supported");
}
alert(`Everything is working`);
const vertexData = [0, 1, 0, 1, -1, 0, -1, -1, 0];
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
// VERTEX SHADER
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(
vertexShader,
`
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1);
}
`
);
gl.compileShader(vertexShader);
// FRAGMENT SHADER
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(
fragmentShader,
`
void main (){
gl_FragColor= vec4(1, 0, 0, 1);
}
`
);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const positionLocation = gl.getAttribLocation(
program,
`
position`
);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);
html file;
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="main.js" defer></script>
<title>Document</title>
</head>
<body>
<h1>hello webGL!!</h1>
<canvas></canvas>
</body>
<!-- async run the script but runin particular order of run
advantage you dont have to use DOM contect in js file -->
</html>
